#c15t-banner { --color-offgray-50: hsl(218, 12%, 95%); --color-offgray-100: hsl(218, 12%, 88%); --color-offgray-200: hsl(218, 12%, 80%); --color-offgray-300: hsl(218, 12%, 75%); --color-offgray-400: hsl(218, 12%, 64%); --color-offgray-500: hsl(218, 12%, 56%); --color-offgray-600: hsl(218, 12%, 48%); --color-offgray-700: hsl(218, 12%, 40%); --color-offgray-800: hsl(218, 12%, 34%); --color-offgray-900: hsl(218, 12%, 24%); --color-offgray-950: hsl(218, 12%, 15%); --color-offgray-1000: hsl(218, 12%, 5%); --color-blue-50: oklch(97% 0.014 254.604); --color-blue-100: oklch(93.2% 0.032 255.585); --color-blue-200: oklch(88.2% 0.059 254.128); --color-blue-300: oklch(80.9% 0.105 251.813); --color-blue-400: oklch(70.7% 0.165 254.624); --color-blue-500: oklch(62.3% 0.214 259.815); --color-blue-600: oklch(54.6% 0.245 262.881); --color-blue-700: oklch(48.8% 0.243 264.376); --color-blue-800: oklch(42.4% 0.199 265.638); --color-blue-900: oklch(37.9% 0.146 265.522); --color-blue-950: oklch(28.2% 0.091 267.935); --color-accent-blue: hsla(218, 93%, 42%, 1); position: fixed; z-index: 9999; bottom: 16px; right: 16px; border-radius: 4px; max-width: 300px; background: white; border: 1px solid color-mix(in oklab, var(--color-offgray-200) 50%, transparent); box-shadow: 6px 6px 0 color-mix(in oklab, var(--color-accent-blue) 6%, transparent);} .dark #c15t-banner { border-color: color-mix(in oklab, var(--color-offgray-600) 14%, transparent); background: var(--color-offgray-1000); box-shadow: 5px 5px 0 color-mix(in oklab, var(--color-accent-blue) 8%, transparent);} #c15t-banner > div:first-child { padding: 12px; display: flex; flex-direction: column;} #c15t-banner a { color: var(--links); text-decoration: underline; text-decoration-color: var(--link-line-decoration);} #c15t-banner a:hover { text-decoration-color: var(--link-line-decoration-hover);} #c15t-description { font-size: 12px; margin: 0; margin-top: 4px;} #c15t-configure-section { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid var(--divider); padding: 12px;} #c15t-configure-section > div { display: flex; align-items: center; justify-content: space-between;} #c15t-configure-section label { text-transform: uppercase; font-size: 11px;} #c15t-footer { padding: 12px; display: flex; justify-content: space-between; border-top: 1px solid var(--divider); background-color: color-mix( in oklab, var(--color-offgray-50) 50%, transparent );} .dark #c15t-footer { background-color: color-mix( in oklab, var(--color-offgray-600) 4%, transparent );} .c15t-button { display: inline-flex; align-items: center; justify-content: center; max-height: 28px; color: black; padding: 4px 8px; font-size: 14px; border-radius: 4px; background: transparent; border: 1px solid transparent; transition: 100ms; transition-property: box-shadow, border-color, background-color;} .c15t-button:hover { background: color-mix(in oklab, var(--color-offgray-100) 50%, transparent);} .dark .c15t-button { color: var(--color-offgray-50);} .dark .c15t-button:hover { background: color-mix(in oklab, var(--color-offgray-500) 10%, transparent);} .c15t-button.icon { padding: 0; width: 24px; height: 24px;} .c15t-button.primary { color: var(--color-blue-700); background: color-mix(in oklab, var(--color-blue-50) 60%, transparent); border-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent); box-shadow: color-mix(in oklab, var(--color-blue-400) 10%, transparent) 0 -2px 0 0 inset;} .c15t-button.primary:hover { background: color-mix(in oklab, var(--color-blue-100) 50%, transparent); box-shadow: none;} .dark .c15t-button.primary { color: var(--color-blue-50); background: color-mix(in oklab, var(--color-blue-500) 10%, transparent); border-color: color-mix(in oklab, var(--color-blue-300) 10%, transparent); box-shadow: color-mix(in oklab, var(--color-blue-300) 8%, transparent) 0 -2px 0 0 inset;} .dark .c15t-button.primary:hover { background: color-mix(in oklab, var(--color-blue-500) 20%, transparent); box-shadow: none;} .c15t-button.secondary { background: color-mix(in oklab, var(--color-offgray-50) 60%, transparent); border-color: color-mix(in oklab, var(--color-offgray-200) 50%, transparent); box-shadow: color-mix(in oklab, var(--color-offgray-500) 10%, transparent) 0 -2px 0 0 inset;} .c15t-button.secondary:hover { background: color-mix(in oklab, var(--color-offgray-100) 50%, transparent); box-shadow: none;} .dark .c15t-button.secondary { background: color-mix(in oklab, var(--color-offgray-300) 5%, transparent); border-color: color-mix(in oklab, var(--color-offgray-400) 20%, transparent); box-shadow: color-mix(in oklab, var(--color-offgray-300) 8%, transparent) 0 -2px 0 0 inset;} .dark .c15t-button.secondary:hover { background: color-mix(in oklab, var(--color-offgray-200) 10%, transparent); box-shadow: none;} .c15t-switch { position: relative; display: inline-block; width: 32px; height: 20px; flex-shrink: 0;} .c15t-switch input { opacity: 0; width: 0; height: 0; position: absolute;} .c15t-slider { position: absolute; cursor: pointer; inset: 0; background-color: color-mix( in oklab, var(--color-offgray-100) 80%, transparent ); border-radius: 20px; box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 5%, transparent); transition: background-color 0.2s;} .c15t-slider:hover { background-color: var(--color-offgray-100);} .dark .c15t-slider { background-color: color-mix(in oklab, #fff 5%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklab, #fff 15%, transparent);} .dark .c15t-slider:hover { background-color: color-mix(in oklab, #fff 10%, transparent);} .c15t-slider:before { position: absolute; content: ""; height: 14px; width: 14px; left: 3px; bottom: 3px; background-color: white; border-radius: 50%; box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1); transition: transform 0.2s;} .c15t-switch input:checked + .c15t-slider { background-color: var(--color-accent-blue); box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 5%, transparent);} .c15t-switch input:checked + .c15t-slider:hover { background-color: var(--color-accent-blue);} .dark .c15t-switch input:checked + .c15t-slider { background-color: var(--color-accent-blue); box-shadow: inset 0 0 0 1px color-mix(in oklab, #fff 15%, transparent);} .c15t-switch input:checked + .c15t-slider:before { transform: translateX(12px);} .c15t-switch input:disabled + .c15t-slider { opacity: 0.5; cursor: default; pointer-events: none;} .c15t-switch input:disabled + .c15t-slider:hover { background-color: color-mix( in oklab, var(--color-offgray-100) 80%, transparent );} #c15t-manage-consent-btn { appearance: none; background: none; border: none; padding: 0; cursor: pointer;} #c15t-manage-consent-btn:hover { text-decoration-color: var(--link-line-decoration-hover);}
#c15t-banner {
--color-offgray-50: hsl(218, 12%, 95%);
--color-offgray-100: hsl(218, 12%, 88%);
--color-offgray-200: hsl(218, 12%, 80%);
--color-offgray-300: hsl(218, 12%, 75%);
--color-offgray-400: hsl(218, 12%, 64%);
--color-offgray-500: hsl(218, 12%, 56%);
--color-offgray-600: hsl(218, 12%, 48%);
--color-offgray-700: hsl(218, 12%, 40%);
--color-offgray-800: hsl(218, 12%, 34%);
--color-offgray-900: hsl(218, 12%, 24%);
--color-offgray-950: hsl(218, 12%, 15%);
--color-offgray-1000: hsl(218, 12%, 5%);
--color-blue-50: oklch(97% 0.014 254.604);
--color-blue-100: oklch(93.2% 0.032 255.585);
--color-blue-200: oklch(88.2% 0.059 254.128);
--color-blue-300: oklch(80.9% 0.105 251.813);
--color-blue-400: oklch(70.7% 0.165 254.624);
--color-blue-500: oklch(62.3% 0.214 259.815);
--color-blue-600: oklch(54.6% 0.245 262.881);
--color-blue-700: oklch(48.8% 0.243 264.376);
--color-blue-800: oklch(42.4% 0.199 265.638);
--color-blue-900: oklch(37.9% 0.146 265.522);
--color-blue-950: oklch(28.2% 0.091 267.935);
--color-accent-blue: hsla(218, 93%, 42%, 1);
position: fixed;
z-index: 9999;
bottom: 16px;
right: 16px;
border-radius: 4px;
max-width: 300px;
background: white;
border: 1px solid
color-mix(in oklab, var(--color-offgray-200) 50%, transparent);
box-shadow: 6px 6px 0
color-mix(in oklab, var(--color-accent-blue) 6%, transparent);
}
.dark #c15t-banner {
border-color: color-mix(in oklab, var(--color-offgray-600) 14%, transparent);
background: var(--color-offgray-1000);
box-shadow: 5px 5px 0
color-mix(in oklab, var(--color-accent-blue) 8%, transparent);
}
#c15t-banner > div:first-child {
padding: 12px;
display: flex;
flex-direction: column;
}
#c15t-banner a {
color: var(--links);
text-decoration: underline;
text-decoration-color: var(--link-line-decoration);
}
#c15t-banner a:hover {
text-decoration-color: var(--link-line-decoration-hover);
}
#c15t-description {
font-size: 12px;
margin: 0;
margin-top: 4px;
}
#c15t-configure-section {
display: flex;
flex-direction: column;
gap: 8px;
border-top: 1px solid var(--divider);
padding: 12px;
}
#c15t-configure-section > div {
display: flex;
align-items: center;
justify-content: space-between;
}
#c15t-configure-section label {
text-transform: uppercase;
font-size: 11px;
}
#c15t-footer {
padding: 12px;
display: flex;
justify-content: space-between;
border-top: 1px solid var(--divider);
background-color: color-mix(
in oklab,
var(--color-offgray-50) 50%,
transparent
);
}
.dark #c15t-footer {
background-color: color-mix(
in oklab,
var(--color-offgray-600) 4%,
transparent
);
}
.c15t-button {
display: inline-flex;
align-items: center;
justify-content: center;
max-height: 28px;
color: black;
padding: 4px 8px;
font-size: 14px;
border-radius: 4px;
background: transparent;
border: 1px solid transparent;
transition: 100ms;
transition-property: box-shadow, border-color, background-color;
}
.c15t-button:hover {
background: color-mix(in oklab, var(--color-offgray-100) 50%, transparent);
}
.dark .c15t-button {
color: var(--color-offgray-50);
}
.dark .c15t-button:hover {
background: color-mix(in oklab, var(--color-offgray-500) 10%, transparent);
}
.c15t-button.icon {
padding: 0;
width: 24px;
height: 24px;
}
.c15t-button.primary {
color: var(--color-blue-700);
background: color-mix(in oklab, var(--color-blue-50) 60%, transparent);
border-color: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
box-shadow: color-mix(in oklab, var(--color-blue-400) 10%, transparent) 0 -2px
0 0 inset;
}
.c15t-button.primary:hover {
background: color-mix(in oklab, var(--color-blue-100) 50%, transparent);
box-shadow: none;
}
.dark .c15t-button.primary {
color: var(--color-blue-50);
background: color-mix(in oklab, var(--color-blue-500) 10%, transparent);
border-color: color-mix(in oklab, var(--color-blue-300) 10%, transparent);
box-shadow: color-mix(in oklab, var(--color-blue-300) 8%, transparent) 0 -2px
0 0 inset;
}
.dark .c15t-button.primary:hover {
background: color-mix(in oklab, var(--color-blue-500) 20%, transparent);
box-shadow: none;
}
.c15t-button.secondary {
background: color-mix(in oklab, var(--color-offgray-50) 60%, transparent);
border-color: color-mix(in oklab, var(--color-offgray-200) 50%, transparent);
box-shadow: color-mix(in oklab, var(--color-offgray-500) 10%, transparent)
0 -2px 0 0 inset;
}
.c15t-button.secondary:hover {
background: color-mix(in oklab, var(--color-offgray-100) 50%, transparent);
box-shadow: none;
}
.dark .c15t-button.secondary {
background: color-mix(in oklab, var(--color-offgray-300) 5%, transparent);
border-color: color-mix(in oklab, var(--color-offgray-400) 20%, transparent);
box-shadow: color-mix(in oklab, var(--color-offgray-300) 8%, transparent)
0 -2px 0 0 inset;
}
.dark .c15t-button.secondary:hover {
background: color-mix(in oklab, var(--color-offgray-200) 10%, transparent);
box-shadow: none;
}
.c15t-switch {
position: relative;
display: inline-block;
width: 32px;
height: 20px;
flex-shrink: 0;
}
.c15t-switch input {
opacity: 0;
width: 0;
height: 0;
position: absolute;
}
.c15t-slider {
position: absolute;
cursor: pointer;
inset: 0;
background-color: color-mix(
in oklab,
var(--color-offgray-100) 80%,
transparent
);
border-radius: 20px;
box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 5%, transparent);
transition: background-color 0.2s;
}
.c15t-slider:hover {
background-color: var(--color-offgray-100);
}
.dark .c15t-slider {
background-color: color-mix(in oklab, #fff 5%, transparent);
box-shadow: inset 0 0 0 1px color-mix(in oklab, #fff 15%, transparent);
}
.dark .c15t-slider:hover {
background-color: color-mix(in oklab, #fff 10%, transparent);
}
.c15t-slider:before {
position: absolute;
content: "";
height: 14px;
width: 14px;
left: 3px;
bottom: 3px;
background-color: white;
border-radius: 50%;
box-shadow:
0 1px 3px 0 rgb(0 0 0 / 0.1),
0 1px 2px -1px rgb(0 0 0 / 0.1);
transition: transform 0.2s;
}
.c15t-switch input:checked + .c15t-slider {
background-color: var(--color-accent-blue);
box-shadow: inset 0 0 0 1px color-mix(in oklab, #000 5%, transparent);
}
.c15t-switch input:checked + .c15t-slider:hover {
background-color: var(--color-accent-blue);
}
.dark .c15t-switch input:checked + .c15t-slider {
background-color: var(--color-accent-blue);
box-shadow: inset 0 0 0 1px color-mix(in oklab, #fff 15%, transparent);
}
.c15t-switch input:checked + .c15t-slider:before {
transform: translateX(12px);
}
.c15t-switch input:disabled + .c15t-slider {
opacity: 0.5;
cursor: default;
pointer-events: none;
}
.c15t-switch input:disabled + .c15t-slider:hover {
background-color: color-mix(
in oklab,
var(--color-offgray-100) 80%,
transparent
);
}
#c15t-manage-consent-btn {
appearance: none;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
#c15t-manage-consent-btn:hover {
text-decoration-color: var(--link-line-decoration-hover);
}