/* * Doui: okno zgód. * * Od 0.6 okno rysuje doui.js własnym markupem, arkusz biblioteki nie jest * ładowany. Kolory i zaokrąglenie wchodzą zmiennymi z Doui_Frontend::inline_css(), * wartości poniżej to bezpieczne domyślne na wypadek, gdyby inline nie doszedł. */ #doui-cc { --doui-font: inherit; --doui-radius: 4px; --doui-radius-btn: 3px; --doui-bg: #ffffff; --doui-text: #12171c; --doui-brand: #1f5e86; --doui-on-brand: #ffffff; --doui-brand-hover: #1a506f; --doui-accent: #1f5e86; --doui-soft: #e9eef2; --doui-line: #ccdae4; --doui-muted: #4c5762; --doui-faint: #8a939c; --doui-sep: #eaeef1; --doui-border: #d8dee4; --doui-off: #8c96a1; color: var(--doui-text); font-family: var(--doui-font); font-size: 16px; line-height: 1.5; } #doui-cc[hidden] { display: none; } #doui-cc *, #doui-cc *::before, #doui-cc *::after { box-sizing: border-box; } #doui-cc button { font: inherit; margin: 0; } /* Fokus po kliknięciu myszą niczego nie wnosi, a motywy malują tu własne obramowania. Pierścień zostaje tylko dla klawiatury. */ #doui-cc button:focus, #doui-cc [tabindex]:focus, #doui-float:focus { box-shadow: none; outline: none; } #doui-cc button:focus-visible, #doui-cc input:focus-visible ~ .doui-switch__track, #doui-float:focus-visible { outline: 2px solid var(--doui-accent, #1f5e86); outline-offset: 2px; } /* * Okno biblioteki nigdy nie ma się pokazać. * * `autoShow: false` wyłącza tylko wywołanie „pokaż". Sam DOM okna zgody * biblioteka buduje zawsze, gdy odwiedzający nie ma jeszcze ważnej zgody, * i skoro nie ładujemy jej arkusza, ten DOM siada jako goły tekst na końcu * . Ta reguła jest zabezpieczeniem, nie dekoracją: nie usuwaj jej. */ #cc-main { display: none !important; } /* Warstwa i tło ------------------------------------------------------- */ #doui-cc .doui-overlay { background: rgba(18, 23, 28, .55); inset: 0; position: fixed; z-index: 2147483645; } /* Pasek ma nie zasłaniać strony, więc idzie bez przyciemnienia. */ #doui-cc.doui-root--bar .doui-overlay { display: none; } #doui-cc .doui-modal { background: var(--doui-bg); border: 1px solid rgba(0, 0, 0, .06); border-radius: var(--doui-radius); box-shadow: 0 28px 70px rgba(0, 0, 0, .34), 0 3px 10px rgba(0, 0, 0, .12); display: flex; flex-direction: column; max-height: calc(100vh - 3rem); overflow: hidden; position: fixed; z-index: 2147483646; } #doui-cc .doui-modal:focus { outline: none; } /* Okienko: pozycja z ustawień. */ #doui-cc .doui-modal--box, #doui-cc .doui-modal--cloud { left: 1.5rem; max-width: 48rem; top: 50%; transform: translateY(-50%); width: calc(100% - 3rem); } #doui-cc .doui-modal--cloud { max-width: 34rem; } #doui-cc .doui-modal--box.doui-modal--bottom-left, #doui-cc .doui-modal--cloud.doui-modal--bottom-left, #doui-cc .doui-modal--box.doui-modal--bottom-right, #doui-cc .doui-modal--cloud.doui-modal--bottom-right, #doui-cc .doui-modal--box.doui-modal--bottom-center, #doui-cc .doui-modal--cloud.doui-modal--bottom-center { bottom: 1.5rem; top: auto; transform: none; } #doui-cc .doui-modal--box.doui-modal--top-left, #doui-cc .doui-modal--cloud.doui-modal--top-left, #doui-cc .doui-modal--box.doui-modal--top-right, #doui-cc .doui-modal--cloud.doui-modal--top-right { bottom: auto; top: 1.5rem; transform: none; } #doui-cc .doui-modal--bottom-right, #doui-cc .doui-modal--top-right { left: auto; right: 1.5rem; } #doui-cc .doui-modal--bottom-center, #doui-cc .doui-modal--middle-center, #doui-cc .doui-modal--center { left: 50%; right: auto; transform: translateX(-50%); } #doui-cc .doui-modal--middle-center, #doui-cc .doui-modal--center { top: 50%; transform: translate(-50%, -50%); } /* Pasek na całą szerokość: bez zakładek, bez zasłaniania strony. */ #doui-cc .doui-modal--bar { border: none; border-radius: 0; border-top: 1px solid var(--doui-sep); bottom: 0; box-shadow: 0 -14px 40px rgba(0, 0, 0, .1); left: 0; max-width: none; right: 0; transform: none; width: 100%; } #doui-cc .doui-modal--bar.doui-modal--top-left, #doui-cc .doui-modal--bar.doui-modal--top-right, #doui-cc .doui-modal--bar.doui-modal--top-center { border-bottom: 1px solid var(--doui-sep); border-top: none; bottom: auto; box-shadow: 0 14px 40px rgba(0, 0, 0, .1); top: 0; } #doui-cc .doui-modal--bar .doui-tabs, #doui-cc .doui-modal--bar .doui-hint { display: none; } /* Zakładki ------------------------------------------------------------ */ #doui-cc .doui-tabs { align-items: center; border-bottom: 1px solid var(--doui-sep); display: flex; flex: 0 0 auto; gap: 1.75rem; padding: 0 1.75rem; } #doui-cc .doui-tab { background: none; border: none; border-bottom: 2px solid transparent; color: var(--doui-faint); cursor: pointer; font-size: .875rem; font-weight: 600; padding: .875rem 0 .6875rem; } #doui-cc .doui-tab:hover { color: var(--doui-muted); } #doui-cc .doui-tab.is-active { border-bottom-color: var(--doui-brand); color: var(--doui-accent); } #doui-cc .doui-close { background: none; border: none; color: var(--doui-faint); cursor: pointer; display: none; line-height: 0; margin-left: auto; padding: .5rem; } #doui-cc.is-closable .doui-close { display: block; } #doui-cc .doui-close:hover { color: var(--doui-text); } #doui-cc .doui-icon { height: 1em; width: 1em; } /* Treść zakładek ------------------------------------------------------ */ #doui-cc .doui-panes { flex: 1 1 auto; overflow-y: auto; } #doui-cc .doui-pane { display: none; padding: 1.5rem 1.75rem 1.375rem; } #doui-cc .doui-pane.is-active { display: block; } #doui-cc .doui-title { color: var(--doui-text); font-size: 1.125rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.3; margin: 0 0 .625rem; } #doui-cc .doui-desc { color: var(--doui-muted); font-size: .8125rem; line-height: 1.6; margin: 0 0 1.125rem; max-width: 48rem; } #doui-cc .doui-desc__more { display: none; } #doui-cc .doui-modal--bar .doui-desc__more { display: block; font-size: .84375rem; margin-top: .375rem; } #doui-cc .doui-inline-link, #doui-cc a { background: none; border: none; color: var(--doui-accent); cursor: pointer; font: inherit; font-weight: 600; padding: 0; text-decoration: none; } #doui-cc .doui-inline-link:hover, #doui-cc a:hover { color: var(--doui-text); text-decoration: none; } /* Chipy kategorii ----------------------------------------------------- */ #doui-cc .doui-chips { display: flex; flex-wrap: wrap; gap: .375rem; } #doui-cc .doui-chip { align-items: center; background: #ffffff; border: 1px solid var(--doui-border); border-radius: 1rem; color: var(--doui-muted); cursor: pointer; display: inline-flex; gap: .375rem; height: 2rem; padding: 0 .625rem 0 .25rem; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } #doui-cc .doui-chip__mark { align-items: center; background: #eef1f4; border-radius: 50%; color: var(--doui-off); display: flex; flex: 0 0 auto; height: 1.375rem; justify-content: center; width: 1.375rem; } #doui-cc .doui-chip__mark .doui-icon { height: .6875rem; width: .6875rem; } #doui-cc .doui-chip__name { font-size: .75rem; font-weight: 600; white-space: nowrap; } #doui-cc .doui-chip:hover { border-color: var(--doui-line); } #doui-cc .doui-chip.is-on { background: var(--doui-soft); border-color: var(--doui-line); color: var(--doui-accent); } #doui-cc .doui-chip.is-on .doui-chip__mark { background: var(--doui-brand); color: var(--doui-on-brand); } #doui-cc .doui-chip.is-locked { cursor: default; } #doui-cc .doui-hint { align-items: flex-start; color: var(--doui-faint); display: flex; font-size: .75rem; gap: .375rem; margin: .75rem 0 0; } #doui-cc .doui-hint .doui-icon { color: var(--doui-accent); flex: 0 0 auto; height: .875rem; margin-top: .0625rem; width: .875rem; } /* Zakładka Szczegóły -------------------------------------------------- */ #doui-cc .doui-cats { display: flex; flex-direction: column; gap: .5rem; } #doui-cc .doui-cat { border: 1px solid #e6eaee; border-radius: var(--doui-radius); display: grid; grid-template-columns: 1fr auto; overflow: hidden; } #doui-cc .doui-cat__head { align-items: center; background: none; border: none; color: var(--doui-text); cursor: pointer; display: flex; gap: .75rem; padding: .8125rem 0 .8125rem 1rem; text-align: left; } #doui-cc .doui-cat__arrow { align-items: center; background: #f1f3f5; border: 1px solid #e6eaee; border-radius: 50%; color: var(--doui-muted); display: flex; flex: 0 0 auto; height: 1.375rem; justify-content: center; width: 1.375rem; } #doui-cc .doui-cat__arrow .doui-icon { height: .75rem; width: .75rem; } #doui-cc .doui-cat.is-open .doui-cat__arrow .doui-icon { transform: rotate(180deg); } #doui-cc .doui-cat__name { font-size: .875rem; font-weight: 600; } #doui-cc .doui-cat__count { align-items: center; background: var(--doui-soft); border-radius: .6875rem; color: var(--doui-accent); display: inline-flex; font-size: .6875rem; font-weight: 700; height: 1.375rem; justify-content: center; min-width: 1.375rem; padding: 0 .375rem; } #doui-cc .doui-cat__body { grid-column: 1 / -1; padding: .75rem 1rem 1rem; } #doui-cc .doui-cat__desc { color: var(--doui-muted); font-size: .8125rem; line-height: 1.55; margin: 0 0 .625rem; } #doui-cc .doui-cookie { background: #f7f8f9; border-radius: var(--doui-radius); margin-bottom: .625rem; padding: .75rem .875rem; } #doui-cc .doui-cookie:last-child { margin-bottom: 0; } #doui-cc .doui-cookie__name { color: var(--doui-text); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8125rem; font-weight: 700; word-break: break-word; } #doui-cc .doui-cookie__purpose { color: var(--doui-muted); font-size: .8125rem; line-height: 1.5; margin-top: .25rem; } #doui-cc .doui-cookie__meta { color: var(--doui-faint); font-size: .75rem; margin-top: .5rem; } #doui-cc .doui-cookie__meta span { color: var(--doui-muted); } #doui-cc .doui-cookie__meta i { font-style: normal; padding: 0 .25rem; } /* Rozwinięta kategoria to aktywna zakładka: pełny kolor marki. */ #doui-cc .doui-cat.is-open { border-color: var(--doui-brand); } #doui-cc .doui-cat.is-open .doui-cat__head, #doui-cc .doui-cat.is-open > .doui-switch { background: var(--doui-brand); color: var(--doui-on-brand); } #doui-cc .doui-cat.is-open .doui-cat__arrow { background: var(--doui-on-brand); border-color: var(--doui-on-brand); color: var(--doui-brand); } #doui-cc .doui-cat.is-open .doui-cat__count { background: var(--doui-on-brand); color: var(--doui-brand); } /* Przełącznik --------------------------------------------------------- */ #doui-cc .doui-switch { align-items: center; display: flex; padding: 0 1rem 0 .75rem; position: relative; } #doui-cc .doui-switch input { cursor: pointer; height: 100%; left: 0; margin: 0; opacity: 0; position: absolute; top: 0; width: 100%; z-index: 1; } #doui-cc .doui-switch.is-locked input { cursor: default; } #doui-cc .doui-switch__track { background: var(--doui-off); border-radius: .8125rem; display: block; flex: 0 0 auto; height: 1.625rem; position: relative; transition: background-color .15s ease; width: 2.875rem; } #doui-cc .doui-switch__knob { align-items: center; background: #ffffff; border-radius: 50%; box-shadow: 0 1px 2px rgba(0, 0, 0, .25); color: var(--doui-off); display: flex; height: 1.25rem; justify-content: center; left: .1875rem; position: absolute; top: .1875rem; transition: left .15s ease; width: 1.25rem; } #doui-cc .doui-switch__knob .doui-icon { height: .625rem; width: .625rem; } #doui-cc .doui-switch input:checked ~ .doui-switch__track { background: var(--doui-brand); } #doui-cc .doui-switch input:checked ~ .doui-switch__track .doui-switch__knob { color: var(--doui-accent); left: 1.4375rem; } #doui-cc .doui-cat.is-open .doui-switch__track { background: rgba(255, 255, 255, .35); box-shadow: 0 0 0 1px var(--doui-on-brand); } #doui-cc .doui-cat.is-open .doui-switch__knob { background: var(--doui-on-brand); color: var(--doui-brand); } /* Zakładka O plikach cookie ------------------------------------------- */ #doui-cc .doui-about p { color: var(--doui-muted); font-size: .8125rem; line-height: 1.6; margin: 0 0 .875rem; max-width: 48rem; } #doui-cc .doui-about p:last-child { margin-bottom: 0; } /* Stopka -------------------------------------------------------------- */ #doui-cc .doui-footer { border-top: 1px solid var(--doui-sep); flex: 0 0 auto; padding: 1.125rem 1.75rem 1rem; } #doui-cc .doui-btns { display: flex; gap: .5rem; } #doui-cc .doui-btn { align-items: center; border-radius: var(--doui-radius-btn); border-style: solid; border-width: 1px; cursor: pointer; display: inline-flex; flex: 1 1 0; font-size: .8125rem; font-weight: 600; justify-content: center; line-height: 1.25; min-height: 2.625rem; min-width: 0; padding: .5rem .625rem; text-align: center; transition: background-color .15s ease, border-color .15s ease, color .15s ease; } #doui-cc .doui-btn[hidden] { display: none; } #doui-cc .doui-btn--fill { background: var(--doui-brand); border-color: var(--doui-brand); color: var(--doui-on-brand); } #doui-cc .doui-btn--fill:hover { background: var(--doui-brand-hover); border-color: var(--doui-brand-hover); } #doui-cc .doui-btn--border { background: transparent; border-color: var(--doui-brand); border-width: 1.5px; color: var(--doui-accent); } #doui-cc .doui-btn--border:hover { background: var(--doui-soft); } #doui-cc .doui-btn--ghost { background: transparent; border-color: var(--doui-border); color: var(--doui-muted); } #doui-cc .doui-btn--ghost:hover { background: #f2f4f6; border-color: var(--doui-line); } #doui-cc .doui-links { align-items: center; display: flex; font-size: .75rem; gap: 1rem; justify-content: space-between; margin-top: .875rem; } #doui-cc .doui-links a { font-size: .75rem; } #doui-cc .doui-powered { color: var(--doui-faint); margin-left: auto; white-space: nowrap; } #doui-cc .doui-powered a { color: var(--doui-muted); } /* Pasek: treść i przyciski w jednej linii ------------------------------ */ #doui-cc .doui-modal--bar .doui-panes { overflow: visible; } #doui-cc .doui-modal--bar .doui-pane { padding: 1.25rem 2.5rem .25rem; } #doui-cc .doui-modal--bar .doui-pane--consent.is-active { align-items: center; display: flex; gap: 2.5rem; } #doui-cc .doui-modal--bar .doui-lead { flex: 1 1 auto; max-width: 30rem; } #doui-cc .doui-modal--bar .doui-title { font-size: 1rem; margin-bottom: .375rem; } /* W pasku treść jest przycięta do trzech linii, reszta czeka w Szczegółach. */ #doui-cc .doui-modal--bar .doui-desc { -webkit-box-orient: vertical; -webkit-line-clamp: 3; display: -webkit-box; font-size: .84375rem; margin: 0; max-width: 30rem; overflow: hidden; } #doui-cc .doui-modal--bar .doui-chips { flex: 0 1 auto; } #doui-cc .doui-modal--bar .doui-footer { border-top: none; display: flex; gap: 2.5rem; padding: 0 2.5rem .875rem; } #doui-cc .doui-modal--bar .doui-btns { flex: 0 0 auto; margin-left: auto; order: 2; } #doui-cc .doui-modal--bar .doui-btn { flex: 0 0 auto; padding: .5rem 1.375rem; } #doui-cc .doui-modal--bar .doui-links { flex: 1 1 auto; margin-top: 0; order: 1; } /* Pływający przycisk powrotu ------------------------------------------ */ #doui-float { align-items: center; background: var(--doui-brand, #1f5e86); border: none; border-radius: 1.5rem; bottom: 1.25rem; box-shadow: 0 6px 18px rgba(0, 0, 0, .2); color: var(--doui-on-brand, #ffffff); cursor: pointer; display: inline-flex; gap: .625rem; height: 3rem; justify-content: center; left: 1.25rem; padding: 0; position: fixed; width: 3rem; z-index: 2147483644; } #doui-float.doui-float--bottom-right { left: auto; right: 1.25rem; } #doui-float.doui-float--light { background: #ffffff; border: 1px solid var(--doui-border, #d3dae0); box-shadow: 0 6px 18px rgba(0, 0, 0, .12); color: var(--doui-accent, #1f5e86); } #doui-float .doui-float__icon { height: 1.375rem; stroke-width: 1.8; width: 1.375rem; } #doui-float .doui-float__label { font-size: .84375rem; font-weight: 600; white-space: nowrap; } #doui-float.doui-float--wide { padding: 0 1.125rem 0 .875rem; width: auto; } /* Telefon ------------------------------------------------------------- */ @media (max-width: 720px) { /* Selektor z #doui-cc, żeby przebić reguły pozycji z dwiema klasami. */ #doui-cc .doui-modal--box, #doui-cc .doui-modal--cloud, #doui-cc .doui-modal--bar { border-radius: var(--doui-radius) var(--doui-radius) 0 0; bottom: 0; left: 0; max-height: 88vh; max-width: none; right: 0; top: auto; transform: none; width: 100%; } #doui-cc .doui-tabs { gap: 1.125rem; overflow-x: auto; padding: 0 1.125rem; } #doui-cc .doui-tab { font-size: .8125rem; white-space: nowrap; } #doui-cc .doui-pane, #doui-cc .doui-modal--bar .doui-pane { padding: 1.25rem 1.125rem 1rem; } #doui-cc .doui-modal--bar .doui-pane--consent.is-active { display: block; } #doui-cc .doui-modal--bar .doui-tabs { display: flex; } #doui-cc .doui-modal--bar .doui-hint { display: block; } #doui-cc .doui-modal--bar .doui-desc { display: block; margin-bottom: .5rem; max-width: none; } #doui-cc .doui-modal--bar .doui-desc__more { display: none; } #doui-cc .doui-chip { flex: 1 1 calc(50% - .25rem); } #doui-cc .doui-footer, #doui-cc .doui-modal--bar .doui-footer { display: block; padding: 1rem 1.125rem; } #doui-cc .doui-btns, #doui-cc .doui-modal--bar .doui-btns { flex-direction: column; margin-left: 0; } #doui-cc .doui-modal--bar .doui-btn { flex: 1 1 auto; } #doui-cc .doui-links, #doui-cc .doui-modal--bar .doui-links { margin-top: .875rem; } }