/* Banner zgody na cookies — wlasny, zastepuje plugin Mobirise (assets/web/assets/cookies-alert-plugin/). Tamten byl czysto dekoracyjny: stylowal sie inline, hardkodowal stary teal #34a4a2 i nie blokowal GA4, ktore i tak startowalo w . Tutaj banner jest sprzezony z Google Consent Mode v2 (patrz scripts/cookie-consent.js) i realnie decyduje, czy GA4 zapisze cokolwiek na urzadzeniu. Forma: szklana karta w lewym dolnym rogu, ten sam jezyk wizualny co navbar (rgba(--color-primary) + backdrop-filter) i ta sama skala zaokraglen co karty (--radius-md). */ .cookie-consent { position: fixed; z-index: 1060; /* nad navbarem (1050 w Mobirise), pod modalami Bootstrapa */ left: 1.25rem; bottom: 1.25rem; width: min(26rem, calc(100vw - 2.5rem)); padding: 1.5rem; border-radius: var(--radius-md); border: 1px solid rgba(var(--color-white-rgb), 0.35); background: rgba(var(--color-white-rgb), 0.82); backdrop-filter: blur(16px) saturate(120%); -webkit-backdrop-filter: blur(16px) saturate(120%); box-shadow: 0 12px 40px rgba(var(--color-shadow-rgb), 0.18); color: var(--color-muted-text); font-family: "Work Sans", -apple-system, "Helvetica Neue", sans-serif; /* Stan poczatkowy — skrypt zdejmuje .cookie-consent--hidden po pierwszej klatce, zeby wejscie bylo animowane, a nie skokowe. */ transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.165, 0.84, 0.44, 1); } .cookie-consent--hidden { opacity: 0; transform: translateY(1rem); pointer-events: none; } .cookie-consent__title { margin: 0 0 0.5rem; font-family: "Rubik", -apple-system, "Helvetica Neue", sans-serif; font-size: 1.0625rem; font-weight: 500; line-height: 1.3; color: var(--color-dark-text); } .cookie-consent__text { margin: 0 0 1.25rem; font-size: 0.875rem; line-height: 1.6; } .cookie-consent__text a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 2px; } .cookie-consent__text a:hover, .cookie-consent__text a:focus-visible { color: var(--color-primary-dark); } .cookie-consent__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .cookie-consent__btn { flex: 1 1 8rem; padding: 0.6rem 1.25rem; border: 1px solid transparent; border-radius: var(--radius-pill); font-size: 0.875rem; font-weight: 500; line-height: 1.4; text-align: center; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .cookie-consent__btn:focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 2px; } .cookie-consent__btn--accept { background: var(--color-primary); color: var(--color-white); } .cookie-consent__btn--accept:hover { background: var(--color-primary-deep); } .cookie-consent__btn--reject { background: transparent; border-color: rgba(var(--color-primary-rgb), 0.4); color: var(--color-primary); } .cookie-consent__btn--reject:hover { background: rgba(var(--color-primary-rgb), 0.1); border-color: var(--color-primary); } /* Na telefonie karta idzie na pelna szerokosc u dolu — przy 26rem w rogu zostawalaby waska szpara, ktora wyglada na blad layoutu. */ @media (max-width: 575px) { .cookie-consent { left: 0.75rem; right: 0.75rem; bottom: 0.75rem; width: auto; padding: 1.25rem; } /* "Nie zgadzam sie" nie miesci sie obok "Zgadzam sie" przy 375px i lamie sie na dwie linie. Ukladamy przyciski w kolumne; column-reverse stawia akceptacje na gorze, zachowujac w DOM kolejnosc reject-first (odrzucenie jako pierwsze w kolejnosci tabulacji). */ .cookie-consent__actions { flex-direction: column-reverse; } /* W kolumnie flex-grow rozciaga przyciski na WYSOKOSC — stad reset bazy. */ .cookie-consent__btn { flex: 0 0 auto; width: 100%; } } @media (prefers-reduced-motion: reduce) { .cookie-consent { transition: none; } } /* Przycisk "zmien zgode" w polityce prywatnosci — czyta sie jak link w biegnacym tekscie, ale musi byc