/* * CS Crumbwall · warstwa wizualna frontu * Creatives Studio · https://creativesstudio.pl * * Paleta banera (zmienne --cc-*) trafia do z ustawień panelu. * Tu są wyłącznie dodatki: pasek z podpisem na dole okna, lista kategorii * wstawiana shortcodem/hookiem oraz link ponownego otwarcia ustawień. */ #cc-main .cm, #cc-main .pm { box-shadow: 0 18px 48px -12px rgba( 22, 22, 29, .28 ); } #cc-main .cm__title { letter-spacing: -.01em; } .cs-cw-logo { display: block; max-height: 28px; margin: 0 0 10px; } .cs-cw-revoke-link { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; } /* Lista kategorii – karty zamiast klasycznej tabeli z ramkami */ .cs-cw-categories-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; } .cs-cw-categories-table th { padding: 4px 14px; font-size: .8em; text-transform: uppercase; letter-spacing: .06em; opacity: .7; text-align: left; } .cs-cw-categories-table td { padding: 12px 14px; background: rgba( 22, 22, 29, .04 ); text-align: left; vertical-align: top; } .cs-cw-categories-table td:first-child { border-radius: 10px 0 0 10px; font-weight: 600; box-shadow: inset 3px 0 0 #4f84f5; } .cs-cw-categories-table td:last-child { border-radius: 0 10px 10px 0; } /* Dolny pasek okna: logo witryny + podpis autora (wstawiany przez JS) */ .cs-cw-footer-row { box-sizing: border-box; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 20px 14px; border-top: 1px solid rgba( 127, 127, 127, .18 ); } .cs-cw-site-logo { display: block; max-height: 20px; max-width: 120px; width: auto; height: auto; } .cs-cw-branding { display: inline-flex; align-items: center; gap: 6px; line-height: 1; white-space: nowrap; text-decoration: none; opacity: .7; transition: opacity .2s ease; } .cs-cw-branding:hover, .cs-cw-branding:focus-visible { opacity: 1; } @media ( max-width: 520px ) { .cs-cw-footer-row { justify-content: center; padding: 8px 14px 12px; } .cs-cw-site-logo { display: none; } } /* ===================================================================== * Responsywność banera (nadpisania vanilla-cookieconsent v3) * ===================================================================== */ /* Napisy na przyciskach nigdy nie łamią się w pół słowa. */ #cc-main .cm__btn, #cc-main .pm__btn { white-space: nowrap; padding: .75em 1.25em; font-size: .9em; line-height: 1.2; } /* Grupa przycisków: kolejne przyciski zawijają się jako całość. */ #cc-main .cm__btn-group { flex-wrap: wrap; gap: .5em; } #cc-main .cm__btn-group .cm__btn { flex: 1 1 auto; margin: 0 !important; } #cc-main .cm__btns { gap: .5em; } /* Stopka z linkami – bez szarego pasa, cienka linia jak reszta. */ #cc-main .cm__footer { background: transparent; border-top: 1px solid rgba( 127, 127, 127, .18 ); padding-top: .7em; padding-bottom: .7em; } #cc-main .cm__links { gap: 1.2em; } .cs-cw-footer-row { border-top: 0; padding-top: 0; } /* Pasek: tekst i przyciski obok siebie, przyciski w stałej, rozsądnej kolumnie. */ #cc-main .cm--bar .cm__body { align-items: center; gap: 1.5em; } #cc-main .cm--bar .cm__texts { flex: 1 1 auto; min-width: 0; } #cc-main .cm--bar .cm__btns { flex: 0 0 auto; width: auto; max-width: 30em; min-width: 18em; border: 0; } /* Okienko w układzie „inline” – przyciski pod tekstem zamiast w wąskiej kolumnie. */ #cc-main .cm--box.cm--inline .cm__body, #cc-main .cm--cloud.cm--inline .cm__body { flex-direction: column; } #cc-main .cm--cloud .cm__btns, #cc-main .cm--box .cm__btns { width: 100%; max-width: none; border-left: 0; } /* Tablety: pasek układa się pionowo. */ @media ( max-width: 900px ) { #cc-main .cm--bar .cm__body { flex-direction: column; align-items: stretch; gap: 0; } #cc-main .cm--bar .cm__btns { max-width: none; min-width: 0; width: 100%; } } /* Telefony: przyciski jeden pod drugim na pełną szerokość, zgoda na górze. */ @media ( max-width: 560px ) { #cc-main .cm { max-height: 88vh; overflow-y: auto; } #cc-main .cm__btn-group { flex-direction: column; } #cc-main .cm__btn-group .cm__btn { width: 100%; } #cc-main .cm__title { font-size: 1.05em; } #cc-main .cm__desc { font-size: .9em; max-height: 38vh; overflow-y: auto; } #cc-main .cm__links { flex-wrap: wrap; } }