---
id: seed:patterns/cookie-consent
title: Cookie consent patterns
source_type: seed_pattern
priority: warm
---

Cookie consent is a legal requirement that also serves as a trust signal when done well. It should inform without annoying. Four working variations:

---

**Bottom banner with preferences.** Full banner with Accept/Reject/Manage options and link to preferences.

*Animation & Visual Details:*
- *Entrance*: Banner slides up from bottom (translateY 100%)
- *Dismiss*: Banner slides down and fades out
- *Gradients*: Accept button has gradient background
- *Radial circles*: Manage preferences has radial hover ring
- *Scroll trigger*: Not applicable (page load)
- *JS interaction*: Accept/Reject/Manage buttons; localStorage dismiss; preferences modal

```html
<section data-amb-section="cookie" class="cookie-banner" id="cookie-banner" aria-hidden="false">
  <div class="cookie-content">
    <div class="cookie-text">
      <h2 class="cookie-title">We use cookies</h2>
      <p class="cookie-desc">We use cookies to enhance your browsing experience, serve personalized content, and analyze our traffic. By clicking "Accept all", you consent to our use of cookies.</p>
    </div>
    <div class="cookie-actions">
      <button class="cookie-btn cookie-btn--accept" id="cookie-accept">Accept all</button>
      <button class="cookie-btn cookie-btn--reject" id="cookie-reject">Reject all</button>
      <button class="cookie-btn cookie-btn--manage" id="cookie-manage">Manage preferences</button>
    </div>
  </div>
</section>

<div class="cookie-modal" id="cookie-modal" aria-hidden="true">
  <div class="cookie-modal-backdrop"></div>
  <div class="cookie-modal-content">
    <h2 class="cookie-modal-title">Cookie preferences</h2>
    <p class="cookie-modal-desc">Customize your cookie settings below.</p>

    <div class="cookie-category">
      <div class="cookie-category-header">
        <h3 class="cookie-category-title">Strictly necessary</h3>
        <span class="cookie-category-badge">Always active</span>
      </div>
      <p class="cookie-category-desc">These cookies are essential for the website to function properly. They enable core functionality like security, network management, and accessibility.</p>
      <label class="cookie-toggle cookie-toggle--disabled">
        <input type="checkbox" checked disabled />
        <span class="cookie-toggle-slider"></span>
      </label>
    </div>

    <div class="cookie-category">
      <div class="cookie-category-header">
        <h3 class="cookie-category-title">Analytics</h3>
        <label class="cookie-toggle">
          <input type="checkbox" id="cookie-analytics" />
          <span class="cookie-toggle-slider"></span>
        </label>
      </div>
      <p class="cookie-category-desc">These cookies help us understand how visitors interact with our website by collecting and reporting information anonymously.</p>
    </div>

    <div class="cookie-category">
      <div class="cookie-category-header">
        <h3 class="cookie-category-title">Marketing</h3>
        <label class="cookie-toggle">
          <input type="checkbox" id="cookie-marketing" />
          <span class="cookie-toggle-slider"></span>
        </label>
      </div>
      <p class="cookie-category-desc">These cookies are used to track visitors across websites to display relevant advertisements based on their browsing behavior.</p>
    </div>

    <div class="cookie-category">
      <div class="cookie-category-header">
        <h3 class="cookie-category-title">Functional</h3>
        <label class="cookie-toggle">
          <input type="checkbox" id="cookie-functional" />
          <span class="cookie-toggle-slider"></span>
        </label>
      </div>
      <p class="cookie-category-desc">These cookies enable enhanced functionality like personalized content and remembering user preferences.</p>
    </div>

    <div class="cookie-modal-actions">
      <button class="cookie-btn cookie-btn--accept" id="cookie-save">Save preferences</button>
    </div>
  </div>
</div>
```

