/* * Cookie consent banner + preferences dialog. * * The banner is a bottom-anchored card; the preferences dialog is a centred * modal over a blurred overlay (same treatment as the age gate / cart drawer). * Both reuse the theme's button and typography tokens. The inline * script adds `cookie-consent-set` to for returning visitors, which * hides the whole component up-front. */ .cookie-consent-set cookie-consent.cookie-consent { display: none; } /* ---- Banner ---- */ .cc-banner { position: fixed; left: calc(var(--gap, 8px) * 2); right: calc(var(--gap, 8px) * 2); bottom: calc(var(--gap, 8px) * 2); z-index: 190; max-width: 460px; background: var(--color-background, #fff); color: var(--color-text, #000); border: 1px solid var(--color-border, #000); border-radius: var(--border-radius-button, 0); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); /* Hidden until the JS confirms a first-time visitor, to avoid a flash. */ opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.25s ease, transform 0.25s ease; } .cc-banner--visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .cc-banner__wrapper { padding: calc(var(--gap, 8px) * 2.5); display: flex; flex-direction: column; gap: calc(var(--gap, 8px) * 2); } .cc-banner__title { margin: 0 0 calc(var(--gap, 8px) * 1); font-family: var(--font-headline); font-style: var(--font-headline-style); font-weight: var(--font-headline-weight); font-size: calc(var(--font-headline-size) * 0.7); text-transform: var(--font-headline-transform, none); letter-spacing: var(--font-headline-letter-spacing, normal); line-height: 1.2; color: var(--color-headings-text, #000); } .cc-banner__body p { margin: 0; font-family: var(--font-base); font-size: max(13px, calc(var(--font-base-size) - 1px)); line-height: var(--font-base-line-height, 1.5); color: var(--color-body-text, #000); } .cc-banner__policy-link { color: inherit; text-decoration: underline; } .cc-banner__btns { display: flex; flex-wrap: wrap; gap: calc(var(--gap, 8px) * 1); } .cc-banner__btn { flex: 1 1 auto; min-width: 0; padding-left: calc(var(--gap, 8px) * 1.5); padding-right: calc(var(--gap, 8px) * 1.5); white-space: nowrap; } /* ---- Preferences dialog ---- */ .cookie-prefs-open, .cookie-prefs-open body { overflow: hidden; } .cc-prefs[hidden] { display: none; } .cc-prefs { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: calc(var(--gap, 8px) * 2); } .cc-prefs__overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); backdrop-filter: blur(4px); z-index: 0; } .cc-prefs__dialog { position: relative; z-index: 1; display: flex; flex-direction: column; width: 100%; max-width: 620px; max-height: calc(100vh - var(--gap, 8px) * 4); background: var(--color-background, #fff); color: var(--color-text, #000); border: 1px solid var(--color-border, #000); border-radius: var(--border-radius-button, 0); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25); overflow: hidden; } .cc-prefs__header { position: relative; padding: calc(var(--gap, 8px) * 3); border-bottom: 1px solid var(--color-border, #000); } .cc-prefs__close { position: absolute; top: calc(var(--gap, 8px) * 2); right: calc(var(--gap, 8px) * 2); display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; background: none; border: 0; color: var(--color-text, #000); cursor: pointer; } .cc-prefs__title { margin: 0 calc(var(--gap, 8px) * 4) calc(var(--gap, 8px) * 2) 0; font-family: var(--font-headline); font-style: var(--font-headline-style); font-weight: var(--font-headline-weight); font-size: calc(var(--font-headline-size) * 0.75); text-transform: var(--font-headline-transform, none); letter-spacing: var(--font-headline-letter-spacing, normal); line-height: 1.2; color: var(--color-headings-text, #000); } .cc-prefs__header-actions { display: flex; flex-wrap: wrap; gap: calc(var(--gap, 8px) * 1); } .cc-prefs__btn { flex: 1 1 auto; white-space: nowrap; } .cc-prefs__scrollable { padding: calc(var(--gap, 8px) * 3); overflow-y: auto; } .cc-prefs__intro-title { margin: 0 0 calc(var(--gap, 8px) * 1); font-family: var(--font-headline); font-weight: var(--font-headline-weight); font-size: calc(var(--font-base-size) + 3px); color: var(--color-headings-text, #000); } .cc-prefs__intro p { margin: 0 0 calc(var(--gap, 8px) * 3); font-family: var(--font-base); font-size: max(13px, calc(var(--font-base-size) - 1px)); line-height: var(--font-base-line-height, 1.5); color: var(--color-body-text, #000); } .cc-prefs__options { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(var(--gap, 8px) * 3); } .cc-prefs__option { border-top: 1px solid var(--color-border, #000); padding-top: calc(var(--gap, 8px) * 3); } .cc-prefs__option-label { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--gap, 8px) * 2); cursor: pointer; } .cc-prefs__option-name { font-family: var(--font-base); font-weight: var(--font-headline-weight, 600); font-size: var(--font-base-size); color: var(--color-text, #000); } .cc-prefs__option-desc { margin: calc(var(--gap, 8px) * 1) 0 0; font-family: var(--font-base); font-size: max(13px, calc(var(--font-base-size) - 1px)); line-height: var(--font-base-line-height, 1.5); color: var(--color-body-text, #000); } /* Custom checkbox built around a visually-hidden native input. */ .cc-prefs__checkbox { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .cc-prefs__check-box { flex-shrink: 0; width: 22px; height: 22px; background: var(--color-input-bg, #fff); border: 1px solid var(--color-border, #000); border-radius: 2px; position: relative; transition: background 0.2s ease, border-color 0.2s ease; } .cc-prefs__check-box::after { content: ""; position: absolute; left: 7px; top: 3px; width: 6px; height: 11px; border: solid var(--color-button-primary-text, #fff); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); transition: transform 0.15s ease; } .cc-prefs__checkbox:checked + .cc-prefs__check-box { background: var(--color-button-primary-background, #151515); border-color: var(--color-button-primary-background, #151515); } .cc-prefs__checkbox:checked + .cc-prefs__check-box::after { transform: rotate(45deg) scale(1); } .cc-prefs__checkbox:focus-visible + .cc-prefs__check-box { outline: 2px solid var(--color-border, #000); outline-offset: 2px; } .cc-prefs__checkbox:disabled + .cc-prefs__check-box { opacity: 0.6; cursor: not-allowed; } @media (max-width: 600px) { .cc-banner { left: var(--gap, 8px); right: var(--gap, 8px); bottom: var(--gap, 8px); max-width: none; } .cc-prefs__header-actions .cc-prefs__btn, .cc-banner__btn { flex-basis: 100%; } }