/* Diviskit Consent Banner — theme-agnostic, accessible, mobile-first. The banner is server-rendered and visible by default for new visitors. html.dkc-consent-given (set by an early script when a valid stored consent exists) hides it before first paint — no flash, no layout shift. */ #dkc-banner-root { --dkc-primary: #1d4ed8; --dkc-bg: #ffffff; --dkc-text: #111827; --dkc-muted: #4b5563; --dkc-border: #e5e7eb; --dkc-radius: 14px; --dkc-shadow: 0 20px 60px -12px rgba(0, 0, 0, .28); --dkc-btn-bg: #f3f4f6; --dkc-switch-off: #cbd5e1; } /* Dark scheme — explicit or system-driven (scheme class on #dkc-banner-root; inline admin vars always take precedence when present) */ #dkc-banner-root.dkc-scheme-dark { --dkc-bg: #1f2937; --dkc-text: #f9fafb; --dkc-muted: #d1d5db; --dkc-border: #374151; --dkc-btn-bg: #374151; --dkc-switch-off: #4b5563; } @media (prefers-color-scheme: dark) { #dkc-banner-root.dkc-scheme-auto { --dkc-bg: #1f2937; --dkc-text: #f9fafb; --dkc-muted: #d1d5db; --dkc-border: #374151; --dkc-btn-bg: #374151; --dkc-switch-off: #4b5563; } } /* Visibility */ #dkc-banner-root.dkc-hidden { display: none; } html.dkc-consent-given #dkc-banner-root:not(.dkc-visible) { display: none; } .dkc-view[hidden] { display: none !important; } /* Back link at the top of the preferences layer */ .dkc-back { appearance: none; background: none; border: 0; padding: 0; font: inherit; font-size: .78rem; font-weight: 600; color: var(--dkc-muted); cursor: pointer; margin-bottom: 10px; } .dkc-back:hover { color: var(--dkc-text); text-decoration: underline; text-underline-offset: 2px; } .dkc-back:focus-visible { outline: 2px solid var(--dkc-primary); outline-offset: 2px; border-radius: 4px; } /* Backdrop — only rendered for the modal template */ .dkc-backdrop { position: fixed; inset: 0; background: rgba(17, 24, 39, .5); backdrop-filter: blur(2px); z-index: 99998; } /* ---- Dialog base ---- Column layout: compact head / scrollable body / pinned action foot. The dialog itself never scrolls — .dkc-body does — so the action buttons stay reachable even with the prefs layer fully expanded. */ .dkc-dialog { position: fixed; z-index: 99999; background: var(--dkc-bg); color: var(--dkc-text); border: 1px solid var(--dkc-border); box-shadow: var(--dkc-shadow); font-family: inherit; font-size: 15px; line-height: 1.5; max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); display: flex; flex-direction: column; overflow: hidden; } .dkc-dialog:focus { outline: none; } .dkc-inner { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; } .dkc-body { flex: 1 1 auto; min-height: 0; padding: 2px 20px 16px; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .dkc-foot { flex: none; padding: 12px 20px 14px; border-top: 1px solid var(--dkc-border); } /* Gentle entrance — opacity only (transform would fight the template's own positioning transforms on card/modal). */ @keyframes dkc-fadein { from { opacity: 0; } } .dkc-dialog { animation: dkc-fadein .22s ease-out; } /* Header: cookie icon chip + title */ .dkc-head { display: flex; align-items: center; gap: 10px; padding: 18px 20px 10px; } .dkc-head-icon { flex: none; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; color: var(--dkc-primary); background: var(--dkc-btn-bg); } @supports (background: color-mix(in srgb, red, blue)) { .dkc-head-icon { background: color-mix(in srgb, var(--dkc-primary) 12%, transparent); } } .dkc-head-icon svg { display: block; } /* ---- Templates ---- */ /* Bar: full-width strip, top or bottom */ .dkc-tpl-bar { left: 0; right: 0; bottom: 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; } .dkc-tpl-bar.top { top: 0; bottom: auto; border-bottom: 1px solid var(--dkc-border); border-top: 0; } .dkc-tpl-bar .dkc-inner { width: 100%; max-width: 1080px; margin: 0 auto; } /* Card: centered floating card, top or bottom */ .dkc-tpl-card { left: 50%; transform: translateX(-50%); bottom: 16px; width: calc(100% - 24px); max-width: 720px; border-radius: var(--dkc-radius); } .dkc-tpl-card.top { top: 16px; bottom: auto; } /* Modal: centered with backdrop */ .dkc-tpl-modal { left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% - 32px); max-width: 560px; border-radius: var(--dkc-radius); } /* Corner: small box in a corner */ .dkc-tpl-corner { right: 16px; bottom: 16px; width: calc(100% - 32px); max-width: 400px; border-radius: var(--dkc-radius); } .dkc-tpl-corner.top { top: 16px; bottom: auto; } /* ---- Content ---- */ .dkc-title { margin: 0; font-size: 1.05rem; font-weight: 700; line-height: 1.3; color: var(--dkc-text); font-family: inherit; } .dkc-text { margin: 0 0 14px; color: var(--dkc-muted); font-size: .88rem; } .dkc-links { font-size: .76rem; margin: 12px 0 0; text-align: center; color: var(--dkc-muted); } .dkc-links a { color: var(--dkc-muted); text-decoration: underline; text-underline-offset: 2px; } .dkc-links a:hover { color: var(--dkc-text); } /* ---- Categories — hairline-separated accordion rows ---- */ .dkc-categories { border-top: 1px solid var(--dkc-border); } .dkc-cat { padding: 12px 0; border-bottom: 1px solid var(--dkc-border); } .dkc-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .dkc-cat-label { font-weight: 600; font-size: .85rem; } .dkc-cat-badge { flex: none; font-size: .68rem; font-weight: 600; letter-spacing: .02em; color: var(--dkc-muted); background: var(--dkc-btn-bg); padding: 3px 9px; border-radius: 999px; } .dkc-cat-locked .dkc-cat-label { color: var(--dkc-muted); } .dkc-cat-desc { margin: 6px 0 0; font-size: .78rem; color: var(--dkc-muted); } .dkc-cat-services { margin: 0; font-size: .74rem; color: var(--dkc-muted); } /* Expander: the whole left side of the head row toggles the panel — chevron + label + service-count pill; the switch stays a separate control so it never fights the accordion gesture. */ .dkc-cat-expand { appearance: none; flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0; background: none; border: 0; font: inherit; text-align: left; color: var(--dkc-text); cursor: pointer; } .dkc-cat-expand:hover .dkc-cat-label { text-decoration: underline; text-underline-offset: 2px; } .dkc-cat-expand:focus-visible { outline: 2px solid var(--dkc-primary); outline-offset: 2px; border-radius: 4px; } .dkc-cat-chevron { flex: none; color: var(--dkc-muted); transition: transform .18s ease; } .dkc-cat-expand.is-open .dkc-cat-chevron { transform: rotate(180deg); } .dkc-cat-count { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: .68rem; font-weight: 600; background: var(--dkc-btn-bg); color: var(--dkc-muted); } .dkc-cat-panel { margin-top: 8px; } /* Per-service list inside a category panel */ .dkc-service-list { padding-top: 8px; border-top: 1px solid var(--dkc-border); display: grid; gap: 6px; } .dkc-service { display: flex; flex-direction: column; gap: 2px; font-size: .8rem; } .dkc-service-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .dkc-service-label { color: var(--dkc-text); } /* Expandable per-service metadata (provider, purpose, policy link) */ .dkc-svc-details summary { font-size: .72rem; color: var(--dkc-muted); cursor: pointer; list-style: none; } .dkc-svc-details summary::before { content: 'ⓘ '; } .dkc-svc-details summary:hover { text-decoration: underline; } .dkc-svc-details[open] summary { margin-bottom: 2px; } .dkc-svc-purpose { margin: 0; font-size: .74rem; color: var(--dkc-text); } .dkc-svc-provider { margin: 2px 0 0; font-size: .72rem; color: var(--dkc-muted); } .dkc-svc-provider a { color: var(--dkc-primary); margin-left: 6px; } /* [diviskit_consent_services] — declaration block for the privacy policy */ .dkc-decl { margin: 1em 0; } .dkc-decl-actions { margin: 0 0 1.2em; } .dkc-decl-service { margin: 0 0 1.6em; padding-bottom: 1.2em; border-bottom: 1px solid #e5e7eb; } .dkc-decl-service:last-child { border-bottom: 0; } .dkc-decl-name { margin: 0 0 .5em; font-size: 1.05em; } .dkc-decl-table { width: 100%; border-collapse: collapse; margin: 0 0 .6em; font-size: .9em; } .dkc-decl-table th { text-align: left; vertical-align: top; width: 180px; padding: 4px 12px 4px 0; font-weight: 600; } .dkc-decl-table td { padding: 4px 0; } .dkc-decl-cookies { width: 100%; border-collapse: collapse; font-size: .85em; } .dkc-decl-cookies th, .dkc-decl-cookies td { text-align: left; padding: 5px 10px 5px 0; border-bottom: 1px solid #f0f0f1; } .dkc-decl-cookies th { font-weight: 600; } /* Compact switch variant for service rows */ .dkc-switch-sm { width: 32px; height: 18px; } .dkc-switch-sm .dkc-switch-track::after { top: 2px; left: 2px; width: 14px; height: 14px; } .dkc-switch-sm input:checked + .dkc-switch-track::after { transform: translateX(14px); } /* Master switch in a partially-granted category */ .dkc-switch input:indeterminate + .dkc-switch-track { background: var(--dkc-primary); opacity: .55; } .dkc-switch input:indeterminate + .dkc-switch-track::after { transform: translateX(9px); } .dkc-switch-sm input:indeterminate + .dkc-switch-track::after { transform: translateX(7px); } /* ---- Switch (real checkbox, styled) ---- */ .dkc-switch { position: relative; display: inline-block; flex: none; width: 40px; height: 22px; } .dkc-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .dkc-switch input:disabled { cursor: not-allowed; } .dkc-switch-track { position: absolute; inset: 0; background: var(--dkc-switch-off); border-radius: 999px; transition: background .18s ease; pointer-events: none; } .dkc-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; background: #fff; border-radius: 50%; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .18s ease; } .dkc-switch input:checked + .dkc-switch-track { background: var(--dkc-primary); } .dkc-switch input:checked + .dkc-switch-track::after { transform: translateX(18px); } .dkc-switch input:disabled + .dkc-switch-track { opacity: .55; } .dkc-switch input:focus-visible + .dkc-switch-track { outline: 2px solid var(--dkc-primary); outline-offset: 2px; } /* ---- Buttons ---- */ .dkc-actions { display: flex; gap: 8px; } .dkc-actions[hidden] { display: none !important; } .dkc-actions .dkc-btn { flex: 1 1 0; } .dkc-tpl-corner .dkc-actions { flex-direction: column; } .dkc-btn { appearance: none; border: 1px solid var(--dkc-border); background: var(--dkc-btn-bg); color: var(--dkc-text); padding: 10px 16px; border-radius: 10px; font-weight: 600; font-size: .85rem; font-family: inherit; cursor: pointer; transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; white-space: nowrap; } .dkc-btn:hover { filter: brightness(.96); } .dkc-btn:active { transform: translateY(1px); } .dkc-btn:focus-visible { outline: 2px solid var(--dkc-primary); outline-offset: 2px; } .dkc-btn-primary { background: var(--dkc-primary); border-color: var(--dkc-primary); color: #fff; } .dkc-btn-primary:hover { filter: brightness(1.1); } .dkc-btn-ghost { background: transparent; } .dkc-btn-ghost:hover { background: var(--dkc-btn-bg); filter: none; } /* ---- Floating preferences button ---- */ .dkc-fab { position: fixed; z-index: 99990; } .dkc-fab-left { left: 16px; bottom: 16px; } .dkc-fab-right { right: 16px; bottom: 16px; } .dkc-fab-btn { appearance: none; display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 9px 16px; font-weight: 600; font-size: .8rem; font-family: inherit; border: 1px solid var(--dkc-border, #e5e7eb); background: var(--dkc-fab-color, var(--dkc-primary, #1d4ed8)); color: var(--dkc-fab-text, #fff); box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .35); cursor: pointer; } .dkc-fab-btn:hover { filter: brightness(1.1); } .dkc-fab-btn:focus-visible { outline: 2px solid var(--dkc-fab-color, var(--dkc-primary, #1d4ed8)); outline-offset: 2px; } .dkc-fab-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; } /* Icon-only variant */ .dkc-fab-icon-btn { width: 40px; height: 40px; padding: 0; border-radius: 50%; justify-content: center; } .dkc-fab-icon-btn .dkc-fab-avatar { width: 22px; height: 22px; } .dkc-fab-icon { display: block; } /* ---- Branding ---- */ .dkc-branding { margin: 12px 0 0; font-size: .7rem; text-align: center; color: var(--dkc-muted); } @supports (color: color-mix(in srgb, red, blue)) { /* Muted derived from the configured text/bg pair — keeps contrast in every scheme, including custom light-scheme color overrides. */ .dkc-branding { color: color-mix(in srgb, var(--dkc-text) 62%, var(--dkc-bg)); } } .dkc-branding a { color: inherit; text-decoration: underline; text-underline-offset: 2px; text-decoration-color: color-mix(in srgb, currentColor 55%, transparent); } .dkc-branding a:hover { color: var(--dkc-text); text-decoration-color: currentColor; } /* ---- Footer link ---- */ .dkc-footer-link { text-align: center; font-size: 12px; margin: 8px 0; opacity: .75; } .dkc-footer-link button { appearance: none; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; } /* ---- Responsive ---- */ @media (max-width: 480px) { .dkc-actions { flex-direction: column; } } /* ---- Blocked embed placeholder ---- */ .dkc-embed { position: relative; display: flex; align-items: center; justify-content: center; background: #f3f4f6; border: 1px dashed #cbd5e1; border-radius: 10px; color: #111827; font-size: 14px; line-height: 1.5; text-align: center; margin: 1em 0; } .dkc-embed-inner { padding: 24px 20px; max-width: 420px; margin: 0 auto; } .dkc-embed-service { margin: 0 0 4px; font-weight: 700; font-size: .95rem; } .dkc-embed-note { margin: 0 0 14px; color: #4b5563; font-size: .82rem; } .dkc-embed-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; } .dkc-embed .dkc-btn { appearance: none; border: 1px solid #d1d5db; background: #fff; color: #111827; padding: 8px 14px; border-radius: 8px; font-weight: 600; font-size: .82rem; font-family: inherit; cursor: pointer; } .dkc-embed .dkc-btn-primary { background: #1d4ed8; border-color: #1d4ed8; color: #fff; } .dkc-embed .dkc-btn:hover { filter: brightness(.96); } .dkc-embed .dkc-btn:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; } @media (prefers-color-scheme: dark) { .dkc-embed { background: #1f2937; border-color: #374151; color: #f9fafb; } .dkc-embed-note { color: #d1d5db; } .dkc-embed .dkc-btn { background: #374151; border-color: #4b5563; color: #f9fafb; } } /* ---- Motion preferences ---- */ @media (prefers-reduced-motion: reduce) { .dkc-dialog { animation: none; } .dkc-switch-track, .dkc-switch-track::after, .dkc-btn { transition: none; } }