{"id":339,"date":"2025-08-11T13:35:12","date_gmt":"2025-08-11T11:35:12","guid":{"rendered":"https:\/\/hilaris-blonie.pl\/?page_id=339"},"modified":"2026-08-29T14:07:48","modified_gmt":"2026-08-29T12:07:48","slug":"nasza-misja","status":"publish","type":"page","link":"https:\/\/hilaris-blonie.pl\/?page_id=339","title":{"rendered":"Misja i wizja szko\u0142y"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"339\" class=\"elementor elementor-339\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-079c38b e-grid e-con-boxed e-con e-parent\" data-id=\"079c38b\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-07c2f26 elementor-widget elementor-widget-html\" data-id=\"07c2f26\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ==========================================================================\n     HILARIS \u2014 SZKO\u0141A \u2192 MISJA I WIZJA (page_id=339)   (wersja responsywna)\n     WYMAGA rdzenia (hilaris-CORE.html).\n     Technika wiod\u0105ca: has\u0142o przewodnie roz\u015bwietla si\u0119 s\u0142owo po s\u0142owie\n     w rytm przewijania strony.\n     \u25b8 AKTUALIZACJA: obiekt MISJA na dole pliku.\n     ---------------------------------------------------------------------------\n     ZMIANY W TEJ WERSJI (dwie):\n       1. KAFLE \u201ePoznaj nas bli\u017cej\u201d \u2014 podpisy WY\u015aRODKOWANE i wyr\u00f3wnane\n          do jednej linii. Kafel jest teraz kolumn\u0105 wy\u015brodkowan\u0105 w poziomie,\n          a podpis ma \u201emargin-top:auto\u201d, wi\u0119c dosuwa si\u0119 do do\u0142u \u2014 dzi\u0119ki temu\n          wszystkie podpisy w rz\u0119dzie le\u017c\u0105 r\u00f3wno, tak\u017ce gdy tytu\u0142 nad jednym\n          z nich \u0142amie si\u0119 na dwa wiersze (\u201eCo nas wyr\u00f3\u017cnia\u201d).\n          Strza\u0142ka \u2192 zosta\u0142a wyj\u0119ta z toku tekstu (position:absolute): mimo\n          opacity:0 zajmowa\u0142a miejsce w linii i \u015bci\u0105ga\u0142a napis o kilkana\u015bcie\n          pikseli w lewo od \u015brodka.\n       2. BLOK O CERTYFIKATACH uzupe\u0142niony i uzgodniony ze STRON\u0104 G\u0141\u00d3WN\u0104\n          (hilaris-blonie.pl). Wcze\u015bniej wymienia\u0142 tylko KET i PET, co by\u0142o\n          niepe\u0142ne \u2014 strona g\u0142\u00f3wna podaje pe\u0142n\u0105 \u015bcie\u017ck\u0119 egzaminacyjn\u0105:\n            \u2022 klasy 1\u20133 \u2014 pierwsze egzaminy Cambridge YLE: Starters, Movers,\n              Flyers\n            \u2022 klasy 4\u20136 \u2014 przygotowanie do KET lub PET, zale\u017cnie od poziomu\n              ucznia; dochodzi drugi j\u0119zyk obcy\n            \u2022 klasy 7\u20138 \u2014 certyfikat PET albo FCE; FCE to poziom B2,\n              przyst\u0119puj\u0105 do niego ju\u017c si\u00f3dmoklasi\u015bci\n            \u2022 szko\u0142a jest centrum przygotowawczym do egzamin\u00f3w YLE, KET,\n              PET i FCE\n            \u2022 zdawalno\u015b\u0107 w\u015br\u00f3d uczni\u00f3w: 100%\n          Etykietki pod blokiem odzwierciedlaj\u0105 teraz t\u0119 sam\u0105 list\u0119.\n     ---------------------------------------------------------------------------\n     WCZE\u015aNIEJSZE ZMIANY (bez zmian w tej wersji):\n       \u2022 usuni\u0119ty g\u00f3rny pasek z nazw\u0105 szko\u0142y i przyciskami oraz stopka bloku \u2014\n         jedno i drugie jest ju\u017c w globalnym nag\u0142\u00f3wku i stopce strony;\n         dolny odst\u0119p dopasowany do paska szybkich akcji na telefonie\n       \u2022 czcionka nag\u0142\u00f3wk\u00f3w: Source Serif 4 zamiast Fraunces \u2014 ten sam\n         charakter szeryfowy i ta sama czytelno\u015b\u0107, ale proste \u201eJ\u201d.\n         Zmiana w dw\u00f3ch miejscach: adres Google Fonts na g\u00f3rze styl\u00f3w\n         i regu\u0142a \u201e.hx-mis h1, h2 \u2026\u201d. Pasuj\u0105 te\u017c: Literata, Newsreader, Bitter\n       \u2022 nag\u0142\u00f3wki sekcji wy\u015brodkowane razem z podpisami \u2014 tak jak na\n         pozosta\u0142ych podstronach\n       \u2022 NAPRAWIONE: na komputerze strona by\u0142a w\u0105ska jak na telefonie \u2014\n         rdze\u0144 zostawia kolumn\u0119 tre\u015bci w szeroko\u015bci \u201etelefonowej\u201d, a podstrona\n         ma j\u0105 rozsun\u0105\u0107. Blok \u201eSZEROKO\u015a\u0106 NA KOMPUTERZE\u201d w stylach ustawia\n         1140 px na laptopie i 1280 px na szerokich monitorach (od 1400 px\n         warto\u015bci uk\u0142adaj\u0105 si\u0119 w trzech kolumnach)\n       \u2022 NAG\u0141\u00d3WEK NI\u017bSZY: na komputerze tytu\u0142 stoi po lewej, a has\u0142o rozk\u0142ada\n         si\u0119 w bok po prawej \u2014 ten sam tekst mie\u015bci si\u0119 w kilku wierszach\n         zamiast w\u0105skiej, wysokiej kolumny\n       \u2022 KADR ZDJ\u0118\u0106 na komputerze podci\u0105gni\u0119ty w g\u00f3r\u0119 (osobna warto\u015b\u0107\n         --kadr-d przy ka\u017cdym pasie), wi\u0119c wida\u0107 twarze, a nie same nogi\n       \u2022 ZDJ\u0118CIA O\u017bYWIONE: kadr rozsuwa si\u0119 przy wje\u017adzie w ekran, co kilka\n         sekund przep\u0142ywa po nim smuga \u015bwiat\u0142a, a po najechaniu kadr si\u0119\n         rozja\u015bnia i podpis lekko unosi (poza paralaks\u0105, kt\u00f3ra by\u0142a wcze\u015bniej)\n       \u2022 SEKCJA WARTO\u015aCI: pi\u0119\u0107 ikon kr\u0105\u017cy po okr\u0119gu wok\u00f3\u0142 \u015brodka, ka\u017cda\n         w swoim kolorze. Najechanie albo dotkni\u0119cie zatrzymuje ko\u0142o i pokazuje\n         opis w karcie obok; co kilka sekund ko\u0142o samo przechodzi dalej.\n         Pod ko\u0142em kropki do szybkiego wyboru. Ko\u0142o rusza dopiero, gdy sekcja\n         jest widoczna, i respektuje systemowe ograniczenie ruchu\n       \u2022 poprawki responsywno\u015bci: naprawiony poziomy suwak (kafle \u201ePoznaj nas\n         bli\u017cej\u201d rozpycha\u0142a najd\u0142u\u017csza nazwa), pasy ze zdj\u0119ciami maj\u0105 g\u00f3rny\n         limit wysoko\u015bci, \u017ceby na du\u017cych monitorach nie zajmowa\u0142y p\u00f3\u0142 ekranu,\n         logotypy partner\u00f3w na bardzo w\u0105skich telefonach uk\u0142adaj\u0105 si\u0119 jeden\n         pod drugim, a uk\u0142ad na komputerze pozostaje bez zmian\n       \u2022 has\u0142a na pasach \u201eUczymy przez dzia\u0142anie\u2026\u201d i \u201eEdukacja to co\u015b\n         wi\u0119cej\u2026\u201d w jednym wierszu (tylko komputer), a same pasy ni\u017csze,\n         \u017ceby nie zostawa\u0142o pustej przestrzeni ze zdj\u0119ciem pod tekstem\n       \u2022 PANEL \u201eMI\u0118DZYNARODOWE \u015aRODOWISKO\u201d przebudowany od zera (klasa\n         .ms-int): sekcja w dw\u00f3ch kolumnach \u2014 po lewej nadtytu\u0142, nag\u0142\u00f3wek,\n         zdanie wprowadzaj\u0105ce, blok o certyfikatach i r\u00f3wny rz\u0105d trzech zdj\u0119\u0107,\n         po prawej g\u0142\u00f3wne zdj\u0119cie w ramce o sta\u0142ych proporcjach. Tekst stoi\n         na jednolitym granacie, wi\u0119c jest w pe\u0142ni czytelny. Efekt przewijania\n         zdj\u0119cia wykorzystuje tylko cz\u0119\u015b\u0107 zapasu kadru (zmienna ZASIEG\n         w skrypcie), dzi\u0119ki czemu twarze zostaj\u0105 w kadrze przez ca\u0142y czas.\n     ========================================================================== -->\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n<link rel=\"stylesheet\"\n      href=\"https:\/\/fonts.googleapis.com\/css2?family=Source+Serif+4:opsz,wght@8..60,600;8..60,700&display=swap\">\n<style>\n\/* Wszystkie wymiary liczymy razem z obramowaniem i wype\u0142nieniem \u2014 bez tego\n   karta z opisem (padding + width:100%) wychodzi\u0142a poza kolumn\u0119 na telefonie. *\/\n.hx-mis,.hx-mis *,.hx-mis *::before,.hx-mis *::after{box-sizing:border-box;}\n\/* \u2500\u2500 CZCIONKA NAG\u0141\u00d3WK\u00d3W (bez ozdobnego \u201eJ\u201d) \u2500\u2500 *\/\n.hx-mis h1,.hx-mis h2,.hx-mis h3,.hx-mis .hx-h,\n.hx-mis .ms-claim,.hx-mis .ms-val b,.hx-mis .ms-band p,.hx-mis .ms-v::before{\n  font-family:'Source Serif 4',Georgia,'Times New Roman',serif !important;\n}\n\/* \u2500\u2500 WY\u015aRODKOWANE NAG\u0141\u00d3WKI SEKCJI \u2500\u2500 *\/\n.hx-mis .hx-h{text-align:center;}\n.hx-mis .hx-sub{text-align:center;max-width:62ch;margin-left:auto;margin-right:auto;}\n\/* po usuni\u0119ciu stopki: zapas na dolny pasek szybkich akcji (tylko telefon) *\/\n.hx-mis .hx-app{padding-bottom:calc(48px + env(safe-area-inset-bottom));}\n\/* ============================================================================\n   SZEROKO\u015a\u0106 NA KOMPUTERZE\n   ---------------------------------------------------------------------------\n   Rdze\u0144 buduje stron\u0119 \u201eod telefonu\u201d: kolumna tre\u015bci ma w\u0105sk\u0105 szeroko\u015b\u0107\n   i dopiero podstrona ma j\u0105 rozsun\u0105\u0107. Bez tego bloku strona na monitorze\n   wygl\u0105da\u0142a jak telefon rozci\u0105gni\u0119ty na \u015brodku ekranu.\n   \u2022 1140px \u2014 szeroko\u015b\u0107 docelowa na laptopie (zmie\u0144, je\u015bli chcesz w\u0119ziej)\n   \u2022 1280px \u2014 od bardzo szerokich monitor\u00f3w\n   \u2022 94vw   \u2014 zabezpieczenie, \u017ceby zawsze zosta\u0142y marginesy przy kraw\u0119dziach\n   ============================================================================ *\/\n@media (min-width:900px){\n  .hx-mis .hx-app{padding-bottom:0;\n    max-width:min(1140px,94vw) !important;width:100%;\n    margin-left:auto !important;margin-right:auto !important;}\n  \/* wewn\u0119trzne marginesy sekcji i pas\u00f3w rosn\u0105 razem z szeroko\u015bci\u0105 *\/\n  .hx-mis{--pad:40px;}\n}\n@media (min-width:1400px){\n  .hx-mis .hx-app{max-width:min(1280px,94vw) !important;}\n}\n\/* Kafle \u201ePoznaj nas bli\u017cej\u201d: kolumna 1fr potrafi rozepchn\u0105\u0107 si\u0119 do szeroko\u015bci\n   najd\u0142u\u017cszego s\u0142owa i wypchn\u0105\u0107 siatk\u0119 poza ekran \u2014 minmax(0,1fr) tego pilnuje. *\/\n.hx-mis .hx-grid{grid-template-columns:repeat(var(--cols),minmax(0,1fr));}\n@media (min-width:900px){\n  .hx-mis .hx-grid{grid-template-columns:repeat(var(--cols-d),minmax(0,1fr));}\n}\n.hx-mis .hx-tile{min-width:0;overflow-wrap:anywhere;}\n\/* \u2550\u2550 HAS\u0141O ROZ\u015aWIETLANE SCROLLEM \u2550\u2550 *\/\n.hx-mis .ms-hero{background:var(--navy);color:#fff;padding:30px var(--pad) 34px;\n  position:relative;overflow:hidden;}\n.hx-mis .ms-hero::after{content:\"\";position:absolute;right:-90px;top:-90px;width:260px;height:260px;\n  border-radius:50%;background:rgba(217,164,23,.13);}\n\/* Tytu\u0142 \u201eMisja i wizja szko\u0142y\u201d siedzi tu\u017c pod napisem O NAS i z\u0142ot\u0105 kresk\u0105.\n   Motyw WordPressa dok\u0142ada w\u0142asne odst\u0119py nad nag\u0142\u00f3wkiem \u2014 dlatego zerujemy\n   je tutaj. Chcesz wi\u0119kszy prze\u015bwit? Zwi\u0119ksz margin-top w drugiej linijce. *\/\n.hx-mis .ms-hero > .hx-kicker{margin:0 0 4px!important;}\n.hx-mis .ms-hero > h1{margin:0!important;padding-top:0!important;line-height:1.16;}\n.hx-mis .ms-claim{position:relative;z-index:2;font-weight:700;\n  font-size:clamp(1.35rem,5.6vw,2.05rem);line-height:1.35;letter-spacing:-.01em;margin-top:14px;}\n.hx-mis .ms-claim span{color:rgba(255,255,255,.24);transition:color .45s ease;}\n.hx-mis .ms-claim span.lit{color:#fff;}\n.hx-mis .ms-claim span.key.lit{color:var(--gold-l);}\n.hx-mis .ms-prog{position:relative;z-index:2;height:3px;border-radius:99px;\n  background:rgba(255,255,255,.16);margin-top:20px;overflow:hidden;}\n.hx-mis .ms-prog i{display:block;height:100%;width:0;border-radius:99px;\n  background:linear-gradient(90deg,var(--gold-l),var(--gold));}\n\/* ============================================================================\n   \u2550\u2550 KO\u0141O WARTO\u015aCI \u2550\u2550\n   ---------------------------------------------------------------------------\n   Pi\u0119\u0107 ikon kr\u0105\u017cy po okr\u0119gu wok\u00f3\u0142 \u015brodka. Ikony obracaj\u0105 si\u0119 razem z ko\u0142em,\n   ale ka\u017cda ma w\u0142asn\u0105 animacj\u0119 w przeciwn\u0105 stron\u0119, wi\u0119c ca\u0142y czas stoj\u0105\n   prosto. Dotkni\u0119cie (albo najechanie) zatrzymuje ruch i pokazuje opis\n   warto\u015bci w karcie obok \u2014 karta przejmuje kolor wybranej warto\u015bci.\n   Co kilka sekund ko\u0142o samo przechodzi do kolejnej warto\u015bci.\n   REGULACJA:\n     \u2022 tempo obrotu \u2014 46s w animacjach ms-spin \/ ms-spin-rev\n     \u2022 tempo przeskakiwania opis\u00f3w \u2014 CZAS_KOLA w skrypcie\n     \u2022 wielko\u015b\u0107 ko\u0142a i b\u0105belk\u00f3w \u2014 zmienne --wheel i --b\n     \u2022 kolory \u2014 pole c: przy ka\u017cdej warto\u015bci w obiekcie MISJA\n   ============================================================================ *\/\n\/* Obracaj\u0105ce si\u0119 ko\u0142o rozci\u0105ga niewidzialne pole wok\u00f3\u0142 siebie (obr\u00f3cony\n   kwadrat ma wi\u0119ksz\u0105 przek\u0105tn\u0105 ni\u017c bok), przez co przegl\u0105darka dok\u0142ada\u0142a\n   poziomy suwak na telefonie. overflow-x:clip przycina samo to nadmiarowe\n   pole i \u2014 w odr\u00f3\u017cnieniu od overflow:hidden \u2014 nie tworzy nowego kontenera\n   przewijania, wi\u0119c nie psuje paralaksy ani przyklejonych element\u00f3w. *\/\n.hx-mis .ms-wheel-wrap{display:grid;gap:22px;justify-items:center;\n  overflow-x:clip;overflow-y:visible;}\n.hx-mis .ms-wheel{--wheel:min(84vw,380px);--b:66px;\n  position:relative;width:var(--wheel);height:var(--wheel);flex:none;}\n\/* pier\u015bcie\u0144 w tle \u2014 bardzo delikatna t\u0119cza z kolor\u00f3w warto\u015bci *\/\n.hx-mis .ms-wheel__ring{position:absolute;inset:6%;border-radius:50%;\n  background:conic-gradient(var(--kolory,#2E86C8,#8B54C4,#D2543C,#3E8E5A,#D9A417,#2E86C8));\n  opacity:.14;filter:blur(2px);}\n.hx-mis .ms-wheel__tor{position:absolute;inset:6%;border-radius:50%;\n  border:1px dashed rgba(14,43,77,.16);}\n\/* Obracamy PUNKT w \u015brodku ko\u0142a, a nie kwadrat na ca\u0142\u0105 jego szeroko\u015b\u0107:\n   obr\u00f3cony kwadrat ma wi\u0119kszy prostok\u0105t otaczaj\u0105cy ni\u017c ko\u0142o i na telefonie\n   wypycha\u0142 stron\u0119 w bok (pojawia\u0142 si\u0119 poziomy suwak). Punkt 0\u00d70 nie ma\n   czego wypchn\u0105\u0107, a b\u0105belki i tak s\u0105 ustawiane wzgl\u0119dem jego \u015brodka. *\/\n.hx-mis .ms-wheel__spin{position:absolute;left:50%;top:50%;width:0;height:0;\n  animation:ms-spin 46s linear infinite;}\n@keyframes ms-spin{to{transform:rotate(360deg);}}\n@keyframes ms-spin-rev{to{transform:rotate(-360deg);}}\n.hx-mis .ms-bubble{position:absolute;left:0;top:0;width:var(--b);height:var(--b);\n  margin:calc(var(--b) \/ -2);\n  --R:calc(var(--wheel) \/ 2 - var(--b) \/ 2 - 8px);\n  transform:rotate(var(--a)) translate(var(--R)) rotate(calc(-1 * var(--a)));\n  -webkit-appearance:none;appearance:none;background:none;border:0;padding:0;cursor:pointer;}\n.hx-mis .ms-bubble__in{display:grid;place-items:center;width:100%;height:100%;border-radius:50%;\n  background:var(--paper);border:2px solid color-mix(in srgb,var(--c) 45%,transparent);\n  box-shadow:0 10px 24px -16px rgba(14,43,77,.9);\n  transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s ease,border-color .35s ease;}\n\/* Przeciwny obr\u00f3t dostaje SAMA IKONA, a nie ca\u0142e k\u00f3\u0142ko. K\u00f3\u0142ko jest okr\u0105g\u0142e,\n   wi\u0119c jego obr\u00f3t i tak nie by\u0142by widoczny, a obracany kwadrat k\u00f3\u0142ka\n   powi\u0119ksza\u0142 prostok\u0105t otaczaj\u0105cy i wypycha\u0142 stron\u0119 w bok na telefonie. *\/\n.hx-mis .ms-bubble img{width:62%;height:62%;object-fit:contain;display:block;\n  animation:ms-spin-rev 46s linear infinite;}\n.hx-mis .ms-bubble:hover .ms-bubble__in,\n.hx-mis .ms-bubble:focus-visible .ms-bubble__in{transform:scale(1.1);border-color:var(--c);}\n.hx-mis .ms-bubble.jest .ms-bubble__in{border-color:var(--c);transform:scale(1.14);\n  box-shadow:0 0 0 6px color-mix(in srgb,var(--c) 16%,transparent),\n             0 16px 30px -18px color-mix(in srgb,var(--c) 70%,transparent);}\n\/* \u015brodek ko\u0142a *\/\n.hx-mis .ms-wheel__core{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);\n  width:52%;height:52%;border-radius:50%;display:grid;place-items:center;gap:6px;\n  text-align:center;padding:10px;background:var(--paper);\n  border:1px solid var(--line);box-shadow:0 18px 40px -30px rgba(14,43,77,.9);\n  transition:box-shadow .45s ease;}\n.hx-mis .ms-wheel__core img{width:46px;height:46px;object-fit:contain;\n  transition:transform .45s cubic-bezier(.22,1,.36,1),opacity .35s ease;}\n\/* Napis w \u015brodku ko\u0142a MUSI si\u0119 zawija\u0107. Bez width:100% siatka nadaje mu\n   szeroko\u015b\u0107 \u201eile trzeba\u201d (max-content) i d\u0142ugie nazwy \u2014 np. \u201eIndywidualne\n   podej\u015bcie\u201d \u2014 wychodzi\u0142y jednym wierszem poza bia\u0142e k\u00f3\u0142ko. Teraz tekst\n   trzyma si\u0119 szeroko\u015bci \u015brodka i sam \u0142amie si\u0119 na dwa wiersze. *\/\n.hx-mis .ms-wheel__core b{font-size:.92rem;line-height:1.22;color:var(--navy);\n  width:100%;max-width:100%;overflow-wrap:break-word;hyphens:auto;\n  text-wrap:balance;transition:opacity .35s ease;}\n.hx-mis .ms-wheel__core.zmiana img{transform:scale(.82) rotate(-8deg);opacity:0;}\n.hx-mis .ms-wheel__core.zmiana b{opacity:0;}\n\/* karta z opisem *\/\n.hx-mis .ms-info{background:var(--paper);border:1px solid var(--line);\n  border-left:4px solid var(--c,#2E86C8);border-radius:var(--r);padding:20px 22px;\n  max-width:520px;width:100%;transition:border-color .45s ease,transform .45s ease,opacity .35s ease;}\n.hx-mis .ms-info.zmiana{opacity:0;transform:translateY(8px);}\n.hx-mis .ms-info b{display:block;font-weight:700;font-size:1.18rem;line-height:1.25;\n  color:var(--c,#2E86C8);}\n.hx-mis .ms-info span{display:block;font-size:.94rem;line-height:1.6;color:var(--ink-2);margin-top:7px;}\n.hx-mis .ms-info u{text-decoration:none;display:block;font-size:.68rem;font-weight:800;\n  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);opacity:.7;margin-top:12px;}\n\/* kropki pod ko\u0142em \u2014 na telefonie \u0142atwiej trafi\u0107 ni\u017c w b\u0105belek *\/\n.hx-mis .ms-dots{display:flex;gap:8px;justify-content:center;}\n.hx-mis .ms-dot{-webkit-appearance:none;appearance:none;border:0;padding:0;cursor:pointer;\n  width:9px;height:9px;border-radius:50%;background:rgba(14,43,77,.18);\n  transition:background .3s ease,transform .3s ease;}\n.hx-mis .ms-dot.jest{background:var(--c);transform:scale(1.35);}\n@media (min-width:900px){\n  .hx-mis .ms-wheel-wrap{grid-template-columns:auto minmax(0,1fr);gap:44px;\n    align-items:center;justify-items:start;}\n  .hx-mis .ms-wheel{--wheel:400px;--b:76px;}\n  .hx-mis .ms-wheel__core img{width:56px;height:56px;}\n  .hx-mis .ms-wheel__core b{font-size:1.05rem;}\n  .hx-mis .ms-info{padding:26px 28px;}\n  .hx-mis .ms-info b{font-size:1.35rem;}\n  .hx-mis .ms-info span{font-size:1rem;}\n  .hx-mis .ms-dots{grid-column:1;}\n}\n@media (prefers-reduced-motion:reduce){\n  .hx-mis .ms-wheel__spin,.hx-mis .ms-bubble img{animation:none;}\n}\n\/* zatrzymanie ruchu przy najechaniu i po wybraniu warto\u015bci palcem *\/\n.hx-mis .ms-wheel.pauza .ms-wheel__spin,\n.hx-mis .ms-wheel.pauza .ms-bubble img{animation-play-state:paused;}\n\/* \u2550\u2550 WARTO\u015aCI (stara lista \u2014 zostaje jako zapas, gdyby wr\u00f3ci\u0107 do kafelk\u00f3w) \u2550\u2550 *\/\n.hx-mis .ms-vals{display:grid;gap:11px;}\n.hx-mis .ms-val{display:grid;grid-template-columns:58px minmax(0,1fr);gap:15px;align-items:center;\n  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:16px;\n  opacity:0;transform:translateY(14px);\n  transition:opacity .55s ease,transform .55s cubic-bezier(.22,1,.36,1),\n             box-shadow .35s ease,border-color .35s ease;}\n.hx-mis .ms-val.in{opacity:1;transform:none;}\n.hx-mis .ms-val:hover{border-color:#C6D4DC;box-shadow:0 20px 36px -28px rgba(14,43,77,.55);}\n.hx-mis .ms-val img{width:58px;height:58px;object-fit:contain;display:block;}\n.hx-mis .ms-val b{display:block;font-weight:700;font-size:1.05rem;line-height:1.2;}\n.hx-mis .ms-val span{display:block;font-size:.87rem;color:var(--ink-2);margin-top:5px;line-height:1.5;}\n\/* \u2550\u2550 TEKST \u201eNASZA MISJA\u201d \u2550\u2550\n   Na telefonie tekst jest wyjustowany (r\u00f3wny z obu stron) z automatycznym\n   dzieleniem wyraz\u00f3w \u2014 inaczej justowanie w w\u0105skiej kolumnie robi \u201erzeki\u201d\n   bia\u0142ych dziur. Pierwsza litera pierwszego akapitu jest powi\u0119kszona.\n   Na komputerze zostaje zwyk\u0142y sk\u0142ad do lewej \u2014 w szerokiej kolumnie\n   wygl\u0105da spokojniej. *\/\n.hx-mis .ms-tekst{font-size:.95rem;line-height:1.7;color:var(--ink-2);margin:0 0 14px;}\n.hx-mis .ms-tekst:last-child{margin-bottom:0;}\n.hx-mis .ms-tekst b{color:var(--ink);}\n@media (max-width:899px){\n  .hx-mis .ms-tekst{text-align:justify;text-justify:inter-word;\n    hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:6 3 3;\n    line-height:1.78;letter-spacing:.001em;}\n  .hx-mis .ms-tekst + .ms-tekst{margin-top:16px;}\n  .hx-mis .ms-tekst:first-child::first-letter{\n    float:left;font-family:'Source Serif 4',Georgia,serif;font-weight:700;\n    font-size:3.05em;line-height:.82;margin:4px 9px 0 0;color:var(--navy);}\n}\n\/* \u2550\u2550 PASY ZE ZDJ\u0118CIAMI \u2550\u2550 *\/\n.hx-mis .ms-band{position:relative;overflow:hidden;height:38vh;min-height:220px;max-height:420px;}\n.hx-mis .ms-band img{position:absolute;left:0;width:100%;height:118%;top:-9%;\n  object-fit:cover;object-position:var(--kadr,center);will-change:transform;}\n\/* Na komputerze kadr jest przesuni\u0119ty wy\u017cej (mniejszy procent = wida\u0107 wi\u0119cej\n   g\u00f3rnej cz\u0119\u015bci zdj\u0119cia, czyli twarze zamiast n\u00f3g). Warto\u015b\u0107 ustawiasz osobno\n   dla ka\u017cdego pasa w atrybucie style: --kadr-d. *\/\n@media (min-width:900px){\n  .hx-mis .ms-band img{object-position:var(--kadr-d,var(--kadr,center));}\n}\n\/* \u2500\u2500 O\u017bYWIENIE ZDJ\u0118\u0106 \u2500\u2500\n   1) wej\u015bcie: kadr rozsuwa si\u0119 z g\u00f3ry i z do\u0142u (clip-path) i p\u0142ynnie si\u0119\n      rozja\u015bnia \u2014 celowo NIE u\u017cywamy tu transform, bo ten jest zaj\u0119ty\n      przez paralaks\u0119 i efekty by si\u0119 gryz\u0142y\n   2) po zdj\u0119ciu co kilka sekund przep\u0142ywa delikatna smuga \u015bwiat\u0142a\n   3) na komputerze najechanie kursorem rozja\u015bnia kadr i podnosi podpis\n   Wszystko wy\u0142\u0105cza si\u0119 przy w\u0142\u0105czonym ograniczeniu ruchu w systemie. *\/\n.hx-mis .ms-band img{opacity:0;clip-path:inset(14% 0 14% 0);\n  transition:opacity 1s ease,clip-path 1.25s cubic-bezier(.22,1,.36,1),filter .5s ease;}\n.hx-mis .ms-band.widoczny img{opacity:1;clip-path:inset(0 0 0 0);}\n.hx-mis .ms-band::before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:45%;z-index:3;\n  pointer-events:none;opacity:0;\n  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.10) 42%,\n    rgba(240,217,138,.20) 50%,rgba(255,255,255,.10) 58%,rgba(255,255,255,0) 100%);\n  transform:translateX(-140%) skewX(-12deg);}\n.hx-mis .ms-band.widoczny::before{opacity:1;animation:ms-shine 9s ease-in-out infinite;}\n@keyframes ms-shine{\n  0%,62%{transform:translateX(-140%) skewX(-12deg);}\n  88%,100%{transform:translateX(260%) skewX(-12deg);}\n}\n.hx-mis .ms-band p{transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .8s ease;\n  opacity:0;transform:translateY(14px);z-index:4;}\n.hx-mis .ms-band.widoczny p{opacity:1;transform:none;}\n.hx-mis .ms-band::after{transition:background .5s ease;}\n@media (min-width:900px) and (hover:hover){\n  .hx-mis .ms-band:hover img{filter:brightness(1.06) saturate(1.05);}\n  .hx-mis .ms-band:hover::after{\n    background:linear-gradient(180deg,rgba(10,31,58,.14),rgba(10,31,58,.6));}\n  .hx-mis .ms-band:hover p{transform:translateY(-4px);}\n}\n@media (prefers-reduced-motion:reduce){\n  .hx-mis .ms-band img{opacity:1;clip-path:none;transition:none;}\n  .hx-mis .ms-band p{opacity:1;transform:none;}\n  .hx-mis .ms-band::before{display:none;}\n}\n.hx-mis .ms-band::after{content:\"\";position:absolute;inset:0;\n  background:linear-gradient(180deg,rgba(10,31,58,.25),rgba(10,31,58,.7));}\n.hx-mis .ms-band p{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px var(--pad);\n  margin:0;color:#fff;font-weight:700;\n  font-size:clamp(1.05rem,4.4vw,1.5rem);line-height:1.3;text-shadow:0 2px 14px rgba(0,0,0,.5);}\n\/* drugi wiersz w pasie \u2014 mniejszy, bez szeryf\u00f3w, dopowiedzenie do has\u0142a *\/\n.hx-mis .ms-band p small{display:block;margin-top:8px;font-family:'Figtree',sans-serif;\n  font-weight:500;font-size:.84rem;line-height:1.5;color:#DCE7F0;\n  text-shadow:0 2px 10px rgba(0,0,0,.6);}\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   KAFLE \u201ePOZNAJ NAS BLI\u017bEJ\u201d\n   ---------------------------------------------------------------------\n   Kafel jest kolumn\u0105 wy\u015brodkowan\u0105 w poziomie: ikona, tytu\u0142, podpis.\n   Podpis ma \u201emargin-top:auto\u201d, wi\u0119c dosuwa si\u0119 do do\u0142u kafla \u2014 dzi\u0119ki temu\n   wszystkie podpisy w rz\u0119dzie le\u017c\u0105 w JEDNEJ LINII, tak\u017ce wtedy, gdy tytu\u0142\n   nad jednym z nich \u0142amie si\u0119 na dwa wiersze.\n   UWAGA na strza\u0142k\u0119 \u2192: siedzi POZA tokiem tekstu (position:absolute). Gdyby\n   by\u0142a zwyk\u0142ym elementem w linii, zajmowa\u0142aby miejsce mimo opacity:0\n   i przesuwa\u0142a napis o kilkana\u015bcie pikseli w lewo od \u015brodka.\n   Reakcja na najechanie: kafel unosi si\u0119, obw\u00f3dka i cie\u0144 przejmuj\u0105 jego\n   kolor, ikona lekko ro\u015bnie i przechyla si\u0119, wysuwa si\u0119 strza\u0142ka,\n   a po kaflu przebiega delikatny b\u0142ysk.\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.hx-mis .hx-tile{position:relative;overflow:hidden;\n  display:flex;flex-direction:column;align-items:center;text-align:center;\n  transition:transform .38s cubic-bezier(.22,1,.36,1),box-shadow .38s ease,border-color .38s ease;}\n.hx-mis .hx-tile b{width:100%;}\n.hx-mis .hx-tile u{display:inline-block;width:auto;max-width:100%;\n  margin-top:auto;padding-top:4px;position:relative;transition:color .3s ease;}\n.hx-mis .hx-tile .hx-ic{display:inline-grid;place-items:center;\n  transition:transform .45s cubic-bezier(.34,1.56,.64,1);}\n.hx-mis .hx-tile u::after{content:\"\u2192\";position:absolute;left:100%;bottom:0;\n  margin-left:6px;display:inline-block;\n  opacity:0;transform:translateX(-5px);transition:opacity .3s ease,transform .35s ease;\n  color:var(--c);font-weight:800;}\n.hx-mis .hx-tile::before{content:\"\";position:absolute;inset:-40%;pointer-events:none;opacity:0;\n  background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.55) 50%,rgba(255,255,255,0) 60%);\n  transform:translateX(-140%) skewX(-14deg);}\n@media (hover:hover){\n  .hx-mis .hx-tile:hover{transform:translateY(-5px);border-color:var(--c);\n    box-shadow:0 20px 34px -22px color-mix(in srgb,var(--c) 60%,transparent);}\n  .hx-mis .hx-tile:hover .hx-ic{transform:scale(1.16) rotate(-7deg);}\n  .hx-mis .hx-tile:hover u{color:var(--c);}\n  .hx-mis .hx-tile:hover u::after{opacity:1;transform:translateX(0);}\n  .hx-mis .hx-tile:hover::before{opacity:1;animation:ms-shine 1.1s ease-out;}\n}\n.hx-mis .hx-tile:active{transform:scale(.985);}\n\/* \u2550\u2550 WIZJA \u2550\u2550 *\/\n.hx-mis .ms-viz{display:grid;gap:10px;counter-reset:mv;}\n.hx-mis .ms-v{position:relative;background:var(--paper);border:1px solid var(--line);\n  border-radius:14px;padding:15px 15px 15px 56px;font-size:.94rem;line-height:1.5;}\n.hx-mis .ms-v::before{counter-increment:mv;content:counter(mv);\n  position:absolute;left:14px;top:14px;width:29px;height:29px;border-radius:50%;\n  background:var(--navy);color:#fff;display:grid;place-items:center;\n  font-size:.9rem;font-weight:700;}\n\/* \u2550\u2550 PARTNERZY \u2550\u2550 *\/\n.hx-mis .ms-part{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:center;\n  justify-content:center;}\n.hx-mis .ms-part div{background:var(--paper);border:1px solid var(--line);border-radius:14px;\n  padding:18px;display:grid;place-items:center;min-height:92px;}\n.hx-mis .ms-part img{max-width:100%;max-height:52px;object-fit:contain;}\n\/* bardzo w\u0105skie telefony \u2014 logotypy jeden pod drugim, \u017ceby nie by\u0142y znaczkami *\/\n@media (max-width:359px){\n  .hx-mis .ms-part{grid-template-columns:1fr;}\n  .hx-mis .ms-val{grid-template-columns:46px minmax(0,1fr);gap:12px;padding:14px;}\n  .hx-mis .ms-val img{width:46px;height:46px;}\n}\n@media (min-width:900px){\n  \/* \u2500\u2500 NAG\u0141\u00d3WEK W DW\u00d3CH KOLUMNACH \u2500\u2500\n     Has\u0142o sta\u0142o wcze\u015bniej w w\u0105skiej kolumnie (20 znak\u00f3w w wierszu) i przez to\n     nag\u0142\u00f3wek by\u0142 bardzo wysoki, a obok zostawa\u0142o puste pole. Teraz po lewej\n     stoi tytu\u0142 z paskiem post\u0119pu, a has\u0142o rozk\u0142ada si\u0119 w bok po prawej \u2014\n     ten sam tekst mie\u015bci si\u0119 w trzech wierszach zamiast siedmiu. *\/\n  .hx-mis .ms-hero{padding:46px var(--pad) 48px;\n    display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);\n    \/* odst\u0119p TYLKO mi\u0119dzy kolumnami \u2014 gdy by\u0142 wsp\u00f3lny (gap), rozpycha\u0142 te\u017c\n       wiersze i tytu\u0142 \u201eMisja i wizja szko\u0142y\u201d odje\u017cd\u017ca\u0142 w d\u00f3\u0142 od napisu O NAS *\/\n    column-gap:clamp(28px,3.4vw,52px);row-gap:0;align-items:center;}\n  .hx-mis .ms-hero > .hx-kicker,\n  .hx-mis .ms-hero > h1,\n  .hx-mis .ms-hero > .ms-prog{grid-column:1;}\n  \/* Has\u0142o po prawej jest wy\u017csze ni\u017c tytu\u0142 po lewej. Bez tego bloku nadmiar\n     wysoko\u015bci rozdziela\u0142 si\u0119 po r\u00f3wno na trzy wiersze i tytu\u0142 \u201eodkleja\u0142 si\u0119\u201d\n     od napisu O NAS. Teraz ca\u0142a wolna przestrze\u0144 l\u0105duje w ostatnim wierszu\n     (pod z\u0142otym paskiem), a napis O NAS i tytu\u0142 stoj\u0105 tu\u017c przy sobie. *\/\n  .hx-mis .ms-hero{grid-template-rows:auto auto 1fr;}\n  .hx-mis .ms-hero > .hx-kicker{grid-row:1;align-self:end;}\n  .hx-mis .ms-hero > h1{grid-row:2;align-self:start;}\n  .hx-mis .ms-hero > .ms-prog{grid-row:3;align-self:start;}\n  .hx-mis .ms-claim{grid-column:2;grid-row:1 \/ span 3;margin:0;align-self:center;\n    font-size:clamp(1.7rem,2.5vw,2.35rem);max-width:34ch;}\n  .hx-mis .ms-prog{max-width:420px;margin-top:24px;}\n  .hx-mis .ms-vals{grid-template-columns:1fr 1fr;gap:16px;}\n  .hx-mis .ms-band{height:46vh;max-height:520px;}\n  .hx-mis .ms-band p{max-width:40ch;font-size:1.7rem;}\n  .hx-mis .ms-band p small{font-size:1rem;max-width:46ch;}\n  .hx-mis .ms-viz{grid-template-columns:1fr 1fr;gap:16px;}\n  .hx-mis .ms-part{grid-template-columns:repeat(2,minmax(0,320px));}\n  \/* \u2500\u2500 PASY \u201eUczymy przez dzia\u0142anie\u2026\u201d i \u201eEdukacja to co\u015b wi\u0119cej\u2026\u201d:\n     has\u0142o w JEDNYM wierszu, a sam pas ni\u017cszy, \u017ceby pod tekstem nie\n     zostawa\u0142o pustej przestrzeni ze zdj\u0119ciem. Dotyczy tylko tych dw\u00f3ch\n     pas\u00f3w (data-band 0 i 2) \u2014 pozosta\u0142e pasy maj\u0105 d\u0142u\u017csze podpisy i nadal\n     \u0142ami\u0105 si\u0119 na dwa wiersze. clamp() w font-size lekko zmniejsza napis\n     na w\u0119\u017cszych laptopach (900\u20131100px), \u017ceby jeden wiersz zawsze si\u0119\n     zmie\u015bci\u0142 bez przycinania. *\/\n  .hx-mis .ms-band[data-band=\"0\"],\n  .hx-mis .ms-band[data-band=\"2\"]{height:34vh;min-height:260px;max-height:380px;}\n  .hx-mis .ms-band[data-band=\"0\"] p,\n  .hx-mis .ms-band[data-band=\"2\"] p{max-width:none;white-space:nowrap;\n    font-size:clamp(1.3rem,2.3vw,1.7rem);}\n}\n\/* Szerokie monitory \u2014 regu\u0142a musi sta\u0107 PO bloku 900 px, bo inaczej\n   przegrywa z ustawieniem dw\u00f3ch kolumn. Pi\u0119\u0107 warto\u015bci \u0142adniej uk\u0142ada si\u0119\n   w trzech kolumnach, gdy jest na to miejsce. *\/\n@media (min-width:1400px){\n  .hx-mis .ms-vals{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;}\n  .hx-mis .ms-viz{gap:18px;}\n}\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   PANEL \u201eMI\u0118DZYNARODOWE \u015aRODOWISKO\u201d\n   ---------------------------------------------------------------------\n   Sekcja w DW\u00d3CH KOLUMNACH:\n     \u2022 po lewej: nadtytu\u0142, nag\u0142\u00f3wek, zdanie wprowadzaj\u0105ce, blok\n       o certyfikatach i r\u00f3wny rz\u0105d trzech zdj\u0119\u0107 w jednakowych kadrach\n     \u2022 po prawej: g\u0142\u00f3wne zdj\u0119cie w ramce o sta\u0142ych proporcjach\n     \u2022 tekst stoi na jednolitym granacie (nie na fotografii), wi\u0119c jest\n       w pe\u0142ni czytelny \u2014 bez cieni, mgie\u0142 i gradient\u00f3w ratunkowych\n   Na telefonie kolumny uk\u0142adaj\u0105 si\u0119 jedna pod drug\u0105, w tej samej\n   kolejno\u015bci: tekst \u2192 rz\u0105d trzech miniatur \u2192 g\u0142\u00f3wne zdj\u0119cie.\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.hx-mis .ms-int{background:var(--navy);color:#fff;position:relative;overflow:hidden;\n  padding:32px var(--pad) 34px;display:grid;gap:26px;}\n\/* delikatna z\u0142ota po\u015bwiata w rogu \u2014 ten sam akcent co w nag\u0142\u00f3wku strony *\/\n.hx-mis .ms-int::after{content:\"\";position:absolute;right:-110px;bottom:-130px;\n  width:300px;height:300px;border-radius:50%;background:rgba(217,164,23,.10);\n  pointer-events:none;}\n.hx-mis .ms-int__txt{position:relative;z-index:2;min-width:0;}\n.hx-mis .ms-int__txt h2{margin:0;color:#fff;font-weight:700;letter-spacing:-.01em;\n  font-size:clamp(1.3rem,5vw,1.72rem);line-height:1.28;}\n.hx-mis .ms-int__lead{margin:12px 0 0;color:#C3D3E3;max-width:48ch;\n  font-size:.95rem;line-height:1.62;}\n\/* \u2500\u2500 BLOK O CERTYFIKATACH \u2500\u2500\n   Domyka my\u015bl ca\u0142ego panelu: \u201emi\u0119dzynarodowe \u015brodowisko\u201d to nie tylko\n   wycieczki i obyczaje, ale te\u017c konkretny, papierowy dow\u00f3d znajomo\u015bci\n   j\u0119zyka. Wyr\u00f3\u017cniony z\u0142ot\u0105 kresk\u0105 po lewej \u2014 tym samym akcentem, co\n   nadtytu\u0142 sekcji.\n   \u25b8 TRE\u015a\u0106 MUSI SI\u0118 ZGADZA\u0106 ZE STRON\u0104 G\u0141\u00d3WN\u0104. Je\u015bli na hilaris-blonie.pl\n     zmieni si\u0119 \u015bcie\u017cka egzaminacyjna albo zdawalno\u015b\u0107, popraw i tutaj:\n     akapit <span> oraz etykietki <li> ni\u017cej. *\/\n.hx-mis .ms-int__cert{margin-top:20px;padding:16px 18px;border-radius:14px;\n  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);\n  border-left:3px solid var(--gold);max-width:52ch;}\n.hx-mis .ms-int__cert b{display:block;color:#fff;font-weight:700;\n  font-size:1rem;line-height:1.3;}\n.hx-mis .ms-int__cert span{display:block;margin-top:7px;color:#C3D3E3;\n  font-size:.9rem;line-height:1.6;}\n\/* ma\u0142a lista \u201eklasa \u2192 egzamin\u201d \u2014 trzy szczeble \u015bcie\u017cki egzaminacyjnej *\/\n.hx-mis .ms-int__kroki{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px;}\n.hx-mis .ms-int__kroki li{display:grid;grid-template-columns:auto minmax(0,1fr);\n  gap:10px;align-items:baseline;font-size:.88rem;line-height:1.5;color:#C3D3E3;}\n.hx-mis .ms-int__kroki i{font-style:normal;font-weight:800;font-size:.72rem;\n  letter-spacing:.04em;color:var(--gold-l);background:rgba(217,164,23,.14);\n  border:1px solid rgba(217,164,23,.32);border-radius:99px;padding:4px 9px;\n  white-space:nowrap;}\n.hx-mis .ms-int__kroki b{display:inline;color:#fff;font-weight:700;}\n\/* etykietki z nazwami egzamin\u00f3w *\/\n.hx-mis .ms-int__tagi{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0;padding:0;\n  list-style:none;}\n.hx-mis .ms-int__tagi li{font-size:.74rem;font-weight:700;letter-spacing:.03em;\n  color:var(--gold-l);background:rgba(217,164,23,.13);\n  border:1px solid rgba(217,164,23,.34);border-radius:99px;padding:5px 11px;}\n\/* etykietka wyr\u00f3\u017cniona (klasa \u201emocny\u201d) \u2014 pe\u0142ne z\u0142oto zamiast obrysu.\n   U\u017cywana dla najmocniejszego argumentu, np. wyniku zdawalno\u015bci. *\/\n.hx-mis .ms-int__tagi li.mocny{background:var(--gold);border-color:var(--gold);\n  color:#1B1305;}\n\/* podpis pod rz\u0119dem zdj\u0119\u0107 \u2014 wi\u0105\u017ce fotografie z blokiem o certyfikatach *\/\n.hx-mis .ms-int__pod{margin:10px 0 0;color:#93A9C0;font-size:.79rem;line-height:1.5;}\n\/* \u2500\u2500 RZ\u0104D TRZECH ZDJ\u0118\u0106 \u2500\u2500\n   R\u00f3wne kadry w jednej siatce (aspect-ratio pilnuje, \u017ce wszystkie maj\u0105\n   identyczny kszta\u0142t niezale\u017cnie od proporcji plik\u00f3w). Wje\u017cd\u017caj\u0105 jedno\n   po drugim, gdy sekcja pojawi si\u0119 na ekranie. *\/\n.hx-mis .ms-int__gal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));\n  gap:10px;margin-top:22px;}\n.hx-mis .ms-int__gal figure{margin:0;position:relative;overflow:hidden;\n  border-radius:12px;aspect-ratio:4\/3;background:rgba(255,255,255,.06);\n  border:1px solid rgba(255,255,255,.15);opacity:0;transform:translateY(12px);\n  transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1),\n    border-color .35s ease;}\n.hx-mis .ms-int__gal figure:nth-child(2){transition-delay:.09s;}\n.hx-mis .ms-int__gal figure:nth-child(3){transition-delay:.18s;}\n.hx-mis .ms-int.widoczny .ms-int__gal figure{opacity:1;transform:none;}\n.hx-mis .ms-int__gal img{width:100%;height:100%;display:block;\n  object-fit:cover;object-position:center;\n  transition:transform .6s cubic-bezier(.22,1,.36,1);}\n@media (hover:hover){\n  .hx-mis .ms-int__gal figure:hover{border-color:rgba(217,164,23,.75);}\n  .hx-mis .ms-int__gal figure:hover img{transform:scale(1.06);}\n}\n\/* \u2500\u2500 G\u0141\u00d3WNE ZDJ\u0118CIE + PRZEWIJANIE \u2500\u2500\n   Ramka ma sta\u0142e proporcje (aspect-ratio), a zdj\u0119cie w \u015brodku jest od niej\n   WY\u017bSZE (height:150%) \u2014 i to jest w\u0142a\u015bnie zapas, kt\u00f3ry skrypt przesuwa\n   w pionie w rytm przewijania strony: im dalej w d\u00f3\u0142, tym wy\u017cej \u201ejedzie\u201d\n   zdj\u0119cie i tym wi\u0119cej wida\u0107 twarzy u g\u00f3ry.\n   WA\u017bNE: skrypt (zmienna ZASIEG na dole pliku) wykorzystuje tylko CZ\u0118\u015a\u0106\n   tego zapasu. Dzi\u0119ki temu ruch jest wyra\u017any, ale twarze zostaj\u0105 w kadrze\n   na OBU ko\u0144cach \u2014 a nie tylko na samym ko\u0144cu, jak by\u0142o wcze\u015bniej.\n   Chcesz d\u0142u\u017csz\u0105 \u201epodr\u00f3\u017c\u201d? Zwi\u0119ksz 150% tutaj i\/lub ZASIEG w skrypcie. *\/\n.hx-mis .ms-int__foto{position:relative;overflow:hidden;border-radius:16px;\n  aspect-ratio:4\/5;background:#08172C;\n  box-shadow:0 30px 60px -34px rgba(0,0,0,.85);\n  opacity:0;clip-path:inset(10% 0 10% 0);\n  transition:opacity .9s ease,clip-path 1.1s cubic-bezier(.22,1,.36,1);}\n.hx-mis .ms-int.widoczny .ms-int__foto{opacity:1;clip-path:inset(0 0 0 0);}\n\/* \u2500\u2500 KADR G\u0141\u00d3WNEGO ZDJ\u0118CIA W POZIOMIE \u2500\u2500\n   Zdj\u0119cie jest szersze ni\u017c ramka, wi\u0119c co\u015b musi zosta\u0107 uci\u0119te z bok\u00f3w.\n   Decyduje o tym pierwsza liczba w \u201eobject-position\u201d:\n     50% = kadr po \u015brodku (tak by\u0142o)\n     40% = kadr przesuni\u0119ty o 10% w LEWO, czyli w kadrze zostaje WI\u0118CEJ\n           lewej strony zdj\u0119cia (dziewczynka), a mniej prawej (posta\u0107\n           w czerwonym mundurze). Wizualnie zdj\u0119cie \u201ejedzie\u201d w prawo.\n   Mniejsza liczba = jeszcze wi\u0119cej dziewczynki; wi\u0119ksza = odwrotnie. *\/\n.hx-mis .ms-int__foto img{position:absolute;left:0;top:0;width:100%;height:150%;\n  display:block;object-fit:cover;object-position:40% top;will-change:transform;}\n@media (min-width:900px){\n  .hx-mis .ms-int{padding:52px var(--pad) 56px;align-items:center;\n    grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);\n    gap:clamp(30px,3.6vw,54px);}\n  .hx-mis .ms-int__txt h2{font-size:clamp(1.55rem,2.3vw,2.05rem);}\n  .hx-mis .ms-int__lead{font-size:1.02rem;margin-top:14px;}\n  .hx-mis .ms-int__cert{margin-top:24px;padding:18px 20px;}\n  .hx-mis .ms-int__cert b{font-size:1.06rem;}\n  .hx-mis .ms-int__cert span{font-size:.95rem;}\n  .hx-mis .ms-int__kroki li{font-size:.92rem;}\n  .hx-mis .ms-int__gal{margin-top:26px;gap:14px;}\n}\n@media (prefers-reduced-motion:reduce){\n  .hx-mis .ms-int__foto{opacity:1;clip-path:none;transition:none;}\n  .hx-mis .ms-int__gal figure{opacity:1;transform:none;transition:none;}\n}\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n   POWI\u0118KSZANIE ZDJ\u0118\u0106 (klikni\u0119cie otwiera du\u017cy podgl\u0105d)\n   ---------------------------------------------------------------------\n   Zdj\u0119cia w panelu (g\u0142\u00f3wne + trzy z rz\u0119du) po klikni\u0119ciu otwieraj\u0105 si\u0119\n   na pe\u0142nym ekranie. Podgl\u0105d zamyka si\u0119 klikni\u0119ciem w t\u0142o, krzy\u017cykiem\n   lub klawiszem Esc; strza\u0142kami \u2039 \u203a (albo klawiszami \u2190\/\u2192) przechodzi si\u0119\n   mi\u0119dzy zdj\u0119ciami.\n   UWAGA: te regu\u0142y celowo NIE s\u0105 zagnie\u017cd\u017cone w \u201e.hx-mis\u201d, bo warstwa\n   podgl\u0105du jest doklejana na koniec strony (do <body>), poza sekcj\u0105 \u2014\n   inaczej style by jej nie obj\u0119\u0142y. Dlatego te\u017c ma w\u0142asne box-sizing\n   i w\u0142asny, wysoki z-index.\n   \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n.hx-lb,.hx-lb *{box-sizing:border-box;}\n\/* z-index celowo bardzo wysoki: przyklejony nag\u0142\u00f3wek witryny i dymek czatu\n   potrafi\u0105 mie\u0107 w\u0142asne, wysokie warto\u015bci i przykrywa\u0142y podgl\u0105d *\/\n.hx-lb{position:fixed;inset:0;z-index:2147480000;display:none;\n  background:rgba(6,17,33,.94);padding:clamp(14px,3vw,40px);\n  -webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);}\n.hx-lb.jest{display:grid;place-items:center;}\n.hx-lb figure{margin:0;display:grid;justify-items:center;gap:12px;max-width:100%;}\n.hx-lb img{display:block;max-width:min(94vw,1180px);max-height:82vh;\n  width:auto;height:auto;border-radius:12px;background:#0A1F3A;\n  box-shadow:0 40px 90px -40px #000;}\n.hx-lb figcaption{color:#C3D3E3;font-family:'Figtree',system-ui,sans-serif;\n  font-size:.88rem;line-height:1.5;text-align:center;max-width:60ch;}\n\/* \u2500\u2500 PRZYCISKI PODGL\u0104DU: granat + z\u0142oto \u2500\u2500\n   DWIE RZECZY, KT\u00d3RE BY\u0141Y NIE TAK I S\u0104 TU NAPRAWIONE:\n   1) Krzy\u017cyk by\u0142 ZNAKIEM TEKSTOWYM (&times;). Ka\u017cdy kr\u00f3j rysuje go inaczej\n      i sadza inaczej wzgl\u0119dem linii pisma, wi\u0119c w okr\u0105g\u0142ym przycisku\n      wychodzi\u0142 krzywo i nie na \u015brodku. Teraz to ikona SVG \u2014 dwie kreski\n      rysowane po wsp\u00f3\u0142rz\u0119dnych, zawsze idealnie w osi k\u00f3\u0142ka.\n   2) Motyw witryny (albo wtyczka czatu) nadpisywa\u0142 wygl\u0105d przycisku swoim\n      globalnym stylem dla <button> \u2014 st\u0105d jaskrawy niebieski kr\u0105g zamiast\n      granatowego. Dlatego kluczowe w\u0142a\u015bciwo\u015bci maj\u0105 tu !important,\n      a selektor jest celowo \u201epodw\u00f3jny\u201d (.hx-lb button.hx-lb__x), \u017ceby mia\u0142\n      wy\u017csz\u0105 moc ni\u017c regu\u0142y motywu.\n   Wygl\u0105d: granatowy kr\u0105\u017cek ze z\u0142otym obrysem i z\u0142ot\u0105 ikon\u0105 \u2014 ten sam\n   akcent, co w nag\u0142\u00f3wkach i etykietkach na stronie. *\/\n.hx-lb button.hx-lb__x,\n.hx-lb button.hx-lb__p,\n.hx-lb button.hx-lb__n{\n  position:absolute;-webkit-appearance:none;appearance:none;cursor:pointer;\n  display:grid !important;place-items:center !important;\n  width:52px !important;height:52px !important;min-width:0 !important;\n  padding:0 !important;margin:0;line-height:0 !important;font-size:0 !important;\n  color:#F0D98A !important;\n  background:linear-gradient(180deg,#153A63 0%,#0A1F3A 100%) !important;\n  border:1px solid rgba(240,217,138,.6) !important;\n  border-radius:50% !important;\n  box-shadow:0 0 0 1px rgba(10,31,58,.6),0 16px 34px -14px rgba(0,0,0,.9) !important;\n  transition:transform .25s ease,background .25s ease,border-color .25s ease,\n             box-shadow .25s ease;}\n.hx-lb button svg{width:20px;height:20px;display:block;\n  stroke:currentColor;fill:none;stroke-width:2.6;\n  stroke-linecap:round;stroke-linejoin:round;}\n.hx-lb button.hx-lb__x:hover,\n.hx-lb button.hx-lb__p:hover,\n.hx-lb button.hx-lb__n:hover{\n  background:linear-gradient(180deg,#1B4878 0%,#0E2B4D 100%) !important;\n  border-color:#F0D98A !important;transform:scale(1.08);\n  box-shadow:0 0 0 1px rgba(240,217,138,.35),0 20px 40px -14px rgba(0,0,0,.95) !important;}\n.hx-lb button.hx-lb__x:active,\n.hx-lb button.hx-lb__p:active,\n.hx-lb button.hx-lb__n:active{transform:scale(.96);}\n.hx-lb button:focus-visible{outline:3px solid #F0D98A !important;outline-offset:3px;}\n.hx-lb__x{top:clamp(12px,2.4vw,26px);right:clamp(12px,2.4vw,26px);}\n.hx-lb__p,.hx-lb__n{top:50%;margin-top:-26px !important;}\n.hx-lb__p{left:clamp(8px,2vw,26px);}\n.hx-lb__n{right:clamp(8px,2vw,26px);}\n\/* na w\u0105skich telefonach strza\u0142ki schodz\u0105 na d\u00f3\u0142, \u017ceby nie le\u017ca\u0142y na zdj\u0119ciu *\/\n@media (max-width:560px){\n  .hx-lb button.hx-lb__p,\n  .hx-lb button.hx-lb__n{top:auto;bottom:18px;margin-top:0 !important;\n    width:46px !important;height:46px !important;}\n  .hx-lb button.hx-lb__p svg,\n  .hx-lb button.hx-lb__n svg{width:18px;height:18px;}\n  .hx-lb__p{left:27%;}\n  .hx-lb__n{right:27%;}\n}\n\/* gdy podgl\u0105d jest otwarty, strona pod spodem si\u0119 nie przewija *\/\nbody.hx-lb-stop{overflow:hidden;}\n\/* \u2500\u2500 ZDJ\u0118CIA W PANELU S\u0104 KLIKALNE \u2500\u2500\n   Kursor-lupa i delikatne rozja\u015bnienie m\u00f3wi\u0105, \u017ce da si\u0119 je powi\u0119kszy\u0107. *\/\n.hx-mis .ms-int__gal figure,\n.hx-mis .ms-int__foto{cursor:zoom-in;}\n.hx-mis .ms-int__foto::after{content:\"\";position:absolute;inset:0;z-index:2;\n  background:rgba(10,31,58,0);transition:background .35s ease;pointer-events:none;}\n@media (hover:hover){\n  .hx-mis .ms-int__foto:hover::after{background:rgba(10,31,58,.16);}\n}\n\/* obrys przy nawigacji klawiatur\u0105 \u2014 zdj\u0119cia s\u0105 klikalne, wi\u0119c musz\u0105 by\u0107\n   te\u017c osi\u0105galne z klawiatury (patrz tabindex w skrypcie) *\/\n.hx-mis .ms-int__gal figure:focus-visible,\n.hx-mis .ms-int__foto:focus-visible{outline:3px solid var(--gold);outline-offset:3px;}\n@media (prefers-reduced-motion:reduce){\n  .hx-mis .ms-val{opacity:1;transform:none;}\n  .hx-mis .ms-claim span{color:#fff;}\n  .hx-mis .ms-claim span.key{color:var(--gold-l);}\n}\n<\/style>\n<section class=\"hx hx-mis\" id=\"hil-misja\" lang=\"pl\">\n <div class=\"hx-app\">\n  <a class=\"hx-back\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=345\">\n    <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.6\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H6M11 6l-6 6 6 6\"\/><\/svg>\n    Szko\u0142a Podstawowa\n  <\/a>\n  <div class=\"ms-hero\" id=\"msHero\">\n    <p class=\"hx-kicker\">O nas<\/p>\n    <h1 style=\"color:#fff;font-size:clamp(1.7rem,7vw,2.2rem)\">\n      <span class=\"hx-ln\"><i>Misja i wizja szko\u0142y<\/i><\/span><\/h1>\n    <p class=\"ms-claim\" id=\"msClaim\"><\/p>\n    <div class=\"ms-prog\"><i id=\"msProg\"><\/i><\/div>\n  <\/div>\n  <div class=\"ms-band\" data-band=\"0\">\n    <img decoding=\"async\" src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2026\/05\/57-scaled.jpg\"\n         alt=\"Zaj\u0119cia w Szkole Podstawowej Hilaris\" loading=\"lazy\"\n         style=\"--kadr:center 42%;--kadr-d:center 12%\">\n    <p>Edukacja to co\u015b wi\u0119cej ni\u017c przekazywanie wiedzy.<\/p>\n  <\/div>\n  <div class=\"hx-sec\">\n    <h2 class=\"hx-h\" data-x>Nasze warto\u015bci<\/h2>\n    <p class=\"hx-sub\" data-x>Pi\u0119\u0107 rzeczy, na kt\u00f3rych opieramy ka\u017cdy dzie\u0144 w szkole.<\/p>\n    <div class=\"ms-wheel-wrap\">\n      <div class=\"ms-wheel\" id=\"msWheel\">\n        <span class=\"ms-wheel__ring\" aria-hidden=\"true\"><\/span>\n        <span class=\"ms-wheel__tor\" aria-hidden=\"true\"><\/span>\n        <div class=\"ms-wheel__spin\" id=\"msSpin\"><\/div>\n        <div class=\"ms-wheel__core\" id=\"msCore\" aria-hidden=\"true\"><\/div>\n      <\/div>\n      <div class=\"ms-info\" id=\"msInfo\" role=\"status\" aria-live=\"polite\"><\/div>\n      <div class=\"ms-dots\" id=\"msDots\"><\/div>\n    <\/div>\n  <\/div>\n  <div class=\"ms-band\" data-band=\"2\">\n    <img decoding=\"async\" src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/10\/227-1.jpg\"\n         alt=\"Nauka przez zabaw\u0119 w Szkole Podstawowej Hilaris\" loading=\"lazy\"\n         style=\"--kadr:center 32%;--kadr-d:center 13%\">\n    <p>Uczymy przez dzia\u0142anie, do\u015bwiadczanie i zabaw\u0119.<\/p>\n  <\/div>\n  <div class=\"hx-sec hx-sec--mist\">\n    <h2 class=\"hx-h\" data-x>Nasza misja<\/h2>\n    <div id=\"msMisja\"><\/div>\n  <\/div>\n  <!-- \u2550\u2550 PANEL \u201eMI\u0118DZYNARODOWE \u015aRODOWISKO\u201d \u2550\u2550\n       Dwie kolumny: tekst + blok o certyfikatach + rz\u0105d trzech zdj\u0119\u0107 po lewej,\n       g\u0142\u00f3wne zdj\u0119cie po prawej. Na telefonie jedna kolumna pod drug\u0105.\n       \u25b8 TRE\u015a\u0106 O EGZAMINACH JEST UZGODNIONA ZE STRON\u0104 G\u0141\u00d3WN\u0104 hilaris-blonie.pl:\n         klasy 1\u20133 \u2192 YLE (Starters, Movers, Flyers); klasy 4\u20136 \u2192 KET lub PET;\n         klasy 7\u20138 \u2192 PET albo FCE (B2); zdawalno\u015b\u0107 100%; szko\u0142a jest centrum\n         przygotowawczym do egzamin\u00f3w Cambridge. Zmieniasz to na stronie\n         g\u0142\u00f3wnej \u2014 popraw te\u017c tutaj. -->\n  <div class=\"ms-int\" id=\"msInt\">\n    <div class=\"ms-int__txt\">\n      <p class=\"hx-kicker\">Mi\u0119dzynarodowe \u015brodowisko<\/p>\n      <h2>Chcemy, by nasi uczniowie czuli si\u0119 pewnie\n        w mi\u0119dzynarodowym \u015brodowisku.<\/h2>\n      <p class=\"ms-int__lead\">Poznajemy obyczaje innych kraj\u00f3w \u2014 z poczuciem humoru\n        i w zabawnej atmosferze.<\/p>\n      <!-- Etykietki ni\u017cej: dopisanie klasy \u201emocny\u201d do <li> zamienia obrys\n           na pe\u0142ne z\u0142oto \u2014 u\u017cywaj jej dla najmocniejszego argumentu. -->\n      <div class=\"ms-int__cert\">\n        <b>Od rozmowy do certyfikatu<\/b>\n        <span>Swobod\u0119 w mi\u0119dzynarodowym \u015brodowisku da si\u0119 potwierdzi\u0107 na papierze.\n          Jeste\u015bmy centrum przygotowawczym do egzamin\u00f3w Cambridge i prowadzimy\n          uczni\u00f3w przez ca\u0142\u0105 \u015bcie\u017ck\u0119 egzaminacyjn\u0105 \u2014 od pierwszych egzamin\u00f3w\n          w klasach m\u0142odszych po certyfikat na poziomie B2. Ka\u017cdy dokument jest\n          uznawany na ca\u0142ym \u015bwiecie: zostaje z uczniem na lata i otwiera drzwi\n          w dalszej nauce.<\/span>\n        <ul class=\"ms-int__kroki\">\n          <li><i>klasy 1\u20133<\/i><span>Pierwsze egzaminy <b>Cambridge YLE<\/b> \u2014\n            Starters, Movers i Flyers.<\/span><\/li>\n          <li><i>klasy 4\u20136<\/i><span>Przygotowanie do egzaminu <b>KET lub PET<\/b> \u2014\n            zale\u017cnie od poziomu ucznia.<\/span><\/li>\n          <li><i>klasy 7\u20138<\/i><span>Certyfikat <b>PET albo FCE<\/b>. FCE to poziom\n            B2 \u2014 przyst\u0119puj\u0105 do niego u nas ju\u017c si\u00f3dmoklasi\u015bci.<\/span><\/li>\n        <\/ul>\n        <ul class=\"ms-int__tagi\">\n          <li>Centrum przygotowawcze Cambridge<\/li>\n          <li>YLE: Starters \u00b7 Movers \u00b7 Flyers<\/li>\n          <li>KET \u00b7 PET \u00b7 FCE (B2)<\/li>\n          <li class=\"mocny\">100% zdawalno\u015bci<\/li>\n        <\/ul>\n      <\/div>\n      <div class=\"ms-int__gal\">\n        <figure><img decoding=\"async\" src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2026\/08\/Zdjecie-WhatsApp-2025-10-19-o-16.44.29_4ac309d5.jpg\"\n             alt=\"Uczniowie Hilaris z certyfikatami j\u0119zykowymi\" loading=\"lazy\"><\/figure>\n        <figure><img decoding=\"async\" src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2026\/08\/Zdjecie-WhatsApp-2025-10-19-o-16.47.21_b34b6df9.jpg\"\n             alt=\"Wr\u0119czenie certyfikat\u00f3w j\u0119zykowych uczniom Hilaris\" loading=\"lazy\"><\/figure>\n        <figure><img decoding=\"async\" src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2026\/08\/Zdjecie-WhatsApp-2025-10-19-o-16.47.41_3694bad1.jpg\"\n             alt=\"Uczennice Hilaris odbieraj\u0105 certyfikaty j\u0119zykowe\" loading=\"lazy\"><\/figure>\n      <\/div>\n      <p class=\"ms-int__pod\">Rozdanie certyfikat\u00f3w j\u0119zykowych w naszej szkole.<\/p>\n    <\/div>\n    <div class=\"ms-int__foto\">\n      <img decoding=\"async\" src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/08\/IMG-20250701-WA0056.jpg\"\n           alt=\"Uczennica Hilaris podczas wycieczki zagranicznej\" loading=\"lazy\">\n    <\/div>\n  <\/div>\n  <div class=\"hx-sec\">\n    <h2 class=\"hx-h\" data-x>Nasza wizja<\/h2>\n    <p class=\"hx-sub\" data-x>Wychowanie wykszta\u0142conego, wra\u017cliwego i kulturalnego cz\u0142owieka,\n       kt\u00f3ry potrafi:<\/p>\n    <div class=\"ms-viz\" id=\"msViz\"><\/div>\n  <\/div>\n  <div class=\"ms-band\" data-band=\"3\">\n    <img decoding=\"async\" src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/10\/342-scaled.jpg\"\n         alt=\"Spo\u0142eczno\u015b\u0107 Szko\u0142y Podstawowej Hilaris\" loading=\"lazy\"\n         style=\"--kadr:center 36%;--kadr-d:center 20%\">\n    <p>Wra\u017cliwo\u015b\u0107 i warto\u015bci, kt\u00f3re p\u0142yn\u0105 z wychowania w rodzinnej atmosferze.<\/p>\n  <\/div>\n  <div class=\"hx-sec hx-sec--mist\">\n    <h2 class=\"hx-h\" data-x>Partnerzy<\/h2>\n    <div class=\"ms-part\" data-x>\n      <div><img decoding=\"async\" src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/09\/librus.png\" alt=\"Librus\" loading=\"lazy\"><\/div>\n      <div><img decoding=\"async\" src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/09\/logo-Laboratoria_Przyszlosci_poziom_kolor-1024x575.png\" alt=\"Laboratoria Przysz\u0142o\u015bci\" loading=\"lazy\"><\/div>\n    <\/div>\n  <\/div>\n  <div class=\"hx-sec\">\n    <h2 class=\"hx-h\" data-x>Poznaj nas bli\u017cej<\/h2>\n    <div class=\"hx-grid\" style=\"--cols:2;--cols-d:4\" id=\"msTiles\"><\/div>\n  <\/div>\n  <nav class=\"hx-bar\" aria-label=\"Szybkie akcje\">\n    <a href=\"https:\/\/hilaris-blonie.pl\/?page_id=345\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><path d=\"M19 12H6M11 6l-6 6 6 6\"\/><\/svg>\n      Szko\u0142a<\/a>\n    <a class=\"is-main\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=4127\">\n      <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"><rect x=\"3\" y=\"5\" width=\"18\" height=\"16\" rx=\"2.5\"\/><path d=\"M8 2.5v5M16 2.5v5M3 10h18\"\/><path d=\"M9 15.2l2.1 2.1L15.4 13\"\/><\/svg>\n      Spotkanie<\/a>\n    <a href=\"tel:+48224985525\">\n      <svg viewBox=\"0 0 24 24\" fill=\"currentColor\"><path d=\"M6.6 10.8a15.5 15.5 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z\"\/><\/svg>\n      Zadzwo\u0144<\/a>\n  <\/nav>\n <\/div>\n<\/section>\n<script>\n(function(){\n  var ROOT = document.getElementById('hil-misja');\n  if(!ROOT) return;\n  function __start(){\n  var ic = HX.ic, U = 'https:\/\/hilaris-blonie.pl\/?page_id=';\n  var G = 'https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/11\/';\n  \/* \u2550\u2550\u2550 \u25bc JEDYNE MIEJSCE DO EDYCJI \u25bc \u2550\u2550\u2550 *\/\n  var MISJA = {\n    \/* s\u0142owa w nawiasach [ ] roz\u015bwietl\u0105 si\u0119 na z\u0142oto *\/\n    haslo:'Kszta\u0142tujemy [ciekawo\u015b\u0107 \u015bwiata], [samodzielno\u015b\u0107 my\u015blenia] i [wra\u017cliwo\u015b\u0107 na innych] '\n        + 'w atmosferze [zaufania], [szacunku] i [akceptacji].',\n    \/* c: \u2014 kolor warto\u015bci (b\u0105belek w kole, karta z opisem, kropka)\n       znak | w tytule = miejsce, w kt\u00f3rym napis w \u015brodku ko\u0142a \u0142amie si\u0119\n       na dwa wiersze (w karcie z opisem obok znak zamienia si\u0119 w spacj\u0119) *\/\n    wartosci:[\n      {t:'Indywidualne|podej\u015bcie', f:'indywidualne-podejscie.png', c:'#2E86C8',\n       d:'Ma\u0142e klasy pozwalaj\u0105 nam dostrzec potencja\u0142 ka\u017cdego ucznia i wspiera\u0107 jego rozw\u00f3j.'},\n      {t:'Dwuj\u0119zyczno\u015b\u0107', f:'dwujezycznosc.png', c:'#8B54C4',\n       d:'J\u0119zyk angielski jest naturalnym elementem codzienno\u015bci szkolnej.'},\n      {t:'Rodzinna|atmosfera', f:'rodzinna-atmosfera.png', c:'#D2543C',\n       d:'Tworzymy spo\u0142eczno\u015b\u0107 opart\u0105 na wzajemnym zaufaniu i wsp\u00f3\u0142pracy z rodzicami.'},\n      {t:'Wysoki poziom|nauczania', f:'wysoki-poziom-nauczania.png', c:'#3E8E5A',\n       d:'Nowoczesne metody, pasja nauczycieli i ciekawo\u015b\u0107 uczni\u00f3w to nasza recepta na sukces.'},\n      {t:'Kultura|i wychowanie', f:'kultura-i-wychowanie1.png', c:'#D9A417',\n       d:'Uczymy nie tylko wiedzy, ale te\u017c szacunku, empatii i dobrych manier.'}\n    ],\n    misja:[\n      'Nasz\u0105 misj\u0105 jest tworzenie szko\u0142y, w kt\u00f3rej <b>ka\u017cde dziecko rozwija si\u0119 w atmosferze '\n      + 'zaufania, szacunku i akceptacji<\/b>. Jako szko\u0142a niepubliczna o kameralnym charakterze '\n      + 'zapewniamy uczniom warunki do nauki w ma\u0142ych grupach \u2014 dzi\u0119ki czemu nauczyciel ma czas, '\n      + 'by dostrzec i wspiera\u0107 indywidualne potrzeby ka\u017cdego ucznia.',\n      'Wierzymy, \u017ce edukacja to co\u015b wi\u0119cej ni\u017c przekazywanie wiedzy \u2014 to proces kszta\u0142towania '\n      + 'ciekawo\u015bci \u015bwiata, samodzielno\u015bci my\u015blenia i wra\u017cliwo\u015bci na innych. Stawiamy na '\n      + '<b>nauczanie dwuj\u0119zyczne<\/b>: j\u0119zyk angielski towarzyszy uczniom ka\u017cdego dnia, nie tylko '\n      + 'na lekcjach, lecz tak\u017ce w codziennej komunikacji. Od pierwszej klasy uczniowie ucz\u0105 si\u0119 '\n      + 'dw\u00f3ch j\u0119zyk\u00f3w obcych, dzi\u0119ki czemu naturalnie rozwijaj\u0105 kompetencje j\u0119zykowe '\n      + 'i otwarto\u015b\u0107 na inne kultury.'\n    ],\n    wizja:[\n      'samodzielnie my\u015ble\u0107 i podejmowa\u0107 decyzje',\n      'skutecznie porozumiewa\u0107 si\u0119 w j\u0119zykach obcych',\n      'wsp\u00f3\u0142pracowa\u0107 i budowa\u0107 relacje oparte na szacunku',\n      'z odwag\u0105 patrze\u0107 w przysz\u0142o\u015b\u0107 i z empati\u0105 podchodzi\u0107 do \u015bwiata'\n    ]\n  };\n  \/* \u2550\u2550\u2550 \u25b2 KONIEC \u25b2 \u2550\u2550\u2550 *\/\n  \/* \u2500\u2500 has\u0142o: ka\u017cde s\u0142owo osobno, wyr\u00f3\u017cnione w nawiasach [ ] \u2500\u2500 *\/\n  var claim = document.getElementById('msClaim');\n  claim.innerHTML = MISJA.haslo.split(\/\\s+\/).map(function(w){\n    var key = \/\\[|\\]\/.test(w);\n    return '<span class=\"' + (key ? 'key' : '') + '\">' + w.replace(\/[\\[\\]]\/g,'') + '<\/span> ';\n  }).join('');\n  var slowa = Array.prototype.slice.call(claim.querySelectorAll('span'));\n  var prog = document.getElementById('msProg'), hero = document.getElementById('msHero');\n  function rozswietl(){\n    var r = hero.getBoundingClientRect();\n    \/* post\u0119p: 0 gdy sekcja wchodzi w kadr, 1 gdy jej d\u00f3\u0142 mija \u015brodek ekranu *\/\n    var p = (window.innerHeight * 0.9 - r.top) \/ (r.height + window.innerHeight * 0.35);\n    p = Math.max(0, Math.min(1, p));\n    var ile = Math.round(p * slowa.length);\n    slowa.forEach(function(el,i){ el.classList.toggle('lit', i < ile); });\n    prog.style.width = (p * 100).toFixed(1) + '%';\n  }\n  if(window.matchMedia('(prefers-reduced-motion: reduce)').matches){\n    slowa.forEach(function(el){ el.classList.add('lit'); });\n    prog.style.width = '100%';\n  } else {\n    rozswietl();\n    var czeka = false;\n    window.addEventListener('scroll', function(){\n      if(czeka) return; czeka = true;\n      requestAnimationFrame(function(){ rozswietl(); czeka = false; });\n    }, {passive:true});\n    window.addEventListener('resize', rozswietl);\n    \/* bezpiecznik: gdyby nas\u0142uch zawi\u00f3d\u0142, po 4 s has\u0142o jest w pe\u0142ni widoczne *\/\n    setTimeout(function(){\n      if(!slowa.some(function(el){ return el.classList.contains('lit'); })){\n        slowa.forEach(function(el){ el.classList.add('lit'); });\n      }\n    }, 4000);\n  }\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     KO\u0141O WARTO\u015aCI\n     B\u0105belki rozstawiamy r\u00f3wno po okr\u0119gu (k\u0105t = 360\u00b0 \/ liczba warto\u015bci).\n     Kolejno\u015b\u0107 w kole i kolory bior\u0105 si\u0119 wprost z tablicy MISJA.wartosci,\n     wi\u0119c dopisanie sz\u00f3stej warto\u015bci nic nie psuje \u2014 ko\u0142o samo si\u0119 przeliczy.\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  var CZAS_KOLA = 4600;   \/* co ile milisekund ko\u0142o pokazuje kolejn\u0105 warto\u015b\u0107 *\/\n  \/* Od kt\u00f3rej warto\u015bci ko\u0142o ma zaczyna\u0107. Wpisz dok\u0142adnie taki tytu\u0142, jaki\n     stoi przy \u201et:\u201d w tablicy MISJA.wartosci. Z\u0142y wpis = start od pierwszej. *\/\n  var START_KOLA = 'Wysoki poziom|nauczania';\n  (function(){\n    var W = MISJA.wartosci, n = W.length;\n    \/* tytu\u0142 w jednym wierszu (karty, etykiety) i tytu\u0142 \u0142amany (\u015brodek ko\u0142a) *\/\n    function tyt(o){ return o.t.replace(\/\\|\/g,' '); }\n    function tytLam(o){ return o.t.replace(\/\\|\/g,'<br>'); }\n    var wheel = document.getElementById('msWheel'),\n        spin  = document.getElementById('msSpin'),\n        core  = document.getElementById('msCore'),\n        info  = document.getElementById('msInfo'),\n        dots  = document.getElementById('msDots');\n    if(!wheel || !n) return;\n    \/* t\u0119cza w tle pier\u015bcienia budowana z kolor\u00f3w warto\u015bci *\/\n    wheel.querySelector('.ms-wheel__ring').style.setProperty('--kolory',\n      W.map(function(o){ return o.c; }).concat(W[0].c).join(','));\n    spin.innerHTML = W.map(function(o,i){\n      return '<button type=\"button\" class=\"ms-bubble\" data-i=\"'+i+'\" aria-pressed=\"false\" '\n        + 'aria-label=\"'+tyt(o).replace(\/\"\/g,'&quot;')+'\" '\n        + 'style=\"--a:'+(i * 360 \/ n).toFixed(2)+'deg;--c:'+o.c+'\">'\n        + '<span class=\"ms-bubble__in\"><img decoding=\"async\" src=\"'+G+o.f+'\" alt=\"\" loading=\"lazy\"><\/span><\/button>';\n    }).join('');\n    dots.innerHTML = W.map(function(o,i){\n      return '<button type=\"button\" class=\"ms-dot\" data-i=\"'+i+'\" style=\"--c:'+o.c+'\" '\n        + 'aria-label=\"Poka\u017c: '+tyt(o).replace(\/\"\/g,'&quot;')+'\"><\/button>';\n    }).join('');\n    var bab = Array.prototype.slice.call(spin.querySelectorAll('.ms-bubble'));\n    var krop = Array.prototype.slice.call(dots.querySelectorAll('.ms-dot'));\n    var akt = -1, zegar = null;\n    function pokaz(i){\n      if(i === akt) return;\n      akt = (i + n) % n;\n      var o = W[akt];\n      \/* najpierw przygaszamy, po chwili podmieniamy tre\u015b\u0107 \u2014 dzi\u0119ki temu\n         zmiana jest p\u0142ynna, a nie \u201eprzeskakuje\u201d *\/\n      core.classList.add('zmiana'); info.classList.add('zmiana');\n      window.setTimeout(function(){\n        core.innerHTML = '<img decoding=\"async\" src=\"'+G+o.f+'\" alt=\"\"><b>'+tytLam(o)+'<\/b>';\n        info.style.setProperty('--c', o.c);\n        info.innerHTML = '<b>'+tyt(o)+'<\/b><span>'+o.d+'<\/span>'\n          + '<u>Warto\u015b\u0107 '+(akt+1)+' z '+n+'<\/u>';\n        core.classList.remove('zmiana'); info.classList.remove('zmiana');\n      }, 260);\n      bab.forEach(function(b,k){\n        b.classList.toggle('jest', k === akt);\n        b.setAttribute('aria-pressed', k === akt ? 'true' : 'false');\n      });\n      krop.forEach(function(d,k){ d.classList.toggle('jest', k === akt); });\n    }\n    function graj(){\n      if(zegar || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;\n      zegar = window.setInterval(function(){ pokaz(akt + 1); }, CZAS_KOLA);\n    }\n    function stoj(){ if(zegar){ window.clearInterval(zegar); zegar = null; } }\n    function wybierz(e){\n      var b = e.target.closest('[data-i]'); if(!b) return;\n      stoj(); pokaz(+b.getAttribute('data-i'));\n      wheel.classList.add('pauza');\n      \/* po chwili bezczynno\u015bci ko\u0142o wraca do samodzielnego kr\u0105\u017cenia *\/\n      window.clearTimeout(wybierz._t);\n      wybierz._t = window.setTimeout(function(){ wheel.classList.remove('pauza'); graj(); }, 9000);\n    }\n    spin.addEventListener('click', wybierz);\n    dots.addEventListener('click', wybierz);\n    spin.addEventListener('focusin', wybierz);\n    wheel.addEventListener('mouseenter', function(){ wheel.classList.add('pauza'); stoj(); });\n    wheel.addEventListener('mouseleave', function(){ wheel.classList.remove('pauza'); graj(); });\n    \/* start od warto\u015bci wskazanej w START_KOLA (gdy nie ma takiej \u2014 od pierwszej) *\/\n    var startI = 0;\n    W.forEach(function(o,i){ if(o.t === START_KOLA) startI = i; });\n    pokaz(startI);\n    \/* ko\u0142o rusza dopiero, gdy sekcja jest widoczna \u2014 nie kr\u0119ci si\u0119 w tle *\/\n    if('IntersectionObserver' in window){\n      new IntersectionObserver(function(w){\n        w[0].isIntersecting ? graj() : stoj();\n      }, {threshold:.25}).observe(wheel);\n    } else { graj(); }\n  })();\n  \/* \u2500\u2500 misja \u2500\u2500 *\/\n  document.getElementById('msMisja').innerHTML = MISJA.misja.map(function(t){\n    return '<p class=\"ms-tekst\" data-x>'+t+'<\/p>';\n  }).join('');\n  \/* \u2500\u2500 wizja \u2500\u2500 *\/\n  document.getElementById('msViz').innerHTML = MISJA.wizja.map(function(t){\n    return '<div class=\"ms-v\" data-x>'+t+'<\/div>';\n  }).join('');\n  \/* \u2500\u2500 kaskada warto\u015bci (dzia\u0142a tylko, gdy wr\u00f3c\u0105 kafelki .ms-val) \u2500\u2500 *\/\n  var vals = Array.prototype.slice.call(ROOT.querySelectorAll('.ms-val'));\n  function wsz(){ vals.forEach(function(el){ el.classList.add('in'); }); }\n  if(window.matchMedia('(prefers-reduced-motion: reduce)').matches || !('IntersectionObserver' in window)){\n    wsz();\n  } else {\n    var io = new IntersectionObserver(function(w){\n      w.filter(function(x){ return x.isIntersecting; }).forEach(function(x,n){\n        setTimeout(function(){ x.target.classList.add('in'); }, n*80);\n        io.unobserve(x.target);\n      });\n    }, {threshold:.15});\n    vals.forEach(function(el){ io.observe(el); });\n    setTimeout(wsz, 4000);\n  }\n  \/* \u2500\u2500 wej\u015bcie zdj\u0119\u0107: kadr rozsuwa si\u0119, gdy pas wje\u017cd\u017ca w ekran \u2500\u2500\n     Dotyczy pas\u00f3w ze zdj\u0119ciem (.ms-band) ORAZ panelu \u201emi\u0119dzynarodowe\n     \u015brodowisko\u201d (.ms-int) \u2014 tam klasa \u201ewidoczny\u201d uruchamia wjazd g\u0142\u00f3wnego\n     zdj\u0119cia i rz\u0119du trzech miniatur. *\/\n  (function(){\n    var pasy2 = Array.prototype.slice.call(ROOT.querySelectorAll('.ms-band, .ms-int'));\n    if(!pasy2.length) return;\n    if(!('IntersectionObserver' in window)){\n      pasy2.forEach(function(el){ el.classList.add('widoczny'); });\n      return;\n    }\n    var io3 = new IntersectionObserver(function(w){\n      w.forEach(function(x){\n        if(!x.isIntersecting) return;\n        x.target.classList.add('widoczny');\n        io3.unobserve(x.target);\n      });\n    }, {threshold:.18});\n    pasy2.forEach(function(el){ io3.observe(el); });\n    \/* bezpiecznik \u2014 gdyby obserwator zawi\u00f3d\u0142, po 3 s zdj\u0119cia i tak s\u0105 widoczne *\/\n    setTimeout(function(){ pasy2.forEach(function(el){ el.classList.add('widoczny'); }); }, 3000);\n  })();\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     PARALAKSA \/ PRZEWIJANIE ZDJ\u0118\u0106\n     ---------------------------------------------------------------\n     Dwa r\u00f3\u017cne zachowania:\n     1) pasy ze zdj\u0119ciem na ca\u0142\u0105 szeroko\u015b\u0107 (.ms-band > img) \u2014 delikatne\n        bujanie w pionie (\u00b122px). Selektor bierze tylko BEZPO\u015aREDNIE\n        dzieci, \u017ceby nie rusza\u0107 niczego zagnie\u017cd\u017conego g\u0142\u0119biej (co mia\u0142oby\n        w\u0142asn\u0105 animacj\u0119 w CSS).\n     2) g\u0142\u00f3wne zdj\u0119cie w panelu \u201emi\u0119dzynarodowe \u015brodowisko\u201d\n        (.ms-int__foto img) \u2014 w\u0142a\u015bciwy efekt przewijania. Zdj\u0119cie jest\n        wy\u017csze od swojej ramki (150%, patrz CSS), wi\u0119c ma zapas: skrypt\n        przesuwa je w pionie, ods\u0142aniaj\u0105c coraz wy\u017csz\u0105 cz\u0119\u015b\u0107 kadru.\n     \u2500\u2500 DWIE LICZBY DO REGULACJI EFEKTU (2) \u2500\u2500\n       OKNO  \u2014 na jakim odcinku przewijania rozk\u0142ada si\u0119 ca\u0142y ruch.\n               Liczymy post\u0119p 0\u21921, gdy \u015brodek ramki w\u0119druje z 88%\n               wysoko\u015bci ekranu do 26% (0.88 \u2212 0.62). Mniejsze OKNO =\n               kr\u00f3tszy odcinek = szybszy, bardziej wyrazisty ruch.\n       ZASIEG \u2014 jaka CZ\u0118\u015a\u0106 dost\u0119pnego zapasu zdj\u0119cia jest wykorzystana\n               (0.48 = 48%). To jest klucz do tego, \u017ceby panel wygl\u0105da\u0142\n               profesjonalnie: przy 100% zdj\u0119cie doje\u017cd\u017ca\u0142o do samego\n               do\u0142u kadru i przez p\u00f3\u0142 czasu wida\u0107 by\u0142o suknie i nogi\n               zamiast twarzy. Zwi\u0119ksz, je\u015bli ruch ma by\u0107 mocniejszy;\n               zmniejsz, je\u015bli jeszcze delikatniejszy.\n     \u2500\u2500 DLACZEGO NA TELEFONIE SZARPA\u0141O I CO TO NAPRAWIA \u2500\u2500\n     By\u0142y dwie przyczyny, obie usuni\u0119te poni\u017cej:\n       a) PASEK ADRESU. Przy przewijaniu w d\u00f3\u0142 przegl\u0105darka na telefonie\n          chowa pasek adresu \u2014 okno ro\u015bnie o kilkadziesi\u0105t pikseli\n          w trakcie ruchu. Poprzednia wersja bra\u0142a \u201ewindow.innerHeight\u201d\n          na \u015bwie\u017co przy ka\u017cdej klatce, wi\u0119c w chwili schowania paska\n          ca\u0142y wz\u00f3r skaka\u0142 i zdj\u0119cie przeskakiwa\u0142o. Teraz wysoko\u015b\u0107 okna\n          jest ZAPAMI\u0118TANA, a drobne zmiany (poni\u017cej PROG_OKNA pikseli)\n          s\u0105 ignorowane \u2014 reagujemy dopiero na obr\u00f3t ekranu.\n       b) PRZEPLATANIE ODCZYT\u00d3W I ZAPIS\u00d3W. Poprzednia wersja w p\u0119tli\n          czyta\u0142a wymiary jednego zdj\u0119cia, od razu zapisywa\u0142a mu styl,\n          potem czyta\u0142a nast\u0119pne\u2026 Ka\u017cdy zapis uniewa\u017cnia uk\u0142ad strony,\n          wi\u0119c kolejny odczyt zmusza\u0142 przegl\u0105dark\u0119 do przeliczenia go\n          od nowa (tzw. layout thrashing) \u2014 na telefonie to gubi\u0142o\n          klatki. Teraz najpierw robimy WSZYSTKIE pomiary, a dopiero\n          potem wszystkie zapisy. Do tego sta\u0142e wymiary (wysoko\u015b\u0107\n          zdj\u0119cia i ramki) mierzymy raz, a nie przy ka\u017cdej klatce.\n     Dodatkowo: transform w wersji \u201etranslate3d\u201d (osobna warstwa na\n     karcie graficznej) i pomijanie zapisu, gdy warto\u015b\u0107 si\u0119 nie zmieni\u0142a.\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  var ZASIEG = 0.48;   \/* by\u0142o 0.6 \u2014 efekt os\u0142abiony o 20% na \u017cyczenie *\/\n  var PROG_OKNA = 150; \/* o ile px musi zmieni\u0107 si\u0119 wysoko\u015b\u0107 okna, \u017ceby\n                          uzna\u0107 to za obr\u00f3t ekranu, a nie pasek adresu *\/\n  var pasy = Array.prototype.slice.call(ROOT.querySelectorAll('.ms-band > img'));\n  var foto = Array.prototype.slice.call(ROOT.querySelectorAll('.ms-int__foto img'))\n    .map(function(img){ return {img:img, ramka:img.parentNode, H:0, C:0, ost:null}; });\n  if((pasy.length || foto.length) && !window.matchMedia('(prefers-reduced-motion: reduce)').matches){\n    var czeka2 = false, WH = window.innerHeight, WW = window.innerWidth;\n    \/* sta\u0142e wymiary mierzymy poza p\u0119tl\u0105 przewijania \u2014 patrz punkt b) wy\u017cej *\/\n    function zmierz(){\n      foto.forEach(function(o){\n        o.H = o.img.offsetHeight;\n        o.C = o.ramka.offsetHeight;\n      });\n    }\n    function przesun(){\n      \/* \u2500\u2500 FAZA 1: same ODCZYTY (\u017cadnych zapis\u00f3w stylu) \u2500\u2500 *\/\n      var plan = [], i;\n      for(i = 0; i < pasy.length; i++){\n        plan.push({img:pasy[i], r:pasy[i].parentNode.getBoundingClientRect(), typ:1});\n      }\n      for(i = 0; i < foto.length; i++){\n        plan.push({o:foto[i], r:foto[i].ramka.getBoundingClientRect(), typ:2});\n      }\n      \/* \u2500\u2500 FAZA 2: same ZAPISY \u2500\u2500 *\/\n      for(i = 0; i < plan.length; i++){\n        var z = plan[i], r = z.r, y;\n        if(z.typ === 1){\n          \/* pasy \u2014 delikatne bujanie *\/\n          if(r.bottom < 0 || r.top > WH) continue;\n          y = ((r.top + r.height\/2 - WH\/2) \/ WH) * -22;\n          z.img.style.transform = 'translate3d(0,' + y.toFixed(1) + 'px,0)';\n        } else {\n          \/* g\u0142\u00f3wne zdj\u0119cie panelu \u2014 przewijanie ods\u0142aniaj\u0105ce twarze *\/\n          var o = z.o;\n          \/* zabezpieczenie: gdyby zdj\u0119cie nie by\u0142o wy\u017csze od ramki, nie ma\n             czego przesuwa\u0107 \u2014 zostawiamy je w spokoju zamiast \u201eszarpa\u0107\u201d *\/\n          if(!o.H || !o.C || o.H <= o.C){ o.img.style.transform = ''; continue; }\n          var p = (WH * 0.88 - (r.top + r.height\/2)) \/ (WH * 0.62);\n          p = Math.max(0, Math.min(1, p));\n          y = (o.C - o.H) * ZASIEG * (1 - p);\n          var txt = 'translate3d(0,' + y.toFixed(1) + 'px,0)';\n          \/* nie zapisujemy tego samego stylu dwa razy \u2014 mniej pracy dla\n             przegl\u0105darki przy powolnym przewijaniu palcem *\/\n          if(txt === o.ost) continue;\n          o.ost = txt;\n          o.img.style.transform = txt;\n        }\n      }\n    }\n    window.addEventListener('scroll', function(){\n      if(czeka2) return; czeka2 = true;\n      requestAnimationFrame(function(){ przesun(); czeka2 = false; });\n    }, {passive:true});\n    window.addEventListener('resize', function(){\n      \/* Zmiana SZEROKO\u015aCI zawsze wymaga przeliczenia \u2014 ramka ma sta\u0142e\n         proporcje, wi\u0119c razem z szeroko\u015bci\u0105 zmienia si\u0119 jej wysoko\u015b\u0107.\n         Natomiast sam\u0105 zmian\u0119 WYSOKO\u015aCI ignorujemy, dop\u00f3ki jest mniejsza\n         ni\u017c PROG_OKNA: na telefonie to prawie zawsze chowaj\u0105cy si\u0119 pasek\n         adresu, a nie realna zmiana okna (patrz punkt a) wy\u017cej). *\/\n      var noweW = window.innerWidth, noweH = window.innerHeight;\n      if(noweW === WW && Math.abs(noweH - WH) < PROG_OKNA) return;\n      WW = noweW; WH = noweH;\n      zmierz(); przesun();\n    });\n    \/* zdj\u0119cie \u0142aduje si\u0119 asynchronicznie \u2014 dop\u00f3ki nie jest gotowe, jego\n       wysoko\u015b\u0107 bywa niemiarodajna; po wczytaniu mierzymy jeszcze raz *\/\n    foto.forEach(function(o){\n      if(o.img.complete) return;\n      o.img.addEventListener('load', function(){ zmierz(); przesun(); }, {once:true});\n    });\n    zmierz();\n    przesun();\n  }\n  \/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n     POWI\u0118KSZANIE ZDJ\u0118\u0106 W PANELU\n     ---------------------------------------------------------------\n     Klikni\u0119cie zdj\u0119cia (g\u0142\u00f3wnego albo jednego z rz\u0119du) otwiera je\n     w pe\u0142nym rozmiarze na przyciemnionym tle. Zamkni\u0119cie: krzy\u017cyk,\n     klikni\u0119cie w t\u0142o albo Esc. Przechodzenie: strza\u0142ki na ekranie\n     lub klawisze \u2190\/\u2192 (ko\u0142o si\u0119 zap\u0119tla).\n     Podpis pod powi\u0119kszeniem bierze si\u0119 z atrybutu \u201ealt\u201d zdj\u0119cia,\n     wi\u0119c wystarczy opisa\u0107 zdj\u0119cia w HTML \u2014 nic dodatkowego.\n     Warstwa podgl\u0105du jest doklejana do <body> (a nie do sekcji),\n     \u017ceby nadrz\u0119dne kontenery jej nie przycina\u0142y.\n     \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n  (function(){\n    var fotki = Array.prototype.slice.call(\n      ROOT.querySelectorAll('.ms-int__foto img, .ms-int__gal img'));\n    if(!fotki.length) return;\n    var lb = document.createElement('div');\n    lb.className = 'hx-lb';\n    lb.setAttribute('role','dialog');\n    lb.setAttribute('aria-modal','true');\n    lb.setAttribute('aria-label','Powi\u0119kszone zdj\u0119cie');\n    \/* Ikony rysowane w SVG, nie znakami \u00d7 \u2039 \u203a \u2014 znak tekstowy siedzi krzywo\n       w okr\u0105g\u0142ym przycisku (ka\u017cdy kr\u00f3j sadza go inaczej wzgl\u0119dem linii pisma)\n       i zmienia si\u0119 razem z czcionk\u0105 motywu. *\/\n    function ikona(d){\n      return '<svg viewBox=\"0 0 24 24\" aria-hidden=\"true\" focusable=\"false\">'\n        + '<path d=\"' + d + '\"\/><\/svg>';\n    }\n    lb.innerHTML =\n        '<button class=\"hx-lb__x\" type=\"button\" aria-label=\"Zamknij\">'\n      +   ikona('M6 6l12 12M18 6 6 18') + '<\/button>'\n      + '<button class=\"hx-lb__p\" type=\"button\" aria-label=\"Poprzednie zdj\u0119cie\">'\n      +   ikona('M15 5l-7 7 7 7') + '<\/button>'\n      + '<figure><img alt=\"\"><figcaption><\/figcaption><\/figure>'\n      + '<button class=\"hx-lb__n\" type=\"button\" aria-label=\"Nast\u0119pne zdj\u0119cie\">'\n      +   ikona('M9 5l7 7-7 7') + '<\/button>';\n    document.body.appendChild(lb);\n    var duze = lb.querySelector('img'),\n        podpis = lb.querySelector('figcaption'),\n        akt = 0, wrocDo = null;\n    \/* strza\u0142ki maj\u0105 sens dopiero przy wi\u0119cej ni\u017c jednym zdj\u0119ciu *\/\n    if(fotki.length < 2){\n      lb.querySelector('.hx-lb__p').style.display = 'none';\n      lb.querySelector('.hx-lb__n').style.display = 'none';\n    }\n    function pokazFoto(i){\n      akt = (i + fotki.length) % fotki.length;\n      var zr = fotki[akt];\n      duze.src = zr.currentSrc || zr.src;\n      duze.alt = zr.alt || '';\n      podpis.textContent = zr.alt || '';\n      podpis.style.display = zr.alt ? '' : 'none';\n    }\n    function otworz(i, zrodlo){\n      wrocDo = zrodlo || null;\n      pokazFoto(i);\n      lb.classList.add('jest');\n      document.body.classList.add('hx-lb-stop');\n      lb.querySelector('.hx-lb__x').focus();\n    }\n    function zamknij(){\n      lb.classList.remove('jest');\n      document.body.classList.remove('hx-lb-stop');\n      \/* kursor wraca tam, sk\u0105d otworzyli\u015bmy podgl\u0105d *\/\n      if(wrocDo && wrocDo.focus) wrocDo.focus();\n      wrocDo = null;\n    }\n    fotki.forEach(function(img, i){\n      \/* klikalna jest CA\u0141A ramka zdj\u0119cia, nie sam obrazek \u2014 w g\u0142\u00f3wnym\n         kadrze obrazek jest przesuwany paralaks\u0105 i wystaje poza ramk\u0119 *\/\n      var klik = img.closest('figure') || img.parentNode;\n      klik.setAttribute('tabindex','0');\n      klik.setAttribute('role','button');\n      klik.setAttribute('aria-label','Powi\u0119ksz zdj\u0119cie' + (img.alt ? ': ' + img.alt : ''));\n      klik.addEventListener('click', function(){ otworz(i, klik); });\n      klik.addEventListener('keydown', function(e){\n        if(e.key === 'Enter' || e.key === ' '){ e.preventDefault(); otworz(i, klik); }\n      });\n    });\n    lb.querySelector('.hx-lb__x').addEventListener('click', zamknij);\n    lb.querySelector('.hx-lb__p').addEventListener('click', function(e){\n      e.stopPropagation(); pokazFoto(akt - 1);\n    });\n    lb.querySelector('.hx-lb__n').addEventListener('click', function(e){\n      e.stopPropagation(); pokazFoto(akt + 1);\n    });\n    \/* klikni\u0119cie w t\u0142o zamyka; klikni\u0119cie w samo zdj\u0119cie \u2014 nie *\/\n    lb.addEventListener('click', function(e){ if(e.target === lb) zamknij(); });\n    document.addEventListener('keydown', function(e){\n      if(!lb.classList.contains('jest')) return;\n      if(e.key === 'Escape'){ zamknij(); }\n      else if(e.key === 'ArrowLeft'){ pokazFoto(akt - 1); }\n      else if(e.key === 'ArrowRight'){ pokazFoto(akt + 1); }\n    });\n  })();\n  \/* \u2500\u2500 powi\u0105zane \u2500\u2500 *\/\n  var T = [\n    {t:'Dwuj\u0119zyczno\u015b\u0107', d:'jak uczymy j\u0119zyk\u00f3w', c:'#8B54C4', h:U+'357',\n     i:ic('<path d=\"M12 2.9 2.9 7.5 12 12.1l9.1-4.6z\"\/><path d=\"m2.9 12.1 9.1 4.6 9.1-4.6\"\/><path d=\"m2.9 16.5 9.1 4.6 9.1-4.6\"\/>')},\n    {t:'Nasz zesp\u00f3\u0142', d:'kto uczy w Hilaris', c:'#2E86C8', h:U+'342',\n     i:ic('<circle cx=\"9\" cy=\"8.6\" r=\"3.2\"\/><path d=\"M2.9 19.4c0-3.4 2.7-5.6 6.1-5.6s6.1 2.2 6.1 5.6\"\/><circle cx=\"17.6\" cy=\"10.2\" r=\"2.4\"\/><path d=\"M15.9 19.4c0-2.6 1.9-4.2 4.2-4.2\"\/>')},\n    {t:'Historia szko\u0142y', d:'od 2016 roku', c:'#D9A417', h:U+'2623',\n     i:ic('<circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 7v5.3l3.4 2\"\/>')},\n    {t:'Co nas wyr\u00f3\u017cnia', d:'dwana\u015bcie powod\u00f3w', c:'#3E8E5A', h:U+'3822',\n     i:ic('<circle cx=\"12\" cy=\"9\" r=\"5.6\"\/><path d=\"M8.6 13.6 7.4 21.4 12 19.1l4.6 2.3-1.2-7.8\"\/>')}\n  ];\n  document.getElementById('msTiles').innerHTML = T.map(function(o){\n    return '<a class=\"hx-tile\" href=\"'+o.h+'\" style=\"--c:'+o.c+'\" data-x>'\n      + '<span class=\"hx-ic\">'+o.i+'<\/span><b>'+o.t+'<\/b><u>'+o.d+'<\/u><\/a>';\n  }).join('');\n  HX.sierotki(ROOT); HX.boot();\n  }\n  var __t = 0;\n  (function __wait(){\n    if(window.HX){ __start(); return; }\n    if(__t++ < 80){ setTimeout(__wait, 100); return; }\n    if(window.console) console.warn('Hilaris: nie znaleziono rdzenia (hilaris-CORE).');\n  })();\n})();\n<\/script>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Szko\u0142a Podstawowa O nas Misja i wizja szko\u0142y Edukacja to co\u015b wi\u0119cej ni\u017c przekazywanie wiedzy. Nasze warto\u015bci Pi\u0119\u0107 rzeczy, na kt\u00f3rych opieramy ka\u017cdy dzie\u0144 w szkole. Uczymy przez dzia\u0142anie, do\u015bwiadczanie i zabaw\u0119. Nasza misja Mi\u0119dzynarodowe \u015brodowisko Chcemy, by nasi uczniowie czuli si\u0119 pewnie w mi\u0119dzynarodowym \u015brodowisku. Poznajemy obyczaje innych kraj\u00f3w \u2014 z poczuciem humoru i [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":345,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"footnotes":""},"class_list":["post-339","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=\/wp\/v2\/pages\/339","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=339"}],"version-history":[{"count":177,"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=\/wp\/v2\/pages\/339\/revisions"}],"predecessor-version":[{"id":7902,"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=\/wp\/v2\/pages\/339\/revisions\/7902"}],"up":[{"embeddable":true,"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=\/wp\/v2\/pages\/345"}],"wp:attachment":[{"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=339"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}