.cookie-consent {
position: fixed;
background-color: rgba(34, 42, 49, 0.9);
backdrop-filter: blur(5px);
bottom: 0;
left: 0;
right: 0;
max-width: 700px;
z-index: 40000;
color: var(--oct-text, #fff);
max-height: 100%;
overflow: hidden;
overflow-y: auto;
border-radius: 3px;
}
@media (min-width: 500px) {
.cookie-consent {
bottom: 20px;
left: 20px;
right: 20px;
}
}
.cookie-consent__inner {
padding: 20px;
}
@media (min-width: 500px) {
.cookie-consent__inner {
padding: 25px;
}
}
.cookie-consent__info h2, .cookie-consent__info h3 {
margin-top: 0;
margin-bottom: 10px;
color: var(--oct-text, #fff);
font-size: 24px !important;
}
.cookie-consent__info h2 {
font-size: 20px;
}
.cookie-consent__info h3 {
font-size: 18px;
margin-top: 4px;
}
.cookie-consent__info p {
font-size: 12px !important;
margin-bottom: 15px;
color: var(--oct-text, #fff);
}
.cookie-consent__info a {
color: var(--oct-text, #fff);
text-decoration: underline;
}
.cookie-consent__info a:hover {
color: var(--oct-text, #fff);
text-decoration: none;
}
.cookie-consent__main {
display: flex;
flex-direction: column;
gap: 1rem;
}
.cookie-consent-item {
display: inline-flex;
gap: 0.5rem;
align-items: flex-start;
margin: 0;
font-size: 14px;
}
.cookie-consent-item input {
width: 1rem;
height: 1rem;
}
.cookie-consent__btns {
margin-top: 2rem;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.cookie-consent__btn {
background-color: var(--oct-accent, #0094ff);
color: var(--oct-accent-txt, #ffffff);
border-color: transparent;
padding: 12px 20px;
transition: filter 0.2s ease-in-out, transform 0.1s;
border-radius: calc(var(--oct-radius, 3px) * 0.55);
font-size: 14px;
line-height: 1;
height: auto;
white-space: nowrap;
cursor: pointer;
}
.cookie-consent__btn:hover {
filter: brightness(0.85);
}
.cookie-consent__btn:active {
filter: brightness(0.75);
transform: scale(0.97);
}
/* =========================================================
OFFTEAM CONSENT MODE 1.2 — widżet, backdrop, customizacja
Sterowane zmiennymi CSS generowanymi z ACF (:root w )
========================================================= */
/* --- zaokrąglenie / cień / szerokość okna z panelu --- */
.cookie-consent {
border-radius: var(--oct-radius, 3px);
max-width: var(--oct-window-width, 700px);
box-shadow: var(--oct-shadow, none);
}
/* pozycja okna */
.cookie-consent.oct-pos-left { left: 20px; right: auto; }
.cookie-consent.oct-pos-right { right: 20px; left: auto; }
.cookie-consent.oct-pos-bcenter{ left: 50%; right: auto; transform: translateX(-50%); }
.cookie-consent.oct-pos-center { left: 50%; right: auto; top: 50%; bottom: auto; transform: translate(-50%, -50%); }
/* równa szerokość przycisków (3 w rzędzie), na mobile jeden pod drugim */
.cookie-consent__btn {
flex: 1 1 0;
text-align: center;
}
@media (max-width: 560px) {
.cookie-consent__btn { flex: 0 0 100%; }
}
/* --- MOBILE: okno przyklejone do obu krawędzi niezależnie od pozycji --- */
@media (max-width: 560px) {
.cookie-consent,
.cookie-consent.oct-pos-left,
.cookie-consent.oct-pos-right,
.cookie-consent.oct-pos-bcenter,
.cookie-consent.oct-pos-center {
left: 10px;
right: 10px;
bottom: 10px;
top: auto;
max-width: none;
transform: none;
}
/* ręczne łamania
w treści są dopasowane do desktopu —
na mobile je ukrywamy, tekst zawija się naturalnie.
Spacja przed
(dodawana w JS) zapobiega sklejaniu słów. */
.cookie-consent__info br { display: none; }
}
/* --- przyciemnienie strony (backdrop) --- */
.oct-backdrop {
position: fixed;
inset: 0;
background: var(--oct-backdrop, rgba(0,0,0,0.45));
z-index: 39000;
opacity: 0;
pointer-events: none;
transition: opacity 0.35s ease;
}
.oct-backdrop.is-visible {
opacity: 1;
pointer-events: auto;
}
/* --- WIDŻET (pill rozwijany) --- */
.oct-widget {
position: fixed;
z-index: 41000;
display: inline-flex;
align-items: center;
height: var(--oct-widget-size, 52px);
background: var(--oct-accent, #0094ff);
color: var(--oct-accent-txt, #ffffff);
border: 0;
cursor: pointer;
overflow: hidden;
padding: 0;
width: var(--oct-widget-size, 52px);
border-radius: calc(var(--oct-widget-size, 52px) / 2);
box-shadow: 0 6px 18px -4px rgba(0,0,0,.35);
transition: width .32s cubic-bezier(.4,0,.2,1), box-shadow .25s, transform .12s, filter .2s;
}
.oct-widget.oct-wpos-left { left: 20px; bottom: 20px; }
.oct-widget.oct-wpos-right { right: 20px; bottom: 20px; }
.oct-widget.oct-wpos-left15 { left: 20px; bottom: 15%; }
.oct-widget.oct-wpos-right15 { right: 20px; bottom: 15%; }
/* ikona = 2 warstwy: mono (maska, kolor accentu) + oryginalny kolorowy SVG */
.oct-widget__icon {
position: relative;
flex: 0 0 var(--oct-widget-size, 52px);
width: var(--oct-widget-size, 52px);
height: var(--oct-widget-size, 52px);
transition: transform .25s;
}
.oct-widget__icon::before,
.oct-widget__icon::after {
content: "";
position: absolute;
inset: 0;
transition: opacity .25s;
}
/* warstwa MONO w kolorze tekstu accentu — sylwetka na tle pigułki (spoczynek) */
.oct-widget__icon::before {
-webkit-mask: var(--oct-widget-mask) no-repeat center / 55% 55%;
mask: var(--oct-widget-mask) no-repeat center / 55% 55%;
background: var(--oct-accent-txt, #ffffff);
opacity: 1;
}
/* warstwa KOLOR — oryginalny kolorowy SVG (fade-in na hover; none dla mono) */
.oct-widget__icon::after {
background: var(--oct-widget-color-img, none) no-repeat center / 55% 55%;
opacity: 0;
}
.oct-widget__label {
white-space: nowrap;
font-size: 13.5px;
padding-right: 18px;
color: var(--oct-accent-txt, #fff);
opacity: 0;
transform: translateX(-6px);
transition: opacity .2s .05s, transform .25s;
}
/* HOVER wspólny: rozwija się + unosi */
.oct-widget:hover {
width: var(--oct-widget-expanded, 210px);
box-shadow: 0 10px 26px -6px rgba(0,0,0,.45);
transform: translateY(-2px);
}
.oct-widget:hover .oct-widget__label { opacity: 1; transform: translateX(0); }
.oct-widget:hover .oct-widget__icon { transform: scale(1.06); }
/* styl 1/2 (kolor): hover pokazuje oryginalny kolorowy SVG */
.oct-widget.oct-mode-color:hover .oct-widget__icon::before { opacity: 0; }
.oct-widget.oct-mode-color:hover .oct-widget__icon::after { opacity: 1; }
/* styl 3 (mono): hover przyciemnia jak buttony */
.oct-widget.oct-mode-dark:hover { filter: brightness(0.85); }
.oct-widget:active { transform: translateY(0) scale(.97); }
.oct-widget:focus-visible { outline: 3px solid var(--oct-accent, #0094ff); outline-offset: 2px; }
.oct-widget[hidden] { display: none !important; }
/* MOBILE: ukryj pływający widżet — powrót do ustawień przez link [oct_cookie_settings] w stopce */
@media (max-width: 560px) {
.oct-widget { display: none !important; }
}
/* Link „Ustawienia cookies" ze shortcode [oct_cookie_settings] — do stopki */
.oct-cookie-settings-link {
cursor: pointer;
background: none;
border: 0;
padding: 0;
font: inherit;
color: inherit;
text-decoration: underline;
}
.oct-cookie-settings-link:hover { text-decoration: none; }