```css
:root {
  --cookie-enter-duration: 0.4s;
}

.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -4px 24px rgba(0,0,0,0.08);
  opacity: 0;
  transform: translateY(100%);
  animation: cookie-enter var(--cookie-enter-duration) ease-out 1s forwards;
}

@keyframes cookie-enter {
  to { opacity: 1; transform: translateY(0); }
}

.cookie-banner[aria-hidden="true"] {
  animation: cookie-exit 0.3s ease-out forwards;
}

@keyframes cookie-exit {
  to { opacity: 0; transform: translateY(100%); }
}

.cookie-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 24px;
}

@media (max-width: 768px) {
  .cookie-content {
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
  }
}

.cookie-text {
  flex: 1;
}

.cookie-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text, #1e293b);
  margin: 0 0 4px;
}

.cookie-desc {
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
  margin: 0;
  max-width: 600px;
}

.cookie-actions {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  flex-wrap: wrap;
}

.cookie-btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cookie-btn--accept {
  background: linear-gradient(135deg, var(--color-accent, #6366f1), #7c3aed);
  color: #fff;
  border: none;
}

.cookie-btn--accept:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(99,102,241,0.3);
}

.cookie-btn--reject {
  background: #fff;
  color: var(--color-text, #1e293b);
  border: 1px solid #e2e8f0;
}

.cookie-btn--reject:hover {
  border-color: var(--color-text-muted, #64748b);
}

.cookie-btn--manage {
  background: none;
  color: var(--color-text-muted, #64748b);
  border: none;
  position: relative;
}

.cookie-btn--manage::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 8px;
  background: radial-gradient(circle, rgba(99,102,241,0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cookie-btn--manage:hover {
  color: var(--color-accent, #6366f1);
}

.cookie-btn--manage:hover::before {
  opacity: 1;
}

.cookie-modal {
  position: fixed;
  inset: 0;
  z-index: 1001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.cookie-modal.is-open {
  opacity: 1;
  visibility: visible;
}

.cookie-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  backdrop-filter: blur(4px);
}

.cookie-modal-content {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 20px;
  padding: 32px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

.cookie-modal.is-open .cookie-modal-content {
  transform: scale(1);
}

.cookie-modal-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text, #1e293b);
  margin: 0 0 8px;
}

.cookie-modal-desc {
  font-size: 0.95rem;
  color: var(--color-text-muted, #64748b);
  margin: 0 0 24px;
}

.cookie-category {
  padding: 20px 0;
  border-bottom: 1px solid #f1f5f9;
}

.cookie-category:last-of-type {
  border-bottom: none;
}

.cookie-category-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.cookie-category-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text, #1e293b);
  margin: 0;
}

.cookie-category-badge {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--color-text-muted, #64748b);
  padding: 4px 8px;
  background: #f1f5f9;
  border-radius: 8px;
}

.cookie-category-desc {
  font-size: 0.85rem;
  color: var(--color-text-muted, #64748b);
  line-height: 1.5;
  margin: 0 0 12px;
}

.cookie-toggle {
  position: relative;
  width: 44px;
  height: 24px;
}

.cookie-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}

.cookie-toggle-slider {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #e2e8f0;
  border-radius: 24px;
  transition: background 0.2s ease;
}

.cookie-toggle-slider::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  bottom: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s ease;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.cookie-toggle input:checked + .cookie-toggle-slider {
  background: linear-gradient(135deg, var(--color-accent, #6366f1), #7c3aed);
}

.cookie-toggle input:checked + .cookie-toggle-slider::before {
  transform: translateX(20px);
}

.cookie-toggle--disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cookie-modal-actions {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #f1f5f9;
  display: flex;
  justify-content: flex-end;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    opacity: 1;
    transform: none;
    animation: none;
  }
  .cookie-banner[aria-hidden="true"] {
    animation: none;
    display: none;
  }
  .cookie-modal-content {
    transform: none;
  }
}
```

*JS behavior:*
```javascript
const banner = document.getElementById('cookie-banner');
const modal = document.getElementById('cookie-modal');
const acceptBtn = document.getElementById('cookie-accept');
const rejectBtn = document.getElementById('cookie-reject');
const manageBtn = document.getElementById('cookie-manage');
const saveBtn = document.getElementById('cookie-save');
const backdrop = modal.querySelector('.cookie-modal-backdrop');
const storageKey = 'cookie-consent';

function getConsent() {
  return JSON.parse(localStorage.getItem(storageKey) || '{}');
}

function setConsent(consent) {
  localStorage.setItem(storageKey, JSON.stringify(consent));
}

function hideBanner() {
  banner.setAttribute('aria-hidden', 'true');
  setTimeout(() => banner.style.display = 'none', 300);
}

if (getConsent().status) {
  banner.style.display = 'none';
}

acceptBtn.addEventListener('click', () => {
  setConsent({ status: 'accepted', analytics: true, marketing: true, functional: true });
  hideBanner();
});

rejectBtn.addEventListener('click', () => {
  setConsent({ status: 'rejected', analytics: false, marketing: false, functional: false });
  hideBanner();
});

manageBtn.addEventListener('click', () => {
  modal.classList.add('is-open');
  modal.setAttribute('aria-hidden', 'false');
});

function closeModal() {
  modal.classList.remove('is-open');
  modal.setAttribute('aria-hidden', 'true');
}

backdrop.addEventListener('click', closeModal);
saveBtn.addEventListener('click', () => {
  const consent = {
    status: 'customized',
    analytics: document.getElementById('cookie-analytics').checked,
    marketing: document.getElementById('cookie-marketing').checked,
    functional: document.getElementById('cookie-functional').checked
  };
  setConsent(consent);
  closeModal();
  hideBanner();
});
```

