.consent-banner { position: fixed; left: 0; right: 0; bottom: 0; z-index: 300; background: var(--cn-surface-dark); border-top: 4px solid var(--cn-deco-salmon); color: var(--cn-text-inverse); box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35); } .consent-banner__inner { position: relative; max-width: var(--cn-site-width); margin: 0 auto; padding: 24px 64px 24px 30px; } .consent-banner__title { color: var(--cn-text-inverse); font-size: 20px; margin-bottom: 8px; outline: none; } .consent-banner__body { color: rgba(255, 255, 255, 0.85); font-size: 15px; max-width: 90ch; margin-bottom: 16px; } .consent-banner__body a { color: #fff; } .consent-banner__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; } .consent-banner__actions .cn-btn { display: inline-block; width: auto; } .consent-banner__customize { background: none; border: 0; color: rgba(255, 255, 255, 0.85); font: inherit; text-decoration: underline; cursor: pointer; padding: 8px; } .consent-banner__customize:hover { color: #fff; } .consent-banner__categories { border-top: 1px solid rgba(255, 255, 255, 0.2); margin: 4px 0 16px; padding-top: 16px; } .consent-banner__category { margin-bottom: 12px; } .consent-banner__category label { display: flex; align-items: center; gap: 8px; cursor: pointer; } .consent-banner__category p { color: rgba(255, 255, 255, 0.75); font-size: 14px; margin: 4px 0 0 26px; max-width: 80ch; } .consent-banner__save { margin-top: 4px; } .consent-banner__close { position: absolute; top: 16px; right: 22px; background: none; border: 0; color: rgba(255, 255, 255, 0.7); font-size: 26px; line-height: 1; cursor: pointer; padding: 6px; } .consent-banner__close:hover { color: #fff; } @media (max-width: 639px) { .consent-banner__inner { padding: 20px 56px 20px 20px; } }