w index.html): zawsze dostaje ja dokladnie JEDNA karta — ta, ktorej srodek jest najblizej srodka ekranu. Dzieki temu przy scrollu ciemne wypelnienie plynnie przechodzi z karty na karte, zamiast zapalac sie po dwie naraz. */ .in-sec.in-stack .in-step.is-active { background: var(--brand-900, #643B81); box-shadow: 0 26px 60px rgba(100,59,129,.22); } .in-sec.in-stack .in-step.is-active::before { color: var(--brand-300, #C6C4D8); } .in-sec.in-stack .in-step.is-active .in-step-b h3 { color: #fff; } .in-sec.in-stack .in-step.is-active .in-step-b p { color: rgba(255,255,255,.78); } .in-sec.in-stack .in-step.is-active .in-bullets li { color: rgba(255,255,255,.78); } .in-sec.in-stack .in-step.is-active .in-bullets li::before { background: var(--brand-300, #C6C4D8); } @media (max-width: 1000px) { .in-sec.in-stack > .in-wrap { grid-template-columns: 1fr; gap: 24px; } .in-sec.in-stack .in-stack-head { position: static; max-width: none; } .in-sec.in-stack .in-stack-head > h2 { max-width: none; } .in-sec.in-stack > .in-wrap > .in-steps { grid-column: 1; margin-top: 8px; } } /* ══════════════════════════════════════════════════════════════════ PROGRAM JAKO ANIMOWANY SHOWCASE — variant: "showcase" ────────────────────────────────────────────────────────────────── Duzy kadr po lewej zmienia sie razem z aktywnym krokiem po prawej. Skrypt siedzi poza

w index.html, zeby build.py przenosil go na wszystkie podstrony. Tresc i sciezki zdjec pozostaja w JSON-ie strony. ══════════════════════════════════════════════════════════════════ */ .in-sec.in-showcase { overflow: clip; } .in-sec.in-showcase > .in-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px 72px; align-items: start; } .in-showcase-stage { grid-column: 1; grid-row: 2; position: relative; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 20px; background: var(--brand-100, #E7EDF9); box-shadow: 0 24px 60px rgba(100,59,129,.12); } .in-showcase-media { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.045); pointer-events: none; transition: opacity .72s ease, transform 1.1s cubic-bezier(.2,.65,.25,1); } .in-showcase-media.is-active { opacity: 1; transform: scale(1); } .in-showcase-media::after { content: ""; position: absolute; inset: 45% 0 0; background: linear-gradient(180deg, transparent, rgba(100,59,129,.72)); } .in-showcase-media img { width: 100%; height: 100%; object-fit: cover; } .in-showcase-media figcaption { position: absolute; z-index: 1; left: 28px; right: 28px; bottom: 24px; display: flex; align-items: flex-start; gap: 14px; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.35; } .in-showcase-media figcaption span { flex: 0 0 auto; color: var(--brand-200, #C6C4D8); font-size: 12px; letter-spacing: .12em; } .in-showcase-copy { grid-column: 1 / -1; grid-row: 1; max-width: 1120px; } .in-showcase-eyebrow { margin: 0 0 12px; color: var(--brand-primary, #643B81); font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; } .in-showcase-copy > h2 { max-width: none; margin: 0 0 18px; font-family: var(--font-heading, 'Baloo 2', sans-serif); font-weight: 400; line-height: 1.04; letter-spacing: -.015em; } .in-showcase-copy > h2 span { display: block; white-space: nowrap; } .in-showcase-copy > .in-lead { max-width: 68ch; margin: 0 0 22px; font-size: 17px; } .in-showcase-copy > .in-p { max-width: 68ch; margin: 0 0 11px; font-size: 15px; line-height: 1.6; } .in-showcase-copy > .in-h3 { margin: 24px 0 10px; } .in-showcase-copy > .in-quote { margin: 24px 0 0; padding: 0; } .in-showcase-steps { grid-column: 2; grid-row: 2; list-style: none; margin: 0; padding: 0; } .in-showcase-steps > li { border-top: 1px solid rgba(11,18,32,.16); } .in-showcase-steps > li:last-child { border-bottom: 1px solid rgba(11,18,32,.16); } .in-showcase-step { appearance: none; width: 100%; border: 0; margin: 0; padding: 34px 0; display: grid; grid-template-columns: 48px 38px minmax(0, 1fr) 78px; gap: 18px; align-items: start; background: transparent; color: var(--color-text, #0B1220); font: inherit; text-align: left; cursor: pointer; opacity: .58; transition: opacity .38s ease, transform .5s cubic-bezier(.2,.65,.25,1); } .in-showcase-step:hover, .in-showcase-step:focus-visible, .in-showcase-step.is-active { opacity: 1; transform: translateX(8px); } .in-showcase-step:focus-visible { outline: 2px solid var(--brand-primary, #643B81); outline-offset: 6px; } .in-showcase-n { padding-top: 2px; font-family: var(--font-heading, 'Baloo 2', sans-serif); font-size: 28px; line-height: 1; color: var(--brand-primary, #643B81); } .in-showcase-line { position: relative; height: 1px; margin-top: 14px; background: rgba(11,18,32,.2); overflow: hidden; } .in-showcase-line::after { content: ""; position: absolute; inset: 0; background: var(--brand-primary, #643B81); transform: translateX(-101%); transition: transform .55s ease; } .in-showcase-step.is-active .in-showcase-line::after { transform: translateX(0); } .in-showcase-step-copy { min-width: 0; } .in-showcase-step-copy strong { display: block; margin: 0 0 10px; font-size: 18px; font-weight: 600; line-height: 1.35; } .in-showcase-desc { display: block; } .in-showcase-p { display: block; margin: 0; max-width: 60ch; color: var(--color-text-muted, #413B4D); font-size: 14px; line-height: 1.62; } .in-showcase-p + .in-showcase-p { margin-top: 9px; } .in-showcase-inline-list { display: grid; gap: 4px; margin: 8px 0; color: var(--color-text-muted, #413B4D); font-size: 14px; line-height: 1.55; } .in-showcase-inline-list > span { position: relative; display: block; padding-left: 15px; } .in-showcase-inline-list > span::before { content: ""; position: absolute; left: 1px; top: .69em; width: 4px; height: 4px; border-radius: 50%; background: var(--brand-primary, #643B81); } .in-showcase-thumb { display: block; width: 78px; aspect-ratio: 1; overflow: hidden; border-radius: 8px; background: var(--brand-100, #E7EDF9); } .in-showcase-thumb img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.72); transform: scale(1.06); transition: transform .7s ease, filter .45s ease; } .in-showcase-step.is-active .in-showcase-thumb img, .in-showcase-step:hover .in-showcase-thumb img { transform: scale(1); filter: saturate(1); } /* ── KROKI NA STOSIE ──────────────────────────────────────────────────── Przy przewijaniu kolejne kroki nakładają się na siebie jak karty: każdy przykleja się pod pigułką nawigacji, a następny wsuwa się na wierzch. `--i` (numer kroku) ustawia `build.py` na

, żeby każda karta zatrzymała się o 14 px niżej od poprzedniej — dzięki temu widać krawędzie stosu. Tylko od 1001 px: niżej lista jest jednokolumnowa i stos nie ma sensu. */ @media (min-width: 1001px) { /* `overflow: clip` na sekcji odcinałoby przyklejanie (sticky liczy się względem najbliższego przewijanego rodzica). Poniżej 1001 px clip zostaje — tam pilnuje nagłówka z `white-space: nowrap`. */ .in-sec.in-showcase { overflow: visible; } .in-showcase-stage { position: sticky; top: 112px; } .in-showcase-steps > li { position: sticky; top: calc(120px + var(--i, 0) * 14px); border: 0; } .in-showcase-steps > li:last-child { border-bottom: 0; } .in-showcase-steps > li + li { margin-top: 20px; } .in-showcase-step { padding: 28px 30px 30px; border-radius: 22px; background: #fff; border: 1px solid rgba(11,18,32,.10); box-shadow: 0 20px 44px rgba(100,59,129,.13); /* karta na wierzchu ma być czytelna — przygaszanie zostawiamy listom bez stosu, tu i tak widać naraz tylko jedną */ opacity: 1; } /* przesunięcie w bok rozjeżdżało krawędzie stosu */ .in-showcase-step:hover, .in-showcase-step:focus-visible, .in-showcase-step.is-active { opacity: 1; transform: none; } .in-showcase-step.is-active { border-color: rgba(100,59,129,.34); } } @media (max-width: 1000px) { .in-sec.in-showcase > .in-wrap { grid-template-columns: 1fr; gap: 38px; } .in-showcase-copy, .in-showcase-steps { grid-column: 1; grid-row: auto; } /* Zmienny kadr dziala tylko obok listy — po zwinieciu do jednej kolumny wszystkie zdjecia stalyby w jednym stosie NAD krokami, a klikniecie w krok podmienialoby obrazek gdzies wyzej, poza ekranem. Scena znika, a miniatura kroku rosnie do pelnej szerokosci POD jego trescia. */ .in-showcase-stage { display: none; } .in-showcase-copy > h2 { max-width: 16ch; } .in-showcase-step { grid-template-columns: 42px 30px minmax(0, 1fr); padding: 28px 0; } /* bez sceny nie ma juz „aktywnego" kroku — wszystkie czytamy tak samo */ .in-showcase-step, .in-showcase-step.is-active { opacity: 1; transform: none; } .in-showcase-thumb { grid-column: 3; width: 100%; aspect-ratio: 16 / 10; margin-top: 16px; border-radius: 16px; } .in-showcase-thumb img { filter: none; transform: none; } } @media (max-width: 620px) { .in-showcase-stage { aspect-ratio: 4 / 3; border-radius: 14px; } .in-showcase-media figcaption { left: 18px; right: 18px; bottom: 16px; font-size: 13px; } .in-showcase-copy { margin-top: 0; } .in-showcase-copy > h2 span { white-space: normal; } .in-showcase-step { grid-template-columns: 34px 24px minmax(0, 1fr); gap: 12px; padding: 24px 0; } .in-showcase-step:hover, .in-showcase-step:focus-visible, .in-showcase-step.is-active { transform: none; } /* miniatura zostaje (patrz blok 1000px) — to jedyne zdjecie kroku na telefonie */ .in-showcase-thumb { grid-column: 3; } .in-showcase-step-copy strong { font-size: 16px; } .in-showcase-p { font-size: 13px; } } /* ══════════════════════════════════════════════════════════════════ SEKCJA DWUDZIELNA — variant: "split" ────────────────────────────────────────────────────────────────── Wielki naglowek serifem po lewej, cala tresc po prawej pod cienka kreska. Naglowek jest sticky: przy dlugiej kolumnie tekstu zostaje w kadrze i mowi, w ktorej sekcji jestesmy. Regula jest ogolna — dziala na KAZDEJ sekcji z variant:"split", niezaleznie od tego, jakie bloki w niej siedza. Wlaczasz ja dopisujac "variant": "split" w content/.json. ══════════════════════════════════════════════════════════════════ */ .in-sec.in-split > .in-wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 80px; align-items: start; } .in-sec.in-split > .in-wrap > h2 { /* Naglowek ciagnie sie przez WSZYSTKIE wiersze siatki. Przy `grid-row: 1` jego wysokosc ustawiala wysokosc pierwszego wiersza, wiec w prawej kolumnie miedzy pierwszym a drugim blokiem robila sie dziura na kilkaset pikseli (widac to bylo na /podswiadomosc-...). Sekcje z jednym blokiem po prawej wygladaly dobrze tylko dlatego, ze mialy jeden wiersz. */ grid-column: 1; grid-row: 1 / span 50; position: sticky; top: 120px; font-family: var(--font-heading, 'Baloo 2', sans-serif); font-weight: 300; line-height: 1.04; letter-spacing: -.015em; margin: 0; max-width: 14ch; } /* wszystko poza naglowkiem ladduje w prawej kolumnie, jedno pod drugim */ .in-sec.in-split > .in-wrap > :not(h2) { grid-column: 2; } /* Button jest elementem siatki, wiec domyslnie rozciagalby sie na cala kolumne — pigulka ma trzymac swoja szerokosc i stac przy lewej krawedzi tresci. */ /* justify-self: start — bez tego przycisk jako element gridu rozciaga sie na cala kolumne i robi sie z niego wielki, pelnoszerokosciowy pasek. */ .in-sec.in-split > .in-wrap > .in-btn, .in-sec.in-split > .in-wrap > .in-btn-ghost { justify-self: start; margin-top: 38px; } /* zdanie domykajace liste (np. „to ten mentoring jest dla Ciebie!") potrzebuje oddechu */ .in-sec.in-split .in-check + .in-lead, .in-sec.in-split .in-bullets + .in-lead, .in-sec.in-split .in-check + .in-p, .in-sec.in-split .in-bullets + .in-p { margin-top: 22px; } /* Bez dekoracyjnej kreski: prawa kolumna zaczyna sie na tej samej osi, a oddech buduje sam grid i rytm tresci. */ /* Element tuz po naglowku rownamy do jego gornej krawedzi — ale KARTY (.in-note) to nie dotyczy: ona ma wlasny padding i bez niego tekst kleil sie do ramki. */ .in-sec.in-split > .in-wrap > h2 + *:not(.in-note) { border-top: 0; padding-top: 0; margin-top: 6px; } .in-sec.in-split > .in-wrap > h2 + .in-note { margin-top: 6px; } .in-sec.in-split .in-h3:first-child { margin-top: 0; } .in-sec.in-split .in-check { gap: 18px; margin: 0; } .in-sec.in-split .in-check li { padding-left: 42px; font-size: 18px; line-height: 1.55; } .in-sec.in-split .in-check li::before { left: 8px; top: 4px; width: 8px; height: 15px; border-width: 0 2.5px 2.5px 0; } /* W tej sekcji osiem elementow tworzy dwie rowne kolumny: pierwsze cztery po lewej, kolejne cztery po prawej. Pozostale listy split pozostaja bez zmian. */ #w-srodku-gry .in-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(4, auto); grid-auto-flow: column; gap: 22px 46px; } /* Listy „Kiedy szukac pomocy?" na podstronach numeroterapia-*: od szesciu pozycji w gore lamiemy je na dwie kolumny — jedna dluga kolumna zostawiala pol ekranu pusto. Warunek na :has(li:nth-child(6)) zamiast id, bo tych sekcji jest dziewiec i wiekszosc nie ma id; krotsze listy (5 pozycji) zostaja jednokolumnowe, bo 3+2 wyglada przypadkowo. */ .in-sec.in-split .in-check:has(li:nth-child(6)) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; gap: 22px 46px; } .in-sec.in-split .in-check:has(li:nth-child(6)):not(:has(li:nth-child(7))) { grid-template-rows: repeat(3, auto); } .in-sec.in-split .in-check:has(li:nth-child(7)):not(:has(li:nth-child(9))) { grid-template-rows: repeat(4, auto); } .in-sec.in-split .in-check:has(li:nth-child(9)):not(:has(li:nth-child(11))) { grid-template-rows: repeat(5, auto); } /* Biznes: dziewiec wskazan w dwoch czytelnych kolumnach (5 + 4). */ #kiedy-szukac-pomocy .in-check { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(5, auto); grid-auto-flow: column; gap: 22px 46px; } @media (max-width: 1000px) { .in-sec.in-split > .in-wrap { grid-template-columns: 1fr; gap: 28px; } .in-sec.in-split .in-check:has(li:nth-child(6)) { display: grid; grid-template-columns: 1fr; grid-auto-flow: row; } .in-sec.in-split > .in-wrap > h2 { position: static; grid-row: auto; max-width: none; } .in-sec.in-split > .in-wrap > :not(h2) { grid-column: 1; } } @media (max-width: 600px) { .in-sec.in-split .in-check { gap: 14px; } .in-sec.in-split .in-check li { padding-left: 36px; font-size: 16px; } #w-srodku-gry .in-check, #kiedy-szukac-pomocy .in-check { grid-template-columns: 1fr; grid-template-rows: none; grid-auto-flow: row; gap: 14px; } } /* ══════════════════════════════════════════════════════════════════ FAQ — REGULA: na KAZDEJ stronie wyglada tak samo jak na homepage ────────────────────────────────────────────────────────────────── Naglowek w lewej kolumnie (przyklejony przy scrollu), lista pytan po prawej — na cienkich kreskach, bez bialych kafelkow, ramek i zaokraglen. Uklad sklada render_section w build.py, gdy sekcja zawiera blok `faq` i ma naglowek. Rozwijanie animuje skrypt spoza

w index.html (build.py roznosi go na podstrony). Bez JS akordeon dziala dalej, tylko skokowo. ══════════════════════════════════════════════════════════════════ */ .in-faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 60px; align-items: start; } .in-faq-head { position: sticky; top: 120px; } .in-faq-h { font-family: var(--font-heading, 'Baloo 2', sans-serif); font-weight: 300; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 18px; max-width: 14ch; } .in-faq-sub { font-size: 17px; line-height: 1.6; color: var(--color-text-muted, #413B4D); margin: 0; } .in-faq-sub a { color: var(--brand-primary, #643B81); text-decoration: underline; text-underline-offset: 3px; } .in-faq { border-top: 1px solid rgba(11,18,32,.28); } /* Sekcja z pytaniami stoi tuz przed stopka albo pasem CTA — domyslne 72px dawalo za malo powietrza pod ostatnia odpowiedzia. */ .in-sec.in-faq-sec { padding-bottom: clamp(96px, 9vw, 140px); } .in-faq-i { border-bottom: 1px solid rgba(11,18,32,.28); } /* Pytanie serifem w fiolecie marki (jak wzór klientki); DM Serif Display ma tylko wagę 400 — wyższa dałaby syntetyczne, rozmazane pogrubienie. */ .in-faq-i summary { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; cursor: pointer; list-style: none; padding: 26px 2px; font-family: var(--font-display, Georgia, serif); line-height: 1.3; font-weight: 400; color: var(--brand-primary, #643B81); transition: padding-left .3s cubic-bezier(.4,0,.2,1); } /* hover: pytanie odsuwa się w prawo; ikona stoi w miejscu, bo trzyma ją justify-content: space-between przy prawej krawędzi */ .in-faq-i summary:hover { padding-left: 16px; } .in-faq-i summary::-webkit-details-marker { display: none; } /* plus → minus: znika kreska POZIOMA, a cala ikona obraca sie o cwierc obrotu, przez co zmiana czyta sie jako jeden ruch. Zgaszenie pionowej daloby odwrotnie: pozioma obrocona na sztorc, czyli kreske stojaca. */ .in-faq-c { flex: 0 0 auto; width: 18px; height: 18px; position: relative; margin-top: 6px; transition: transform .35s cubic-bezier(.4,0,.2,1); } .in-faq-c::before, .in-faq-c::after { content: ""; position: absolute; background: var(--brand-accent, #67B6C0); transition: transform .35s cubic-bezier(.4,0,.2,1); } .in-faq-c::before { top: 8px; left: 0; width: 18px; height: 1.5px; } .in-faq-c::after { left: 8px; top: 0; width: 1.5px; height: 18px; } .in-faq-i[open] .in-faq-c { transform: rotate(90deg); } .in-faq-i[open] .in-faq-c::before { transform: scaleX(0); } /* Odstepy pionowe siedza na MARGINESACH DZIECI, nie na paddingu pudelka. Skrypt animuje height do zera — padding zostalby jako pasek i akordeon nigdy nie domykalby sie do konca. overflow:hidden domyka tu tez margin collapsing, wiec marginesy nie wychodza poza pudelko. */ .in-faq-b { overflow: hidden; padding: 0 50px 0 2px; } .in-faq-b > :first-child { margin-top: 0; } .in-faq-b > :last-child { margin-bottom: 30px; } .in-faq-b .in-p { font-size: 17px; line-height: 1.75; color: var(--color-text-muted, #413B4D); max-width: 62ch; } @media (max-width: 1100px) { .in-faq-grid { grid-template-columns: 1fr; gap: 40px; } .in-faq-head { position: static; } .in-faq-h { max-width: none; } } @media (max-width: 600px) { .in-faq-i summary { gap: 20px; padding: 22px 2px; } .in-faq-b { padding-right: 0; } .in-faq-b .in-p { font-size: 16px; } } /* tresc delikatnie wyplywa razem z rozwijaniem — tak samo jak na homepage */ .in-faq-i[open] .in-faq-b > * { animation: in-faq-in .42s cubic-bezier(.4,0,.2,1) both; } @keyframes in-faq-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* numeroterapeuci */ /* Karty osob — uklad „arkada": portret z lukiem u gory i prostym dolem, pod nim nazwisko serifem, rola i metody. Na hover CALY kafelek dostaje fioletowy tint w tym samym ksztalcie luku. Kolumny sa STALE (4/2/1), nie auto-fill. auto-fill liczy, ile kolumn o zadanej szerokosci zmiesci sie w kontenerze — przy szerokim ekranie robil ich piec, czwarta karta konczyla sie w 4/5 szerokosci i z prawej zostawala pusta kolumna. Stala liczba kolumn zawsze dociaga siatke do prawej krawedzi sekcji. */ .in-people { list-style: none; padding: 0; margin: 44px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px 24px; } @media (max-width: 900px) { .in-people { grid-template-columns: repeat(2, 1fr); } } /* 999px na gornych rogach: przegladarka skaluje promienie do rozmiaru pudelka, wiec luk zawsze wychodzi rownym polkolem o promieniu polowy szerokosci — i to samo dzieje sie na kafelku, i na zdjeciu. Dzieki temu oba luki pokrywaja sie idealnie przy dowolnej szerokosci kolumny. Wartosci w px by sie rozjechaly. */ /* Karta jest kolumna flex, a .in-person-b rosnie do jej wysokosci — dzieki temu przycisk „Zobacz profil" (margin-top:auto nizej) siada na DOLE karty. Bez tego CTA lezalo tuz pod tekstem, a ze nazwiska i listy metod maja rozna dlugosc, cztery przyciski w rzedzie stały na czterech roznych wysokosciach. */ .in-person { display: flex; flex-direction: column; background: transparent; border: 0; padding: 0 0 26px; border-radius: 28px; overflow: hidden; transition: background .35s ease, transform .35s ease, box-shadow .35s ease, border-radius .35s ease; } .in-person:hover, .in-person:focus-within { background: var(--brand-50, #E7EDF9); border-radius: 28px; transform: translateY(-4px); box-shadow: 0 22px 52px rgba(100,59,129,.10); } .in-person-m { display: block; width: 100%; aspect-ratio: 3 / 4; overflow: hidden; background: var(--brand-50, #E7EDF9); border-radius: 999px 999px 14px 14px; } .in-person-m img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 18%; } .in-person-i { display: grid; place-items: center; height: 100%; font-family: var(--font-heading, 'Baloo 2', sans-serif); font-size: 54px; letter-spacing: .04em; color: var(--brand-primary, #643B81); opacity: .45; } /* kafelek z inicjalami nie moze zniknac na hoverze — tint ma ten sam kolor */ .in-person:hover .in-person-m, .in-person:focus-within .in-person-m { background: #fff; } .in-person-b { flex: 1; display: flex; flex-direction: column; padding: 20px 16px 0; } .in-person h3 { font-family: var(--font-heading, 'Baloo 2', sans-serif); font-weight: 400; line-height: 1.2; margin: 0 0 8px; } .in-person .in-p { font-size: 15px; line-height: 1.6; margin: 0 0 10px; } .in-person .in-p:last-of-type { margin-bottom: 12px; } .in-methods { font-size: 14px; line-height: 1.6; color: var(--color-text-muted, #413B4D); margin: 0 0 24px; } .in-methods span { font-weight: 600; color: var(--color-text, #0B1220); } /* CTA w pigulce — obwodka, na hover kafelka wypelnia sie fioletem */ .in-person-cta { display: inline-flex; align-items: center; gap: 12px; align-self: flex-start; margin-top: auto; padding-top: 16px; padding: 9px 10px 9px 20px; border: 1px solid var(--brand-primary, #643B81); border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--brand-primary, #643B81); text-decoration: none; position: relative; z-index: 1; flex-shrink: 0; transition: background .3s ease, color .3s ease; } .in-person-ar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--brand-primary, #643B81); color: #fff; font-size: 14px; line-height: 1; transition: background .3s ease, color .3s ease; } .in-person-cta:hover, .in-person-cta:focus-visible { color: #fff; } .in-person-cta:hover .in-person-ar, .in-person-cta:focus-visible .in-person-ar { background: #fff; color: var(--brand-primary, #643B81); } /* UWAGA NA KOLEJNOSC: ten blok musi stac PO regulach bazowych `.in-person` i `.in-person-m` — media query nie podnosi specyficznosci, wiec postawiony wyzej (przy pozostalych breakpointach `.in-people`) po prostu przegrywal. */ /* Telefon: karta klada sie na bok — mala fotografia po lewej, opis po prawej. W ukladzie pionowym zdjecie brało pelna szerokosc przy proporcji 3/4, czyli ~470 px wysokosci, i na ekran wchodzila DOKLADNIE JEDNA osoba. Teraz karta ma ~300 px i widac dwie naraz — o to chodzilo. */ /* Prog byl 520 px, czyli praktycznie nigdzie: przy 560-900 px karta wciaz stala pionowo, a portret w jednej kolumnie mial ~470 px wysokosci i na ekran wchodzila jedna osoba. Od 760 px w dol karta klada sie na bok. */ @media (max-width: 760px) { .in-people { grid-template-columns: 1fr; gap: 14px; } /* Delikatnie fioletowe tlo NA STALE, nie tylko pod palcem — na telefonie to ono trzyma kafelek w kupie (na dotyku stan :hover i tak zostaje przyklejony po tapnieciu, wiec i tak bylo widoczne polowicznie). */ .in-person { flex-direction: row; align-items: flex-start; gap: 16px; background: var(--in-soft, #F4F1F7); padding: 16px 18px 18px; } .in-person:hover, .in-person:focus-within { transform: none; } .in-person-m { flex: 0 0 124px; width: 124px; border-radius: 999px 999px 12px 12px; } .in-person-b { padding: 2px 0 0; } .in-person h3 { margin-bottom: 6px; } .in-person .in-p { font-size: 14px; } .in-methods { font-size: 13px; margin-bottom: 16px; } /* inicjały w kafelku bez zdjęcia musza zejsc razem z kadrem */ .in-person-i { font-size: 34px; } /* Na kafelku zostaje ZAJAWKA, calosc jest na profilu (przycisk pod spodem). Bez tego samo zmniejszenie zdjecia nie wystarczylo: opisy maja po 50-90 slow, wiec karta i tak mierzyla ~475 px i druga osoba nie wchodzila na ekran. */ .in-person .in-p, .in-methods { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .in-person .in-p { -webkit-line-clamp: 5; } .in-methods { -webkit-line-clamp: 3; } } /* CTA calego modulu nie moze wygladac jak doklejone do pierwszej karty. :has ogranicza regule wyłącznie do sekcji zespolu, bez zmiany pozostalych przyciskow generowanych bezposrednio pod siatkami. */ .in-sec:has(.in-people) > .in-wrap > .in-btn { margin-top: clamp(38px, 4vw, 58px); } @media (max-width: 600px) { .in-sec:has(.in-people) > .in-wrap > .in-btn { width: 100%; margin-top: 32px; text-align: center; } } /* stary link tekstowy zostaje — uzywaja go inne bloki */ .in-link { font-size: 14px; font-weight: 600; color: var(--brand-primary, #643B81); } .in-link:hover { text-decoration: underline; } /* cytat */ /* Pojedynczy cytat = stylistyka modulu „insight" z homepage (.in-ig): male nadkreslenie i duze fioletowe zdanie, BEZ ramki, tla i kursywy. Wczesniej byl to plaski lawendowy pas przez cala szerokosc, ktory nie mowil niczego poza „tu jest jakis tekst". Typografia 1:1 z `.in-ig-text` w index.html — zmieniasz jedno, sprawdz drugie. */ .in-quote { margin: 0; padding: 0; background: none; border: 0; border-radius: 0; } .in-quote-k { font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--color-text-muted, #413B4D); margin: 0 0 20px; } .in-quote blockquote { margin: 0; font-family: var(--font-heading, 'Baloo 2', sans-serif); font-weight: 400; font-size: clamp(26px, 3.1vw, 44px); line-height: 1.14; letter-spacing: -.01em; font-style: normal; color: var(--brand-primary, #643B81); } /* w waskich kolumnach (szyna wpisu, karta showcase) cytat nie moze byc naglowkiem — tam schodzi do rozmiaru leadu */ .in-art-rail .in-quote blockquote, .in-showcase-copy > .in-quote blockquote { font-size: 20px; line-height: 1.4; max-width: none; } /* w tresci wpisu to cytat srodtytulowy, nie otwarcie sekcji — nie moze byc wiekszy od naglowkow artykulu */ .in-art-body .in-quote blockquote { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.28; } .in-art-body .in-quote { margin: 8px 0 30px; } .in-quote-a { display: block; margin-top: 18px; font-size: 14px; font-style: normal; letter-spacing: .04em; color: var(--color-text-muted, #413B4D); } /* ══════════════════════════════════════════════════════════════════ CENNIK ────────────────────────────────────────────────────────────────── Sekcja z variant:"pricing" (patrz content/.json) układa się w trzy kolumny: nagłówek + lead + ramka „warto wiedzieć" po lewej, karty po prawej. Bez wariantu karty stoją pod nagłówkiem, jak dawniej. Kartę można wyróżnić flagą "highlight": true w JSON-ie — build.py dokłada wtedy .in-price--hl (ciemny fiolet). Jeden akcent na sekcję, inaczej przestaje cokolwiek znaczyć. ══════════════════════════════════════════════════════════════════ */ .in-price { display: flex; flex-direction: column; background: var(--in-surface, #fff); border: 1px solid var(--color-border, #C6C4D8); border-radius: var(--radius-lg, 12px); padding: 34px 32px 32px; } .in-price-l { font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-primary, #643B81); margin: 0 0 10px; } .in-price-n { font-size: 15px; color: var(--color-text-muted, #413B4D); margin: 0 0 6px; } .in-price-v { display: flex; align-items: baseline; gap: 6px; margin: 0 0 22px; } .in-price-a { font-family: var(--font-heading, inherit); font-size: 52px; font-weight: 700; line-height: 1; } .in-price-c { font-size: 20px; color: var(--color-text-muted, #413B4D); } .in-price .in-check { margin-bottom: 24px; } /* przycisk siada na dole karty, żeby obie karty miały go w jednej linii niezależnie od tego, ile pozycji ma lista */ .in-price .in-btn { margin-top: auto; align-self: flex-start; } /* --- karta wyróżniona --- */ .in-price--hl { background: var(--brand-900, #643B81); border-color: var(--brand-900, #643B81); color: #fff; } .in-price--hl .in-price-l { color: var(--brand-300, #C6C4D8); } .in-price--hl .in-price-n, .in-price--hl .in-price-c { color: rgba(255,255,255,.68); } .in-price--hl .in-check li { color: rgba(255,255,255,.9); } .in-price--hl .in-check li::before { color: var(--brand-300, #C6C4D8); } .in-price--hl .in-btn { background: #fff; color: var(--brand-900, #643B81); } /* --- układ sekcji: nagłówek po lewej, karty po prawej --- */ /* Wiersze: nagłówek, lead, PUSTY rozpychacz, ramka. Rozpychacz (1fr) zjada nadmiar wysokości, przez co nagłówek trzyma się góry, a ramka dna — tak jak we wzorze. Bez niego wszystkie trzy elementy rozjeżdżały się równomiernie na całą wysokość kart. */ .in-sec.in-pricing > .in-wrap { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); grid-template-rows: auto auto 1fr auto; gap: 0 64px; align-items: start; } .in-sec.in-pricing > .in-wrap > h2 { grid-column: 1; grid-row: 1; margin: 0 0 16px; } .in-sec.in-pricing > .in-wrap > .in-lead { grid-column: 1; grid-row: 2; margin: 0; } .in-sec.in-pricing > .in-wrap > .in-note { grid-column: 1; grid-row: 4; margin: 32px 0 0; } /* karty zajmują prawą kolumnę przez całą wysokość sekcji */ .in-sec.in-pricing > .in-wrap > .in-grid2 { grid-column: 2; grid-row: 1 / -1; align-items: stretch; } /* pojedyncza cena (bez siatki dwóch pakietów) — np. kurs online. Bez tego blok `pricing` stojący bezpośrednio w sekcji wypadał poza prawą kolumnę i rozlewał się na całą szerokość, przez co cena wyglądała na zgubioną w pustym pudle. */ .in-sec.in-pricing > .in-wrap > .in-price { grid-column: 2; grid-row: 1 / -1; } .in-sec.in-pricing .in-grid2 > * { height: 100%; } /* TRZY pakiety nie mieszczą się w układzie z nagłówkiem po lewej — w kolumnie 8fr karta schodzi do ~230 px i pozycje listy łamią się po dwa słowa. Dlatego sekcja z trzema cenami zostaje BEZ variantu „pricing": nagłówek idzie nad siatką, a karty biorą pełną szerokość. Same karty wyglądają identycznie — to ten sam blok `pricing`. */ .in-grid3 > .in-price { height: 100%; } @media (max-width: 1000px) { .in-sec.in-pricing > .in-wrap { grid-template-columns: 1fr; gap: 32px; } .in-sec.in-pricing > .in-wrap > h2, .in-sec.in-pricing > .in-wrap > .in-lead, .in-sec.in-pricing > .in-wrap > .in-note, .in-sec.in-pricing > .in-wrap > .in-grid2 { grid-column: 1; grid-row: auto; } } /* Certyfikacja w hierarchii sekcji „Wybierz swoj format sesji": lewa kolumna wyjasnia oferte i domyka sie ramka, prawa jest jedna karta ceny. Kroki procesu trafiaja do checklisty karty przez render_section(). */ .in-sec.in-cert-pricing { padding-block: 112px 128px; } .in-cert-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(520px, 7fr); gap: clamp(58px, 7vw, 104px); align-items: stretch; } .in-cert-head { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; } .in-cert-head > h2 { max-width: 10.5ch; margin: 0 0 28px; line-height: .98; letter-spacing: -.04em; text-wrap: balance; } .in-cert-head > .in-lead { max-width: 35ch; margin: 0; font-size: clamp(19px, 2vw, 25px); line-height: 1.48; color: var(--color-text, #0B1220); } .in-cert-head > .in-note { width: 100%; margin: auto 0 0; padding: 29px 30px 31px; border: 1px solid rgba(100,59,129,.12); border-radius: 18px; box-shadow: 0 16px 42px rgba(100,59,129,.055); } .in-cert-head > .in-note .in-note-t { margin-bottom: 14px; color: var(--brand-primary, #643B81); font-size: 12px; letter-spacing: .15em; } .in-cert-head > .in-note .in-p { color: var(--color-text, #0B1220); font-size: 16px; line-height: 1.65; } .in-cert-card { min-width: 0; } .in-cert-card > .in-price { height: 100%; min-height: 720px; padding: 46px 44px 42px; border: 1px solid rgba(100,59,129,.12); border-radius: 22px; box-shadow: 0 24px 64px rgba(100,59,129,.09); } .in-cert-card .in-price-l { max-width: 38ch; margin-bottom: 14px; font-size: 13px; line-height: 1.35; } .in-cert-card .in-price-n { margin-bottom: 12px; font-size: 16px; line-height: 1.5; } .in-cert-card .in-price-v { margin-bottom: 34px; } .in-cert-card .in-price-a { font-size: clamp(64px, 7vw, 92px); letter-spacing: -.055em; } .in-cert-card .in-price-c { font-size: 24px; } .in-cert-card .in-check { gap: 22px; margin-bottom: 36px; } .in-cert-card .in-check li { padding-left: 36px; color: var(--color-text, #0B1220); font-size: 16px; line-height: 1.58; } .in-cert-card .in-check li::before { left: 7px; top: 5px; width: 8px; height: 15px; border-width: 0 2.5px 2.5px 0; } .in-cert-card .in-check strong { display: inline; font-weight: 650; } .in-cert-card .in-btn { padding-inline: 28px; } @media (max-width: 1000px) { .in-sec.in-cert-pricing { padding-block: 88px 104px; } .in-cert-grid { grid-template-columns: 1fr; gap: 34px; } .in-cert-head > h2 { max-width: 13ch; } .in-cert-head > .in-lead { max-width: 46ch; } .in-cert-head > .in-note { margin-top: 34px; } .in-cert-card > .in-price { min-height: 0; } } @media (max-width: 600px) { .in-sec.in-cert-pricing { padding-block: 72px 88px; } .in-cert-head > .in-lead { font-size: 18px; } .in-cert-head > .in-note { padding: 25px 23px 27px; border-radius: 16px; } .in-cert-card > .in-price { padding: 34px 24px 30px; border-radius: 20px; } .in-cert-card .in-price-a { font-size: 64px; } .in-cert-card .in-check { gap: 20px; } .in-cert-card .in-check li { padding-left: 32px; font-size: 15px; } .in-cert-card .in-btn { width: 100%; justify-content: center; text-align: center; } } /* ══════════════════════════════════════════════════════════════════ TABELA — zestawienie na kreskach, bez bialej karty ────────────────────────────────────────────────────────────────── Wzor: tabela sesji z qpsychology.com.au. Naglowek na delikatnym ticie i grubszej kresce, wiersze rozdzielone wlosowa linia, duzo powietrza w komorkach. Zadnej ramki, tla ani zaokraglen — tabela ma czytac sie jak zestawienie, nie jak kafelek. margin-top: nad tabela stoi zwykle przycisk albo akapit i bez tego odstepu tabela kleila sie do niego krawedzia. Naglowki puste w danych (["", ""]) nie renderuja wcale — patrz render_block w build.py. ══════════════════════════════════════════════════════════════════ */ .in-tw { overflow-x: auto; margin: 34px 0 24px; } .in-table { border-collapse: collapse; width: 100%; min-width: 520px; background: transparent; border: 0; border-radius: 0; font-size: 16px; } .in-table thead th { font-family: var(--font-heading, 'Baloo 2', sans-serif); font-weight: 400; font-size: 22px; line-height: 1.3; text-align: left; padding: 18px 24px; background: var(--brand-50, #E7EDF9); border-bottom: 2px solid var(--color-text, #0B1220); } .in-table td { padding: 20px 24px; text-align: left; vertical-align: top; line-height: 1.6; border-bottom: 1px solid rgba(11,18,32,.14); } /* pierwsza kolumna to etykieta wiersza — ciemniejsza i grubsza, zeby dalo sie skanowac tabele wzrokiem po lewej krawedzi */ .in-table td:first-child { font-weight: 600; color: var(--color-text, #0B1220); white-space: nowrap; } .in-table td:not(:first-child) { color: var(--color-text-muted, #413B4D); } /* tabela porownawcza (Przed / Po) ma dwie rownorzedne kolumny z pelnymi zdaniami — tam nie ma etykiety do wyroznienia ani czego trzymac w jednej linii */ .in-table thead ~ tbody td:first-child { font-weight: 400; white-space: normal; color: var(--color-text-muted, #413B4D); } @media (max-width: 600px) { .in-tw { width: 100%; max-width: 100%; margin: 26px 0 20px; overflow-x: visible; } .in-table { width: 100%; min-width: 0; table-layout: fixed; font-size: 14px; } .in-table thead th { padding: 14px 10px; font-size: 18px; overflow-wrap: anywhere; } .in-table td { padding: 14px 8px; line-height: 1.5; overflow-wrap: anywhere; } .in-table td:first-child { width: 42%; white-space: normal; } } /* Przed / po — interaktywny przełącznik zamiast statycznej tabeli. */ .in-ba { width: 100%; margin: 34px 0 28px; } .in-ba-switch { width: min(100%, 420px); margin: 0 0 22px; padding: 5px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px; background: var(--color-border, #C6C4D8); border-radius: 999px; } .in-ba-tab { min-height: 48px; padding: 11px 24px; border: 0; border-radius: 999px; background: transparent; color: var(--color-text, #0B1220); font: 700 15px/1 var(--font-body, 'Source Sans Pro', sans-serif); cursor: pointer; transition: color .28s ease, background-color .28s ease, transform .28s ease; } .in-ba-tab:hover { transform: translateY(-1px); } .in-ba-tab.is-active { background: var(--brand-primary, #643B81); color: #fff; } .in-ba-stage { padding: 34px; background: rgba(255,255,255,.72); border: 1px solid var(--color-border, #C6C4D8); border-radius: 24px; transition: background-color .34s ease, border-color .34s ease; } .in-ba[data-view="after"] .in-ba-stage { background: var(--brand-bg, #E7EDF9); border-color: var(--brand-secondary, #5E689A); } .in-ba-label { display: flex; align-items: center; gap: 10px; margin: 0 0 24px; color: var(--brand-primary, #643B81); font-size: 12px; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; } .in-ba-label span { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-accent, #67B6C0); } .in-ba-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .in-ba-list li { min-height: 88px; padding: 18px 20px; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 12px; align-items: start; background: #fff; border: 1px solid var(--color-border, #C6C4D8); border-radius: 17px; } .in-ba-n { color: var(--brand-secondary, #5E689A); font-size: 12px; font-weight: 800; letter-spacing: .08em; } .in-ba-copy { color: var(--color-text, #0B1220); font-size: 16px; line-height: 1.5; } .in-ba-stage.is-changing .in-ba-list li { animation: in-ba-reveal .46s both; } .in-ba-stage.is-changing .in-ba-list li:nth-child(2) { animation-delay: .04s; } .in-ba-stage.is-changing .in-ba-list li:nth-child(3) { animation-delay: .08s; } .in-ba-stage.is-changing .in-ba-list li:nth-child(4) { animation-delay: .12s; } .in-ba-stage.is-changing .in-ba-list li:nth-child(5) { animation-delay: .16s; } .in-ba-stage.is-changing .in-ba-list li:nth-child(6) { animation-delay: .20s; } @keyframes in-ba-reveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 680px) { .in-ba { margin-top: 26px; } .in-ba-switch { width: 100%; } .in-ba-stage { padding: 22px 16px 16px; border-radius: 20px; } .in-ba-list { grid-template-columns: 1fr; gap: 9px; } .in-ba-list li { min-height: 0; padding: 16px; border-radius: 15px; } } /* Przed / po jako widoczna od razu transformacja: chaos przechodzi w spiralę, a obie listy rezultatów pozostają obok siebie bez klikania. */ .in-ba-transform { margin: 30px 0 28px; } .in-ba-line { width: 100%; margin: 0 0 18px; overflow: hidden; } .in-ba-line svg { display: block; width: 100%; height: auto; max-height: 250px; } .in-ba-line :is(path, polyline) { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; } .in-ba-chaos path, .in-ba-bridge, .in-ba-spiral { stroke: #5E689A; } .in-ba-chaos path { stroke-width: 3.2; } .in-ba-bridge { stroke-width: 3.2; } .in-ba-spiral { stroke-width: 3.5; } .in-ba-transform.is-visible .in-ba-chaos path { stroke-dashoffset: 0; transition: stroke-dashoffset 1.15s cubic-bezier(.25,.7,.2,1); } .in-ba-transform.is-visible .in-ba-chaos path:nth-child(2) { transition-delay: .16s; } .in-ba-transform.is-visible .in-ba-bridge { stroke-dashoffset: 0; transition: stroke-dashoffset .9s .55s ease; } .in-ba-transform.is-visible .in-ba-spiral { stroke-dashoffset: 0; transition: stroke-dashoffset 1.55s 1.08s cubic-bezier(.22,.74,.22,1); } .in-ba-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; } .in-ba-col { padding: 28px; background: rgba(255,255,255,.72); border: 1px solid var(--color-border, #C6C4D8); border-radius: 22px; transition: transform .8s .3s cubic-bezier(.22,.74,.22,1), border-color .4s ease; } .in-ba-col--before { transform: translateX(-14px); } .in-ba-col--after { transform: translateX(14px); border-color: var(--brand-accent, #67B6C0); } .in-ba-transform.is-visible .in-ba-col { transform: translateX(0); } .in-ba-col h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--brand-primary, #643B81); font: 800 13px/1 var(--font-body, 'Source Sans Pro', sans-serif); letter-spacing: .14em; text-transform: uppercase; } .in-ba-col h3 span { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-secondary, #5E689A); } .in-ba-col--after h3 span { background: var(--brand-accent, #67B6C0); } .in-ba-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .in-ba-col li { min-height: 64px; padding: 15px 16px; display: grid; grid-template-columns: 34px minmax(0,1fr); gap: 10px; align-items: center; background: #fff; border: 1px solid var(--color-border, #C6C4D8); border-radius: 15px; color: var(--color-text, #0B1220); font-size: 15px; line-height: 1.45; } .in-ba-col .in-ba-n { color: var(--brand-secondary, #5E689A); } .in-ba-col--after .in-ba-n { color: var(--brand-primary, #643B81); } @media (max-width: 720px) { .in-ba-line { margin-bottom: 8px; } .in-ba-line svg { min-width: 0; width: 100%; transform: none; } .in-ba-cols { grid-template-columns: 1fr; gap: 14px; } .in-ba-col { padding: 20px 16px; border-radius: 19px; } .in-ba-col--before, .in-ba-col--after { transform: translateY(10px); } .in-ba-transform.is-visible .in-ba-col { transform: translateY(0); } } /* ramka "warto wiedziec" — biale tlo, nie fioletowy tint. Tint niknal na gradiencie strony i ramka wygladala jak przypadkowa plama; biel odcina ja czysto, tak samo jak pozostale kafelki na podstronach. */ /* 13.08: na CZYSTEJ bieli (nie --in-surface, ktore po „otuleniu" jest rozowe) i na PELNA szerokosc kolumny — prosba klientki. */ .in-note { display: block; width: 100%; background: #fff; border: 1px solid rgba(100,59,129,.12); border-radius: 22px; padding: 30px 32px; margin: 40px 0 24px; box-shadow: 0 18px 48px rgba(100,59,129,.07); } /* ramka na poczatku kontenera nie potrzebuje gornego odstepu */ .in-note:first-child { margin-top: 0; } .in-note-t { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--brand-primary, #643B81); margin: 0 0 14px; } .in-note > :last-child { margin-bottom: 0; } .in-note .in-p { font-size: 15px; line-height: 1.65; } @media (max-width: 600px) { .in-note { width: 100%; padding: 25px 22px 27px; border-radius: 18px; } } /* Oferta indywidualna: opis i CTA po lewej, karta „Warto wiedzieć” po prawej. */ .in-note-right-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(320px,.75fr); gap: clamp(42px, 6vw, 96px); align-items: start; } .in-note-right-copy .in-lead { max-width: 760px; } .in-note-right-copy .in-bullets { margin-bottom: 30px; } .in-note-right-copy > .in-btn { margin-top: 6px; } .in-note-right-aside { padding-top: 8px; } .in-note-right-aside .in-note { width: 100%; margin: 0; padding: 34px; } @media (max-width: 920px) { .in-note-right-grid { grid-template-columns: 1fr; gap: 32px; } .in-note-right-aside { padding-top: 0; } } /* Dwie ścieżki do gry — ten sam uklad 3-kolumnowy co wycena konsultacji: opis po lewej, dwie kompletne karty cenowe po prawej. */ .in-game-paths-shell { display: grid; grid-template-columns: minmax(200px, 3fr) repeat(3, minmax(0, 4fr)); gap: clamp(20px, 2.5vw, 32px); align-items: stretch; } .in-game-paths-head { min-width: 0; margin: 0; padding: 10px 8px 10px 0; display: flex; flex-direction: column; align-items: flex-start; } .in-game-paths-eyebrow { margin: 0 0 14px; color: var(--brand-secondary, #5E689A); font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; } .in-game-paths-head h2 { max-width: 9ch; margin: 0 0 26px; line-height: .98; letter-spacing: -.04em; text-wrap: balance; } .in-game-paths-head .in-lead { max-width: 32ch; margin: 0; color: var(--color-text, #0B1220); font-size: clamp(18px, 1.65vw, 23px); line-height: 1.5; } .in-game-paths-grid { display: contents; } .in-game-paths-grid .in-price { min-width: 0; min-height: 650px; padding: 42px 38px 38px; border-radius: 24px; background: #fff; box-shadow: 0 20px 54px rgba(100,59,129,.07); } .in-game-paths-grid .in-price--hl { background: var(--brand-900, #643B81); border-color: var(--brand-900, #643B81); color: #fff; } .in-game-paths-grid .in-price-l { /* ⚠️ `ch` liczy szerokosc cyfry zero i NIE uwzglednia rozstrzelenia liter. Przy `letter-spacing: .12em` i wersalikach napis zajmuje okolo 12% wiecej, wiec 34ch lamalo „Sesja indywidualna · 4–6 godzin” (30 znakow) na dwie linijki bez powodu. Zgloszone przez Bartka 27.08.2026. */ max-width: 42ch; margin-bottom: 18px; padding: 0; background: transparent; color: var(--brand-primary, #643B81); font-size: 13px; line-height: 1.35; letter-spacing: .12em; } .in-game-paths-grid .in-price-n { margin: 0 0 26px; max-width: 46ch; font-size: 15px; line-height: 1.58; } .in-game-paths-grid .in-price-v { margin-bottom: 22px; } .in-game-paths-grid .in-price-a { font-size: clamp(48px, 4.5vw, 72px); letter-spacing: -.045em; } .in-game-paths-grid .in-check { margin: 0 0 32px; gap: 18px; } .in-game-paths-grid .in-check li { font-size: 16px; line-height: 1.55; } .in-game-paths-grid .in-btn { min-height: 54px; padding-inline: 26px; border-radius: 999px; } .in-game-paths-grid .in-price--hl .in-price-l { color: var(--brand-300, #C6C4D8); } @media (max-width: 1200px) { .in-game-paths-shell { grid-template-columns: repeat(3, minmax(0, 1fr)); } .in-game-paths-head { grid-column: 1 / -1; max-width: 720px; padding-bottom: 12px; } .in-game-paths-head h2 { max-width: 13ch; } .in-game-paths-grid .in-price { min-height: 460px; } } @media (max-width: 680px) { .in-game-paths-shell { grid-template-columns: 1fr; gap: 16px; } .in-game-paths-head { grid-column: 1; padding: 0 0 16px; } .in-game-paths-grid .in-price { min-height: 0; padding: 30px 24px; border-radius: 22px; } .in-game-paths-grid .in-price .in-btn { width: 100%; justify-content: center; } } /* Hero kontaktu: dane kontaktowe w kafelkach po lewej, zdjęcie obok. Cały moduł celowo niższy od hero „ofertowych" — to tylko wstęp do formularza pod spodem. Zdjęcie jest wąskim, pionowym kadrem po prawej, nie połową ekranu (wcześniej 700 px wysokości zjadało cały ekran). */ .in-contact-hero { margin-top: -96px; padding: 138px 0 66px; text-align: left; } /* Kolumna zdjecia ma STALY limit, nie ulamek: przy 1.32/0.68 kadr konczyl sie na 380 px, a po lewej zostawal pas pustego bieli szerszy od samego naglowka. */ .in-contact-hero > .in-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 620px); gap: clamp(36px, 4.5vw, 64px); align-items: center; } .in-contact-copy { min-width: 0; align-self: center; } .in-contact-hero h1 { max-width: 14ch; margin: 0 0 20px; font-size: clamp(44px, 4.4vw, 68px); line-height: 1; letter-spacing: -.05em; text-wrap: balance; } .in-contact-hero .in-lead { max-width: 46ch; margin: 0; color: var(--color-text, #0B1220); font-size: clamp(17px, 1.2vw, 19px); line-height: 1.6; } .in-contact-cards:empty { display: none; } .in-contact-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 38px; } .in-contact-card { min-width: 0; min-height: 142px; display: flex; flex-direction: column; padding: 22px; border: 1px solid rgba(198,196,216,.9); border-radius: 22px; background: rgba(255,255,255,.78); } .in-contact-card-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; } .in-contact-icon { flex: 0 0 42px; width: 42px; height: 42px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-50, #E7EDF9); color: var(--brand-primary, #643B81); } .in-contact-icon svg { width: 21px; height: 21px; } .in-contact-card h2 { margin: 0; font: 700 14px/1.3 var(--font-body, 'Source Sans Pro', sans-serif); } .in-contact-card > a, .in-contact-card > span { color: var(--color-text, #0B1220); font-size: 16px; line-height: 1.5; overflow-wrap: anywhere; } .in-contact-card > a { text-underline-offset: 3px; } .in-contact-socials { display: flex; flex-wrap: wrap; gap: 8px; } .in-contact-socials a { width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 1px solid var(--color-border, #C6C4D8); border-radius: 50%; color: var(--brand-primary, #643B81); font-size: 13px; text-decoration: none; } .in-contact-socials a svg { width: 16px; height: 16px; } .in-contact-socials a:hover { border-color: var(--brand-primary, #643B81); } /* Kadr poziomy, nie pionowy słupek: zdjęcie źródłowe jest 3:2, więc przy 4/5 obcinaliśmy mu pół tła. 4/3 przy 620 px daje mniej więcej tę samą wysokość co poprzedni wąski kadr (465 vs 475 px) — hero nie urosło, obraz owszem. */ .in-contact-media { width: 100%; max-width: 620px; margin: 0 0 0 auto; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 26px; background: var(--brand-50, #E7EDF9); } .in-contact-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% center; opacity: 1 !important; visibility: visible !important; } @media (max-width: 960px) { .in-contact-hero > .in-wrap { grid-template-columns: 1fr; } .in-contact-hero h1 { max-width: 15ch; } .in-contact-media { max-width: 520px; margin-left: 0; } } @media (max-width: 600px) { .in-contact-hero { margin-top: -82px; padding: 118px 0 56px; } .in-contact-hero h1 { font-size: clamp(40px, 11vw, 52px); } .in-contact-cards { grid-template-columns: 1fr; margin-top: 30px; } .in-contact-card { min-height: 0; border-radius: 18px; } .in-contact-media { max-width: 100%; aspect-ratio: 4 / 3; border-radius: 20px; } } /* ══════════════════════════════════════════════════════════════════ KARTY WOKÓŁ ZDJĘCIA — blok `cards` z polem "photo" ────────────────────────────────────────────────────────────────── Dwie karty z lewej, zdjęcie na środku rozpięte na oba rzędy, dwie z prawej — ten sam układ co moduł „Wzorce" na homepage. Włącza go samo pole "photo" w bloku `cards` w content/.json; bez niego siatka zostaje zwykłą dwukolumnową. Karty stoją w kodzie po kolei 1–4, a rozstawia je dopiero grid — czytnik ekranu i tab idą po kolejności treści, nie zygzakiem. Zdjęcie świadomie bez aspect-ratio: wysokość ma brać się z rozpięcia na oba rzędy, żeby było wyższe od kolumn obok. ══════════════════════════════════════════════════════════════════ */ .in-grid-foto { grid-template-columns: minmax(0, 1fr) minmax(260px, 360px) minmax(0, 1fr); grid-template-rows: auto auto; align-items: stretch; } /* Ten sam promien co kafelki modulu „Wzorce" na homepage (20 px). Domyslne --radius-md (8 px) przy tej wielkosci karty wygladalo na prawie ostre kanty. */ .in-grid-foto > .in-card { border-radius: 20px; } .in-grid-foto > .in-card:nth-of-type(1) { grid-column: 1; grid-row: 1; } .in-grid-foto > .in-card:nth-of-type(2) { grid-column: 3; grid-row: 1; } .in-grid-foto > .in-card:nth-of-type(3) { grid-column: 1; grid-row: 2; } .in-grid-foto > .in-card:nth-of-type(4) { grid-column: 3; grid-row: 2; } .in-cardsfig { grid-column: 2; grid-row: 1 / span 2; margin: 0; min-height: 460px; overflow: hidden; border-radius: 20px; background: rgba(11,18,32,.05); box-shadow: 0 26px 60px rgba(100,59,129,.10); } .in-cardsfig img { display: block; width: 100%; height: 100%; object-fit: cover; } /* Ponizej 1080 px zdjecie w srodku scisnie karty do dwoch slow w wierszu — schodzi wiec nad nie, w kadr poziomy. */ @media (max-width: 1080px) { .in-grid-foto { grid-template-columns: 1fr 1fr; } .in-cardsfig { grid-column: 1 / -1; grid-row: 1; min-height: 0; aspect-ratio: 16 / 9; max-height: 340px; } .in-grid-foto > .in-card:nth-of-type(1) { grid-column: 1; grid-row: 2; } .in-grid-foto > .in-card:nth-of-type(2) { grid-column: 2; grid-row: 2; } .in-grid-foto > .in-card:nth-of-type(3) { grid-column: 1; grid-row: 3; } .in-grid-foto > .in-card:nth-of-type(4) { grid-column: 2; grid-row: 3; } } @media (max-width: 700px) { .in-grid-foto { grid-template-columns: 1fr; } .in-cardsfig { aspect-ratio: 4 / 3; } .in-grid-foto > .in-card:nth-of-type(1), .in-grid-foto > .in-card:nth-of-type(2), .in-grid-foto > .in-card:nth-of-type(3), .in-grid-foto > .in-card:nth-of-type(4) { grid-column: 1; grid-row: auto; } } /* ══════════════════════════════════════════════════════════════════ BLOK ROZPOZNANIA — wariant „zdania" ────────────────────────────────────────────────────────────────── Zdania typu „rozpoznajesz siebie?" w rytmie modułu „Wzorce, które wracają mimo wszystko" z homepage: równa siatka kafelków, w każdym ikona liniowa, numer w rogu, tytuł i dopowiedzenie. Wcześniej były to kafelki przesunięte naprzemiennie w pionie, co drugi na fiolecie. Zmiana na prośbę klientki — ten sam blok ma wyglądać tak samo na homepage i na podstronie. To WARIANT bloku `list`, wybierany przez "variant": "zdania" w content/.json. Domyślny wygląd listy zostaje bez zmian — `list` jedzie na 15 podstronach i globalna zmiana rozwaliłaby je wszystkie. Markup (ikona, numer, podział zdania na tytuł i dopowiedzenie) robi render_zdania() w build.py — numery nie są już licznikiem CSS. ══════════════════════════════════════════════════════════════════ */ .in-sec.in-zdania .in-zd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin: 40px 0 34px; padding: 0; list-style: none; align-items: stretch; } /* Kafelek 1:1 jak .in-pn-it z homepage: mleczna biel na gradiencie tla, jasna obwodka, rozmycie pod spodem i cien. Zadnego naprzemiennego fioletu ani przesuniec w pionie — siatka ma byc rowna. */ .in-sec.in-zdania .in-zd-it { position: relative; padding: 38px 40px 42px; /* tlo 1:1 z .in-pn-it na homepage (13.08): poswiaty w rogach na bieli */ background: radial-gradient(78% 62% at 78% 12%, rgba(140,102,178,.20) 0%, rgba(140,102,178,0) 62%), radial-gradient(70% 58% at 12% 88%, rgba(103,182,192,.18) 0%, rgba(103,182,192,0) 60%), #fff; border: 1px solid rgba(198,196,216,.55); border-radius: 20px; box-shadow: 0 18px 46px rgba(100,59,129, .09); transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease; } .in-sec.in-zdania .in-zd-it:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(100,59,129, .14); border-color: rgba(100, 59, 129, .28); } .in-sec.in-zdania .in-zd-ic { display: block; width: 56px; height: 56px; margin: 0 0 30px; color: var(--brand-primary, #643B81); } /* numer WIELKIM serifem w pastelowym fiolecie — jak na homepage (13.08) */ .in-sec.in-zdania .in-zd-n { position: absolute; top: 26px; right: 30px; margin: 0; font-family: var(--font-display, Georgia, serif); font-size: 56px; line-height: 1; font-weight: 400; color: rgba(100, 59, 129, .34); } /* tytul serifem jak na homepage; DM Serif Display ma tylko wage 400 */ .in-sec.in-zdania .in-zd-it h3 { font-family: var(--font-display, Georgia, serif); line-height: 1.25; font-weight: 400; margin: 0 0 12px; max-width: 22ch; } .in-sec.in-zdania .in-zd-it p { font-size: 15px; line-height: 1.65; margin: 0; color: var(--color-text-muted, #413B4D); max-width: 46ch; } @media (max-width: 1100px) { .in-sec.in-zdania .in-zd-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } .in-sec.in-zdania .in-zd-it { padding: 30px 30px 34px; } .in-sec.in-zdania .in-zd-n { top: 28px; right: 28px; } } @media (max-width: 620px) { .in-sec.in-zdania .in-zd-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════════ ROZSYPANIE KAFELKÓW PRZY SCROLLU — dokładka do wariantu „zdania" ────────────────────────────────────────────────────────────────── Sekcja robi się wysoka (220vh), a jej wnętrze przykleja się na wysokość ekranu. Przewijanie tej wysokości to postęp animacji 0 → 1, który skrypt wpisuje w --p. Kafelki startują ułożone jeden na drugim na środku, przykrywając nagłówek, i rozjeżdżają się na swoje miejsca wokół niego. Pozycje docelowe są w vw, nie w px: przy sztywnych pikselach na węższym ekranie kafelki wyjeżdżały poza sekcję. Efekt WŁĄCZA SIĘ DOPIERO OD 1400 px. Niżej nie ma dokąd rozsypywać kafelków — zostaje zwykła siatka, bez wysokiej sekcji i bez sticky. ⚠️ 19.08.2026 — próg podniesiony z 1100 na 1400 px. Przy 1100–1400 px kafelki (sztywne 300 px) wchodziły na nagłówek i wprowadzenie, bo najbliższy środka kafelek stoi na 24vw, czyli przy 1200 px zaledwie 288 px od osi — mniej niż połowa jego szerokości plus połowa tekstu. Dlatego oprócz progu kafelki skalują się z szerokością ekranu, a środkowa kolumna ma sufit liczony w vw: korytarz na tekst nigdy nie jest szerszy niż wolne miejsce między kafelkami. Bez guardu prefers-reduced-motion — tak jak hero, FAQ i karty mentoringu. ══════════════════════════════════════════════════════════════════ */ @media (min-width: 1400px) { .in-sec.in-rozsyp { min-height: 220vh; padding: 0; } .in-sec.in-rozsyp > .in-wrap { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .in-sec.in-rozsyp > .in-wrap > h2 { text-align: center; max-width: min(16ch, 32vw); margin: 0 0 18px; } .in-sec.in-rozsyp > .in-wrap > .in-lead { text-align: center; max-width: min(54ch, 28vw); margin: 0; } /* siatka przestaje byc siatka — staje sie plaszczyzna, na ktorej kafelki sa pozycjonowane absolutnie wzgledem srodka */ .in-sec.in-rozsyp .in-zd-grid { position: absolute; inset: 0; display: block; margin: 0; padding: 0; pointer-events: none; } /* -50%/-50% w transformie, NIE ujemny margines: kafelki maja rozna wysokosc (od dwoch do czterech linijek), wiec staly margines centrowal je zle i dolny rzad wyjezdzal poza ekran. */ .in-sec.in-rozsyp .in-zd-it { position: absolute; left: 50%; top: 50%; width: clamp(240px, 18vw, 300px); margin: 0; z-index: 2; pointer-events: auto; transform: translate(calc(-50% + var(--x, 0px) * var(--p, 0)), calc(-50% + var(--y, 0px) * var(--p, 0))) rotate(calc(var(--r, 0deg) * var(--p, 0))) scale(calc(0.88 + 0.12 * var(--p, 0))); } /* hover podnosilby kafelek transformem i skasowal pozycje z animacji */ .in-sec.in-rozsyp .in-zd-it:hover { transform: translate(calc(-50% + var(--x, 0px) * var(--p, 0)), calc(-50% + var(--y, 0px) * var(--p, 0))) rotate(calc(var(--r, 0deg) * var(--p, 0))) scale(calc(0.88 + 0.12 * var(--p, 0))); } .in-sec.in-rozsyp .in-zd-it:nth-child(1) { --x: -30vw; --y: -23vh; --r: -3deg; } .in-sec.in-rozsyp .in-zd-it:nth-child(2) { --x: -33vw; --y: 10px; --r: -1.5deg; } .in-sec.in-rozsyp .in-zd-it:nth-child(3) { --x: -24vw; --y: 23vh; --r: 2.5deg; } .in-sec.in-rozsyp .in-zd-it:nth-child(4) { --x: 30vw; --y: -23.5vh; --r: 2deg; } .in-sec.in-rozsyp .in-zd-it:nth-child(5) { --x: 33vw; --y: 0px; --r: 1.5deg; } .in-sec.in-rozsyp .in-zd-it:nth-child(6) { --x: 25vw; --y: 22.5vh; --r: -2.5deg; } /* --- mniej niż sześć kafelków --------------------------------------- Domyślne pozycje idą kolumnami: 1-3 po lewej, 4-6 po prawej. Przy trzech kafelkach cała trójka wylądowałaby więc po jednej stronie nagłówka. Klasę z liczbą dokłada build.py (in-rozsyp--3 / --4). Nagłówek dostaje tu więcej miejsca w linii — po bokach nie stoją trzy kafelki jeden pod drugim, więc jest gdzie się rozłożyć. */ .in-sec.in-rozsyp.in-rozsyp--3 > .in-wrap > h2, .in-sec.in-rozsyp.in-rozsyp--4 > .in-wrap > h2 { max-width: 22ch; } /* -16vh, nie -19vh: kafelki tej sekcji maja po kilka linijek tekstu, wiec przy wiekszym odjechaniu w gore chowaly sie pod pigulke nawigacji */ .in-sec.in-rozsyp.in-rozsyp--3 .in-zd-it:nth-child(1) { --x: -30vw; --y: -16vh; --r: -3deg; } .in-sec.in-rozsyp.in-rozsyp--3 .in-zd-it:nth-child(2) { --x: 30vw; --y: -16vh; --r: 2.5deg; } .in-sec.in-rozsyp.in-rozsyp--3 .in-zd-it:nth-child(3) { --x: 0vw; --y: 27vh; --r: -1.5deg; } .in-sec.in-rozsyp.in-rozsyp--4 .in-zd-it:nth-child(1) { --x: -31vw; --y: -18vh; --r: -3deg; } .in-sec.in-rozsyp.in-rozsyp--4 .in-zd-it:nth-child(2) { --x: 31vw; --y: -18vh; --r: 2deg; } .in-sec.in-rozsyp.in-rozsyp--4 .in-zd-it:nth-child(3) { --x: -27vw; --y: 21vh; --r: 2.5deg; } .in-sec.in-rozsyp.in-rozsyp--4 .in-zd-it:nth-child(4) { --x: 27vw; --y: 21vh; --r: -2.5deg; } /* piec kafelkow: po dwa na kolumne i jeden pod naglowkiem. Bez tego wpadaly w domyslny uklad kolumnowy (1-3 lewa, 4-5 prawa) i prawa strona konczyla sie w polowie wysokosci. */ .in-sec.in-rozsyp.in-rozsyp--5 > .in-wrap > h2 { max-width: 22ch; } .in-sec.in-rozsyp.in-rozsyp--5 .in-zd-it:nth-child(1) { --x: -32vw; --y: -21vh; --r: -3deg; } .in-sec.in-rozsyp.in-rozsyp--5 .in-zd-it:nth-child(2) { --x: -30vw; --y: 7vh; --r: 2deg; } .in-sec.in-rozsyp.in-rozsyp--5 .in-zd-it:nth-child(3) { --x: 32vw; --y: -21vh; --r: 2.5deg; } .in-sec.in-rozsyp.in-rozsyp--5 .in-zd-it:nth-child(4) { --x: 30vw; --y: 7vh; --r: -2deg; } .in-sec.in-rozsyp.in-rozsyp--5 .in-zd-it:nth-child(5) { --x: 0vw; --y: 30vh; --r: -1.5deg; } } /* ══════════════════════════════════════════════════════════════════ KONTAKT / FORMULARZ — REGUŁA: tak samo na całym projekcie ────────────────────────────────────────────────────────────────── Po lewej nagłówek serifem, wprowadzenie i to, co formularz objaśnia; po prawej sam formularz, oddzielony pionową kreską. Bez białej karty pod formularzem — pola to same podkreślenia, przycisk na całą szerokość kolumny. Układ składa render_section w build.py, gdy sekcja zawiera blok `contact_form`. Nie trzeba nic dopisywać w treści. ══════════════════════════════════════════════════════════════════ */ /* ══════════════════════════════════════════════════════════════════ KONTAKT — trzy szpalty: dane | formularz | szybkie linki ------------------------------------------------------------------ Uklad wzorowany na referencji: waska kolumna z danymi po lewej, formularz w srodku (dostaje najwiecej miejsca), po prawej pionowy panel z odnosnikami. Wlacza go build.py, gdy sekcja ma `contact_items`. ══════════════════════════════════════════════════════════════════ */ .in-ct3-grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 3fr); gap: clamp(28px, 3vw, 52px); align-items: start; } .in-ct-dane, .in-ct-side { background: var(--in-soft, #F4F1F7); border-radius: 20px; padding: clamp(20px, 1.7vw, 26px); /* Boczne panele jada z formularzem — sam formularz jest dwa razy wyzszy niz one, wiec bez tego dane kontaktowe i szybkie linki znikaja z ekranu w polowie wypelniania. 112px = wysokosc pigulki nawigacji (64) + jej padding (2x16) + 16 px oddechu. */ position: sticky; top: 112px; align-self: start; /* awaryjnie, gdy panel jest wyzszy od okna (niskie laptopy) — przewija sie w srodku zamiast chowac koncowke pod krawedzia */ max-height: calc(100vh - 132px); overflow-y: auto; /* pasek przewijania tylko wtedy, gdy naprawde jest czego przewijac */ scrollbar-width: thin; overscroll-behavior: contain; } .in-ct-item + .in-ct-item { margin-top: 18px; padding-top: 18px; border-top: 1px solid rgba(11,18,32,.10); } .in-ct-item-l { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-primary, #643B81); } /* Etykieta i wartość mają stać jedna pod drugą przy lewej krawędzi panelu. Ikona jest więc samym rysunkiem — kółko 42 px z `.in-contact-icon` (hero) wypychało etykietę w prawo, a wartość zostawiało przy krawędzi i cała kolumna wyglądała na rozstrzeloną. */ .in-ct-dane .in-contact-icon { flex: 0 0 auto; width: auto; height: auto; display: inline-flex; background: none; border-radius: 0; } .in-ct-item-l svg { width: 16px; height: 16px; flex: 0 0 auto; } .in-ct-item-v { margin: 0; font-size: 16px; line-height: 1.45; overflow-wrap: anywhere; } .in-ct-item-v a { border-bottom: 1px solid rgba(100,59,129,.35); } .in-ct-item-v a:hover { border-bottom-color: var(--brand-primary, #643B81); } /* Same znaki serwisow zamiast nazw — trzy pigulki z tekstem lamaly sie w waskiej kolumnie do dwoch rzedow i zjadaly panel. Nazwa siedzi w aria-label/title (markup: social_link() w build.py). */ .in-ct-socials { display: flex; flex-wrap: wrap; gap: 8px; } .in-ct-socials a { width: 38px; height: 38px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(11,18,32,.14); border-radius: 50%; border-bottom: 1px solid rgba(11,18,32,.14); color: var(--brand-primary, #643B81); font-size: 14px; text-decoration: none; transition: background .2s ease, border-color .2s ease, transform .2s ease; } .in-ct-socials a svg { width: 17px; height: 17px; } .in-ct-socials a:hover { background: #fff; border-color: var(--brand-primary, #643B81); transform: translateY(-1px); } .in-ct-side-h { margin: 0 0 18px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-primary, #643B81); } .in-ct-side-l { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .in-ct-side-l li a { display: block; background: #fff; border-radius: 14px; padding: 13px 16px; font-size: 15px; line-height: 1.4; /* kafelek jest juz sygnalem klikalnosci — podkreslenie robi z niego kase liter */ text-decoration: none; border-bottom: 0; transition: transform .2s ease, box-shadow .2s ease; } .in-ct-side-l li a:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(11,18,32,.10); } /* Srodkowa kolumna to taki sam panel jak dane i szybkie linki — bez tla „Umow spotkanie" wisialo na golej bieli miedzy dwoma kaflami. Kreska z ukladu 2-kolumnowego jest tu zbedna. */ .in-ct3 .in-ct-body { border-left: 0; background: var(--in-soft, #F4F1F7); border-radius: 20px; padding: clamp(24px, 2.4vw, 40px); } .in-ct3 .in-ct-h { margin-top: 0; } /* zdanie zamykajace modul — pod przyciskiem, ciszej niz reszta tekstu */ .in-ct-outro { margin-top: 26px; padding-top: 22px; border-top: 1px solid rgba(11,18,32,.10); } .in-ct-outro p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--color-text-muted, #413B4D); } @media (max-width: 1180px) { .in-ct3-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .in-ct3 .in-ct-body { grid-column: 1 / -1; order: 3; } /* przy dwoch kolumnach panele stoja NAD formularzem, wiec nie maja przy czym stac — sticky tylko blokowalby je w polowie ekranu */ .in-ct-dane, .in-ct-side { position: static; max-height: none; overflow: visible; } } @media (max-width: 760px) { .in-ct3-grid { grid-template-columns: 1fr; } .in-ct3 .in-ct-body { grid-column: auto; } } .in-ct-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0; align-items: start; } .in-ct-head { position: sticky; top: 120px; padding-right: 64px; } .in-ct-h { font-family: var(--font-heading, 'Baloo 2', sans-serif); font-weight: 300; line-height: 1.1; letter-spacing: -.01em; margin: 0 0 20px; max-width: 14ch; } .in-ct-head .in-lead { font-size: 17px; line-height: 1.65; max-width: 44ch; margin: 0 0 22px; } .in-ct-head > :last-child { margin-bottom: 0; } .in-ct-body { padding-left: 64px; border-left: 1px solid rgba(11,18,32,.16); } /* formularz — bez karty, pola na samych podkreśleniach */ .in-form { background: transparent; border: 0; border-radius: 0; padding: 0; } .in-form-g { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 28px; margin-bottom: 34px; } .in-f-w { grid-column: 1 / -1; } /* etykiety zostają WIDOCZNE, nie schodzą do placeholderów. We wzorze są w środku pola, ale placeholder znika przy pisaniu i użytkownik traci informację, co wpisuje — przy dziesięciu polach to realny problem. */ .in-f label, .in-f-w label { display: block; font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-muted, #413B4D); margin-bottom: 8px; } .in-form input, .in-form select, .in-form textarea { width: 100%; font-family: inherit; font-size: 16px; padding: 10px 2px; border: 0; border-bottom: 1px solid rgba(11,18,32,.28); border-radius: 0; background: transparent; color: var(--color-text, #0B1220); transition: border-color .25s ease; } .in-form textarea { resize: vertical; min-height: 96px; } /* pole daty: wybór z kalendarza, nie wpisywanie z palca. Kliknięcie w dowolne miejsce pola otwiera picker (JS w index.html), więc kursor jest wskazujący. */ .in-form input[type="date"] { cursor: pointer; color-scheme: light; } .in-form input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .5; transition: opacity .2s ease; } .in-form input[type="date"]:hover::-webkit-calendar-picker-indicator, .in-form input[type="date"]:focus::-webkit-calendar-picker-indicator { opacity: 1; } .in-form input:focus, .in-form select:focus, .in-form textarea:focus { outline: none; border-bottom-color: var(--brand-primary, #643B81); border-bottom-width: 2px; padding-bottom: 9px; /* 2px kreski zamiast 1px — bez korekty pole podskakuje */ } .in-form button { border: 0; cursor: pointer; font-family: inherit; font-size: 16px; width: 100%; border-radius: 999px; padding: 17px 28px; } /* dopisek pod przyciskiem — czas odpowiedzi, nie kolejna instrukcja */ .in-form-note { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--color-text-muted, #413B4D); } .in-form ::placeholder { color: rgba(11,18,32,.38); opacity: 1; } /* TELEFON — kierunkowy z flagą (build.py → `tel_pole`, lista w `KRAJE_TEL`). Kierunkowy i numer stoją na JEDNEJ kresce: podkreślenie rysuje wrapper, a pola w środku je tracą — inaczej telefon miałby dwie kreski i wypadał z rytmu pozostałych pól. Działa tak samo w formularzach (`.in-form`) i w quizie z `/test` (`.in-qz-f`), którego style siedzą w `content/test.json`. */ .in-tel { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid rgba(11,18,32,.28); transition: border-color .25s ease; } /* 2px kreski zamiast 1px — margines -1px trzyma pole w miejscu przy focusie */ .in-tel:focus-within { border-bottom-color: var(--brand-primary, #643B81); border-bottom-width: 2px; margin-bottom: -1px; } .in-form .in-tel input, .in-form .in-tel select, .in-qz-f .in-tel input, .in-qz-f .in-tel select, .in-form .in-tel input:focus, .in-form .in-tel select:focus, .in-qz-f .in-tel input:focus, .in-qz-f .in-tel select:focus { border: 0; border-radius: 0; padding: 10px 0; outline: none; } .in-tel input { flex: 1 1 auto; min-width: 0; } /* strzałka rysowana tłem: zostaje w formularzu (wysyłka, preselekcja, brak JS), ale jest schowany: jego rozwiniętą listę rysuje system operacyjny i CSS jej nie dotyka — stąd szara ramka z niebieskim paskiem, obca wobec reszty serwisu. Przycisk i lista niżej są nasze. ══════════════════════════════════════════════════════════════════ */ .in-sel { position: relative; } .in-sel-native { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } .in-sel-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 2px; border: 0; border-bottom: 1px solid rgba(11,18,32,.28); background: transparent; font: inherit; font-size: 16px; text-align: left; color: var(--color-text, #0B1220); cursor: pointer; transition: border-color .25s ease; } .in-sel-btn:hover { border-bottom-color: rgba(11,18,32,.5); } .in-sel-btn:focus-visible { outline: 2px solid var(--brand-primary, #643B81); outline-offset: 3px; } .in-sel.is-open .in-sel-btn { border-bottom-color: var(--brand-primary, #643B81); border-bottom-width: 2px; padding-bottom: 9px; } .in-sel-chev { flex: none; width: 18px; height: 18px; color: var(--color-text-muted, #413B4D); transition: transform .2s ease; } .in-sel.is-open .in-sel-chev { transform: rotate(180deg); } .in-sel-list { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 8px); margin: 0; padding: 6px; list-style: none; max-height: 320px; overflow-y: auto; background: var(--in-surface, #fff); border: 1px solid var(--color-border, #C6C4D8); border-radius: 18px; box-shadow: 0 22px 54px rgba(100,59,129,.16); } .in-sel-list:focus { outline: none; } .in-sel-list li { padding: 12px 14px; border-radius: 12px; font-size: 15.5px; line-height: 1.45; color: var(--color-text, #0B1220); cursor: pointer; } .in-sel-list li:hover { background: var(--in-hover, rgba(0,0,0,.04)); } .in-sel-list li.is-on { background: var(--brand-50, #E7EDF9); color: var(--brand-primary, #643B81); font-weight: 600; } @media (max-width: 600px) { .in-sel-list li { font-size: 15px; padding: 11px 12px; } } /* ── Odstęp między modułem `media` a przyciskiem sekcji ──────────────── Po złożeniu do jednej kolumny CTA sekcji lądowało 9 px pod zdjęciem — wyglądało, jakby przycisk był przyklejony do kadru. Reguła działa na każdej szerokości: na desktopie też dokłada oddech pod blokiem. */ .in-two + .in-btn, .in-two + .in-btn-ghost { margin-top: 30px; } /* Galeria jako przewijana taśma (`"carousel": true` w bloku `gallery`). Mechanika i strzałki wspólne z opiniami (TASMA_JS), style tutaj — bo tam są przypięte do `.in-sec.in-testimonials`, a to inna sekcja. */ .in-gal--kar { display: block; } .in-gal--kar .in-tm-track { display: flex; gap: 24px; overflow-x: auto; scroll-behavior: smooth; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 4px; } .in-gal--kar .in-tm-track::-webkit-scrollbar { display: none; } .in-gal--kar .in-tm-track.is-fits { justify-content: center; } .in-gal--kar .in-gal-it { flex: 0 0 auto; width: min(46%, 520px); margin: 0; scroll-snap-align: start; } .in-gal--kar .in-gal-it--wide { width: min(92%, 1000px); } .in-gal--kar .in-tm-foot { display: flex; justify-content: center; margin-top: 26px; } .in-gal--kar .in-tm-foot[hidden] { display: none; } .in-gal--kar .in-tm-nav { display: flex; gap: 14px; } @media (max-width: 700px) { .in-gal--kar .in-gal-it, .in-gal--kar .in-gal-it--wide { width: min(86%, 420px); } } /* ══════════════════════════════════════════════════════════════════ KARTY TRESCI (blok `cards`) — FIOLET + PERLOWY GRADIENT (13.08) ────────────────────────────────────────────────────────────────── Prosba klientki: karty maja byc "fioletowego koloru", z ikonkami i gradientem jak perlowe tlo hero na /dla-kogo (blekit → perla → lawenda). Ikony dokladasz polem "icon" w pozycji karty (IKONY w build.py) — maja je m.in. metody pracy i "Co dostajesz po tescie". Regula lezy NA KONCU pliku celowo: nadpisuje blok "Jasne powierzchnie kart" wyzej (ta sama specyficznosc, pozniejsza wygrywa). Warianty o wyzszej specyficznosci (feature, icon-cards, posts, art-rail, services-list) zachowuja swoje style. */ .in-card { background: linear-gradient(120deg, #EAF0F7 0%, #F3F0F6 46%, #DFD9EC 100%); border-color: rgba(100,59,129,.30); } /* tytul karty w fiolecie marki — tylko w zwyklych kartach; kafelki z ikona (feature/icon-cards) trzymaja ciemny naglowek jak homepage */ .in-sec:not(.in-feature):not(.in-icon-cards) .in-card .in-card-b h3 { color: var(--brand-primary, #643B81); } /* Showcase bez ani jednego kadru — nagłówek zostaje po lewej, a karty wchodzą w kolumnę po prawej, w miejsce zdjęcia. Wcześniej wszystko szło jedno pod drugim: nagłówek na całą szerokość, a pod nim wąski słupek kart z połową ekranu pustą po prawej. Zgłoszone przez Bartka 31.08.2026. Nagłówek jest przyklejony — przy trzech krokach lista bywa wyższa niż on, a tak wprowadzenie zostaje w polu widzenia podczas czytania. ⚠️ Tylko na szerokich ekranach. Poniżej 1000 px komponent i tak zwija się do jednej kolumny (niżej w tym pliku), a ta reguła stoi PO tamtej i bez zawężenia przebiłaby ją na telefonie. */ @media (min-width: 1001px) { .in-showcase-bez-kadru > .in-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } /* Przyklejanie kart ZOSTAJE także bez zdjęć — stos przy przewijaniu jest zamierzony (Bartek, 31.08.2026). Karty mają własne białe tło i cień, więc górna zasłania dolną. */ .in-showcase-bez-kadru .in-showcase-copy { grid-column: 1; grid-row: 1; position: sticky; top: calc(var(--header-height, 96px) + 24px); } .in-showcase-bez-kadru .in-showcase-steps { grid-column: 2; grid-row: 1; } } /* ——— Treść wpisu bloga ——————————————————————————————————————— Prototyp pisze artykuł ręcznie i każdy akapit ma tam klasę `.in-p`. Z WordPressa przychodzi goły HTML z edytora, więc te same odstępy i rozmiary ustawiamy po znacznikach. Bez tego wpisy miały domyślną typografię przeglądarki i wyglądały jak surowa strona obok reszty serwisu. */ .in-art-body > p, .in-art-body > ul, .in-art-body > ol { font-size: 17px; line-height: 1.7; margin: 0 0 20px; } .in-art-body > h2 { margin: 38px 0 14px; } .in-art-body > h3 { margin: 32px 0 12px; } .in-art-body > h4 { margin: 26px 0 10px; } .in-art-body > :is(h2, h3, h4):first-child { margin-top: 0; } .in-art-body > :is(ul, ol) { padding-left: 22px; } .in-art-body > :is(ul, ol) li { margin-bottom: 8px; } .in-art-body a { color: var(--brand-800, #643B81); text-decoration: underline; text-underline-offset: 3px; } .in-art-body a:hover { text-decoration-thickness: 2px; } .in-art-body :is(img, video) { max-width: 100%; height: auto; border-radius: 16px; } /* Ramka `iframe` NIE zachowuje proporcji przy `height: auto` — YouTube podaje 1200×675, a `auto` te wysokosc zeruje i film zapada sie do paska. Dlatego osadzenia dostaja proporcje wprost. Zgloszone przez Bartka 27.08.2026. */ .in-art-body iframe { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: 16px; display: block; } .in-art-body figure { margin: 26px 0; } .in-art-body figcaption { margin-top: 10px; font-size: 14px; color: var(--color-text-muted, #413B4D); } .in-art-body blockquote { margin: 28px 0; padding: 4px 0 4px 24px; border-left: 3px solid var(--brand-primary, #643B81); font-size: 20px; line-height: 1.5; } .in-art-body blockquote p:last-child { margin-bottom: 0; } /* Zdjęcie główne wpisu — nad treścią, w proporcji panoramy. */ .in-art-fig { margin: 0 0 32px; } .in-art-fig img { display: block; width: 100%; border-radius: 20px; } /* Nagłówek szyny to teraz

(poziomy nagłówków muszą lecieć po kolei), a nie

jak w makiecie — wygląd zostaje ten sam. / .in-art-rail .in-rail-cta h2 { margin: 0 0 10px; color: #fff; font-weight: 600; line-height: 1.3; } / ——— Okno rezerwacji (kalendarz z cennika) ———————————————————— Ten sam wzór co szuflada koszyka: klasa na pokazuje okno, zasłona zamyka je kliknięciem. Panel przewija się sam, bo kalendarz z listą godzin bywa wyższy niż telefon. / .in-rez-okno { position: fixed; inset: 0; z-index: 90; display: none; } html.in-rez-open .in-rez-okno { display: block; } html.in-rez-open { overflow: hidden; } .in-rez-scrim { position: absolute; inset: 0; background: rgba(43, 24, 57, .55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .in-rez-panel { position: relative; width: min(560px, calc(100% - 32px)); max-height: min(88vh, 900px); margin: 6vh auto 0; overflow-y: auto; padding: 26px clamp(18px, 4vw, 32px) 30px; border-radius: 26px; background: var(--in-surface, #fff); box-shadow: 0 40px 90px rgba(43, 24, 57, .35); } .in-rez-panel-h { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 18px; } .in-rez-panel-h h2 { margin: 0; } .in-rez-x { flex: 0 0 auto; width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 1px solid var(--color-border, #C6C4D8); border-radius: 999px; background: transparent; color: var(--color-text, #0B1220); cursor: pointer; } .in-rez-x svg { width: 18px; height: 18px; } .in-rez-x:hover { border-color: var(--brand-primary, #643B81); } / W oknie formularz jest jednokolumnowy — na dwie kolumny nie ma tu miejsca. / .in-rez--popup .in-form-g { grid-template-columns: 1fr; } / Godziny wybranego dnia. / / Kafelek godziny ma być szeroki na tyle, co godzina — w formularzu obowiązuje reguła „przyciski na całą szerokość", więc jedna wolna godzina rozciągała się przez cały kalendarz i wyglądała jak pasek postępu. / .in-cal-chips .in-cal-chip { width: auto; flex: 0 0 auto; } .in-cal-chip { appearance: none; padding: 9px 15px; border-radius: 999px; border: 1px solid var(--color-border, #C6C4D8); background: #fff; color: var(--color-text, #0B1220); font: inherit; font-size: 14px; cursor: pointer; transition: border-color .2s ease, background .2s ease, color .2s ease; } .in-cal-chip:hover { border-color: var(--brand-primary, #643B81); } .in-cal-chip.is-on { background: var(--brand-primary, #643B81); border-color: var(--brand-primary, #643B81); color: #fff; } .in-cal-sum { margin: 14px 0 0; font-size: 14px; font-weight: 600; color: var(--brand-800, #643B81); } .in-cal-err { margin: 12px 0 0; font-size: 14px; color: #B3261E; } / Okładka / zdjęcie w prawej kolumnie hero (warianty z panelem) — 19.08.2026 / .in-hero-panel-foto { display: block; width: 100%; height: auto; border-radius: 18px; margin-bottom: 22px; box-shadow: 0 18px 42px -26px rgba(11,18,32,.55); } .in-hero-panel--sama-foto { padding: 0; background: none; border: 0; box-shadow: none; } .in-hero-panel--sama-foto .in-hero-panel-foto { margin-bottom: 0; } / Hero z dużym zdjęciem po prawej (bez panelu) — 19.08.2026 / .in-hero-purple--foto > .in-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(40px, 5vw, 80px); } .in-hero-purple--foto h1 { font-size: clamp(38px, 3.6vw, 60px); line-height: 1.04; letter-spacing: -.03em; margin-bottom: 22px; } .in-hero-purple--foto .in-lead { max-width: 52ch; } .in-hero-purple--foto .in-hero-panel--sama-foto { align-self: center; } .in-hero-purple--foto .in-hero-panel-foto { width: 100%; max-width: 520px; margin-inline: auto; border-radius: 24px; } @media (max-width: 860px) { .in-hero-purple--foto > .in-wrap { grid-template-columns: minmax(0, 1fr); } .in-hero-purple--foto .in-hero-panel-foto { max-width: 360px; } } / Okładka w hero musi przebić globalne `.in-hero img { height: 84px }` ze szkieletu (reguła dla logotypu). Stąd selektor dwuklasowy — 19.08.2026. / .in-hero .in-hero-panel-foto, .in-hero-purple--foto .in-hero-panel-foto { height: auto; width: 100%; max-width: 520px; margin: 0 auto; aspect-ratio: auto; object-fit: contain; } } / Split ze zdjęciem — 19.08.2026. Tekst dostaje własny kontener (.in-split-tresc), więc nie walczymy z siatką „nagłówek w kolumnie 1, reszta w kolumnie 2". Bez tego każdy akapit był osobnym wierszem, a rozpięte na nie zdjęcie robiło puste przestrzenie. / .in-sec.in-split--z-foto > .in-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 72px); } .in-sec.in-split--z-foto > .in-wrap > .in-split-tresc { grid-column: 1; display: grid; gap: 18px; align-content: center; } .in-sec.in-split--z-foto > .in-wrap > .in-split-tresc > { margin: 0; } .in-sec.in-split--z-foto > .in-wrap > .in-split-foto { grid-column: 2; margin: 0; } .in-sec.in-split--foto-lewo > .in-wrap > .in-split-tresc { grid-column: 2; } .in-sec.in-split--foto-lewo > .in-wrap > .in-split-foto { grid-column: 1; } .in-split-foto img { display: block; width: 100%; height: auto; border-radius: 24px; box-shadow: 0 24px 56px -32px rgba(11,18,32,.5); } @media (max-width: 860px) { .in-sec.in-split--z-foto > .in-wrap { grid-template-columns: minmax(0, 1fr); } .in-sec.in-split--z-foto > .in-wrap > .in-split-tresc, .in-sec.in-split--z-foto > .in-wrap > .in-split-foto { grid-column: 1; } .in-sec.in-split--foto-lewo > .in-wrap > .in-split-foto { order: -1; } } /* Wyrównanie wprost na dzieciach — bazowa reguła sekcji ustawia `align-items: start`, a przy jednym wierszu siatki zdjęcie potrafiło osiąść przy dolnej krawędzi. / .in-sec.in-split--z-foto > .in-wrap > .in-split-tresc, .in-sec.in-split--z-foto > .in-wrap > .in-split-foto { align-self: center; } / Filmy pionowe — trzy kadry 9:16 obok siebie, na telefonie taśma. 19.08.2026 / .in-fp-track { --in-fp-gap: clamp(16px, 2.4vw, 28px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--in-fp-gap); margin-top: 34px; } / Powyzej trzech filmow siatka zlamalaby sie na 3 + reszte, wiec zamiast tego robimy z tego tasme: dalej widac trzy kadry, kolejne dojezdzaja strzalkami. To ta sama konwencja co na telefonie i co w karuzeli opinii — bez Swipera. / @media (min-width: 861px) { .in-fp-track:has(> :nth-child(4)) { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; } .in-fp-track:has(> :nth-child(4))::-webkit-scrollbar { display: none; } .in-fp-track:has(> :nth-child(4)) > .in-fp-it { flex: 0 0 calc((100% - 2 var(--in-fp-gap)) / 3); scroll-snap-align: start; } .in-fp:has(.in-fp-track > :nth-child(4)) .in-fp-nav { display: flex; } } .in-fp-it { margin: 0; display: flex; flex-direction: column; gap: 12px; } .in-fp-v { display: block; width: 100%; aspect-ratio: 9 / 16; height: auto; border-radius: 22px; background: #0f0b18; object-fit: cover; box-shadow: 0 22px 52px -30px rgba(11,18,32,.55); } .in-fp-it figcaption { display: grid; gap: 2px; } .in-fp-it figcaption strong { font-size: 15px; } .in-fp-it figcaption span { font-size: 13px; opacity: .72; } .in-fp-nav { display: none; gap: 10px; justify-content: center; margin-top: 20px; } /* `.in-fp-btn` — wyglad wspolny z reszta strzalek, patrz motyw.css. / @media (max-width: 860px) { .in-fp-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -ms-overflow-style: none; margin-inline: calc(-1 var(--in-hgut, 20px)); padding-inline: var(--in-hgut, 20px); } .in-fp-track::-webkit-scrollbar { display: none; } .in-fp-it { flex: 0 0 78%; scroll-snap-align: center; } .in-fp-nav { display: flex; } } @media (prefers-reduced-motion: reduce) { .in-fp-track { scroll-behavior: auto; } } /* Oba elementy MUSZĄ mieć jawnie wskazany wiersz. Przy samym `grid-column` auto-rozmieszczanie nie wraca do wolnej komórki w wierszu 1 — zdjęcie lądowało w wierszu 2, czyli pod tekstem, zostawiając pustą przestrzeń. 19.08.2026. / .in-sec.in-split--z-foto > .in-wrap > .in-split-tresc, .in-sec.in-split--z-foto > .in-wrap > .in-split-foto { grid-row: 1; } @media (max-width: 860px) { .in-sec.in-split--z-foto > .in-wrap > .in-split-tresc, .in-sec.in-split--z-foto > .in-wrap > .in-split-foto { grid-row: auto; } } / Podpunkty w krokach „przebiegu" — szczegółowy program modułu. 19.08.2026 / .in-showcase-punkty { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 6px; } .in-showcase-punkty li { position: relative; padding-left: 18px; font-size: 14px; opacity: .85; line-height: 1.5; } .in-showcase-punkty li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .45; } / Górny oddech w karcie „Skąd wziął się ten kurs" — nadtytuł dotykał krawędzi. / .in-fd-body > .in-fd-tag:first-child { margin-top: 0; padding-top: 4px; } .in-sec.in-founder .in-fd-body { padding-top: clamp(24px, 3vw, 40px); } / Notka „UWAGA" — osobny blok POD fioletową sekcją CTA. 19.08.2026 / .in-note.in-cta-uwaga { max-width: var(--in-strona, 1288px); margin: 18px auto 0; padding-inline: var(--in-hgut, 20px); background: none; border: 0; box-shadow: none; } .in-note.in-cta-uwaga .in-note-t { margin-bottom: 6px; } .in-note.in-cta-uwaga .in-p { margin: 0; opacity: .8; font-size: 14px; } / Tytuł w wariancie z kartami — mniejszy, żeby nie wchodził pod kartę z ceną. / .in-cta--karty h2 { line-height: 1.08; max-width: 16ch; } / ——— kafelki z pionowym filmem obok (strona gry) —————————————————————— Na produkcji rolka stoi jako osobna kolumna po prawej stronie kafelków. Odtwarzamy ten układ: kafelki zwężają się do dwóch kolumn, film dostaje własną, wąską kolumnę i wyrównuje się do góry razem z nimi. / .in-cards-media { display: grid; grid-template-columns: minmax(0, 1fr) clamp(230px, 21vw, 310px); gap: clamp(20px, 2.4vw, 34px); align-items: start; } .in-cards-media > [class^="in-grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .in-cards-rolka { margin: 0; } .in-cards-rolka-v { display: block; width: 100%; aspect-ratio: 9 / 16; height: auto; border-radius: 22px; background: #0f0b18; object-fit: cover; box-shadow: 0 22px 52px -30px rgba(11, 18, 32, .55); } @media (max-width: 980px) { .in-cards-media { grid-template-columns: 1fr; } .in-cards-media > [class^="in-grid"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .in-cards-rolka { max-width: 320px; margin-inline: auto; } } @media (max-width: 640px) { .in-cards-media > [class^="in-grid"] { grid-template-columns: 1fr; } } / Rola pod nazwiskiem na liście osób (np. „Twórczyni gry · certyfikująca"). / .in-person-rola { margin: 0 0 10px; font-size: 12px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--brand-primary, #643B81); } / ——— lista osób: siatka dopasowana do liczby osób —————————————————————— Siatka stoi na sztywnych czterech kolumnach. Przy jednej osobie (tak zaczyna lista certyfikowanych prowadzących) zostawała wąska karta przy lewej krawędzi — wyglądało to na błąd, a nie na listę z jednym wpisem. Dlatego przy jednej i dwóch osobach zwężamy siatkę — ale zostawiamy karty PRZY LEWEJ KRAWĘDZI, w osi nagłówka sekcji. Wyśrodkowanie (próba z 19.08) odrywało kartę od nagłówka i wyglądało gorzej niż przed zmianą. / .in-people:not(:has(> :nth-child(2))) { grid-template-columns: minmax(0, 420px); justify-content: start; } .in-people:has(> :nth-child(2)):not(:has(> :nth-child(3))) { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: start; } .in-people:has(> :nth-child(3)):not(:has(> :nth-child(4))) { grid-template-columns: repeat(3, minmax(0, 1fr)); } / Kafelki PRODUKTÓW (sekcja #produkty w woocommerce.php) — kwadrat kadrowany od góry. Blog zostaje przy 4:3, bo tam kadr poziomy jest właściwy. / .in-sec.in-posts#produkty .in-card img { aspect-ratio: 1 / 1; object-fit: cover; object-position: center top; } .in-sec.in-posts#produkty .in-card-ph { aspect-ratio: 1 / 1; } / ——— wybór prowadzącej w rezerwacji ———————————————————————————————— Wcześniej były to zwykłe „chipy" (.in-cal-chip) — te same, którymi wybiera się godzinę. Wybór CZŁOWIEKA wyglądał przez to jak filtr, a nie jak decyzja, z kim się spotkasz. Teraz to karta ze zdjęciem z profilu. 20.08.2026 / .in-rez-osoby-lista { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; } .in-rez-osoba-chip { display: flex; align-items: center; gap: 13px; padding: 12px 16px 12px 12px; text-align: left; background: var(--in-surface, #fff); border: 1px solid var(--color-border, #C6C4D8); border-radius: 16px; cursor: pointer; font: inherit; color: inherit; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; } .in-rez-osoba-chip:hover { border-color: var(--brand-primary, #643B81); transform: translateY(-1px); } .in-rez-osoba-chip[aria-pressed="true"] { border-color: var(--brand-primary, #643B81); box-shadow: 0 0 0 2px rgba(100, 59, 129, .18); background: var(--brand-50, #f3eff5); } .in-rez-osoba-foto { flex: 0 0 52px; width: 52px; height: 52px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--brand-50, #f3eff5); } .in-rez-osoba-foto img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; } .in-rez-osoba-ini { font-size: 20px; font-weight: 700; color: var(--brand-primary, #643B81); } .in-rez-osoba-txt { display: grid; gap: 2px; min-width: 0; } .in-rez-osoba-txt strong { font-size: 15px; font-weight: 600; line-height: 1.25; } .in-rez-osoba-txt small { font-size: 12.5px; color: var(--color-text-muted, #413B4D); } / ——— okno z biografią prowadzącej („Czytaj więcej") ——————————————— / .in-person-akcje { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: auto; } .in-person-wiecej { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; color: var(--brand-primary, #643B81); text-decoration: underline; text-underline-offset: 3px; } .in-person-wiecej:hover { text-decoration-thickness: 2px; } .in-bio-ov { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; padding: 20px; background: rgba(28, 20, 38, .55); backdrop-filter: blur(3px); } .in-bio-ov[hidden] { display: none; } .in-bio-box { position: relative; width: min(640px, 100%); max-height: 88vh; overflow: auto; background: var(--in-surface, #fff); border-radius: 22px; padding: 32px 34px 28px; box-shadow: 0 30px 70px -20px rgba(28, 20, 38, .5); } .in-bio-x { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; border: 0; border-radius: 50%; background: var(--brand-50, #f3eff5); color: var(--brand-800, #643B81); font-size: 22px; line-height: 1; cursor: pointer; } .in-bio-tyt { margin: 0 0 16px; font-size: 24px; } .in-bio-tresc p { font-size: 15.5px; line-height: 1.65; margin: 0 0 14px; } .in-bio-tresc p:last-child { margin-bottom: 22px; } / ——— motto na stronie prowadzącej ———————————————————————————————— Cytat stał dotąd jako goły akapit między sekcjami i ginął. To zwykle najbardziej osobiste zdanie na całej stronie, więc dostaje własny panel z dużym znakiem cudzysłowu i podpisem. 20.08.2026 */ .in-sec.in-motto > .in-wrap { max-width: 960px; } .in-sec.in-motto .in-quote { position: relative; padding: clamp(34px, 4vw, 54px) clamp(26px, 4vw, 60px) clamp(30px, 3.4vw, 46px); background: linear-gradient(150deg, var(--brand-50, #f3eff5) 0%, rgba(243, 239, 245, .45) 100%); border: 1px solid rgba(100, 59, 129, .16); border-radius: 26px; overflow: hidden; } .in-sec.in-motto .in-quote::before { content: "\201C"; position: absolute; top: -22px; left: 14px; font-family: var(--font-display, Georgia, serif); font-size: 170px; line-height: 1; color: rgba(100, 59, 129, .13); pointer-events: none; } .in-sec.in-motto .in-quote-k { position: relative; font-size: 11.5px; letter-spacing: .2em; color: var(--brand-primary, #643B81); margin: 0 0 14px; } .in-sec.in-motto .in-quote > p:not(.in-quote-k), .in-sec.in-motto .in-quote blockquote { position: relative; font-family: var(--font-display, Georgia, serif); font-size: clamp(21px, 2.3vw, 30px); line-height: 1.45; color: var(--brand-800, #372047); margin: 0; } .in-sec.in-motto .in-quote-a { position: relative; margin-top: 22px; font-weight: 600; color: var(--brand-primary, #643B81); }