:root {
--cvcm-bg: #ffffff;
--cvcm-text: #1d2327;
--cvcm-muted: #4b5563;
--cvcm-accent: #0f5c9c;
--cvcm-accent-text: #ffffff;
--cvcm-border: #d5dade;
--cvcm-radius: 8px;
--cvcm-max-width: 1180px;
--cvcm-font-size: 15px;
--cvcm-shadow: 0 -2px 24px rgba( 0, 0, 0, 0.14 );
--cvcm-z: 999990;
}
.cvcm-sr-only {
position: absolute !important;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect( 0, 0, 0, 0 );
white-space: nowrap;
border: 0;
}  .cvcm-backdrop {
position: fixed;
inset: 0;
z-index: calc( var( --cvcm-z ) - 1 );
background: rgba( 0, 0, 0, 0.6 );
opacity: 0;
transition: opacity 0.24s ease;
}
.cvcm-backdrop[hidden] {
display: none;
}
.cvcm-backdrop.is-visible {
opacity: 1;
}
html.cvcm-blocking,
html.cvcm-blocking body {
overflow: hidden;
overscroll-behavior: contain;
}
.cvcm-banner {
position: fixed;
left: 0;
right: 0;
z-index: var( --cvcm-z );
box-sizing: border-box;
padding: 20px;
background: var( --cvcm-bg );
color: var( --cvcm-text );
font-size: var( --cvcm-font-size );
line-height: 1.55;
box-shadow: var( --cvcm-shadow );
opacity: 0;
transform: translateY( 16px );
transition: opacity 0.24s ease, transform 0.24s ease;
}
.cvcm-banner[hidden] {
display: none;
}
.cvcm-banner.is-visible {
opacity: 1;
transform: none;
}
.cvcm-banner--bottom {
bottom: 0;
border-top: 1px solid var( --cvcm-border );
}
.cvcm-banner--top {
top: 0;
transform: translateY( -16px );
border-bottom: 1px solid var( --cvcm-border );
}
.cvcm-banner--center {
top: 50%;
left: 50%;
right: auto;
max-width: min( 560px, calc( 100vw - 32px ) );
transform: translate( -50%, calc( -50% + 16px ) );
border: 1px solid var( --cvcm-border );
border-radius: var( --cvcm-radius );
}
.cvcm-banner--center.is-visible {
transform: translate( -50%, -50% );
} .cvcm-banner.cvcm-banner--blocking {
top: 50%;
right: auto;
bottom: auto;
left: 50%;
box-sizing: border-box;
width: min( 640px, calc( 100vw - 32px ) );
max-height: calc( 100vh - 48px );
padding: 28px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
border: 0;
border-radius: var( --cvcm-radius );
box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.35 );
transform: translate( -50%, calc( -50% + 12px ) );
}
.cvcm-banner.cvcm-banner--blocking.is-visible {
transform: translate( -50%, -50% );
}
.cvcm-banner.cvcm-banner--blocking .cvcm-banner__inner {
flex-direction: column;
align-items: stretch;
max-width: none;
gap: 20px;
}
.cvcm-banner.cvcm-banner--blocking .cvcm-banner__actions {
max-width: none;
}
.cvcm-banner.cvcm-banner--blocking .cvcm-banner__title {
font-size: 1.25em;
margin-bottom: 10px;
}
@media ( max-width: 600px ) {
.cvcm-banner.cvcm-banner--blocking {
width: calc( 100vw - 24px );
max-height: calc( 100vh - 24px );
padding: 20px;
}
}
.cvcm-banner__inner {
display: flex;
gap: 24px;
align-items: center;
justify-content: space-between;
max-width: var( --cvcm-max-width );
margin: 0 auto;
}
.cvcm-banner--box .cvcm-banner__inner,
.cvcm-banner--center .cvcm-banner__inner {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.cvcm-banner__content {
flex: 1 1 auto;
min-width: 0;
}
.cvcm-banner__title {
margin: 0 0 6px;
font-size: 1.1em;
font-weight: 700;
line-height: 1.3;
color: var( --cvcm-text );
}
.cvcm-banner__text {
margin: 0;
color: var( --cvcm-muted );
}
.cvcm-banner__text p {
margin: 0 0 8px;
}
.cvcm-banner__text p:last-child {
margin-bottom: 0;
}
.cvcm-banner__links,
.cvcm-modal__links {
margin: 10px 0 0;
font-size: 0.9em;
}
.cvcm-banner__links a,
.cvcm-modal__links a {
color: var( --cvcm-accent );
text-decoration: underline;
}
.cvcm-banner__actions {
display: flex;
flex: 0 0 auto;
flex-wrap: wrap;
gap: 10px;
align-items: stretch;
}
.cvcm-banner--bar .cvcm-banner__actions {
max-width: 46%;
} .cvcm-btn {
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
padding: 11px 20px;
margin: 0;
font-family: inherit;
font-size: 1em;
font-weight: 600;
line-height: 1.2;
color: var( --cvcm-text );
text-align: center;
text-decoration: none;
cursor: pointer;
background: transparent;
border: 2px solid var( --cvcm-text );
border-radius: var( --cvcm-radius );
transition: background-color 0.15s ease, color 0.15s ease;
}
.cvcm-btn--equal {
flex: 1 1 0;
min-width: 150px;
}
.cvcm-btn:hover,
.cvcm-btn:focus-visible {
color: var( --cvcm-bg );
background: var( --cvcm-text );
}
.cvcm-btn:focus-visible,
.cvcm-switch__input:focus-visible + .cvcm-switch__track,
.cvcm-float:focus-visible {
outline: 3px solid var( --cvcm-accent );
outline-offset: 2px;
}
.cvcm-btn--accent {
color: var( --cvcm-accent-text );
background: var( --cvcm-accent );
border-color: var( --cvcm-accent );
}
.cvcm-link {
padding: 0;
font: inherit;
color: var( --cvcm-accent );
text-decoration: underline;
cursor: pointer;
background: none;
border: 0;
} .cvcm-modal {
position: fixed;
inset: 0;
z-index: calc( var( --cvcm-z ) + 10 );
display: flex;
align-items: center;
justify-content: center;
padding: 16px;
opacity: 0;
transition: opacity 0.2s ease;
}
.cvcm-modal[hidden] {
display: none;
}
.cvcm-modal.is-visible {
opacity: 1;
}
.cvcm-modal__overlay {
position: absolute;
inset: 0;
background: rgba( 0, 0, 0, 0.55 );
}
.cvcm-modal__dialog {
position: relative;
display: flex;
flex-direction: column;
box-sizing: border-box;
width: 100%;
max-width: 720px;
max-height: calc( 100vh - 32px );
overflow: hidden;
color: var( --cvcm-text );
font-size: var( --cvcm-font-size );
line-height: 1.55;
background: var( --cvcm-bg );
border-radius: var( --cvcm-radius );
box-shadow: 0 24px 60px rgba( 0, 0, 0, 0.32 );
}
.cvcm-modal__header {
display: flex;
gap: 16px;
align-items: center;
justify-content: space-between;
padding: 20px 24px;
border-bottom: 1px solid var( --cvcm-border );
}
.cvcm-modal__title {
margin: 0;
font-size: 1.25em;
font-weight: 700;
}
.cvcm-modal__close {
flex: 0 0 auto;
width: 36px;
height: 36px;
font-size: 24px;
line-height: 1;
color: var( --cvcm-muted );
cursor: pointer;
background: none;
border: 0;
border-radius: var( --cvcm-radius );
}
.cvcm-modal__close:hover {
background: rgba( 0, 0, 0, 0.06 );
}
.cvcm-modal__body {
flex: 1 1 auto;
padding: 20px 24px;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.cvcm-modal__intro {
margin: 0 0 16px;
color: var( --cvcm-muted );
}
.cvcm-modal__intro p {
margin: 0 0 8px;
}
.cvcm-modal__footer {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 16px 24px;
background: rgba( 0, 0, 0, 0.02 );
border-top: 1px solid var( --cvcm-border );
}
.cvcm-modal__footer .cvcm-btn {
flex: 1 1 0;
min-width: 150px;
} .cvcm-categories {
margin: 0;
padding: 0;
list-style: none;
}
.cvcm-category {
padding: 16px 0;
border-top: 1px solid var( --cvcm-border );
}
.cvcm-category:first-child {
border-top: 0;
}
.cvcm-category__head {
display: flex;
gap: 16px;
align-items: center;
justify-content: space-between;
}
.cvcm-category__label {
font-weight: 700;
cursor: pointer;
}
.cvcm-category.is-locked .cvcm-category__label {
cursor: default;
}
.cvcm-category__description {
margin: 6px 0 0;
color: var( --cvcm-muted );
font-size: 0.94em;
}
.cvcm-category__note {
margin: 6px 0 0;
font-size: 0.85em;
font-weight: 600;
color: var( --cvcm-muted );
text-transform: uppercase;
letter-spacing: 0.04em;
} .cvcm-switch {
position: relative;
flex: 0 0 auto;
display: inline-block;
width: 52px;
height: 30px;
}
.cvcm-switch__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
margin: 0;
opacity: 0;
cursor: pointer;
}
.cvcm-switch__track {
position: absolute;
inset: 0;
pointer-events: none;
background: #b8bfc6;
border-radius: 999px;
transition: background-color 0.18s ease;
}
.cvcm-switch__track::after {
position: absolute;
top: 3px;
left: 3px;
width: 24px;
height: 24px;
content: "";
background: #ffffff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 );
transition: transform 0.18s ease;
}
.cvcm-switch__input:checked + .cvcm-switch__track {
background: var( --cvcm-accent );
}
.cvcm-switch__input:checked + .cvcm-switch__track::after {
transform: translateX( 22px );
}
.cvcm-switch__input:disabled {
cursor: not-allowed;
}
.cvcm-switch__input:disabled + .cvcm-switch__track {
background: var( --cvcm-accent );
opacity: 0.45;
} .cvcm-float {
position: fixed;
bottom: 16px;
z-index: calc( var( --cvcm-z ) - 10 );
display: inline-flex;
gap: 8px;
align-items: center;
padding: 10px 14px;
font-family: inherit;
font-size: 14px;
font-weight: 600;
color: var( --cvcm-accent-text );
cursor: pointer;
background: var( --cvcm-accent );
border: 0;
border-radius: 999px;
box-shadow: 0 4px 14px rgba( 0, 0, 0, 0.22 );
}
.cvcm-float--left {
left: 16px;
}
.cvcm-float--right {
right: 16px;
}
.cvcm-float__icon {
display: inline-flex;
} @media ( max-width: 782px ) {
.cvcm-float__label {
position: absolute !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect( 0, 0, 0, 0 );
white-space: nowrap;
}
.cvcm-float {
padding: 12px;
}
} .cvcm-pending .cvcm-float {
display: none;
} .cvcm-embed-placeholder {
display: flex;
flex-direction: column;
gap: 12px;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-height: 220px;
padding: 24px;
text-align: center;
background: rgba( 0, 0, 0, 0.04 );
border: 1px dashed var( --cvcm-border );
border-radius: var( --cvcm-radius );
}
.cvcm-embed-placeholder__text {
max-width: 46ch;
margin: 0;
color: var( --cvcm-muted );
} .cvcm-rights-form {
max-width: 640px;
}
.cvcm-field {
margin: 0 0 18px;
}
.cvcm-field__label {
display: block;
margin-bottom: 6px;
font-weight: 600;
}
.cvcm-field__required {
color: #b32d2e;
}
.cvcm-field input[type="text"],
.cvcm-field input[type="email"],
.cvcm-field select,
.cvcm-field textarea {
box-sizing: border-box;
width: 100%;
padding: 10px 12px;
font: inherit;
border: 1px solid var( --cvcm-border );
border-radius: var( --cvcm-radius );
}
.cvcm-field__hint {
margin: 6px 0 0;
font-size: 0.9em;
color: var( --cvcm-muted );
}
.cvcm-field--consent {
display: flex;
gap: 10px;
align-items: flex-start;
}
.cvcm-hp {
position: absolute !important;
left: -9999px;
opacity: 0;
}
.cvcm-notice {
padding: 12px 16px;
margin: 0 0 18px;
border-left: 4px solid var( --cvcm-accent );
background: rgba( 0, 0, 0, 0.04 );
}
.cvcm-notice--error {
border-left-color: #b32d2e;
}
.cvcm-notice--success {
border-left-color: #007017;
}
.cvcm-privacy-notice {
padding: 12px 16px;
margin: 0 0 18px;
font-size: 0.9em;
color: var( --cvcm-muted );
background: rgba( 0, 0, 0, 0.03 );
border-radius: var( --cvcm-radius );
} @media ( prefers-reduced-motion: reduce ) {
.cvcm-banner,
.cvcm-backdrop,
.cvcm-modal,
.cvcm-switch__track,
.cvcm-switch__track::after,
.cvcm-btn {
transition: none;
}
}
@media ( max-width: 900px ) {
.cvcm-banner__inner {
flex-direction: column;
align-items: stretch;
gap: 16px;
}
.cvcm-banner--bar .cvcm-banner__actions {
max-width: none;
}
}
@media ( max-width: 600px ) {
.cvcm-banner {
max-height: 78vh;
overflow-y: auto;
padding: 16px;
}
.cvcm-banner__actions,
.cvcm-modal__footer {
flex-direction: column;
}
.cvcm-btn--equal,
.cvcm-modal__footer .cvcm-btn {
width: 100%;
min-width: 0;
}
}
@media ( forced-colors: active ) {
.cvcm-btn {
border: 2px solid ButtonText;
}
.cvcm-switch__track {
border: 1px solid ButtonText;
}
}