/* * Baner zgody, panel ustawień i pasek prawny w stopce. * * Widocznością banera steruje atrybut `data-fa-zgoda` ustawiany w `` — nie klasa * dokładana przez JS. Dzięki temu u kogoś, kto już zdecydował, baner nie zdąży mignąć, * a rezerwacja miejsca pod nim jest w CSS, więc treść nie skacze po jego zniknięciu. */ .fa-cmp { position: fixed; inset: auto 0 0 0; z-index: 60; background: var(--fa-ink-800); border-top: 2px solid var(--fa-orange-500); box-shadow: var(--fa-shadow-lift); } html[data-fa-zgoda] .fa-cmp { display: none; } /* Miejsce pod banerem rezerwuje CSS, nie skrypt — inaczej ostatnie CTA na stronie znika pod paskiem dokładnie u tych, którzy jeszcze nie zdecydowali. */ html:not([data-fa-zgoda]) body { padding-bottom: 148px; } /* Ta sama rama co treść strony: `.s1__main` i `.s0__main` mają 1440 px i 64 px marginesu bocznego, więc baner kończy się tam, gdzie kończy się kolumna nad nim. */ .fa-cmp__box { display: flex; align-items: center; gap: var(--fa-space-8); max-width: 1440px; margin-inline: auto; padding: var(--fa-space-6) var(--fa-space-16); } /* Tekst rozpycha się na całą wolną szerokość, więc przyciski siadają przy prawej krawędzi kolumny. Sam akapit dalej łamie się na 78 znakach — pełna szerokość 1440 px dałaby linie, po których oko nie trafia z powrotem na początek. */ .fa-cmp__tresc { flex: 1; } .fa-cmp__tytul { font-size: var(--fa-text-20); margin-bottom: var(--fa-space-2); } .fa-cmp__opis { max-width: 78ch; font-size: var(--fa-text-15); color: var(--fa-text-secondary); } .fa-cmp__link { white-space: nowrap; } .fa-cmp__akcje { display: flex; flex-direction: column; gap: var(--fa-space-2); flex-shrink: 0; } /* * „Odrzuć wszystko" wygląda dokładnie jak „Zgadzam się": ta sama wysokość, szerokość, * kolor i waga. Wyróżnienie jednej z odpowiedzi jest zwodniczym wzorem (EROD 03/2022), * a nie kwestią gustu — dlatego pomarańcz, który wszędzie indziej znaczy CTA, nie wchodzi * tu na żaden z dwóch przycisków. */ .fa-cmp__btn { min-width: 208px; height: 44px; padding: 0 var(--fa-space-6); background: var(--fa-ink-600); border: 1px solid var(--fa-ink-400); color: var(--fa-text-primary); font-family: inherit; font-size: var(--fa-text-15); font-weight: 500; cursor: pointer; transition: background-color 160ms ease; } .fa-cmp__btn:hover { background: var(--fa-ink-500); } .fa-cmp__ustawienia, .fa-cmp-stopka__btn { padding: 0; background: none; border: 0; color: var(--fa-text-secondary); font-family: inherit; font-size: var(--fa-text-13); text-decoration: underline; cursor: pointer; } .fa-cmp__ustawienia { height: 28px; } .fa-cmp__ustawienia:hover, .fa-cmp-stopka__btn:hover { color: var(--fa-orange-300); } /* --------------------------------------------------------------- panel wyboru */ .fa-cmp-panel { width: min(560px, calc(100vw - 32px)); padding: var(--fa-space-8); background: var(--fa-ink-800); border: 1px solid var(--fa-ink-500); color: var(--fa-text-primary); font-family: var(--fa-font-ui); } .fa-cmp-panel::backdrop { background: rgb(0 0 0 / 0.7); } .fa-cmp-panel__tytul { font-size: var(--fa-text-24); } .fa-cmp-panel__tytul:focus-visible { outline: 2px solid var(--fa-orange-300); outline-offset: 4px; } .fa-cmp-panel__kat { display: flex; flex-direction: column; gap: var(--fa-space-4); margin: var(--fa-space-6) 0; } .fa-cmp-panel__wiersz { display: grid; grid-template-columns: 20px 1fr; gap: var(--fa-space-3); padding: var(--fa-space-4); border: 1px solid var(--fa-ink-600); font-size: var(--fa-text-15); } .fa-cmp-panel__wiersz input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--fa-orange-500); } .fa-cmp-panel__opis { display: block; margin-top: var(--fa-space-1); font-size: var(--fa-text-13); color: var(--fa-text-secondary); } .fa-cmp-panel__akcje { display: flex; flex-wrap: wrap; gap: var(--fa-space-3); } .fa-cmp-panel__akcje .fa-cmp__btn { flex: 1 1 200px; } /* ------------------------------------------------------------ pasek w stopce */ /* * Kreska ciągnie się przez całą szerokość okna, a odnośniki kończą się przy prawej krawędzi * kolumny treści. Stąd margines liczony, a nie kontener o stałej szerokości: pseudoelement * stałby się tu kolejnym elementem flexa, a dodatkowy `div` w markupie to dwie linie HTML * za jedną linię CSS-a. */ .fa-cmp-stopka { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--fa-space-2) var(--fa-space-6); padding: var(--fa-space-6) max(var(--fa-space-16), calc((100% - 1440px) / 2 + var(--fa-space-16))); border-top: var(--fa-hairline); font-size: var(--fa-text-13); } .fa-cmp-stopka a { color: var(--fa-text-secondary); text-decoration: none; } .fa-cmp-stopka a:hover { color: var(--fa-orange-300); } /* ----------------------------------------------------------------- do 720 px */ @media (max-width: 720px) { .fa-cmp__box { flex-direction: column; align-items: stretch; gap: var(--fa-space-4); padding: var(--fa-space-4); } .fa-cmp-stopka { justify-content: center; padding: var(--fa-space-6) var(--fa-space-4); } .fa-cmp__tytul { font-size: var(--fa-text-18); } .fa-cmp__opis { font-size: var(--fa-text-13); } .fa-cmp__btn { min-width: 0; width: 100%; } .fa-cmp__akcje { gap: var(--fa-space-3); } .fa-cmp__ustawienia { height: 36px; } html:not([data-fa-zgoda]) body { padding-bottom: 296px; } } @media (prefers-reduced-motion: reduce) { .fa-cmp__btn { transition-duration: 1ms; } }