/** * Consent Mode Banner — style frontu. * Domyślnie dziedziczy typografię strony; kolory sterowane zmiennymi z panelu. */ /* Zmienne domyślne (nadpisywane inline z ustawień). */ :root { --ccmb-bg: #ffffff; --ccmb-text: #1f2933; --ccmb-primary-bg: #1f2933; --ccmb-primary-text: #ffffff; --ccmb-secondary-bg: #eef1f4; --ccmb-secondary-text: #1f2933; --ccmb-radius: 12px; --ccmb-max-width: 880px; --ccmb-shadow: 0 6px 28px rgba( 15, 23, 42, 0.14 ); --ccmb-gap: 18px; --ccmb-font: inherit; } /* Domyślnie ukryty; pokazywany przez klasę na (brak zgody) lub przez JS. */ #ccmb-root { display: none; } html.ccmb-needs-consent #ccmb-root, #ccmb-root.ccmb-visible { display: block; } /* Reset wewnątrz — font wg ustawienia „Dopasuj do motywu" (inherit) lub własny stack. */ #ccmb-root, #ccmb-root * { box-sizing: border-box; font-family: var( --ccmb-font, inherit ); } /* --- Overlay (opcjonalny) --- */ .ccmb-overlay { display: none; } #ccmb-root.ccmb-has-overlay .ccmb-overlay { display: block; position: fixed; inset: 0; background: rgba( 15, 23, 42, 0.55 ); z-index: 2147483000; animation: ccmb-fade 0.2s ease; } /* --- Kontener banera --- */ .ccmb-banner, .ccmb-prefs { position: fixed; z-index: 2147483001; background: var( --ccmb-bg ); color: var( --ccmb-text ); border: 1px solid rgba( 0, 0, 0, 0.06 ); border-radius: var( --ccmb-radius ); box-shadow: var( --ccmb-shadow ); padding: 24px 26px; width: calc( 100% - 32px ); max-width: var( --ccmb-max-width ); line-height: 1.5; animation: ccmb-slide 0.28s ease; } .ccmb-banner[hidden], .ccmb-prefs[hidden] { display: none !important; } /* Kontener dialogu przyjmuje fokus programowo (tabindex=-1) — bez widocznej obwódki na całym oknie. */ .ccmb-banner:focus, .ccmb-prefs:focus { outline: none; } /* --- Pozycjonowanie (desktop) --- */ .ccmb-pos-bottom-center .ccmb-banner, .ccmb-pos-bottom-center .ccmb-prefs { left: 50%; bottom: 20px; transform: translateX( -50% ); } .ccmb-pos-bottom-left .ccmb-banner, .ccmb-pos-bottom-left .ccmb-prefs { left: 20px; bottom: 20px; max-width: 460px; } .ccmb-pos-bottom-right .ccmb-banner, .ccmb-pos-bottom-right .ccmb-prefs { right: 20px; bottom: 20px; max-width: 460px; } .ccmb-pos-top-center .ccmb-banner, .ccmb-pos-top-center .ccmb-prefs { left: 50%; top: 20px; transform: translateX( -50% ); } .ccmb-pos-center .ccmb-banner, .ccmb-pos-center .ccmb-prefs, .ccmb-layout-modal .ccmb-banner, .ccmb-layout-modal .ccmb-prefs { left: 50%; top: 50%; transform: translate( -50%, -50% ); max-width: 560px; } /* Layout pasek — pełna szerokość. */ .ccmb-layout-bar .ccmb-banner { left: 0; right: 0; bottom: 0; transform: none; width: 100%; max-width: none; border-radius: 0; display: flex; align-items: center; gap: 24px; } .ccmb-layout-bar.ccmb-pos-top-center .ccmb-banner { top: 0; bottom: auto; } .ccmb-layout-bar .ccmb-banner__actions { margin-top: 0; flex-shrink: 0; } /* --- Logo --- */ .ccmb-logo { margin-bottom: 14px; } .ccmb-logo img { height: var( --ccmb-logo-h, 44px ); width: auto; max-width: 100%; display: block; } /* --- Treść --- */ .ccmb-banner__title, .ccmb-prefs__title { margin: 0 0 8px; font-size: 1.15em; font-weight: 700; } .ccmb-banner__body, .ccmb-prefs__intro { margin: 0; font-size: 0.95em; opacity: 0.92; } .ccmb-policy-link { color: inherit; text-decoration: underline; } /* --- Przyciski --- */ .ccmb-banner__actions, .ccmb-prefs__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: var( --ccmb-gap ); justify-content: flex-end; } /* Desktop: większy odstęp tekstu od przycisków w banerze (+5px). Na mobile przywracany niżej. */ .ccmb-banner__actions { margin-top: calc( var( --ccmb-gap ) + 5px ); } .ccmb-btn { appearance: none; border: 1px solid transparent; border-radius: calc( var( --ccmb-radius ) * 0.6 ); padding: 11px 20px; font-size: 0.95em; font-weight: 600; cursor: pointer; transition: filter 0.15s ease, transform 0.05s ease; line-height: 1.2; } .ccmb-btn:hover { filter: brightness( 0.95 ); } .ccmb-btn:active { transform: translateY( 1px ); } .ccmb-btn:focus-visible { outline: 2px solid var( --ccmb-primary-bg ); outline-offset: 2px; } .ccmb-btn--primary { background: var( --ccmb-primary-bg ); color: var( --ccmb-primary-text ); } .ccmb-btn--secondary { background: var( --ccmb-secondary-bg ); color: var( --ccmb-secondary-text ); border-color: rgba( 0, 0, 0, 0.08 ); } .ccmb-btn--ghost { background: transparent; color: inherit; opacity: 0.75; padding-left: 8px; padding-right: 8px; text-decoration: underline; text-underline-offset: 3px; } .ccmb-btn--ghost:hover { opacity: 1; filter: none; background: transparent; } /* "Ustawienia" (ghost) wypchnięte w lewo, oddzielone od pary Odrzuć/Akceptuj. */ .ccmb-banner__actions .ccmb-btn--ghost { margin-right: auto; } /* --- Panel preferencji --- */ .ccmb-prefs__list { margin: 18px 0; max-height: 46vh; overflow-y: auto; } .ccmb-cat { padding: 14px 0; border-top: 1px solid rgba( 0, 0, 0, 0.08 ); } .ccmb-cat:first-child { border-top: 0; } .ccmb-cat__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ccmb-cat__title { font-weight: 700; } .ccmb-cat__always { font-size: 0.82em; opacity: 0.7; } .ccmb-cat__desc { margin: 6px 0 0; font-size: 0.88em; opacity: 0.85; } /* Lista cookies w panelu preferencji. */ .ccmb-cookies { margin-top: 8px; font-size: 0.85em; } .ccmb-cookies summary { cursor: pointer; opacity: 0.8; user-select: none; } .ccmb-cookies__list { margin: 8px 0 0; padding-left: 18px; } .ccmb-cookies__list li { margin-bottom: 4px; } .ccmb-cookies__list code { background: rgba( 0, 0, 0, 0.06 ); padding: 1px 5px; border-radius: 3px; } .ccmb-cookies__meta { opacity: 0.7; } /* --- Przełącznik (switch) --- */ .ccmb-switch { position: relative; display: inline-flex; flex-shrink: 0; width: 46px; height: 26px; cursor: pointer; } .ccmb-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .ccmb-switch__slider { position: absolute; inset: 0; background: #c7ced6; border-radius: 999px; transition: background 0.2s ease; } .ccmb-switch__slider::before { content: ''; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: #fff; border-radius: 50%; transition: transform 0.2s ease; box-shadow: 0 1px 3px rgba( 0, 0, 0, 0.3 ); } .ccmb-switch input:checked + .ccmb-switch__slider { background: var( --ccmb-primary-bg ); } .ccmb-switch input:checked + .ccmb-switch__slider::before { transform: translateX( 20px ); } .ccmb-switch input:focus-visible + .ccmb-switch__slider { outline: 2px solid var( --ccmb-primary-bg ); outline-offset: 2px; } /* --- Floating button (ponowne otwarcie) --- */ .ccmb-floating { position: fixed; left: 18px; bottom: 18px; z-index: 2147482000; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border: 1px solid rgba( 0, 0, 0, 0.1 ); border-radius: 999px; background: var( --ccmb-bg ); color: var( --ccmb-text ); font-size: 0.85em; font-weight: 600; cursor: pointer; box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.14 ); } .ccmb-floating:hover { filter: brightness( 0.97 ); } .ccmb-floating__icon { flex-shrink: 0; } /* Tryb "sama ikona" — okrągły przycisk. */ .ccmb-floating--icon { width: 48px; height: 48px; padding: 0; border-radius: 50%; justify-content: center; } .ccmb-floating--icon .ccmb-floating__label { display: none; } /* Ukryj floating, gdy baner wymusza wybór lub jest otwarty. */ html.ccmb-needs-consent .ccmb-floating, body:has( #ccmb-root.ccmb-visible ) .ccmb-floating { display: none; } /* Trigger ze shortcode wygląda jak link, nie przycisk. */ .ccmb-link-trigger { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; } /* --- Responsywność (mobile) --- */ @media ( max-width: 600px ) { .ccmb-banner, .ccmb-prefs { left: 0 !important; right: 0 !important; bottom: 0 !important; top: auto !important; transform: none !important; width: 100%; max-width: none; border-radius: var( --ccmb-radius ) var( --ccmb-radius ) 0 0; max-height: 92vh; overflow-y: auto; } .ccmb-layout-bar .ccmb-banner { display: block; } .ccmb-banner__actions, .ccmb-prefs__actions { justify-content: stretch; } .ccmb-banner__actions .ccmb-btn, .ccmb-prefs__actions .ccmb-btn { flex: 1 1 100%; } /* Mobile: kolejność przycisków — najpierw Akceptuj, potem Odrzuć, na końcu Ustawienia. */ .ccmb-banner__actions .ccmb-btn--primary { order: 1; } .ccmb-banner__actions .ccmb-btn--secondary { order: 2; } .ccmb-banner__actions .ccmb-btn--ghost { order: 3; } /* Mobile: w panelu preferencji „Akceptuję wszystkie" na górze (reszta bez zmian: Odrzuć, Zapisz). */ .ccmb-prefs__actions .ccmb-btn--primary { order: -1; } /* Mobile zachowuje pierwotny odstęp tekst–przyciski (zwiększenie +5px dotyczy tylko desktopu). */ .ccmb-banner__actions { margin-top: var( --ccmb-gap ); } .ccmb-floating__label { display: none; } } /* --- Animacje --- */ @keyframes ccmb-slide { from { opacity: 0; transform: translateY( 16px ) translateX( var( --ccmb-tx, 0 ) ); } } @keyframes ccmb-fade { from { opacity: 0; } } @media ( prefers-reduced-motion: reduce ) { .ccmb-banner, .ccmb-prefs, .ccmb-overlay, .ccmb-switch__slider, .ccmb-switch__slider::before { animation: none; transition: none; } }