/* Dolna nawigacja (D-39).
*
* Arkusz leży w public/ CELOWO: korzystają z niego dwa różne światy — aplikacja
* Next (przez w layoucie) i statyczny skaner (przez skaner-api.js).
* Gdyby style żyły w module CSS Nexta, skaner musiałby mieć własną kopię i pasek
* rozjechałby się przy pierwszej poprawce koloru.
*/
.sticky-nawigacja {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 50;
display: grid;
grid-template-columns: repeat(4, 1fr);
/* Bez tego pasek wchodzi pod kreskę gestu na iPhonie i w pasek nawigacji
Androida — sekcje stają się nieklikalne dokładnie na dole ekranu. */
padding-bottom: env(safe-area-inset-bottom, 0px);
border-top: 1px solid rgba(255, 255, 255, 0.08);
background: rgba(8, 11, 24, 0.92);
backdrop-filter: blur(12px);
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.sticky-nawigacja a {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.15rem;
/* 3rem wysokości + padding = pole dotyku powyżej 44 px na każdym telefonie */
min-height: 3rem;
padding: 0.45rem 0.25rem 0.5rem;
color: #6b7799;
font-size: 0.62rem;
font-weight: 700;
letter-spacing: 0.06em;
text-decoration: none;
text-transform: uppercase;
-webkit-tap-highlight-color: transparent;
transition: color 0.15s ease;
}
.sticky-nawigacja a:active {
color: #cbd3e4;
}
.sticky-nawigacja a[aria-current="page"] {
color: #5bc8e8;
}
/* Kreska nad aktywną sekcją — sam kolor ikony bywa nieczytelny w słońcu */
.sticky-nawigacja a[aria-current="page"]::before {
content: "";
position: absolute;
top: -1px;
width: 2rem;
height: 2px;
border-radius: 999px;
background: #5bc8e8;
}
.sticky-nawigacja a {
position: relative;
}
.sticky-nawigacja svg {
width: 22px;
height: 22px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
/* Aktywna ikona wypełniona — rozpoznawalna bez czytania podpisu */
.sticky-nawigacja a[aria-current="page"] svg {
fill: rgba(91, 200, 232, 0.18);
}
/* Miejsce na pasek pod treścią strony. Bez tego ostatni element każdego ekranu
chowa się za paskiem — a jest nim zwykle przycisk albo ostatni rząd kart.
*
* Zapas wchodzi DO ŚRODKA , nie na . Padding na zostawiał pod
* każdą stroną pas surowej czerni: gradient tła żyje na kontenerze strony, więc
* kończył się nad paddingiem zamiast go pokrywać. Widać to było na każdym ekranie
* i tylko na zrzucie całej strony. */
.sticky-z-nawigacja > main {
padding-bottom: calc(4.25rem + env(safe-area-inset-bottom, 0px));
}
/* Skaner: pasek znika, gdy na naklejce gra treść. Kamera z nałożonym wideo to
sedno produktu i nie ma nad nią wisieć chrom aplikacji (decyzja właściciela). */
.sticky-nawigacja.sticky-ukryta {
transform: translateY(110%);
pointer-events: none;
}
.sticky-nawigacja {
transition: transform 0.25s ease, color 0.15s ease;
}
@media (prefers-reduced-motion: reduce) {
.sticky-nawigacja {
transition: none;
}
}