/* KaNaU - wygląd okna zgody i okna ustawień cookies (biblioteka: css/vendor/cookieconsent-3.1.0.css). Kolory wpisane na sztywno, bo plik działa też na /korepetycje/, które nie ma zmiennych z css/style.css. Paleta: ink-panel #1C2742, ink-line #2A3550, ivory #F2EDE4, slate #A7B1C1, ember #E08A3C, bottle #5E8B7E. */ #cc-main { color-scheme: dark; --cc-font-family: "Work Sans", system-ui, -apple-system, sans-serif; --cc-bg: #1C2742; --cc-primary-color: #F2EDE4; --cc-secondary-color: #C9CDD8; --cc-link-color: #A7B1C1; --cc-modal-border-radius: 12px; --cc-btn-border-radius: 6px; --cc-overlay-bg: rgba(6, 10, 20, 0.78); /* "Zgadzam się": ember (pomarańcz progu 70) - nie magenta, bo magenta to główne przyciski strony */ --cc-btn-primary-bg: #E08A3C; --cc-btn-primary-color: #0B1120; --cc-btn-primary-border-color: #E08A3C; --cc-btn-primary-hover-bg: #EBA05B; --cc-btn-primary-hover-color: #0B1120; --cc-btn-primary-hover-border-color: #EBA05B; /* "Dostosuj", "Odrzucam wszystko", "Zapisz mój wybór": ciche, ale czytelne jako przyciski */ --cc-btn-secondary-bg: transparent; --cc-btn-secondary-color: #A7B1C1; --cc-btn-secondary-border-color: #3A4666; --cc-btn-secondary-hover-bg: rgba(255, 255, 255, 0.04); --cc-btn-secondary-hover-color: #F2EDE4; --cc-btn-secondary-hover-border-color: #5A6788; --cc-separator-border-color: #2A3550; --cc-toggle-on-bg: #E08A3C; --cc-toggle-off-bg: #2A3550; --cc-toggle-on-knob-bg: #F2EDE4; --cc-toggle-off-knob-bg: #F2EDE4; --cc-toggle-enabled-icon-color: #0B1120; --cc-toggle-disabled-icon-color: #A7B1C1; --cc-toggle-readonly-bg: #5E8B7E; --cc-toggle-readonly-knob-bg: #F2EDE4; --cc-toggle-readonly-knob-icon-color: #5E8B7E; --cc-section-category-border: #2A3550; --cc-cookie-category-block-bg: #10182B; --cc-cookie-category-block-border: #2A3550; --cc-cookie-category-block-hover-bg: #172036; --cc-cookie-category-block-hover-border: #3A4666; --cc-cookie-category-expanded-block-bg: #10182B; --cc-cookie-category-expanded-block-hover-bg: #172036; --cc-footer-bg: transparent; --cc-footer-color: #A7B1C1; --cc-footer-border-color: transparent; --cc-webkit-scrollbar-bg: #2A3550; --cc-webkit-scrollbar-hover-bg: #3A4666; } #cc-main .cm, #cc-main .pm { border: 1px solid #2A3550; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.65); } #cc-main .cm__title, #cc-main .pm__title { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 500; letter-spacing: -0.01em; } /* ---------- okno zgody (pierwsza warstwa) ---------- */ /* Dwa rozmiary: "box wide" = duże okno na środku (i tak zasłaniamy ekran, więc ma być dobrze widoczne - decyzja 18.09.2026), "box" = małe okno w rogu na stronach prawnych (). */ #cc-main .cm__body { z-index: 1; } #cc-main .cm__texts { padding-top: 1.5rem; } #cc-main .cm__title { display: flex; align-items: center; gap: 0.6em; font-size: 1.3rem; line-height: 1.15; } #cc-main .cm__desc { font-size: 0.92rem; line-height: 1.55; } #cc-main .cm__desc .zg-link { display: inline-block; margin-top: 0.9em; color: #F2EDE4; font-weight: 500; text-decoration: underline; text-decoration-color: #E08A3C; text-underline-offset: 4px; } /* !important: na telefonie biblioteka dorysowuje linię nad przyciskami własnym !important */ #cc-main .cm__btns { border-top: 0 !important; padding-top: 0.4rem; padding-bottom: 1.4rem; } #cc-main .cm__btn, #cc-main .pm__btn { font-size: 0.9rem; min-height: 46px; } #cc-main .cm__btn--secondary, #cc-main .pm__btn--secondary { font-weight: 500; } #cc-main .cm--box:not(.cm--wide) { max-width: 26rem; } /* ciasteczko (img/ciasteczko.svg, rysunek własny): ikona przy tytule + duży, przycięty znak wodny w rogu okna */ #cc-main .zg-ciastko { flex: none; width: 1.45em; height: 1.45em; background: url("/img/ciasteczko.svg") center / contain no-repeat; } #cc-main .cm::after { content: ""; position: absolute; top: -2.2rem; right: -2rem; width: 9rem; height: 9rem; background: url("/img/ciasteczko.svg") center / contain no-repeat; opacity: 0.2; transform: rotate(-18deg); pointer-events: none; } /* duże okno */ #cc-main .cm--box.cm--wide { max-width: 46rem; } #cc-main .cm--wide::after { top: -3.6rem; right: -3.2rem; width: 17rem; height: 17rem; } #cc-main .cm--wide .cm__texts { padding-top: 2.6rem; } #cc-main .cm--wide .cm__title, #cc-main .cm--wide .cm__desc, #cc-main .cm--wide .cm__btns { padding-left: 2.8rem; padding-right: 2.8rem; } #cc-main .cm--wide .cm__title { font-size: 1.8rem; } #cc-main .cm--wide .cm__title + .cm__desc { margin-top: 1.2rem; } #cc-main .cm--wide .cm__desc { font-size: 1.02rem; line-height: 1.7; padding-bottom: 1.6rem; max-height: none; } #cc-main .cm--wide .cm__btns { padding-top: 0.6rem; padding-bottom: 2.6rem; } @media screen and (min-width: 641px) { /* Bez przycisku odmowy biblioteka wkłada oba przyciski do JEDNEJ grupy (.cm__btn-group--uneven). Duże okno: przyciski dosunięte do prawej, "Zgadzam się" na końcu. Kolejność w DOM (i dla klawiatury) zostaje: najpierw "Zgadzam się" - odwracamy tylko wizualnie. */ #cc-main .cm--box.cm--wide .cm__btn-group--uneven { display: flex; flex: 1; flex-direction: row-reverse; justify-content: flex-start; gap: 0.8rem; } #cc-main .cm--box.cm--wide .cm__btn { min-height: 58px; min-width: 12.5rem; font-size: 1rem; } #cc-main .cm--box.cm--wide .cm__btn:not(.cm__btn--secondary) { min-width: 17.5rem; } #cc-main .cm--box.cm--wide .cm__btn + .cm__btn { margin-left: 0; margin-top: 0; } /* małe okno w rogu (strony prawne): "Zgadzam się" szerszy (2:1), obok "Dostosuj" */ #cc-main .cm--box:not(.cm--wide) .cm__btn-group { grid-template-columns: 2fr 1fr; column-gap: 0.6rem; } #cc-main .cm--box:not(.cm--wide) .cm__btn-group .cm__btn + .cm__btn { margin-top: 0; } } /* telefon: biblioteka sama układa przyciski jeden pod drugim ("Zgadzam się" u góry); dajemy więcej oddechu */ @media screen and (max-width: 640px) { #cc-main .cm__title, #cc-main .cm__desc, #cc-main .cm__btns { padding-left: 1.5rem !important; padding-right: 1.5rem !important; } #cc-main .cm--wide::after { top: -2.6rem; right: -2.4rem; width: 12rem; height: 12rem; } #cc-main .cm--wide .cm__texts { padding-top: 1.9rem; } #cc-main .cm--wide .cm__title { font-size: 1.45rem; } #cc-main .cm--wide .cm__desc { font-size: 0.97rem; line-height: 1.6; padding-bottom: 1.2rem; max-height: 55vh; } #cc-main .cm--wide .cm__btns { padding-bottom: 1.6rem; } #cc-main .cm__btn { min-height: 54px; font-size: 1rem; } } /* ---------- okno ustawień ---------- */ #cc-main .pm__title { font-size: 1.25rem; } #cc-main .pm__section-desc a { text-decoration: underline; text-underline-offset: 3px; } #cc-main .pm__badge { background: rgba(94, 139, 126, 0.18); color: #9CC5B7; font-weight: 500; } #cc-main button:focus-visible, #cc-main a:focus-visible, #cc-main input:focus-visible + .toggle__icon { outline: 2px solid #F2EDE4; outline-offset: 2px; } /* ---------- linki prawne w stopkach (wspólne dla css/style.css i korepetycje/style.css) ---------- */ .footer-legal a, .footer-legal button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .footer-legal a:hover, .footer-legal button:hover { color: #F2EDE4; }