---

**Minimal one-liner.** Subtle bottom bar with just Accept button.

*Animation & Visual Details:*
- *Entrance*: Bar slides up from bottom with subtle fade
- *Dismiss*: Bar slides down and fades
- *Gradients*: Accept button has gradient on hover
- *Radial circles*: None
- *Scroll trigger*: Not applicable
- *JS interaction*: Single Accept button, localStorage dismiss

```html
<section data-amb-section="cookie" class="cookie-minimal" id="cookie-minimal" aria-hidden="false">
  <div class="cookie-minimal-content">
    <p class="cookie-minimal-text">
      We use cookies to improve your experience. By continuing, you agree to our <a href="#">cookie policy</a>.
    </p>
    <button class="cookie-minimal-btn" id="cookie-minimal-accept">Accept</button>
  </div>
</section>
```

```css
.cookie-minimal {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(30, 41, 59, 0.95);
  backdrop-filter: blur(8px);
  opacity: 0;
  animation: cookie-minimal-enter 0.3s ease-out 2s forwards;
}

@keyframes cookie-minimal-enter {
  to { opacity: 1; }
}

.cookie-minimal[aria-hidden="true"] {
  animation: cookie-minimal-exit 0.3s ease-out forwards;
}

@keyframes cookie-minimal-exit {
  to { opacity: 0; transform: translateY(100%); }
}

.cookie-minimal-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 16px 24px;
  max-width: 1200px;
  margin: 0 auto;
}

@media (max-width: 640px) {
  .cookie-minimal-content {
    flex-direction: column;
    gap: 12px;
  }
}

.cookie-minimal-text {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  margin: 0;
  text-align: center;
}

.cookie-minimal-text a {
  color: rgba(255,255,255,0.95);
  text-decoration: underline;
}

.cookie-minimal-btn {
  padding: 8px 20px;
  background: linear-gradient(135deg, var(--color-accent, #6366f1), #7c3aed);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cookie-minimal-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(99,102,241,0.4);
}

@media (prefers-reduced-motion: reduce) {
  .cookie-minimal {
    animation: none;
    opacity: 1;
  }
  .cookie-minimal[aria-hidden="true"] {
    animation: none;
    display: none;
  }
}
```

*JS behavior:*
```javascript
const minimalBanner = document.getElementById('cookie-minimal');
const minimalAccept = document.getElementById('cookie-minimal-accept');

const storageKey = 'cookie-consent';

if (localStorage.getItem(storageKey)) {
  minimalBanner.style.display = 'none';
}

minimalAccept.addEventListener('click', () => {
  localStorage.setItem(storageKey, JSON.stringify({ status: 'accepted' }));
  minimalBanner.setAttribute('aria-hidden', 'true');
  setTimeout(() => minimalBanner.style.display = 'none', 300);
});
```

---

**GDPR-style modal.** Overlay modal requiring consent before any tracking.

*Animation & Visual Details:*
- *Entrance*: Backdrop fades in; modal scales from 0.95 → 1
- *Dismiss*: Modal scales down and fades; backdrop fades
- *Gradients*: Accept button has gradient background
- *Radial circles*: Modal has radial glow in top-right corner
- *Scroll trigger*: Not applicable (blocks page load)
- *JS interaction*: Must choose an option; no X button to dismiss

