/* =============================================================================
FLYPARK — STRONA GLOWNA (splash z wyborem lokalizacji)
=============================================================================
Plik pisany recznie (NIE jest generowany z custom-scss.scss).
Ladowany tagiem wylacznie w index.php, PO flypark-location-picker.css,
dzieki czemu nadpisuje ustawienia pakietu bez uzywania !important
(poza jednym miejscem, opisanym nizej).
Wszystkie reguly sa zakotwiczone w .starterPage (klasa tylko na tym
szablonie) albo w [data-fp-modal="fp-loc-home"], wiec nie moga wyciec na
pozostale podstrony motywu.
Zawartosc:
1. Uklad hero (tlo wideo, przyciemnienie, wysrodkowana kolumna)
2. Logo / naglowek / lead
3. Komponent wyboru lokalizacji + przelaczanie desktop <-> mobile
4. Poprawki integracyjne z motywem
5. Niskie ekrany
============================================================================= */
/* =============================================================================
1. UKLAD HERO
============================================================================= */
/* Ciemne tlo pod wideo — zapobiega bialemu mignieciu przed zaladowaniem filmu. */
body.starterPage {
background-color: #0a0a0a;
}
/* Zastepuje dawne .homepage. Pelny ekran, ale ze scrollem awaryjnym:
gdy rozwiniety dropdown nie miesci sie w niskim oknie, mozna go doscrollowac. */
.starterPage .fp-home {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
overflow-x: hidden;
overflow-y: auto;
display: flex;
-webkit-overflow-scrolling: touch;
/* ANTY-PRZESKOK: bez tego pojawienie sie paska przewijania (np. gdy JS nie
zdazyl przyciac panelu) zwezalo content box i cala kolumna skakala w lewo
o szerokosc paska. Gutter jest zarezerwowany na stale, wiec nic nie skacze. */
scrollbar-gutter: stable;
}
/* Wideo w tle korzysta z regul .homepage__player z theme.css (samodzielne
selektory, nie zagniezdzone w .homepage) — tu tylko przypinamy je do
viewportu, zeby nie odjezdzalo przy scrollowaniu kontenera. */
.starterPage .fp-home .homepage__player {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
}
/* Przyciemnienie tla — bez niego bialy naglowek gubi sie na jasnych klatkach. */
.starterPage .fp-home::after {
content: "";
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
background: linear-gradient(180deg, rgba(8, 8, 10, 0.55) 0%, rgba(8, 8, 10, 0.78) 100%);
pointer-events: none;
}
/* margin:auto zamiast align-items:center — centruje w obu osiach i NIE ucina
gory tresci, gdy jest ona wyzsza niz okno. */
.starterPage .fp-home__inner {
position: relative;
z-index: 2;
margin: auto;
width: 100%;
max-width: 640px;
padding: 48px 20px;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
}
/* Wejscie hero. Swiadomie CSS zamiast klasy .wow z motywu: theme.css ustawia
.wow{visibility:hidden} i gdyby wow.min.js nie wystartowal, cale hero (razem
z logo) zostaloby niewidoczne. Animacja CSS nie ma takiego trybu awarii. */
@keyframes fpHomeIn {
from { opacity: 0; transform: translateY(18px); }
to { opacity: 1; transform: none; }
}
/* UWAGA na fill-mode: musi byc `backwards`, NIE `both`. Przy `both` stan koncowy
animacji (transform: none) zostaje na elemencie i — jako styl animacji — wygrywa
w kaskadzie z transformem uniesienia hero ponizej, wiec panel nigdy by sie nie
podnosil. `backwards` daje ten sam efekt wejscia, ale po zakonczeniu oddaje
kontrole zwyklym regulom. */
.starterPage .fp-home__inner {
animation: fpHomeIn 0.55s ease backwards;
transition: transform 0.28s ease;
}
/* Uniesienie hero, gdy otwarty dropdown nie miescilby sie pod triggerem.
Wartosc --fp-hero-shift wylicza flypark-home.js (0 = brak potrzeby). */
.starterPage .fp-home.is-picker-open .fp-home__inner {
transform: translateY(calc(var(--fp-hero-shift, 0px) * -1));
}
/* Klasa techniczna: skrypt zaklada ja na czas pomiaru przy zmianie rozmiaru okna,
zeby zdjecie uniesienia nie wywolalo widocznej animacji w tle. */
.starterPage .fp-home.is-measuring .fp-home__inner {
transition: none;
}
@media (prefers-reduced-motion: reduce) {
.starterPage .fp-home__inner {
animation: none;
transition: none;
}
}
/* =============================================================================
2. LOGO / NAGLOWEK / LEAD
============================================================================= */
.starterPage .fp-home__logo {
width: 100%;
max-width: 260px;
margin-bottom: 34px;
}
.starterPage .fp-home__logo svg {
width: 100%;
height: auto;
}
.starterPage .fp-home__title {
margin: 0;
color: #fff;
font-size: clamp(26px, 4.6vw, 44px);
font-weight: 800;
font-style: italic;
line-height: 1.08;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Drugi czlon naglowka — zloty, od nowej linii (jak w handoffie). */
.starterPage .fp-home__title span {
display: block;
color: #e9ac23;
}
.starterPage .fp-home__lead {
max-width: 480px;
margin: 16px 0 30px;
color: #dcdcdc;
font-size: clamp(14px, 2.4vw, 17px);
font-weight: 400;
line-height: 1.55;
}
/* =============================================================================
3. KOMPONENT WYBORU LOKALIZACJI — PRZELACZANIE DESKTOP <-> MOBILE
Breakpoint 992px = ten sam, ktorego uzywa theme.css.
============================================================================= */
.starterPage .fp-home__picker {
width: 400px;
max-width: 100%;
}
/* Domyslnie (desktop) widoczny jest dropdown, trigger modala jest schowany. */
.starterPage .fp-home__picker-mobile {
display: none;
}
@media (max-width: 991.98px) {
.starterPage .fp-home__picker-desktop {
display: none;
}
.starterPage .fp-home__picker-mobile {
display: flex;
width: 100%;
}
}
@media (min-width: 992px) {
/* Zabezpieczenie: modal mobilny nie moze pojawic sie na desktopie —
np. gdy ktos otworzyl go na waskim oknie i je rozszerzyl.
!important, bo regula pakietu [data-fp-modal].is-open{display:flex}
ma taka sama specyficznosc. */
.fp-modal[data-fp-modal="fp-loc-home"] {
display: none !important;
}
/* ---------------------------------------------------------------------------
PANEL DOPASOWANY DO OKNA
Pakiet daje listom sztywne 196px + 150px, przez co panel ma zawsze ~505px
i na laptopie nie miesci sie pod triggerem. Tutaj panel staje sie kolumna
flex o wysokosci ograniczonej do realnie dostepnego miejsca
(--fp-panel-max liczy flypark-home.js), a brakujace piksele odbieraja sobie
obie listy — dzieki czemu naglowek "WKROTCE OTWARCIE" i pierwsze wiersze
obu sekcji sa widoczne zawsze, bez przewijania strony.
46vh = rozsadny fallback, gdyby skrypt nie wystartowal.
--------------------------------------------------------------------------- */
/* UWAGA: `display` MUSI byc powiazany z klasa .is-open. Ustawienie
`display: flex` na samym .fp-dropdown ma wyzsza specyficznosc niz
domyslne [data-fp-panel]{display:none} z pakietu, przez co panel byl
rozwiniety juz przy wejsciu na strone. */
.starterPage .fp-dropdown.is-open {
display: flex;
}
.starterPage .fp-dropdown {
flex-direction: column;
max-height: var(--fp-panel-max, 46vh);
/* Normalnie scrolluja same listy i panel nigdy nie ma wlasnego suwaka.
`auto` (zamiast `hidden`) jest siatka bezpieczenstwa na skrajnie niskie
okno: gdy listy nie moga sie juz bardziej scisnac, tresc da sie przewinac
zamiast zostac bezpowrotnie ucieta. */
overflow-y: auto;
}
.starterPage .fp-dropdown .fp-search,
.starterPage .fp-dropdown .fp-section-title,
.starterPage .fp-dropdown .fp-list-divider,
.starterPage .fp-dropdown .fp-empty {
flex: 0 0 auto;
}
/* Jawny min-height wylacza automatyczne minimum flexboxa (min-height: auto),
ktore inaczej zablokowaloby kurczenie listy ponizej wysokosci jej tresci. */
.starterPage .fp-dropdown .fp-list--func {
max-height: none;
flex: 0 1 auto;
min-height: 88px;
}
/* Wiekszy flex-shrink = sekcja "wkrotce" oddaje miejsce chetniej niz lista
parkow czynnych (te sa klikalne, wiec wazniejsze). 1.3 zamiast np. 2.0,
bo przy ostrzejszej wartosci sekcja "wkrotce" schodzila do 1,5 wiersza. */
.starterPage .fp-dropdown .fp-list--soon {
max-height: none;
flex: 0 1.3 auto;
min-height: 66px;
}
}
/* =============================================================================
4. POPRAWKI INTEGRACYJNE Z MOTYWEM
============================================================================= */
/* Pakiet ustawia font tylko na triggerze i inpucie — reszta dziedziczy z body. */
.starterPage .fp-home,
.fp-modal[data-fp-modal="fp-loc-home"] {
font-family: "Poppins", system-ui, -apple-system, sans-serif;
}
/* Suwak wewnatrz list. Pakiet daje rgba(255,255,255,0.14) — na ciemnym tle
praktycznie niewidoczny, przez co nie widac, ze lista ma dalszy ciag. */
.starterPage .fp-scroll,
.fp-modal[data-fp-modal="fp-loc-home"] .fp-scroll {
scrollbar-width: thin; /* Firefox */
scrollbar-color: rgba(255, 255, 255, 0.3) transparent; /* Firefox */
}
.starterPage .fp-scroll::-webkit-scrollbar-thumb,
.fp-modal[data-fp-modal="fp-loc-home"] .fp-scroll::-webkit-scrollbar-thumb {
background: rgba(255, 255, 255, 0.3);
}
/* Inline SVG jako element inline lapie baseline gap i rozjezdza wysokosci
wierszy (w demo.html pakietu jest to samo ustawienie globalnie). */
.starterPage .fp-home svg,
.fp-modal[data-fp-modal="fp-loc-home"] svg {
display: block;
}
/* Reset motywu nadaje listom/linkom `font: inherit` — pilnujemy, zeby przycisk
nie przejal stylow globalnych przyciskow Bootstrapa z theme.css. */
.starterPage .fp-trigger {
font-family: inherit;
text-align: left;
appearance: none;
-webkit-appearance: none;
}
/* Tryb bez JavaScriptu obsluguje blok