:root {
--sp-consent-font:
-apple-system,
blinkmacsystemfont,
"SF Pro Display",
"SF Pro Text",
"Helvetica Neue",
"Segoe UI",
roboto,
oxygen-sans,
ubuntu,
cantarell,
sans-serif;
--sp-consent-z-banner: 99998;
--sp-consent-z-overlay: 99999;
--sp-consent-z-modal: 100000;
--sp-consent-z-reopen: 99997;
--sp-consent-radius: 16px;
--sp-consent-radius-sm: 10px;
--sp-consent-shadow: 0 -4px 32px rgba(0, 0, 0, 0.08);
--sp-consent-shadow-modal:
0 24px 80px rgba(0, 0, 0, 0.12),
0 8px 24px rgba(0, 0, 0, 0.06);
--sp-consent-transition: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
--sp-consent-blur: 20px;
--sp-consent-ease: cubic-bezier(0.4, 0, 0.2, 1);
} [data-theme="light"],
.seopulse-consent-banner,
.seopulse-consent-modal {
--sp-consent-bg: rgba(255, 255, 255, 0.88);
--sp-consent-bg-solid: #fff;
--sp-consent-bg-secondary: #f5f5f7;
--sp-consent-text: #1d1d1f;
--sp-consent-text-muted: #86868b;
--sp-consent-border: rgba(0, 0, 0, 0.06);
--sp-consent-primary: #0a84ff;
--sp-consent-primary-hover: #0071e3;
--sp-consent-primary-text: #fff;
--sp-consent-reject-bg: transparent;
--sp-consent-reject-border: rgba(0, 0, 0, 0.12);
--sp-consent-reject-text: #1d1d1f;
--sp-consent-reject-hover: rgba(0, 0, 0, 0.04);
--sp-consent-customize-bg: transparent;
--sp-consent-customize-text: #0a84ff;
--sp-consent-customize-hover: rgba(10, 132, 255, 0.06);
--sp-consent-toggle-off: #d1d1d6;
--sp-consent-toggle-on: #30d158;
--sp-consent-overlay: rgba(0, 0, 0, 0.35);
--sp-consent-category-bg: #f5f5f7;
--sp-consent-category-border: rgba(0, 0, 0, 0.06);
--sp-consent-success: #30d158;
} [data-theme="dark"] {
--sp-consent-bg: rgba(28, 28, 30, 0.92);
--sp-consent-bg-solid: #1c1c1e;
--sp-consent-bg-secondary: #2c2c2e;
--sp-consent-text: #f5f5f7;
--sp-consent-text-muted: #98989d;
--sp-consent-border: rgba(255, 255, 255, 0.08);
--sp-consent-primary: #0a84ff;
--sp-consent-primary-hover: #409cff;
--sp-consent-primary-text: #fff;
--sp-consent-reject-bg: transparent;
--sp-consent-reject-border: rgba(255, 255, 255, 0.12);
--sp-consent-reject-text: #f5f5f7;
--sp-consent-reject-hover: rgba(255, 255, 255, 0.06);
--sp-consent-customize-bg: transparent;
--sp-consent-customize-text: #0a84ff;
--sp-consent-customize-hover: rgba(10, 132, 255, 0.12);
--sp-consent-toggle-off: #48484a;
--sp-consent-toggle-on: #30d158;
--sp-consent-overlay: rgba(0, 0, 0, 0.55);
--sp-consent-category-bg: #2c2c2e;
--sp-consent-category-border: rgba(255, 255, 255, 0.08);
--sp-consent-success: #30d158;
} .sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
} .seopulse-consent-banner {
position: fixed;
left: 0;
right: 0;
z-index: var(--sp-consent-z-banner);
font-family: var(--sp-consent-font);
background: var(--sp-consent-bg);
backdrop-filter: blur(var(--sp-consent-blur));
-webkit-backdrop-filter: blur(var(--sp-consent-blur));
border-top: 1px solid var(--sp-consent-border);
box-shadow: var(--sp-consent-shadow);
opacity: 0;
transform: translateY(100%);
transition:
opacity var(--sp-consent-transition),
transform var(--sp-consent-transition);
pointer-events: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
} .seopulse-consent-banner[data-position="bottom"],
.seopulse-consent-banner[data-position="bottom-left"],
.seopulse-consent-banner[data-position="bottom-right"] {
bottom: 0;
}
.seopulse-consent-banner[data-position="top"] {
top: 0;
bottom: auto;
border-top: none;
border-bottom: 1px solid var(--sp-consent-border);
box-shadow: 0 4px 32px rgba(0, 0, 0, 0.08);
transform: translateY(-100%);
}
.seopulse-consent-banner[data-position="bottom-left"],
.seopulse-consent-banner[data-position="bottom-right"] {
left: auto;
right: auto;
max-width: 480px;
margin: 20px;
border-radius: var(--sp-consent-radius);
border: 1px solid var(--sp-consent-border);
}
.seopulse-consent-banner[data-position="bottom-left"] {
left: 0;
transform: translateX(-20px);
}
.seopulse-consent-banner[data-position="bottom-right"] {
right: 0;
transform: translateX(20px);
} .seopulse-consent-banner--visible {
opacity: 1;
transform: translateY(0) translateX(0) !important;
pointer-events: auto;
} .seopulse-consent-banner--hiding {
opacity: 0;
pointer-events: none;
}
.seopulse-consent-banner[data-position="bottom"].seopulse-consent-banner--hiding,
.seopulse-consent-banner[data-position="bottom-left"].seopulse-consent-banner--hiding,
.seopulse-consent-banner[data-position="bottom-right"].seopulse-consent-banner--hiding {
transform: translateY(20px) !important;
}
.seopulse-consent-banner[data-position="top"].seopulse-consent-banner--hiding {
transform: translateY(-20px) !important;
} .seopulse-consent-banner__inner {
display: flex;
align-items: center;
gap: 28px;
max-width: 1200px;
margin: 0 auto;
padding: 22px 28px;
flex-wrap: wrap;
}
.seopulse-consent-banner[data-position="bottom-left"] .seopulse-consent-banner__inner,
.seopulse-consent-banner[data-position="bottom-right"] .seopulse-consent-banner__inner {
flex-direction: column;
align-items: stretch;
gap: 18px;
padding: 22px;
} .seopulse-consent-banner__content {
flex: 1;
min-width: 0;
}
.seopulse-consent-banner__title {
margin: 0 0 6px;
font-size: 17px;
font-weight: 700;
color: var(--sp-consent-text);
line-height: 1.3;
letter-spacing: -0.022em;
}
.seopulse-consent-banner__description {
margin: 0 0 8px;
font-size: 14px;
line-height: 1.65;
color: var(--sp-consent-text-muted);
}
.seopulse-consent-banner__privacy-link {
font-size: 13px;
color: var(--sp-consent-primary);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
transition: color 0.2s ease;
}
.seopulse-consent-banner__privacy-link:hover {
color: var(--sp-consent-primary-hover);
} .seopulse-consent-banner__actions {
display: flex;
gap: 10px;
flex-shrink: 0;
flex-wrap: wrap;
}
.seopulse-consent-banner[data-position="bottom-left"] .seopulse-consent-banner__actions,
.seopulse-consent-banner[data-position="bottom-right"] .seopulse-consent-banner__actions {
flex-direction: column;
} .seopulse-consent-banner__powered {
margin-top: 0;
padding-top: 10px;
border-top: 1px solid var(--sp-consent-border);
font-family: var(--sp-consent-font);
font-size: 11px;
color: var(--sp-consent-text-muted);
text-align: center;
letter-spacing: 0.01em;
flex-basis: 100%;
order: 10;
}
.seopulse-consent-banner__powered a {
color: var(--sp-consent-primary);
text-decoration: none;
font-weight: 600;
transition: opacity 0.2s ease;
}
.seopulse-consent-banner__powered a:hover {
opacity: 0.75;
} .seopulse-consent-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 11px 24px;
border-radius: var(--sp-consent-radius-sm);
font-family: var(--sp-consent-font);
font-size: 14px;
font-weight: 600;
line-height: 1.4;
cursor: pointer;
transition: all 0.2s var(--sp-consent-ease);
white-space: nowrap;
border: none;
outline: none;
text-decoration: none;
letter-spacing: -0.01em;
}
.seopulse-consent-btn:focus-visible {
outline: 2px solid var(--sp-consent-primary);
outline-offset: 3px;
}
.seopulse-consent-btn--accept {
background: var(--sp-consent-primary);
color: var(--sp-consent-primary-text);
border: 2px solid var(--sp-consent-primary);
box-shadow: 0 2px 8px rgba(10, 132, 255, 0.25);
}
.seopulse-consent-btn--accept:hover {
background: var(--sp-consent-primary-hover);
border-color: var(--sp-consent-primary-hover);
box-shadow: 0 4px 12px rgba(10, 132, 255, 0.3);
transform: translateY(-1px);
}
.seopulse-consent-btn--reject {
background: var(--sp-consent-reject-bg);
color: var(--sp-consent-reject-text);
border: 2px solid var(--sp-consent-reject-border);
}
.seopulse-consent-btn--reject:hover {
background: var(--sp-consent-reject-hover);
}
.seopulse-consent-btn--customize {
background: var(--sp-consent-customize-bg);
color: var(--sp-consent-customize-text);
border: 2px solid transparent;
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-thickness: 1px;
}
.seopulse-consent-btn--customize:hover {
background: var(--sp-consent-customize-hover);
}
.seopulse-consent-btn--save {
background: var(--sp-consent-primary);
color: var(--sp-consent-primary-text);
border: 2px solid var(--sp-consent-primary);
flex: 1;
box-shadow: 0 2px 8px rgba(10, 132, 255, 0.25);
}
.seopulse-consent-btn--save:hover {
background: var(--sp-consent-primary-hover);
border-color: var(--sp-consent-primary-hover);
box-shadow: 0 4px 12px rgba(10, 132, 255, 0.3);
transform: translateY(-1px);
}
.seopulse-consent-btn--sm {
padding: 8px 18px;
font-size: 13px;
} .seopulse-consent-overlay {
position: fixed;
inset: 0;
z-index: var(--sp-consent-z-overlay);
background: var(--sp-consent-overlay);
opacity: 0;
transition: opacity var(--sp-consent-transition);
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.seopulse-consent-overlay--visible {
opacity: 1;
} .seopulse-consent-modal {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(0.96);
z-index: var(--sp-consent-z-modal);
width: 90vw;
max-width: 560px;
max-height: 85vh;
font-family: var(--sp-consent-font);
opacity: 0;
transition:
opacity var(--sp-consent-transition),
transform var(--sp-consent-transition);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.seopulse-consent-modal--visible {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
.seopulse-consent-modal--hiding {
opacity: 0;
transform: translate(-50%, -50%) scale(0.96);
}
.seopulse-consent-modal__inner {
display: flex;
flex-direction: column;
max-height: 85vh;
background: var(--sp-consent-bg-solid);
border-radius: var(--sp-consent-radius);
box-shadow: var(--sp-consent-shadow-modal);
border: 1px solid var(--sp-consent-border);
overflow: hidden;
} .seopulse-consent-modal__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 26px;
border-bottom: 1px solid var(--sp-consent-border);
flex-shrink: 0;
}
.seopulse-consent-modal__title {
margin: 0;
font-size: 19px;
font-weight: 700;
color: var(--sp-consent-text);
letter-spacing: -0.022em;
}
.seopulse-consent-modal__close {
display: flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
padding: 0;
border: none;
background: var(--sp-consent-bg-secondary);
border-radius: 50%;
color: var(--sp-consent-text-muted);
cursor: pointer;
transition: all 0.2s ease;
}
.seopulse-consent-modal__close:hover {
background: var(--sp-consent-border);
color: var(--sp-consent-text);
transform: scale(1.05);
}
.seopulse-consent-modal__close:focus-visible {
outline: 2px solid var(--sp-consent-primary);
outline-offset: 2px;
} .seopulse-consent-modal__body {
overflow-y: auto;
padding: 8px 26px;
flex: 1;
overscroll-behavior: contain;
} .seopulse-consent-modal__footer {
display: flex;
gap: 10px;
padding: 18px 26px;
border-top: 1px solid var(--sp-consent-border);
background: var(--sp-consent-bg-secondary);
flex-shrink: 0;
} .seopulse-consent-category {
padding: 18px 0;
border-bottom: 1px solid var(--sp-consent-border);
}
.seopulse-consent-category:last-child {
border-bottom: none;
}
.seopulse-consent-category__header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.seopulse-consent-category__info {
flex: 1;
min-width: 0;
}
.seopulse-consent-category__title {
margin: 0 0 4px;
font-size: 15px;
font-weight: 600;
color: var(--sp-consent-text);
letter-spacing: -0.01em;
}
.seopulse-consent-category__desc {
margin: 0;
font-size: 13px;
line-height: 1.55;
color: var(--sp-consent-text-muted);
}
.seopulse-consent-category__toggle {
flex-shrink: 0;
display: flex;
align-items: center;
}
.seopulse-consent-category__always-active {
font-size: 12px;
font-weight: 600;
color: var(--sp-consent-success);
white-space: nowrap;
padding: 3px 12px;
background: rgba(48, 209, 88, 0.08);
border-radius: 20px;
letter-spacing: -0.01em;
} .seopulse-consent-switch {
position: relative;
display: inline-block;
width: 51px;
height: 31px;
cursor: pointer;
}
.seopulse-consent-switch input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.seopulse-consent-switch__slider {
position: absolute;
inset: 0;
background: var(--sp-consent-toggle-off);
border-radius: 31px;
transition: background 0.3s var(--sp-consent-ease);
}
.seopulse-consent-switch__slider::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 27px;
height: 27px;
background: #fff;
border-radius: 50%;
transition: transform 0.3s var(--sp-consent-ease);
box-shadow:
0 1px 3px rgba(0, 0, 0, 0.12),
0 3px 8px rgba(0, 0, 0, 0.08);
}
.seopulse-consent-switch input:checked + .seopulse-consent-switch__slider {
background: var(--sp-consent-toggle-on);
}
.seopulse-consent-switch input:checked + .seopulse-consent-switch__slider::after {
transform: translateX(20px);
}
.seopulse-consent-switch input:focus-visible + .seopulse-consent-switch__slider {
box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.3);
} .seopulse-consent-reopen {
position: fixed;
bottom: 20px;
left: 20px;
z-index: var(--sp-consent-z-reopen);
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--sp-consent-border, rgba(0, 0, 0, 0.06));
border-radius: 50%;
background: var(--sp-consent-bg, rgba(255, 255, 255, 0.88));
backdrop-filter: blur(var(--sp-consent-blur));
-webkit-backdrop-filter: blur(var(--sp-consent-blur));
color: var(--sp-consent-text-muted, #86868b);
cursor: pointer;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
opacity: 0;
transform: scale(0.8);
transition: all 0.3s var(--sp-consent-ease);
}
.seopulse-consent-reopen--visible {
opacity: 1;
transform: scale(1);
}
.seopulse-consent-reopen:hover {
background: var(--sp-consent-bg-secondary, #f5f5f7);
color: var(--sp-consent-primary, #0a84ff);
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
transform: scale(1.08);
}
.seopulse-consent-reopen:focus-visible {
outline: 2px solid var(--sp-consent-primary, #0a84ff);
outline-offset: 3px;
} @media (max-width: 768px) {
.seopulse-consent-banner__inner {
flex-direction: column;
align-items: stretch;
gap: 16px;
padding: 18px;
}
.seopulse-consent-banner__actions {
flex-direction: column;
}
.seopulse-consent-banner[data-position="bottom-left"],
.seopulse-consent-banner[data-position="bottom-right"] {
left: 0;
right: 0;
max-width: none;
margin: 0;
border-radius: 0;
}
.seopulse-consent-modal {
width: 95vw;
max-height: 90vh;
}
.seopulse-consent-modal__body {
padding: 8px 18px;
}
.seopulse-consent-modal__header,
.seopulse-consent-modal__footer {
padding: 16px 18px;
}
.seopulse-consent-modal__footer {
flex-direction: column;
}
} @media print {
.seopulse-consent-banner,
.seopulse-consent-modal,
.seopulse-consent-overlay,
.seopulse-consent-reopen {
display: none !important;
}
} @media (prefers-reduced-motion: reduce) {
.seopulse-consent-banner,
.seopulse-consent-modal,
.seopulse-consent-overlay,
.seopulse-consent-reopen,
.seopulse-consent-switch__slider,
.seopulse-consent-switch__slider::after,
.seopulse-consent-btn {
transition-duration: 0.01ms !important;
}
}