```html
<div class="cookie-gdpr" id="cookie-gdpr" aria-hidden="false">
  <div class="cookie-gdpr-backdrop"></div>
  <div class="cookie-gdpr-content">
    <div class="cookie-gdpr-glow"></div>
    <div class="cookie-gdpr-header">
      <div class="cookie-gdpr-icon">
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
      </div>
      <h2 class="cookie-gdpr-title">Privacy notice</h2>
    </div>
    <p class="cookie-gdpr-text">We use cookies and similar technologies to help personalize content, tailor and measure ads, and provide a better experience. By clicking "Accept all", you agree to this processing. You can manage your preferences or opt out at any time.</p>
    <div class="cookie-gdpr-links">
      <a href="#">Privacy Policy</a>
      <span>·</span>
      <a href="#">Cookie Policy</a>
      <span>·</span>
      <a href="#">Terms of Service</a>
    </div>
    <div class="cookie-gdpr-actions">
      <button class="cookie-gdpr-btn cookie-gdpr-btn--reject" id="cookie-gdpr-reject">Reject all</button>
      <button class="cookie-gdpr-btn cookie-gdpr-btn--accept" id="cookie-gdpr-accept">Accept all</button>
    </div>
  </div>
</div>
```

```css
.cookie-gdpr {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
}

.cookie-gdpr.is-open {
  opacity: 1;
  visibility: visible;
}

.cookie-gdpr-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
}

.cookie-gdpr-content {
  position: relative;
  z-index: 1;
  background: #fff;
  border-radius: 24px;
  padding: 40px;
  max-width: 480px;
  width: 100%;
  text-align: center;
  transform: scale(0.95);
  transition: transform 0.3s ease;
  box-shadow: 0 24px 64px rgba(0,0,0,0.2);
}

.cookie-gdpr.is-open .cookie-gdpr-content {
  transform: scale(1);
}

.cookie-gdpr-glow {
  position: absolute;
  top: -40px;
  right: -40px;
  width: 120px;
  height: 120px;
  background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.cookie-gdpr-header {
  margin-bottom: 20px;
}

.cookie-gdpr-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(124,58,237,0.05));
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.cookie-gdpr-icon svg {
  width: 28px;
  height: 28px;
  color: var(--color-accent, #6366f1);
}

.cookie-gdpr-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text, #1e293b);
  margin: 0;
}

.cookie-gdpr-text {
  font-size: 0.95rem;
  color: var(--color-text-muted, #64748b);
  line-height: 1.6;
  margin: 0 0 20px;
}

.cookie-gdpr-links {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.cookie-gdpr-links a {
  font-size: 0.85rem;
  color: var(--color-accent, #6366f1);
  text-decoration: none;
}

.cookie-gdpr-links a:hover {
  text-decoration: underline;
}

.cookie-gdpr-links span {
  color: var(--color-text-muted, #64748b);
}

.cookie-gdpr-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.cookie-gdpr-btn {
  padding: 14px 28px;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.cookie-gdpr-btn--reject {
  background: #fff;
  color: var(--color-text, #1e293b);
  border: 1px solid #e2e8f0;
}

.cookie-gdpr-btn--reject:hover {
  border-color: var(--color-text-muted, #64748b);
}

.cookie-gdpr-btn--accept {
  background: linear-gradient(135deg, var(--color-accent, #6366f1), #7c3aed);
  color: #fff;
  border: none;
}

.cookie-gdpr-btn--accept:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(99,102,241,0.3);
}

@media (prefers-reduced-motion: reduce) {
  .cookie-gdpr-content {
    transform: none;
  }
}
```

*JS behavior:*
```javascript
const gdprModal = document.getElementById('cookie-gdpr');
const gdprAccept = document.getElementById('cookie-gdpr-accept');
const gdprReject = document.getElementById('cookie-gdpr-reject');
const storageKey = 'cookie-consent';

if (localStorage.getItem(storageKey)) {
  gdprModal.style.display = 'none';
} else {
  gdprModal.classList.add('is-open');
  gdprModal.setAttribute('aria-hidden', 'false');
  document.body.style.overflow = 'hidden';
}

function closeGdpr(status) {
  localStorage.setItem(storageKey, JSON.stringify({ status }));
  gdprModal.classList.remove('is-open');
  gdprModal.setAttribute('aria-hidden', 'true');
  document.body.style.overflow = '';
  setTimeout(() => gdprModal.style.display = 'none', 300);
}

gdprAccept.addEventListener('click', () => closeGdpr('accepted'));
gdprReject.addEventListener('click', () => closeGdpr('rejected'));
```

