/* ========================================================================== Sekcja 10, kontakt. Trzy drogi: rezerwacja, telefon, formularz. Wartosci przemierzone od nowa 26.08 z materialy/kadry/kontakt.png (1440x599, y=0 to gora sekcji): eyebrow ink y 40-50, H2 ink y 84-190 na dwoch liniach, dane od ink y 251 w kolumnie x 120-449, mapa x 439-1008 y 222-565 (569 na 343, poprzedni zapis "567 na 303" byl bledny, zweryfikowane wycinkiem), panel formularza od x 1056 do krawedzi okna, pelnej wysokosci sekcji. Naglowek "przy placu Ludwika Waryńskiego" w foncie Bellefair na --fs-display-2 (84px) nie miesci sie w kolumnie 936px i lamie sie na trzy linie zamiast dwoch (mierzone ctx.measureText: 1021px przy 84px, 936px dostepne). To byl glowny powod rozjazdu +157px. --fs-display-4 (49px) daje 814-596px dla obu linii, mieszczac sie z zapasem, i jest najblizszym tokenem do szerokosci linii 1 zmierzonej w kadrze (299px ink vs 293px liczone). Kontakt dostaje wiec wariant pomocniczy naglowka, nie glowny. */ .kontakt { position: relative; padding-block: var(--space-9) var(--space-6); background: var(--surface-cream-hi); /* naglowek po przewinieciu ma wysokosc okolo 96.8px (zmierzone getBoundingClientRect na .site-header.is-sticky), --space-12 daje zapas okolo 23px ponad to, zeby klik w nawigacji nie chowal H2 pod przyklejonym paskiem */ scroll-margin-top: var(--space-12); } .kontakt__uklad { display: grid; /* Kolumna danych ma STALA szerokosc, nie fr. Adres "plac Ludwika Waryńskiego 2A," potrzebuje minimum 273px (34px slot ikony plus 16px odstep plus 223px tekstu, zmierzone canvas measureText), zeby nie zlamac sie na trzecia linie. Przy fr, poszerzenie odstepu column-gap zabiera szerokosc obu kolumnom proporcjonalnie i zwezalo dane ponizej tego progu (26.08, wykryte na zrzucie po wyrownaniu odstepow wokol mapy). Stala wartosc odcina te dwie rzeczy od siebie: mapa dostaje reszte przez 1fr, dane maja zawsze tyle samo. */ grid-template-columns: 296px 1fr; /* Mapa przesunieta W PRAWO, blizej panelu, dalej od danych. Nie symetrycznie: pierwsza wersja z 26.08 dawala 48px z kazdej strony, Jakub tego samego dnia poprawil na wieksza przerwe od danych i mniejsza od panelu, wiec 1fr na kolumnie mapy samo domyka szerokosc do lewego odstepu, a prawy odstep dochodzi osobno przez padding-inline-end ponizej na max-width. */ /* Przestrzen miedzy koncem danych (x=416) a poczatkiem panelu (x=928) jest STALA, 512px, bo obie te krawedzie sa ustalone niezaleznie od tej siatki. Powiekszenie mapy i przesuniecie jej w prawo to podzial tych 512px inaczej: mniej po lewej, wiecej na sama mape, malo po prawej. Proba dodania 60px do OBU wartosci naraz (gap i max-width) w poprzedniej wersji tego dnia zdublowala przesuniecie i wepchnela mape pod panel o 28px, wykryte pomiarem przed wdrozeniem. */ column-gap: var(--space-8); /* 48px, bylo 96 */ align-items: start; /* .kontakt__panel siedzi absolute na prawej krawedzi OKNA (nie kontenera), wiec bez tego ograniczenia siatka rozciaga sie na cala szerokosc kontenera i wjezdza pod panel: naglowek nachodzi na formularz, a mapa renderuje sie pod nieprzezroczystym tlem panelu i znika z widoku. Liczenie: kontener zaczyna sie na x=var(--container-margin) od lewej krawedzi OKNA, panel (stale 512px) zaczyna sie na (szerokosc okna - 512). Rownanie tych dwoch, minus stały odstep mapa-do-panelu 62px (zmierzony na 1440, patrz D124), daje max-width bez przerwy: 100vw - 512px - 62px - var(--container-margin). Na 1440 (--container-margin=72px) to dokladnie 794px, ta sama wartosc co przed D124, zero zmiany na referencyjnej szerokosci. */ /* D124, 03.09.2026: przed ta data max-width byl sztywnym 794px, wyliczonym TYLKO dla 1440px. --container-margin od D110 (03.09, wczesniej tego samego dnia) rosnie powyzej 1440px razem z marginesem kontenera, ale ten sztywny 794px tego nie widzial, wiec powyzej 1440 mapa zostawala wciaz tej samej szerokosci, a pusta przestrzen miedzy mapa a panelem rosla bez ograniczenia (zgloszenie Jakuba ze zrzutu: "dużo miejsca" na szerokim ekranie). Formula podmieniona na calc() sledzacy ta sama zmienna co reszta strony, bez wlasnego, osobnego sufitu: mapa rosnie az do krawedzi panelu na kazdej szerokosci. */ max-width: calc(100vw - 574px - var(--container-margin)); } .kontakt__naglowek { grid-column: 1 / -1; margin-block-end: var(--space-8); } .kontakt__tytul { margin: 0; font-size: var(--fs-display-4); } /* --- dane kontaktowe ----------------------------------------------------- */ .dane { margin: 0; padding: 0; list-style: none; } .dane__pozycja { display: grid; grid-template-columns: 34px 1fr; align-items: start; gap: var(--space-4); padding-block: var(--space-6); border-block-end: 1px solid var(--line-on-light-soft); font-size: var(--fs-small); line-height: 1.6; } .dane__pozycja:first-child { padding-block-start: 0; } .dane__pozycja:last-child { border-block-end: 0; } .dane__ikona { inline-size: 22px; block-size: 22px; color: var(--accent-deep); } .dane__ikona svg { inline-size: 100%; block-size: 100%; } /* 14.09.2026, zgloszenie Jakuba ze zrzutu: hover pod numerem telefonu to dlugia linia, nie podkreslenie samych cyfr. Przyczyna: `.dane__pozycja` to grid o dwoch kolumnach (34px 1fr), a `` telefonu jest BEZPOSREDNIM dzieckiem tego grida (nie owiniete w blok jak adres w `
`), wiec dostaje domyslne `justify-self: stretch` i rozciaga sie na cala szerokosc drugiej kolumny. Podkreslenie `.link` liczy sie procentem WLASNEJ szerokosci elementu (`background-size: 100% 1px`), wiec rozciagniete pudelko dawalo linie szerszą niż tekst. Link adresu nie mial tego problemu, bo `` siedzi tam wewnatrz `
` (kontekst inline), nie jest bezposrednim dzieckiem grida. */ .dane__pozycja > a.link { justify-self: start; } /* --- mapa ---------------------------------------------------------------- */ .kontakt__mapa { position: relative; display: block; } /* D123, 03.09.2026: offset -66px (chowanie paska tytulowego Moich Map) USUNIETY. Embed przeszedl z Moich Map (`/maps/d/embed?mid=...`, mial wlasny pasek tytulowy z nazwa/autorem) na prosty embed adresowy (`/maps?q=...`, wzorzec miracle-beauty.pl), ktory tego paska nie ma. Offset zostawiony ze starej wersji przycinal w tym miejscu GORNE 66px prawdziwej tresci mapy, czyli dokladnie plakietke adresu w rogu ("plac Ludwika Warynskiego 2A... Otworz w Mapach"), ktora w nowym embedzie jest pozadana, nie do schowania. */ .kontakt__mapa-ramka { position: relative; overflow: hidden; border-radius: var(--radius-md); /* D29, 28.08.2026 */ aspect-ratio: 1132 / 606; /* proporcja z projektu Karola */ background: var(--surface-sand); /* 02.09.2026 (D100): Safari (w tym iOS) nie zawsze przycina IFRAME do zaokraglonego rodzica przy samym overflow:hidden. Skutek zgloszony przez Jakuba ze zrzutu z telefonu: ostre, kwadratowe rogi mimo border-radius w kodzie, ktorego Chromium (nasze testy) nie odtwarza, bo tam ten sam kod przycina poprawnie. Maska wymusza w Safari realne przyciecie tresci dziecka do ksztaltu rodzica, w Chromium jest no-opem (i tak juz przycinal poprawnie). Trzyma sie mimo usuniecia offsetu wyzej, bo dotyczy ogolnego zachowania Safari z iframe w zaokraglonym pudelku, nie tego konkretnego przypadku. */ -webkit-mask-image: -webkit-radial-gradient(white, black); mask-image: radial-gradient(white, black); } .kontakt__mapa-ramka iframe { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 100%; block-size: 100%; border: 0; /* Filtr CSS testowany 26.08, zdjety tego samego dnia na wniosek Jakuba ("zle wyglada"). Mapa zostaje w naturalnych kolorach Google. */ } /* D191, 08.10.2026: zaslepka mapy do czasu zgody na cookies funkcjonalne. Wypelnia cala ramke (ta sama proporcja co mapa), wiec uklad nie skacze po wczytaniu. Znika atrybutem hidden, ktory ustawia assets/js/mapa-zgoda.js. */ .kontakt__mapa-zaslepka { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-4); padding: var(--space-6); text-align: center; background: var(--surface-sand); } .kontakt__mapa-zaslepka[hidden] { display: none; } .kontakt__mapa-tekst { max-inline-size: 30ch; margin: 0; font-size: var(--fs-body, 17px); line-height: 1.5; color: var(--text-on-light); } .kontakt__mapa-link { font-size: 15px; } /* --- panel formularza ---------------------------------------------------- */ .kontakt__panel { position: absolute; inset-block: 0; inset-inline-end: 0; inline-size: 512px; /* ustalone przez Jakuba 26.08.2026 */ /* gorny odstep byl "74px" na sztywno do 26.08. --space-10 (80px) jest najblizszym tokenem ponizej progu przepelnienia panelu (przy stalej wysokosci 604px tresci formularza plus dolny odstep miesci sie do okolo 90px, --space-11 juz przepelnia o kilka px), a jednoczesnie przesuwa przycisk blizej pozycji zmierzonej w kadrze */ padding: var(--space-10) var(--space-8) var(--space-9); background: var(--surface-sand); /* D29, 28.08.2026: tylko lewe rogi, panel dotyka prawej krawedzi okna, pelny promien dalby odciete rogi po prawej. Ponizej 1100px panel jest position:static i dostaje promien ze wszystkich stron, patrz nizej. */ border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md); } .formularz__tytul { margin: 0 0 var(--space-6); font-family: var(--font-display); font-size: var(--fs-card); font-weight: var(--fw-display); line-height: 1.3; } .formularz__pole + .formularz__pole { margin-block-start: var(--space-4); } /* D173, 03.09.2026: siatka zeszla z zewnetrznego