/* SK Consent Banner — theme-agnostic, accessible, mobile-first. The banner is server-rendered and visible by default for new visitors. html.skc-consent-given (set by an early script when a valid stored consent exists) hides it before first paint — no flash, no layout shift. */ #skc-banner-root { --skc-primary: #1d4ed8; --skc-bg: #ffffff; --skc-text: #111827; --skc-muted: #4b5563; --skc-border: #e5e7eb; --skc-radius: 14px; --skc-shadow: 0 20px 60px -12px rgba(0, 0, 0, .28); --skc-btn-bg: #f3f4f6; --skc-switch-off: #cbd5e1; } /* Dark scheme — explicit or system-driven (scheme class on #skc-banner-root; inline admin vars always take precedence when present) */ #skc-banner-root.skc-scheme-dark { --skc-bg: #1f2937; --skc-text: #f9fafb; --skc-muted: #d1d5db; --skc-border: #374151; --skc-btn-bg: #374151; --skc-switch-off: #4b5563; } @media (prefers-color-scheme: dark) { #skc-banner-root.skc-scheme-auto { --skc-bg: #1f2937; --skc-text: #f9fafb; --skc-muted: #d1d5db; --skc-border: #374151; --skc-btn-bg: #374151; --skc-switch-off: #4b5563; } } /* Visibility */ #skc-banner-root.skc-hidden { display: none; } html.skc-consent-given #skc-banner-root:not(.skc-visible) { display: none; } /* Backdrop — only rendered for the modal template */ .skc-backdrop { position: fixed; inset: 0; background: rgba(17, 24, 39, .5); backdrop-filter: blur(2px); z-index: 99998; } /* ---- Dialog base ---- */ .skc-dialog { position: fixed; z-index: 99999; background: var(--skc-bg); color: var(--skc-text); border: 1px solid var(--skc-border); box-shadow: var(--skc-shadow); font-family: inherit; font-size: 15px; line-height: 1.5; max-height: calc(100dvh - 24px); overflow-y: auto; -webkit-overflow-scrolling: touch; } .skc-dialog:focus { outline: none; } .skc-inner { padding: 20px; } /* ---- Templates ---- */ /* Bar: full-width strip, top or bottom */ .skc-tpl-bar { left: 0; right: 0; bottom: 0; border-radius: 0; border-left: 0; border-right: 0; border-bottom: 0; } .skc-tpl-bar.top { top: 0; bottom: auto; border-bottom: 1px solid var(--skc-border); border-top: 0; } .skc-tpl-bar .skc-inner { max-width: 1080px; margin: 0 auto; display: grid; gap: 4px 24px; grid-template-columns: 1fr auto; align-items: center; } .skc-tpl-bar .skc-categories { grid-column: 1 / -1; } .skc-tpl-bar .skc-actions { grid-column: 2; grid-row: 1 / span 3; align-self: center; flex-direction: column; } .skc-tpl-bar .skc-title { grid-column: 1; } /* Card: centered floating card, top or bottom */ .skc-tpl-card { left: 50%; transform: translateX(-50%); bottom: 16px; width: calc(100% - 24px); max-width: 720px; border-radius: var(--skc-radius); } .skc-tpl-card.top { top: 16px; bottom: auto; } /* Modal: centered with backdrop */ .skc-tpl-modal { left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% - 32px); max-width: 560px; border-radius: var(--skc-radius); } /* Corner: small box in a corner */ .skc-tpl-corner { right: 16px; bottom: 16px; width: calc(100% - 32px); max-width: 400px; border-radius: var(--skc-radius); } .skc-tpl-corner.top { top: 16px; bottom: auto; } /* ---- Content ---- */ .skc-title { margin: 0; font-size: 1.1rem; font-weight: 700; line-height: 1.3; } .skc-text { margin: 8px 0 10px; color: var(--skc-muted); font-size: .9rem; } .skc-links { font-size: .8rem; margin-bottom: 14px; } .skc-links a { color: var(--skc-primary); text-decoration: underline; text-underline-offset: 2px; } .skc-links a:hover { opacity: .8; } /* ---- Categories ---- */ .skc-categories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; } .skc-cat { padding: 12px; border: 1px solid var(--skc-border); border-radius: 10px; } .skc-cat-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .skc-cat-label { font-weight: 600; font-size: .85rem; } .skc-cat-desc { margin: 6px 0 0; font-size: .78rem; color: var(--skc-muted); } /* ---- Switch (real checkbox, styled) ---- */ .skc-switch { position: relative; display: inline-block; flex: none; width: 40px; height: 22px; } .skc-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .skc-switch input:disabled { cursor: not-allowed; } .skc-switch-track { position: absolute; inset: 0; background: var(--skc-switch-off); border-radius: 999px; transition: background .18s ease; pointer-events: none; } .skc-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; } .skc-switch input:checked + .skc-switch-track { background: var(--skc-primary); } .skc-switch input:checked + .skc-switch-track::after { transform: translateX(18px); } .skc-switch input:disabled + .skc-switch-track { opacity: .55; } .skc-switch input:focus-visible + .skc-switch-track { outline: 2px solid var(--skc-primary); outline-offset: 2px; } /* ---- Buttons ---- */ .skc-actions { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; } .skc-tpl-bar .skc-actions, .skc-tpl-corner .skc-actions { flex-direction: column; align-items: stretch; } .skc-tpl-corner .skc-actions .skc-btn { width: 100%; } .skc-btn { appearance: none; border: 1px solid var(--skc-border); background: var(--skc-btn-bg); color: var(--skc-text); padding: 9px 14px; border-radius: 9px; 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; } .skc-btn:hover { filter: brightness(.96); } .skc-btn:active { transform: translateY(1px); } .skc-btn:focus-visible { outline: 2px solid var(--skc-primary); outline-offset: 2px; } .skc-btn-primary { background: var(--skc-primary); border-color: var(--skc-primary); color: #fff; } .skc-btn-primary:hover { filter: brightness(1.1); } .skc-btn-ghost { background: transparent; } .skc-btn-ghost:hover { background: var(--skc-btn-bg); filter: none; } /* ---- Floating preferences button ---- */ .skc-fab { position: fixed; z-index: 99990; } .skc-fab-left { left: 16px; bottom: 16px; } .skc-fab-right { right: 16px; bottom: 16px; } .skc-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(--skc-border, #e5e7eb); background: var(--skc-primary, #1d4ed8); color: #fff; box-shadow: 0 8px 24px -8px rgba(0, 0, 0, .35); cursor: pointer; } .skc-fab-btn:hover { filter: brightness(1.1); } .skc-fab-btn:focus-visible { outline: 2px solid var(--skc-primary, #1d4ed8); outline-offset: 2px; } .skc-fab-avatar { width: 18px; height: 18px; border-radius: 50%; object-fit: cover; } /* Icon-only variant */ .skc-fab-icon-btn { width: 40px; height: 40px; padding: 0; border-radius: 50%; justify-content: center; } .skc-fab-icon-btn .skc-fab-avatar { width: 22px; height: 22px; } .skc-fab-icon { display: block; } /* ---- Footer link ---- */ .skc-footer-link { text-align: center; font-size: 12px; margin: 8px 0; opacity: .75; } .skc-footer-link button { appearance: none; background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; cursor: pointer; font: inherit; } /* ---- Responsive ---- */ @media (max-width: 600px) { .skc-categories { grid-template-columns: 1fr; } .skc-tpl-bar .skc-inner { grid-template-columns: 1fr; } .skc-tpl-bar .skc-actions { grid-column: 1; grid-row: auto; flex-direction: row; flex-wrap: wrap; } .skc-tpl-bar .skc-actions .skc-btn { flex: 1 1 auto; } .skc-actions .skc-btn { flex: 1 1 auto; } } /* ---- Motion preferences ---- */ @media (prefers-reduced-motion: reduce) { .skc-switch-track, .skc-switch-track::after, .skc-btn { transition: none; } }