. */ .ksp-announcement > * { position: relative; z-index: 1; } .ksp-announcement__inner { display: flex; align-items: flex-start; gap: 14px; } .ksp-announcement__icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; background-color: rgba(30, 58, 138, 0.12); color: #1E3A8A; font-size: 1rem; } .ksp-announcement__content { flex: 1; min-width: 0; padding-top: 5px; } .ksp-announcement__title { color: #17306e; font-family: var(--font-heading); font-size: 1rem; } /* Tytul i tresc w jednej linii, dopoki jest miejsce - komunikat ma byc paskiem, nie akapitem. Na waskich ekranach tresc schodzi pod tytul (media ponizej). */ .ksp-announcement__body { color: #2b3a55; } .ksp-announcement__title + .ksp-announcement__body::before { content: ' '; } .ksp-announcement__link { flex-shrink: 0; align-self: center; display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; background-color: #1E3A8A; color: #fff; border-radius: 6px; font-size: 0.87rem; font-weight: 600; text-decoration: none; transition: background-color 0.2s ease, transform 0.2s ease; } .ksp-announcement__link:hover { background-color: #17306e; transform: translateY(-1px); } .ksp-announcement__link i { font-size: 0.85em; } .ksp-announcement__close { flex-shrink: 0; align-self: flex-start; width: 28px; height: 28px; padding: 0; background: none; border: none; border-radius: 50%; color: #55618a; font-size: 0.95rem; line-height: 1; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .ksp-announcement__close:hover { background-color: rgba(30, 58, 138, 0.12); color: #17306e; } /* --- Migotanie (pas ma "zyc", zeby bylo widac, ze komunikat jest aktywny) --- */ /* Dwa nakladajace sie sygnaly, oba delikatne: 1. oddech calego pasa - warstwa akcentu przechodzaca od 0 do kilku procent, 2. puls ikony - rozchodzacy sie pierscien i ledwie wyczuwalne powiekszenie. Wspolny rytm (--ksp-ann-tempo) sprawia, ze czyta sie to jak jeden efekt, a nie dwie niezalezne animacje. */ .ksp-announcement::before { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-color: var(--ksp-ann-accent); opacity: 0; animation: ksp-ann-breathe var(--ksp-ann-tempo) ease-in-out infinite; } .ksp-announcement__icon { animation: ksp-ann-pulse var(--ksp-ann-tempo) ease-out infinite; } @keyframes ksp-ann-breathe { 0%, 100% { opacity: 0; } 50% { opacity: var(--ksp-ann-breathe); } } @keyframes ksp-ann-pulse { 0% { box-shadow: 0 0 0 0 var(--ksp-ann-glow); transform: scale(1); } 45% { box-shadow: 0 0 0 8px rgba(0, 0, 0, 0); transform: scale(1.07); } 70%, 100% { box-shadow: 0 0 0 0 rgba(0, 0, 0, 0); transform: scale(1); } } /* Ruch nie jest jedynym nosnikiem informacji - komunikat i tak ma ikone, kolor wariantu i tresc. Przy wylaczonych animacjach zostaje statyczna obwodka ikony, zeby pas nie wygladal na martwy. */ @media (prefers-reduced-motion: reduce) { .ksp-announcement::before, .ksp-announcement__icon { animation: none; } .ksp-announcement__icon { box-shadow: 0 0 0 3px var(--ksp-ann-glow); } } /* --- Warianty --- */ .ksp-announcement--uwaga { background-color: #fdf6e3; border-color: rgba(180, 130, 20, 0.28); /* Uwaga migocze wyrazniej i szybciej niz informacja */ --ksp-ann-accent: #8a6410; --ksp-ann-glow: rgba(180, 130, 20, 0.38); --ksp-ann-breathe: 0.07; --ksp-ann-tempo: 2.8s; } .ksp-announcement--uwaga .ksp-announcement__icon { background-color: rgba(180, 130, 20, 0.16); color: #8a6410; } .ksp-announcement--uwaga .ksp-announcement__title { color: #6d4f0c; } .ksp-announcement--uwaga .ksp-announcement__body { color: #4d3c14; } .ksp-announcement--uwaga .ksp-announcement__link { background-color: #8a6410; } .ksp-announcement--uwaga .ksp-announcement__link:hover { background-color: #6d4f0c; } .ksp-announcement--uwaga .ksp-announcement__close { color: #7a5c1c; } .ksp-announcement--uwaga .ksp-announcement__close:hover { background-color: rgba(180, 130, 20, 0.16); } .ksp-announcement--pilne { background-color: #fdeceb; border-color: rgba(176, 42, 37, 0.3); /* Najszybszy rytm z trzech wariantow - nadal bez efektu alarmu */ --ksp-ann-accent: #a3231f; --ksp-ann-glow: rgba(176, 42, 37, 0.36); --ksp-ann-breathe: 0.075; --ksp-ann-tempo: 2.1s; } .ksp-announcement--pilne .ksp-announcement__icon { background-color: rgba(176, 42, 37, 0.14); color: #a3231f; } .ksp-announcement--pilne .ksp-announcement__title { color: #8c1d19; } .ksp-announcement--pilne .ksp-announcement__body { color: #5d2320; } .ksp-announcement--pilne .ksp-announcement__link { background-color: #a3231f; } .ksp-announcement--pilne .ksp-announcement__link:hover { background-color: #8c1d19; } .ksp-announcement--pilne .ksp-announcement__close { color: #8c1d19; } .ksp-announcement--pilne .ksp-announcement__close:hover { background-color: rgba(176, 42, 37, 0.14); } /* --- Responsywnosc --- */ /* Uklad kolumnowy dopiero ponizej 600 px. Wyzej pas miesci sie w jednym wierszu (ikona - tekst - przycisk) i jest o polowe nizszy niz rozbity na wiersze: przy 725 px to 97 px zamiast 186 px. Poprzedni prog 768 px wlaczal uklad telefonowy takze na tabletach i telefonach w poziomie, gdzie miejsca w wierszu jest az nadto. */ @media (max-width: 600px) { .ksp-announcement { padding: 12px 0; } /* Siatka zamiast zawijanego fleksa. Wczesniej tresc szla na pelna szerokosc (flex-basis 100%), przez co ikona i krzyzyk zostawaly same w pierwszym wierszu z pustka miedzy soba - na telefonie kosztowalo to caly wiersz. Teraz obok ikony stoi tytul, a tresc i przycisk ida pelna szerokoscia. */ .ksp-announcement__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 6px 10px; } /* Tytul i tresc wchodza wprost do siatki pasa, kazde do swojego pola */ .ksp-announcement__content { display: contents; } .ksp-announcement__icon { grid-column: 1; grid-row: 1; } .ksp-announcement__title { grid-column: 2; grid-row: 1; display: block; line-height: 1.3; } .ksp-announcement__close { grid-column: 3; grid-row: 1; align-self: center; /* css/fixes.css dokleja ponizej 768 px kazdemu