/* ========================================================================== Sekcja "O mnie". Glowny dowod strony, nie dodatek. Geometria zdjecia i gorny odstep tekstu zmierzone bezposrednio z kadru materialy/kadry/o-mnie.png (1440x957, y=0 to gora sekcji), pomiar 26.08.2026 pikselowo skryptem PIL. Poprzedni komplet (zdjecie od y=0, tekst pad-start 52px) liczyl od blednego pasma FULL-PAGE 2999-3890 z plan-sekcji.md, ktore nachodzilo na sekcje oferty. Poprawne pasmo to 2957-3914, stad przesuniecie o 42px w dol calej tresci sekcji: zdjecie x 52-607 y 42-868, eyebrow (tusz) y 94. Marginesy tytulu, listy przewag i przycisku zostaly na wartosciach sprzed poprawki (space-8, space-9, space-8), bo akapity w tej sekcji zawijaja sie na mniej wierszy niz w makiecie (Nunito Sans zamiast oryginalnego kroju, decyzja D11), a wieksze odstepy kompensuja krotszy blok tekstu i utrzymuja wysokosc sekcji w tolerancji wobec 957px. ========================================================================== */ .o-mnie { position: relative; /* 02.09.2026 (D101): gorny odstep zbity z --space-11 (96px) na --space-8 (48px). Odstep oferta(cta)->o-mnie(zdjecie) byl 176px wobec 130px miedzy kroki(cta) i oferta(naglowek), Jakub kazal wyrownac. Razem z dolnym paddingiem oferty (--space-10, 80px) daje 128px, w tolerancji +-4px z decyzje.md. */ /* D157, 03.09.2026: zgloszenie Jakuba, "sekcja o mnie zajmuje dużo przestrzeni... żeby góra była równa z dołem". Dol byl 90px, wartosc na sztywno (nie token), wieksza niz gora (48px, D101). Wyrownane do tego samego tokenu po obu stronach. */ padding-block: var(--space-8); overflow: hidden; scroll-margin-top: var(--space-12); } /* --- uklad, zdjecie i tresc w kontenerze sekcji -------------------------- */ /* 02.09.2026 (D67). Do tej daty zdjecie stalo na position:absolute z lewa krawedzia na 52px, a tresc miala margin-inline-start:639px, obie wartosci zmierzone z makiety w oknie 1440. Po przejsciu sekcji na 90 procent szerokosci (D62) te piksele przestaly trzymac sie krawedzi kontenera: zdjecie wychodzilo 20px przed linie sekcji, a kolumna tekstu konczyla sie okolo 100px przed prawa krawedzia, wiec caly blok wygladal na dosuniety do lewej (zgloszenie Jakuba 02.09.2026). Teraz to zwykla siatka wewnatrz .container: lewa krawedz zdjecia i prawa krawedz tekstu leza dokladnie na linii sekcji, niezaleznie od szerokosci okna. Podzial 560 na 656 przy kontenerze 1296 (1440 w oknie): kolumna tekstu miesci sie w okolo 77 znakach, a zdjecie zostaje glownym elementem sekcji. */ .o-mnie__uklad { display: grid; grid-template-columns: minmax(0, 560fr) minmax(0, 656fr); gap: var(--space-10); align-items: center; } /* --- zdjecie ------------------------------------------------------------- */ .o-mnie__zdjecie { position: relative; inline-size: 100%; /* Proporcja pudelka, nie proporcja maski. Decyzja Jakuba 02.09.2026: maska rozciaga sie do pudelka, wiec kazde miejsce trzyma swoja proporcje, a rysunek liscia jest ten sam. Tu 0,667 wobec 0,791 samej maski, czyli lisc jest smuklejszy niz w ofercie, tak samo jak w hero. */ /* D171, 03.09.2026: wartosc dobrana przez Jakuba w konfiguratorze, zakres podstawowy (wszystkie szerokosci). Zapisana w pliku wlasciciela, nie w konfigurator.css (D168). Zakresy wezsze maja wlasne wartosci i zostaja nietkniete, bo stoja nizej w plikach albo w zapytaniach medialnych. */ aspect-ratio: 0.9; min-block-size: 0; /* D67: ksztalt schodzi z alfy pliku do wspolnego tokenu liscia. Zdjecie w bazie jest teraz zwyklym prostokatem (portret-o-mnie.jpg), wiec klientka podmienia je w kokpicie i lisc zostaje na miejscu. */ /* 02.09.2026 (D69): czubki przestawione przez Jakuba na gora-prawo i dol-lewo, czyli ksztalt bazowy zamiast odbitego. */ /* 02.09.2026 (D102): plyn zamiast wspolnego tokenu --lisc (77%), ta sama technika co hero D89 i oferta D102 (border-radius rozdzielony na poziomy/pionowy). Wlasna wartosc dla tej sekcji, nie token, bo suwak szedl tu inny niz w --lisc. */ border-radius: 75% 0% 75% 0% / 68% 0% 68% 0%; overflow: hidden; } .o-mnie__zdjecie img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; /* Kadr: portret ma 1110x1660 (proporcja 0,669), pudelko 0,667, czyli praktycznie ta sama proporcja. Cover nie przycina tu nic zauwazalnego, wiec srodek jest wlasciwym ustawieniem. */ object-position: 50% 50%; } /* --- etykieta pionowa --------------------------------------------------- */ .o-mnie .etykieta-sekcji { /* 02.09.2026: stale 655px trzymalo sie dawnego ukladu na piksele. Teraz etykieta stoi przy krawedzi okna, jak w pozostalych sekcjach. */ left: max(0px, calc(var(--container-margin) - 24px)); top: var(--space-10); } /* --- kolumna tekstu ----------------------------------------------------- */ .o-mnie__tresc { /* margin-inline-start:639px i max-width:560px zdjete 02.09.2026 (D67), patrz komentarz przy .o-mnie__uklad. Szerokosc daje kolumna siatki, pozycje pionowa align-items:center. */ min-block-size: 0; } .o-mnie__tytul { margin: 0 0 var(--space-8); } .o-mnie__akapit { font-size: var(--fs-body); line-height: 1.75; } /* --- trzy przewagi ------------------------------------------------------ */ .przewagi { margin: var(--space-9) 0 0; padding: 0; list-style: none; } .przewaga { display: grid; grid-template-columns: 52px 1fr; align-items: baseline; gap: var(--space-4); padding-block: var(--space-4); border-block-end: 1px solid var(--line-ctx); font-size: var(--fs-small); line-height: 1.6; } .przewaga:first-child { padding-block-start: 0; } .przewaga__numer { font-family: var(--font-text); font-weight: var(--fw-semibold); letter-spacing: var(--ls-eyebrow); color: var(--accent-ctx); } /* --- przycisk ----------------------------------------------------------- */ .o-mnie__cta { margin-block-start: var(--space-8); } /* --- tablet i telefon --------------------------------------------------- */ @media (max-width: 1100px) { .o-mnie { padding-block: var(--space-11); } /* na telefonie makieta ma zwykly prostokat, nie lisc */ /* 02.09.2026 (D93): uklad z kadru mobilnego Karola (materialy/kadry-mobile/o-mnie-mobile-wide.png, 390 px). Zmierzone tam: zdjecie to PROSTOKAT bez ksztaltu, x 9-371 i wysokosc 347, czyli proporcja 1,046 i szerokosc siegajaca prawie krawedzi okna. Tekst zaczyna sie dopiero na x 58, wiec jest wyraznie wezszy od zdjecia i to wciecie robi cala kompozycje. Odstep od dolu zdjecia do nadtytulu ma tam 38 px. */ .o-mnie__uklad { grid-template-columns: 1fr; gap: var(--space-7); } .o-mnie__zdjecie { aspect-ratio: 1.046; /* D148, 03.09.2026: zgloszenie Jakuba, zdjecie na mobile bylo ostre (border-radius:0 z D93, "makieta ma zwykly prostokat, nie lisc" - dotyczylo tylko ksztaltu liscia, nie promienia rogow). Ten sam token co zdjecia cennika i baneru konsultacji (--radius-md). */ border-radius: var(--radius-md); /* wyjscie poza kontener o jego wewnetrzny padding, jak w sekcji oferta. inline-size: auto jest konieczne, bo regula bazowa trzyma 100% i sam ujemny margines tylko przesunalby pudelko. */ margin-inline: calc(-1 * var(--gutter-mobile)); inline-size: auto; } /* Tekst wciety wzgledem zdjecia, 16 px daje start na 56 px przy oknie 390, u Karola jest 58. */ .o-mnie__tresc { margin-inline-start: var(--space-4); } /* Przycisk trzyma linie ZDJECIA, nie wcietego tekstu: w kadrze Karola jego lewa krawedz stoi tam, gdzie krawedz zdjecia, nie tam gdzie akapity. Odejmujemy wiec wciecie tresci i padding kontenera. */ .o-mnie__cta { margin-inline-start: calc(-1 * (var(--space-4) + var(--gutter-mobile))); margin-inline-end: calc(-1 * var(--gutter-mobile)); } .o-mnie .etykieta-sekcji { display: none; } } @media (max-width: 700px) { /* D170, 03.09.2026: wartosci dobrane przez Jakuba w konfiguratorze, zakres telefon. Zapisane w pliku wlasciciela, nie w konfigurator.css, zgodnie z rozstrzygnieciem z D168: konfigurator sluzy do DOBRANIA wartosci, nie do jej przechowywania. */ .o-mnie { padding-block: var(--space-7); } .przewaga { grid-template-columns: 40px 1fr; gap: var(--space-3); } .o-mnie__cta .btn { width: 100%; } } /* 08.10.2026, zgloszenie Jakuba: sekcja urosla w dol po dodaniu tekstu Dominiki, wiec ten sam mechanizm co zdjecia cennika w ofercie (D117, cennik.css): zdjecie przy gorze sekcji, po przewinieciu zostaje w miejscu pod naglowkiem, a przewija sie tylko kolumna z trescia. Warunek sticky: grid z align-items:start, zdjecie ma wlasna wysokosc, wiersz gridu jest tak wysoki jak dluzsza tresc. Tylko komputer, powyzej progu, na ktorym uklad schodzi do jednej kolumny (1100px). */ @media (min-width: 1101px) { /* Sekcja miala overflow:hidden (przycinanie ornamentu), a to tworzy kontener przewijania i position:sticky traci sens (zdjecie jedzie 1:1 z trescia). overflow:clip przycina tak samo, ale nie tworzy kontenera przewijania. */ .o-mnie { overflow: clip; } .o-mnie__uklad { align-items: start; } .o-mnie__zdjecie { position: sticky; top: calc(var(--header-rest-h, 0px) + var(--space-3)); z-index: var(--z-sticky); } }