/* ══════════════════════════════════════════════════════════════ OKNA ZAPISU - Mentoring PRO (17.08.2026) Arkusz jest samodzielny: skrypt przenosi okna do , poza `.mc`, więc zmienne palety (`--mc-bez`, `--mc-czarny`) już tam nie sięgają. Kolory są tu wpisane wprost, w tych samych wartościach co w `mc-lp.css`. ══════════════════════════════════════════════════════════════ */ .ph-okno { --ph-czarny: #1c1b1f; --ph-bez: #eddbc7; --ph-bez-jas: #f6ede3; --ph-szary: #6b6a70; --ph-linia: rgba(0, 0, 0, .14); position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px 16px; font-family: 'General Sans', system-ui, -apple-system, sans-serif; color: var(--ph-czarny); opacity: 0; transition: opacity .22s ease; } .ph-okno[hidden] { display: none; } .ph-okno--widoczne { opacity: 1; } .ph-okno__tlo { position: absolute; inset: 0; background: rgba(20, 19, 22, .55); backdrop-filter: blur(3px); } .ph-okno__panel { position: relative; width: 100%; max-width: 560px; max-height: calc(100svh - 48px); overflow-y: auto; background: #fff; border-radius: 16px; padding: 38px 40px 32px; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); transform: translateY(14px); transition: transform .24s cubic-bezier(.215, .61, .355, 1); /* Motyw blokuje zaznaczanie na ; w oknie formularza tekst musi dać się zaznaczyć i poprawić. */ -webkit-user-select: text; user-select: text; } .ph-okno--widoczne .ph-okno__panel { transform: translateY(0); } .ph-okno .ph-okno__x { position: absolute; top: 16px; right: 16px; width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 999px; background: transparent; color: var(--ph-czarny); cursor: pointer; transition: background .15s ease; } .ph-okno .ph-okno__x:hover { background: var(--ph-bez-jas); } .ph-okno__x svg { width: 18px; height: 18px; } .ph-okno__nad { margin: 0 0 6px; font-size: 12px; letter-spacing: .08em; color: var(--ph-szary); } .ph-okno__h2 { margin: 0 0 10px; font-size: clamp(24px, 2.4vw, 30px); font-weight: 700; line-height: 1.2; color: var(--ph-czarny); } .ph-okno__lead { margin: 0 0 18px; font-size: 15.5px; line-height: 1.6; color: #46454a; } .ph-okno__wybor { margin: 0 0 22px; padding: 11px 16px; border-radius: 999px; background: var(--ph-bez-jas); font-size: 14px; } .ph-okno__wybor strong { letter-spacing: .02em; } /* ── Pola ────────────────────────────────────────────────────── */ .ph-okno__pole { margin: 0 0 14px; } .ph-okno__pole label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: #46454a; } .ph-okno__pole input, .ph-okno__pole textarea { width: 100%; box-sizing: border-box; padding: 13px 16px; border: 1px solid var(--ph-linia); border-radius: 12px; background: #fff; /* 16 px, bo poniżej tej wartości iOS przybliża stronę przy wejściu w pole. */ font-size: 16px; font-family: inherit; color: var(--ph-czarny); transition: border-color .15s ease, box-shadow .15s ease; } .ph-okno__pole textarea { resize: vertical; min-height: 78px; line-height: 1.5; } .ph-okno__pole input:focus, .ph-okno__pole textarea:focus { outline: none; border-color: var(--ph-czarny); box-shadow: 0 0 0 3px rgba(28, 27, 31, .08); } /* Podpowiedź w polu ma być czytelna, a nie ledwo widoczna - domyślna szarość przeglądarki bywa poniżej progu WCAG. */ .ph-okno__pole input::placeholder, .ph-okno__pole textarea::placeholder { color: var(--ph-szary); opacity: 1; } .ph-okno__hint { display: block; margin-top: 5px; font-size: 12.5px; color: var(--ph-szary); } /* Dwa pola w jednym wierszu - inaczej formularz mentora (siedem pól) nie mieści się na ekranie laptopa i okno trzeba przewijać. */ .ph-okno__para { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 14px; } /* Pułapka na roboty: musi zostać w układzie strony (roboty pomijają `display: none`), a człowiek nie ma prawa jej zobaczyć. */ .ph-okno__pulapka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* ── Zgody ───────────────────────────────────────────────────── */ .ph-okno__zgoda { display: flex; gap: 11px; align-items: flex-start; margin: 0 0 12px; font-size: 13.5px; line-height: 1.5; color: #46454a; } .ph-okno__zgoda input { flex: 0 0 auto; width: 18px; height: 18px; margin: 1px 0 0; accent-color: #1c1b1f; } .ph-okno__zgoda label { cursor: pointer; } .ph-okno__info { margin: 14px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--ph-szary); } .ph-okno__info a { color: var(--ph-szary); text-decoration: underline; } /* ── Komunikaty i przycisk ───────────────────────────────────── */ .ph-okno__komunikat { margin: 16px 0 0; font-size: 14px; line-height: 1.5; } .ph-okno__komunikat:empty { display: none; } .ph-okno__komunikat--blad { color: #a3302c; } .ph-okno__komunikat--ok { color: #2f6b47; } /* Dwie klasy, nie jedna: motyw Polor stylizuje `button[type="submit"]` (0,1,1), co bije pojedynczą klasę - przycisk wychodził w kolorze `#c3a38c` z białym napisem, czyli 2,35:1, poniżej progu czytelności. Ta sama pułapka co przy „ZAPISUJĘ SIĘ" 07.08.2026. */ .ph-okno .ph-okno__btn { display: block; width: 100%; height: auto; margin-top: 18px; padding: 15px 32px; border: 0; border-radius: 999px; background: var(--ph-bez); color: var(--ph-czarny); font-family: inherit; font-size: 15.5px; font-weight: 600; line-height: 1.2; letter-spacing: .04em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: opacity .15s ease; } .ph-okno .ph-okno__btn:hover { opacity: .82; background: var(--ph-bez); color: var(--ph-czarny); } .ph-okno .ph-okno__btn:disabled { cursor: default; opacity: .6; } .ph-okno .ph-okno__btn--czeka::after { content: ' ...'; } /* ── Podziękowanie ───────────────────────────────────────────── */ .ph-okno__gotowe { text-align: center; padding: 14px 0 6px; } .ph-okno__ptaszek { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 16px; border-radius: 999px; background: var(--ph-bez-jas); color: var(--ph-czarny); } .ph-okno__ptaszek svg { width: 26px; height: 26px; } .ph-okno__gotowe .ph-okno__lead { margin-bottom: 4px; } .ph-okno .ph-okno__gotowe .ph-okno__btn { max-width: 240px; margin: 22px auto 0; } /* ── Blokada przewijania pod oknem ───────────────────────────── */ html.ph-okno-otwarte, html.ph-okno-otwarte body { overflow: hidden; } /* ── Niskie okno przeglądarki ──────────────────────────────────── Laptop z ekranem 768 px daje na panel 720 px. Formularz mentora ma się w tym zmieścić bez przewijania, więc na niskich ekranach schodzą odstępy - najpierw te, których ubytku nie widać. */ @media (min-width: 621px) and (max-height: 800px) { .ph-okno { padding: 16px; } .ph-okno__panel { padding: 28px 40px 26px; max-height: calc(100svh - 32px); } .ph-okno__h2 { font-size: 25px; margin-bottom: 8px; } .ph-okno__lead { margin-bottom: 14px; font-size: 15px; } .ph-okno__pole { margin-bottom: 11px; } .ph-okno__pole label { margin-bottom: 4px; } .ph-okno__pole input { padding: 11px 15px; } .ph-okno__pole textarea { min-height: 66px; padding: 10px 15px; } .ph-okno__info { margin-top: 11px; } .ph-okno .ph-okno__btn { margin-top: 14px; padding: 13px 32px; } } /* Drugi próg: ekrany 720-780 px (13-calowe laptopy). Schodzi nadtytuł i wstęp - to jedyne, co można oddać bez ruszania pól i zgód. Nagłówek okna zostaje, więc nadal wiadomo, co to za formularz. */ @media (min-width: 621px) and (max-height: 780px) { .ph-okno__panel { padding: 24px 40px 22px; } .ph-okno__nad { display: none; } .ph-okno__lead { margin-bottom: 12px; font-size: 14.5px; line-height: 1.5; } .ph-okno__pole { margin-bottom: 9px; } .ph-okno__pole textarea { min-height: 56px; } .ph-okno__zgoda { margin-bottom: 8px; } .ph-okno__info { margin-top: 9px; line-height: 1.45; } .ph-okno .ph-okno__btn { margin-top: 12px; padding: 12px 32px; } } /* Trzeci próg: poniżej 740 px. Zamiast chować kolejne zdania ściskamy same pola - niżej już nie ma czego oddać bez szkody dla czytelności. */ @media (min-width: 621px) and (max-height: 740px) { .ph-okno__h2 { font-size: 22px; margin-bottom: 6px; } .ph-okno__pole input { padding: 9px 15px; } .ph-okno__pole textarea { min-height: 52px; padding: 9px 15px; } .ph-okno__pole { margin-bottom: 8px; } } /* ── Telefon ─────────────────────────────────────────────────── */ @media (max-width: 620px) { .ph-okno { padding: 0; align-items: flex-end; } .ph-okno__panel { max-width: none; max-height: 92svh; padding: 34px 22px 28px; border-radius: 20px 20px 0 0; transform: translateY(28px); } .ph-okno__h2 { font-size: 23px; } .ph-okno__lead { font-size: 15px; } .ph-okno__para { grid-template-columns: 1fr; } } @media (prefers-reduced-motion: reduce) { .ph-okno, .ph-okno__panel { transition: none; } .ph-okno__panel { transform: none; } }