---

**Toast-style consent.** Small toast in corner with preference link.

*Animation & Visual Details:*
- *Entrance*: Toast slides in from bottom-right
- *Dismiss*: Toast slides out to right
- *Gradients*: Accept button has gradient on hover
- *Radial circles*: Toast icon has radial pulse
- *Scroll trigger*: Not applicable
- *JS interaction*: Accept/Dismiss buttons; settings link; localStorage

```html
<section data-amb-section="cookie" class="cookie-toast" id="cookie-toast" aria-hidden="false">
  <div class="cookie-toast-icon">
    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
  </div>
  <div class="cookie-toast-content">
    <p class="cookie-toast-text">This website uses cookies to ensure you get the best experience.</p>
    <div class="cookie-toast-actions">
      <button class="cookie-toast-btn cookie-toast-btn--accept" id="cookie-toast-accept">Accept</button>
      <a class="cookie-toast-settings" href="#">Settings</a>
    </div>
  </div>
</section>
```

```css
.cookie-toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,0,0,0.12);
  border: 1px solid #e2e8f0;
  max-width: 360px;
  opacity: 0;
  transform: translateY(20px) translateX(100%);
  animation: cookie-toast-enter 0.4s ease-out 1.5s forwards;
}

@keyframes cookie-toast-enter {
  to { opacity: 1; transform: translateY(0) translateX(0); }
}

.cookie-toast[aria-hidden="true"] {
  animation: cookie-toast-exit 0.3s ease-out forwards;
}

@keyframes cookie-toast-exit {
  to { opacity: 0; transform: translateY(20px) translateX(100%); }
}

.cookie-toast-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, rgba(99,102,241,0.1), rgba(124,58,237,0.05));
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.cookie-toast-icon::before {
  content: '';
  position: absolute;
  inset: -4px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(99,102,241,0.15) 0%, transparent 70%);
  animation: cookie-toast-pulse 3s ease-in-out infinite;
}

@keyframes cookie-toast-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50% { transform: scale(1.2); opacity: 1; }
}

.cookie-toast-icon svg {
  width: 20px;
  height: 20px;
  color: var(--color-accent, #6366f1);
}

.cookie-toast-text {
  font-size: 0.85rem;
  color: var(--color-text, #1e293b);
  line-height: 1.5;
  margin: 0 0 12px;
}

.cookie-toast-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

.cookie-toast-btn--accept {
  padding: 8px 16px;
  background: linear-gradient(135deg, var(--color-accent, #6366f1), #7c3aed);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cookie-toast-btn--accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99,102,241,0.3);
}

.cookie-toast-settings {
  font-size: 0.8rem;
  color: var(--color-text-muted, #64748b);
  text-decoration: none;
}

.cookie-toast-settings:hover {
  color: var(--color-accent, #6366f1);
}

@media (max-width: 480px) {
  .cookie-toast {
    left: 16px;
    right: 16px;
    max-width: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-toast {
    animation: none;
    opacity: 1;
    transform: none;
  }
  .cookie-toast-icon::before {
    animation: none;
  }
}
```

*JS behavior:*
```javascript
const toast = document.getElementById('cookie-toast');
const toastAccept = document.getElementById('cookie-toast-accept');
const storageKey = 'cookie-consent';

if (localStorage.getItem(storageKey)) {
  toast.style.display = 'none';
}

toastAccept.addEventListener('click', () => {
  localStorage.setItem(storageKey, JSON.stringify({ status: 'accepted' }));
  toast.setAttribute('aria-hidden', 'true');
  setTimeout(() => toast.style.display = 'none', 300);
});
```

---

Copy rules: cookie consent must be informative but not intrusive. State what cookies do in plain language, not legal jargon. Give users genuine choice — pre-ticked boxes for marketing cookies is illegal in many jurisdictions. Make it easy to change preferences later.

Layout rules: cookie banners belong at the bottom of the viewport. GDPR modals (requiring choice before any tracking) should block the page. Never hide the consent mechanism behind a tiny X or require users to dig through settings to reject.

CSS custom property summary:
```css
:root {
  --cookie-enter-duration: 0.4s;
  --color-accent: #6366f1;
  --color-text: #1e293b;
  --color-text-muted: #64748b;
}
```