/** * Kormuth GDPR — banner štýly * * Reaguje na [data-theme="dark|light"] z kormuth-site-manager. * Použiteľný aj samostatne — má vlastné default farby. */ .kk-gdpr-banner { --gdpr-gold: #b89567; --gdpr-gold-light: #d4b88e; --gdpr-bg: #fefcf8; --gdpr-bg-2: #fdf7eb; --gdpr-text: #3b3530; --gdpr-text-soft: #6b6058; --gdpr-border: rgba(184, 149, 103, 0.2); --gdpr-shadow: rgba(0, 0, 0, 0.18); position: fixed; z-index: 9998; /* pod lightboxom (9999), nad všetkým ostatným */ max-width: 540px; width: calc(100% - 32px); padding: 28px 30px 22px; background: linear-gradient(180deg, var(--gdpr-bg) 0%, var(--gdpr-bg-2) 100%); color: var(--gdpr-text); border-radius: 6px; border: 1px solid var(--gdpr-border); box-shadow: 0 20px 60px var(--gdpr-shadow), 0 0 0 1px rgba(0,0,0,0.04); font-family: 'Jost', sans-serif; font-size: 14px; line-height: 1.55; animation: kkGdprIn .5s cubic-bezier(.2,.8,.2,1); } /* DARK theme — reaguje na z kormuth-site-manager */ [data-theme="dark"] .kk-gdpr-banner { --gdpr-gold: #d4b88e; --gdpr-gold-light: #e8d4a8; --gdpr-bg: #1a1510; --gdpr-bg-2: #14100c; --gdpr-text: #d4c8b5; --gdpr-text-soft: #9a8f7e; --gdpr-border: rgba(212, 184, 142, 0.22); --gdpr-shadow: rgba(0, 0, 0, 0.6); } /* Pozície */ .kk-gdpr-banner--bottom-center { left: 50%; bottom: 24px; transform: translateX(-50%); } .kk-gdpr-banner--bottom-left { left: 24px; bottom: 24px; } .kk-gdpr-banner--bottom-right { right: 24px; bottom: 24px; } .kk-gdpr-banner--top-center { left: 50%; top: 24px; transform: translateX(-50%); } /* Skrytý hidden cez JS pri inite, animácia pri zobrazení */ .kk-gdpr-banner[hidden] { display: none; } @keyframes kkGdprIn { from { opacity: 0; transform: translateY(20px) translateX(var(--center-x, 0)); } to { opacity: 1; transform: translateY(0) translateX(var(--center-x, 0)); } } .kk-gdpr-banner--bottom-center, .kk-gdpr-banner--top-center { --center-x: -50%; } /* Ornament hore */ .kk-gdpr__ornament { position: absolute; top: -10px; left: 50%; transform: translateX(-50%); background: var(--gdpr-bg); color: var(--gdpr-gold); font-size: 14px; padding: 0 10px; } /* Nadpis */ .kk-gdpr__title { font-family: 'Cormorant Garamond', 'Cormorant', Georgia, serif; font-weight: 400; font-size: 22px; margin: 0 0 12px; color: var(--gdpr-text); letter-spacing: 0.5px; text-align: center; } /* Body */ .kk-gdpr__body { margin: 0 0 14px; color: var(--gdpr-text); font-size: 13.5px; text-align: center; } /* Privacy link */ .kk-gdpr__link { margin: 0 0 18px; text-align: center; font-size: 12px; } .kk-gdpr__link a { color: var(--gdpr-gold); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; } .kk-gdpr__link a:hover { border-bottom-color: var(--gdpr-gold); } /* Action buttons */ .kk-gdpr__actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; } .kk-gdpr__btn { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--gdpr-gold); border-radius: 100px; background: transparent; color: var(--gdpr-text); font-family: 'Jost', sans-serif; font-size: 10.5px; font-weight: 500; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; transition: all .25s cubic-bezier(.2,.8,.2,1); white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .kk-gdpr__btn:hover { background: var(--gdpr-gold); color: #fff; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(184, 149, 103, 0.3); } .kk-gdpr__btn--primary { background: var(--gdpr-gold); color: #fff; } .kk-gdpr__btn--primary:hover { background: var(--gdpr-gold-light); box-shadow: 0 6px 18px rgba(184, 149, 103, 0.45); } .kk-gdpr__btn--ghost { color: var(--gdpr-text-soft); border-color: var(--gdpr-text-soft); } .kk-gdpr__btn--ghost:hover { background: var(--gdpr-text-soft); color: var(--gdpr-bg); } /* ════════════════════ SETTINGS (expanded view) ════════════════════ */ .kk-gdpr__settings { /* Rovnaký layout ako compact, ale s vyšším max-height */ } .kk-gdpr__settings[hidden] { display: none; } .kk-gdpr__cats { display: flex; flex-direction: column; gap: 12px; margin: 18px 0; max-height: 320px; overflow-y: auto; padding-right: 8px; scrollbar-width: thin; scrollbar-color: var(--gdpr-gold) transparent; } .kk-gdpr__cats::-webkit-scrollbar { width: 4px; } .kk-gdpr__cats::-webkit-scrollbar-thumb { background: var(--gdpr-gold); border-radius: 2px; } .kk-gdpr__cat { display: block; padding: 12px 14px; border: 1px solid var(--gdpr-border); border-radius: 4px; background: var(--gdpr-bg-2); cursor: pointer; transition: border-color .2s, background .2s; } .kk-gdpr__cat:hover { border-color: var(--gdpr-gold); } .kk-gdpr__cat-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 6px; } .kk-gdpr__cat-label { font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: var(--gdpr-text); } .kk-gdpr__cat-desc { margin: 4px 0 0; font-size: 12px; color: var(--gdpr-text-soft); line-height: 1.5; } /* iOS-style switch */ .kk-gdpr__switch { position: relative; width: 40px; height: 22px; flex-shrink: 0; } .kk-gdpr__switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .kk-gdpr__switch-track { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.18); border-radius: 100px; transition: background .25s; } .kk-gdpr__switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; box-shadow: 0 2px 4px rgba(0,0,0,0.18); transition: transform .25s cubic-bezier(.2,.8,.2,1); } .kk-gdpr__switch input:checked ~ .kk-gdpr__switch-track { background: var(--gdpr-gold); } .kk-gdpr__switch input:checked ~ .kk-gdpr__switch-track::after { transform: translateX(18px); } .kk-gdpr__switch input:disabled ~ .kk-gdpr__switch-track { opacity: 0.55; cursor: not-allowed; } .kk-gdpr__switch input:disabled ~ .kk-gdpr__switch-track::after { background: #ddd; } /* ════════════════════ RE-OPEN BUTTON (patka) ════════════════════ */ .kk-gdpr-reopen { position: fixed; /* Music player má bottom: 20px a výšku ~60px → posunieme nad neho */ bottom: 95px; left: 20px; z-index: 90; padding: 8px 14px; background: var(--gdpr-bg, rgba(254, 252, 248, 0.92)); backdrop-filter: blur(8px); color: var(--gdpr-text, #3b3530); border: 1px solid var(--gdpr-border, rgba(184, 149, 103, 0.25)); border-radius: 100px; font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 1.5px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.08); transition: all .25s; opacity: 0; visibility: hidden; transform: translateY(10px); } .kk-gdpr-reopen.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } .kk-gdpr-reopen:hover { background: var(--gdpr-gold, #b89567); color: #fff; border-color: var(--gdpr-gold, #b89567); transform: translateY(-2px); } [data-theme="dark"] .kk-gdpr-reopen { background: rgba(20, 16, 12, 0.92); color: #d4c8b5; border-color: rgba(212, 184, 142, 0.22); } /* ════════════════════ MOBILE ════════════════════ */ @media (max-width: 600px) { .kk-gdpr-banner { width: calc(100% - 16px); padding: 22px 22px 18px; font-size: 13px; } .kk-gdpr-banner--bottom-center, .kk-gdpr-banner--bottom-left, .kk-gdpr-banner--bottom-right { left: 8px; right: 8px; bottom: 8px; transform: none; } .kk-gdpr-banner--bottom-center { --center-x: 0; } .kk-gdpr__title { font-size: 19px; } .kk-gdpr__actions { flex-direction: column; } .kk-gdpr__btn { width: 100%; min-width: 0; } .kk-gdpr-reopen { bottom: 78px; left: 12px; font-size: 10px; padding: 6px 12px; } }