/* =====================================================================
* Hero mobilny — strona główna, telefon.
*
* Prog 767 px, nie 640 z makiety: to na nim main.css i tak chowa haslo
* (.navbar h1 { display:none }) i przebudowuje pasek. Przy 640 zostalby
* pas 641-767 ze starym hero bez naglowka, czyli gorszy stan niz oba
* warianty osobno.
*
* Hero desktopowy zyje dalej w .navbar > .main-container — tutaj go chowamy
* i pokazujemy .hero-m. Naglowek jest jeden i wspolny (rozbity na
* .hero-line1 / .hero-line2 w views/main.php), wiec w dokumencie nie ma
* drugiego naglowka.
*
* Tokeny przez var(--token, fallback) — arkusz tokenow nie jest ladowany
* w serwisie (ustawia globalnie html/body/a).
* ===================================================================== */
/* Obie linie hasla sa teraz spanami zamiast
— bez display:block skleilyby
sie w jedna linie na desktopie. Regula poza media query, bo dotyczy takze
szerokich ekranow (arkusz laduje sie wylacznie na stronie glownej). */
.navbar h1 .hero-line1,
.navbar h1 .hero-line2 { display: block; }
@media (max-width: 767px) {
/* --- ramy: hero na pelna wysokosc pierwszego ekranu --- */
/* main.css przy <=991 px daje .navbar position:fixed, a body.home .content
rezerwuje pod nia 225/200 px. Na pelnoekranowym hero to nie ma sensu:
pasek wraca do przeplywu, przewija sie razem z trescia, a rezerwacja
znika. Belka (.navbar-top) zostaje jednak przypieta u gory — tak jak przed
zmiana, gdy przypieta byla cala .navbar. main.css przy <=991 px daje jej
position:static (bo wtedy fixed byl rodzic), wiec przywracamy fixed tutaj
i rezerwujemy na nia miejsce paddingiem. box-sizing:border-box, zeby ten
padding miescil sie w 100dvh, a nie dokladal sie do niego. */
body.home .navbar {
/* Jeden margines boczny dla calego hero — blok hasla i .hero-m musza go
dzielic, inaczej naglowek rozjezdza sie z karta. Wartosc przychodzi
z mobile_menu.css (--nav-pad), zeby hero, pasek z logo i menu
mobilne mialy wspolna linie wciecia; fallback na wypadek, gdyby ten
arkusz sie nie zaladowal. */
--hero-pad: var(--nav-pad, clamp(20px, 7vw, 32px));
/* Zmierzona wysokosc .navbar-top: 13 px paddingu z gory + wiersz z logo
+ 13 px z dolu. Bylo 65 px, dopoki logo mialo margin-top: 5 px —
mobile_menu.css ten margines zdejmuje, wiec wiersz i cala belka sa
o te 5 px nizsze. */
--hero-bar: 60px;
box-sizing: border-box;
position: static;
min-height: 100vh;
min-height: 100dvh; /* dvh: pasek adresu w przegladarce nie utnie dolu */
display: flex;
flex-direction: column;
/* Rezerwujemy tylko na belke. Kompaktowa wyszukiwarka na pierwszym
ekranie jest schowana (patrz nizej), wiec nie zabiera hero miejsca. */
padding-top: var(--hero-bar);
padding-bottom: 0;
}
body.home .navbar-top {
position: fixed;
top: 0;
left: 0;
right: 0;
}
body.home .content { padding-top: 0; }
/* Deseń tylko w prawym dolnym rogu, pod trescia, kotwiczony do dolu —
nie moze podchodzic pod logo. */
body.home .navbar {
background-color: #4bc599;
background-image: url("../images/png/ekor_bg.png");
background-repeat: no-repeat;
background-size: 1150px auto;
background-position: right -30px bottom -16px;
}
/* Bez reguly na .navbar > * — (0,2,0) nadpisywalo .navbar-top { position: fixed }
z main.css, przez co belka wypadala z pozycjonowania i zjezdzala o caly
padding-top rezerwowany na nia samą. Deseń jest tlem .navbar, wiec dzieci
i tak rysuja sie nad nim bez ustawiania position. */
/* --- hero desktopowy: zostaje w DOM, znika z ekranu --- */
/* Rzad "Popularne:" znika — jego role przejela lista najczesciej szukanych
w hero. */
body.home .navbar .hero-quick-subjects { display: none !important; }
/* Kompaktowa wyszukiwarka przypieta pod belka. Handler .fixed w main.js:110
dotyczy tylko szerokosci >991 px, wiec na telefonie przypinamy ja tutaj.
Na pierwszym ekranie jest schowana za belka — hero ma wlasna karte
wyszukiwarki, wiec dwie naraz sa zbedne. Wjezdza dopiero, gdy ta karta
wyjedzie pod belke; przelacza to klasa .hero-search-pinned na ,
nadawana przez hero_mobile.js. */
body.home .navbar .hero-desktop-search {
position: fixed;
top: var(--hero-bar);
left: 0;
right: 0;
width: auto;
margin: 0;
border-radius: 0;
z-index: 149; /* tuz pod .navbar-top, ktora ma 150 */
/* Chowa sie w gore, pod belke — ta ma wyzszy z-index, wiec ja zaslania.
visibility, nie tylko opacity: pole ma zniknac tez z kolejnosci Tab.
Zmiana visibility bez czasu trwania, ale z opoznieniem rownym reszcie,
zeby przy chowaniu poczekala na koniec przesuniecia. */
transform: translateY(-100%);
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: transform 0.18s ease-out, opacity 0.18s ease-out, visibility 0s linear 0.18s;
/* Pasek jest pelnej szerokosci, wiec wciecia musi dac padding.
Bez tego lupka siedziala 14 px od krawedzi, a przycisk 9 px —
podczas gdy logo i pozycje menu stoja na --hero-pad. */
box-sizing: border-box;
padding: 0 var(--hero-pad);
}
body.home.hero-search-pinned .navbar .hero-desktop-search {
transform: none;
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: transform 0.18s ease-out, opacity 0.18s ease-out, visibility 0s;
}
/* Ikona lupy jest tlem pola, wiec jej pozycje liczymy od krawedzi pola,
a ta stoi juz na wcieciu — stad 0. padding-left = szerokosc ikony
(22 px) + odstep. */
body.home .navbar .hero-desktop-search #top-search {
background-position: 0 center;
padding-left: 34px;
margin-top: 13px;
margin-bottom: 13px;
}
body.home .navbar .hero-desktop-search .btn {
margin-right: 0;
margin-top: 8px;
}
/* .main-container niesie teraz tylko haslo.
margin-top:auto tu i margin-bottom:auto na .hero-m centruja PARE blokow
(haslo + karta + najczesciej szukane) w przestrzeni pod belka. Samo
flex:1 na .hero-m centrowalo tylko jego zawartosc, a haslo zostawalo
przyklejone do gory. */
body.home .navbar > .main-container {
width: auto;
margin: auto 0 0;
padding: 0 var(--hero-pad);
order: 1;
}
/* --- skalowanie typografii ---
Rozmiary ze specyfikacji sa dobrane pod ~390 px szerokosci (iPhone 14).
Zeby na 320 px nic sie nie lamalo, a na 430-767 px nie wygladalo drobno,
kazdy rozmiar idzie przez clamp(min, Xvw, max), gdzie X = rozmiar/390*100.
Dolne granice sa twarde: pole wyszukiwarki nie moze zejsc ponizej 16 px,
bo iOS zoomuje wtedy strone przy focusie. */
/* --- grubosc pisma ---
views/main.php sciaga Roboto w wagach 100/300/400/500. Wszystko powyzej
(600, 700, 800 ze specyfikacji) przegladarka pogrubialaby sztucznie na bazie
piatki — stad rozmazany, za ciezki rysunek liter. 500 jest wiec maksimum;
jesli naglowek ma byc kiedys naprawde boldem, trzeba najpierw dopisac 700
do zapytania o font.
Haslo idzie na 100 (Roboto Thin) — waga jest realnie pobierana, wiec rysunek
liter jest prawdziwy, a nie wychudzony syntetycznie. */
/* --- blok hasla --- */
body.home .navbar h1 {
display: block; /* main.css chowa je na tym progu */
margin: 0;
padding: 0;
text-align: left;
letter-spacing: -0.01em;
}
body.home .navbar h1 .hero-line1 {
display: block;
font-size: clamp(26px, 8.2vw, 40px);
font-weight: 100;
line-height: 1.12;
color: #fff;
}
/* Druga linia o stopien ciezsza od hasla: 100 przy 15 px na zieleni bylo
za cienkie. 300 to nastepna waga realnie pobierana (Roboto 100/300/400/500),
wiec rysunek liter jest prawdziwy, nie pogrubiony syntetycznie. */
body.home .navbar h1 .hero-line2 {
display: block;
margin-top: 10px;
font-size: clamp(15px, 4.36vw, 21px);
font-weight: 300;
line-height: 1.35;
letter-spacing: 0;
color: rgba(255, 255, 255, 0.9);
}
/* --- kontener tresci hero --- */
.hero-m {
order: 2;
flex: 0 0 auto;
/* Odstep od bloku hasla. Nie da sie go zrobic przez gap na .navbar, bo ten
rozepchnalby tez belke u gory. margin-top nie psuje centrowania —
auto-marginesy (tu bottom, na .main-container top) licza sie po nim. */
margin-top: 24px;
margin-bottom: auto;
display: flex;
flex-direction: column;
justify-content: center;
gap: 24px;
padding: 0 var(--hero-pad) 24px;
position: relative;
}
.hero-m,
.hero-m * { box-sizing: border-box; }
/* Etykiety dla czytnikow ekranu — pola maja tylko placeholdery. */
.hero-m-vh {
position: absolute;
width: 1px; height: 1px; overflow: hidden;
clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
/* --- karta wyszukiwarki --- */
/* Prefiks body.home .navbar jest tu konieczny, nie ozdobny: karta jest
elementem