{"id":357,"date":"2025-08-11T13:44:47","date_gmt":"2025-08-11T11:44:47","guid":{"rendered":"https:\/\/hilaris-blonie.pl\/?page_id=357"},"modified":"2026-08-22T14:05:41","modified_gmt":"2026-08-22T12:05:41","slug":"dwujezycznosc","status":"publish","type":"page","link":"https:\/\/hilaris-blonie.pl\/?page_id=357","title":{"rendered":"Dwuj\u0119zyczno\u015b\u0107"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"357\" class=\"elementor elementor-357\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-a3262ec e-grid e-con-boxed e-con e-parent\" data-id=\"a3262ec\" 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-5eb9ff2 elementor-widget elementor-widget-html\" data-id=\"5eb9ff2\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ==========================================================================\r\n     HILARIS \u2014 SZKO\u0141A \u2192 DWUJ\u0118ZYCZNO\u015a\u0106 (page_id=357)\r\n     Jeden widget HTML w Elementorze. Blok jest w pe\u0142ni samodzielny:\r\n     nie wymaga rdzenia (hilaris-CORE) ani \u017cadnych dodatkowych plik\u00f3w.\r\n     ---------------------------------------------------------------------------\r\n     Ca\u0142a tre\u015b\u0107 jest zapisana wprost w kodzie HTML, wi\u0119c strona czyta si\u0119\r\n     poprawnie NAWET Z WY\u0141\u0104CZONYM JAVASCRIPTEM \u2014 po polsku, ze wszystkimi\r\n     sekcjami. Skrypt jedynie dodaje interakcje: prze\u0142\u0105cznik POLSKI \/ ENGLISH,\r\n     suwak PL \u21c4 EN, powi\u0119kszanie zdj\u0119\u0107 i animacje wej\u015bcia.\r\n     ---------------------------------------------------------------------------\r\n     GDZIE EDYTOWA\u0106 TRE\u015a\u0106\r\n     Polski tekst stoi zwyczajnie w HTML, a jego angielski odpowiednik siedzi\r\n     obok, w atrybucie data-en=\"\u2026\". \u017beby poprawi\u0107 zdanie, wystarczy zmieni\u0107\r\n     jedno i drugie w tym samym miejscu. Analogicznie:\r\n       data-en-alt=\"\u2026\"  \u2014 opis zdj\u0119cia,\r\n       data-en-aria=\"\u2026\" \u2014 etykieta dla czytnik\u00f3w ekranu.\r\n     ---------------------------------------------------------------------------\r\n     \u25b8 ZMIANY W TEJ WERSJI\r\n     1) SUWAK NA TELEFONIE \u2014 dawa\u0142o si\u0119 go z\u0142apa\u0107 tylko za sam\u0105 ga\u0142k\u0119, a przy\r\n        skrajnym prawym po\u0142o\u017ceniu ga\u0142ka wystawa\u0142a poza kraw\u0119d\u017a i nie by\u0142o\r\n        czego dotkn\u0105\u0107. Przyczyn\u0105 by\u0142 natywny <input type=\"range\">: na telefonie\r\n        (zw\u0142aszcza w Safari) reaguje on dopiero, gdy palec wyl\u0105duje dok\u0142adnie\r\n        na uchwycie. Teraz przeci\u0105ganiem steruje skrypt (zdarzenia wska\u017anika),\r\n        wi\u0119c MO\u017bNA Z\u0141APA\u0106 W DOWOLNYM MIEJSCU sceny i ci\u0105gn\u0105\u0107 w obie strony.\r\n        Natywny suwak zosta\u0142 pod spodem wy\u0142\u0105cznie dla obs\u0142ugi klawiatur\u0105.\r\n     2) WEJ\u015aCIE SUWAKA NA KOMPUTERZE \u2014 wcze\u015bniej skaka\u0142 50 \u2192 66 \u2192 34 \u2192 50,\r\n        czyli trzy szarpni\u0119cia na boki. Teraz jest to JEDEN p\u0142ynny przejazd\r\n        (w\u0142asna animacja klatka po klatce z wyg\u0142adzeniem), bez zmiany kierunku.\r\n     3) NAZWY PRZEDMIOT\u00d3W \u2014 w wersji polskiej cz\u0119\u015b\u0107 nazw by\u0142a po angielsku\r\n        (\u201escience\u201d, \u201emaths\u201d, \u201eliteracy\u201d\u2026). Teraz polska wersja ma polskie\r\n        nazwy, a angielska \u2014 angielskie. Patrz uwaga przy sekcji \u201eDWA ETAPY\u201d.\r\n     4) KADROWANIE ZDJ\u0118\u0106 NA KOMPUTERZE \u2014 wysoko\u015b\u0107 pas\u00f3w by\u0142a liczona w \u201evh\u201d\r\n        (procent wysoko\u015bci okna), wi\u0119c zmienia\u0142a si\u0119 przy ka\u017cdym powi\u0119kszeniu\r\n        przegl\u0105darki i na monitorach o innej wysoko\u015bci: przy 100% zoomu pas\r\n        robi\u0142 si\u0119 niski i ze zdj\u0119cia zostawa\u0142 w\u0105ski pasek bez ludzi. Teraz\r\n        wysoko\u015b\u0107 jest podana W PIKSELACH \u2014 kadr wygl\u0105da tak samo przy ka\u017cdym\r\n        zoomie. Do tego zdj\u0119cie jest wy\u017csze od pasa i PRZESUWA SI\u0118 W RYTM\r\n        PRZEWIJANIA, wi\u0119c w trakcie scrollowania wida\u0107 kolejne partie\r\n        fotografii, a nie ci\u0105gle ten sam wycinek.\r\n     ========================================================================== -->\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n<link rel=\"stylesheet\"\r\n      href=\"https:\/\/fonts.googleapis.com\/css2?family=Source+Serif+4:opsz,ital,wght@8..60,0,600;8..60,0,700;8..60,1,600&display=swap\">\r\n<style>\r\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\u2550\u2550\u2550\u2550\r\n   STYLE ZAPASOWE \u2014 DZIA\u0141ANIE BEZ RDZENIA\r\n   Regu\u0142y zapisane w :where() maj\u0105 ZEROW\u0104 moc \u2014 gdy rdze\u0144 hilaris-CORE jest\r\n   wczytany, wygrywaj\u0105 jego ustawienia; gdy go nie ma, blok wygl\u0105da tak samo.\r\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\u2550\u2550\u2550\u2550 *\/\r\n:where(.hx-dwu){\r\n  --navy:#0E2B4D; --gold:#C9A227; --gold-l:#F0D98A; --paper:#ffffff;\r\n  --mist:#F3F6F8; --line:#E2E8EC; --ink:#12324B; --ink-2:#5A6E7E;\r\n  --r:16px; --pad:18px;\r\n  display:block;color:var(--ink,#12324B);\r\n  font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;\r\n  line-height:1.55;\r\n}\r\n:where(.hx-dwu) .hx-app{max-width:520px;margin:0 auto;background:#fff;}\r\n:where(.hx-dwu) .hx-sec{padding:34px var(--pad,18px);}\r\n:where(.hx-dwu) .hx-sec--mist{background:var(--mist,#F3F6F8);}\r\n:where(.hx-dwu) .hx-h{font-size:clamp(1.35rem,3vw,2rem);margin:0 0 8px;color:var(--navy,#0E2B4D);\r\n  line-height:1.2;}\r\n:where(.hx-dwu) .hx-sub{color:var(--ink-2,#5A6E7E);margin:0 0 18px;font-size:.95rem;line-height:1.6;}\r\n:where(.hx-dwu) .hx-kicker{color:var(--gold-l,#F0D98A);font-weight:800;letter-spacing:.14em;\r\n  text-transform:uppercase;font-size:.7rem;margin:0;}\r\n:where(.hx-dwu) .hx-back{display:inline-flex;gap:8px;align-items:center;\r\n  padding:12px var(--pad,18px);color:var(--ink-2,#5A6E7E);text-decoration:none;font-weight:700;\r\n  font-size:.9rem;}\r\n:where(.hx-dwu) .hx-back svg{width:18px;height:18px;}\r\n:where(.hx-dwu) .hx-grid{display:grid;gap:12px;\r\n  grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));}\r\n:where(.hx-dwu) .hx-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;\r\n  align-items:start;background:var(--paper,#fff);border:1px solid var(--line,#E2E8EC);\r\n  border-radius:var(--r,16px);padding:16px;}\r\n:where(.hx-dwu) .hx-card--acc{border-left:4px solid var(--c,#2E86C8);}\r\n:where(.hx-dwu) .hx-card p{font-size:.92rem;line-height:1.6;color:var(--ink-2,#5A6E7E);margin:0;}\r\n:where(.hx-dwu) .hx-tile{display:block;padding:18px;background:var(--paper,#fff);\r\n  border:1px solid var(--line,#E2E8EC);border-radius:var(--r,16px);\r\n  text-decoration:none;color:inherit;}\r\n:where(.hx-dwu) .hx-tile b{display:block;margin-top:9px;font-weight:700;font-size:.98rem;\r\n  color:var(--navy,#0E2B4D);}\r\n:where(.hx-dwu) .hx-tile u{text-decoration:none;display:block;font-size:.8rem;\r\n  color:var(--ink-2,#5A6E7E);margin-top:2px;}\r\n:where(.hx-dwu) .hx-ic svg{width:26px;height:26px;stroke:var(--c,#2E86C8);fill:none;stroke-width:1.9;}\r\n:where(.hx-dwu) .hx-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;\r\n  max-width:520px;margin:0 auto;background:#fff;border-top:1px solid var(--line,#E2E8EC);\r\n  padding-bottom:env(safe-area-inset-bottom);}\r\n:where(.hx-dwu) .hx-bar a{flex:1;display:grid;place-items:center;gap:3px;padding:9px 6px;\r\n  font-size:.7rem;text-decoration:none;color:var(--ink,#12324B);font-weight:600;}\r\n:where(.hx-dwu) .hx-bar svg{width:20px;height:20px;stroke:currentColor;fill:none;}\r\n:where(.hx-dwu) .hx-bar a.is-main{color:var(--navy,#0E2B4D);}\r\n@media (min-width:900px){\r\n  :where(.hx-dwu) .hx-app{max-width:1140px;}\r\n  :where(.hx-dwu) .hx-grid{grid-template-columns:repeat(var(--cols-d,3),minmax(0,1fr));}\r\n  :where(.hx-dwu) .hx-bar{display:none;}\r\n}\r\n<\/style>\r\n<style>\r\n\/* Wszystkie wymiary liczymy razem z obramowaniem i wype\u0142nieniem. *\/\r\n.hx-dwu [hidden]{display:none !important;}\r\n.hx-dwu,.hx-dwu *,.hx-dwu *::before,.hx-dwu *::after{box-sizing:border-box;}\r\n\/* \u2500\u2500 CZCIONKA NAG\u0141\u00d3WK\u00d3W (bez ozdobnego \u201eJ\u201d) \u2500\u2500 *\/\r\n.hx-dwu h1,.hx-dwu h2,.hx-dwu h3,.hx-dwu .hx-h,\r\n.hx-dwu .dw-stage__t b,.hx-dwu .dw-stage__k,.hx-dwu .dw-band p,\r\n.hx-dwu .dwx-temat,.hx-dwu .dwx-tytul,.hx-dwu .dw-fakt b{\r\n  font-family:'Source Serif 4',Georgia,'Times New Roman',serif !important;\r\n}\r\n\/* \u2500\u2500 WY\u015aRODKOWANE NAG\u0141\u00d3WKI SEKCJI \u2500\u2500 *\/\r\n.hx-dwu .hx-h{text-align:center;}\r\n.hx-dwu .hx-sub{text-align:center;max-width:64ch;margin-left:auto;margin-right:auto;}\r\n\/* zapas na dolny pasek szybkich akcji (tylko telefon) *\/\r\n.hx-dwu .hx-app{padding-bottom:calc(48px + env(safe-area-inset-bottom));}\r\n\/* ============================================================================\r\n   SZEROKO\u015a\u0106 NA KOMPUTERZE\r\n   \u2022 1140 px \u2014 laptop  \u2022 1280 px \u2014 szerokie monitory  \u2022 94vw \u2014 zawsze margines\r\n   ============================================================================ *\/\r\n@media (min-width:900px){\r\n  .hx-dwu .hx-app{padding-bottom:0;\r\n    max-width:min(1140px,94vw) !important;width:100%;\r\n    margin-left:auto !important;margin-right:auto !important;}\r\n  .hx-dwu{--pad:40px;}\r\n}\r\n@media (min-width:1400px){\r\n  .hx-dwu .hx-app{max-width:min(1280px,94vw) !important;}\r\n}\r\n\/* Kolumna 1fr potrafi rozepchn\u0105\u0107 si\u0119 do szeroko\u015bci najd\u0142u\u017cszego s\u0142owa\r\n   i wypchn\u0105\u0107 siatk\u0119 poza ekran \u2014 minmax(0,1fr) tego pilnuje. *\/\r\n.hx-dwu .hx-grid{grid-template-columns:repeat(var(--cols),minmax(0,1fr));}\r\n@media (min-width:900px){\r\n  .hx-dwu .hx-grid{grid-template-columns:repeat(var(--cols-d),minmax(0,1fr));}\r\n}\r\n.hx-dwu .hx-tile,.hx-dwu .hx-card{min-width:0;overflow-wrap:anywhere;}\r\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\u2550\u2550\u2550\u2550\r\n   NAG\u0141\u00d3WEK Z PRZE\u0141\u0104CZNIKIEM J\u0118ZYKA\r\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\u2550\u2550\u2550\u2550 *\/\r\n.hx-dwu .dw-hero{background:var(--navy,#0E2B4D);color:#fff;padding:28px var(--pad,18px) 32px;\r\n  position:relative;overflow:hidden;}\r\n.hx-dwu .dw-hero::after{content:\"\";position:absolute;right:-80px;top:-80px;width:240px;height:240px;\r\n  border-radius:50%;background:rgba(217,164,23,.13);}\r\n.hx-dwu .dw-hero > *{position:relative;z-index:2;}\r\n.hx-dwu .dw-hero > .hx-kicker{margin:0 0 4px !important;}\r\n.hx-dwu .dw-hero > h1{margin:0 !important;line-height:1.16;}\r\n.hx-dwu .dw-lead{color:#C6D7E5;font-size:.95rem;margin:12px 0 0;line-height:1.7;max-width:62ch;}\r\n.hx-dwu .dw-lang{display:inline-flex;background:rgba(255,255,255,.12);border-radius:999px;\r\n  padding:4px;margin-top:20px;position:relative;}\r\n.hx-dwu .dw-lang button{position:relative;z-index:2;padding:9px 20px;border-radius:999px;\r\n  font-weight:800;font-size:.82rem;letter-spacing:.06em;color:rgba(255,255,255,.72);\r\n  background:transparent !important;border:0 !important;cursor:pointer;\r\n  -webkit-appearance:none;appearance:none;transition:color .3s ease;}\r\n.hx-dwu .dw-lang button[aria-pressed=\"true\"]{color:#3B2A00;}\r\n.hx-dwu .dw-lang i{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);\r\n  border-radius:999px;background:linear-gradient(180deg,var(--gold-l,#F0D98A),var(--gold,#C9A227));\r\n  transition:transform .35s cubic-bezier(.22,1,.36,1);}\r\n.hx-dwu .dw-lang.en i{transform:translateX(100%);}\r\n.hx-dwu .dw-hint{font-size:.78rem;color:#9FB8CB;margin:10px 0 0;}\r\n@media (min-width:900px){\r\n  .hx-dwu .dw-hero{padding:52px var(--pad,18px) 54px;\r\n    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);\r\n    column-gap:clamp(28px,3.4vw,52px);row-gap:0;align-items:center;\r\n    grid-template-rows:auto auto 1fr;}\r\n  .hx-dwu .dw-hero > .hx-kicker{grid-column:1;grid-row:1;align-self:end;}\r\n  .hx-dwu .dw-hero > h1{grid-column:1;grid-row:2;align-self:start;}\r\n  .hx-dwu .dw-hero > .dw-lang{grid-column:1;grid-row:3;align-self:start;justify-self:start;}\r\n  .hx-dwu .dw-lead{grid-column:2;grid-row:1 \/ span 3;align-self:center;margin:0;\r\n    font-size:1.02rem;}\r\n  .hx-dwu .dw-hint{grid-column:1;grid-row:4;margin-top:12px;}\r\n}\r\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\u2550\u2550\u2550\u2550\r\n   ANIMACJE STEROWANE PRZEWIJANIEM\r\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\u2550\u2550\u2550\u2550 *\/\r\n\/* \u25b8 DLACZEGO NA TELEFONIE STRONA ROBI\u0141A SI\u0118 BLADA\r\n   Wcze\u015bniej animacje wej\u015bcia by\u0142y podpi\u0119te pod \u201eanimation-timeline: view()\u201d,\r\n   czyli natywny mechanizm przegl\u0105darki: przezroczysto\u015b\u0107 elementu wylicza\u0142a si\u0119\r\n   wprost z tego, jak daleko przewini\u0119ta jest strona. Problem pojawia\u0142 si\u0119\r\n   na SAMYM DOLE strony: \u017ceby taka animacja dosz\u0142a do ko\u0144ca, trzeba przewin\u0105\u0107\r\n   jeszcze kawa\u0142ek ZA element \u2014 a pod ostatnimi sekcjami nie ma ju\u017c czego\r\n   przewija\u0107. Animacja zatrzymywa\u0142a si\u0119 wi\u0119c w po\u0142owie i \u201eCo z tego wynika\u201d\r\n   oraz \u201ePowi\u0105zane strony\u201d zostawa\u0142y na sta\u0142e wyblak\u0142e. Na komputerze rzadziej\r\n   to wida\u0107, bo ekran jest wy\u017cszy i wi\u0119cej mie\u015bci si\u0119 naraz.\r\n   Teraz wej\u015bciem steruje wy\u0142\u0105cznie skrypt (IntersectionObserver), kt\u00f3ry ma\r\n   dwa zabezpieczenia: pokazuje element, gdy tylko pojawi si\u0119 w polu widzenia,\r\n   a po 4 sekundach i tak ods\u0142ania wszystko, cokolwiek by si\u0119 sta\u0142o. Do tego\r\n   po zako\u0144czeniu animacji usuwa atrybut data-anim, wi\u0119c element wraca do\r\n   ca\u0142kowicie normalnego stanu (to wa\u017cne dla efekt\u00f3w najechania \u2014 patrz\r\n   \u201eKAFLE POWI\u0104ZANYCH STRON\u201d ni\u017cej).\r\n   Gdyby skrypt w og\u00f3le si\u0119 nie wykona\u0142, klasa .dw-js nie zostanie dodana\r\n   i nic nie b\u0119dzie ukryte \u2014 strona po prostu wy\u015bwietli si\u0119 bez animacji. *\/\r\n.hx-dwu.dw-js [data-anim]{opacity:0;transform:translateY(22px);\r\n  transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1);}\r\n.hx-dwu.dw-js [data-anim].in{opacity:1;transform:none;}\r\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\u2550\u2550\u2550\u2550\r\n   ETAPY EDUKACYJNE\r\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\u2550\u2550\u2550\u2550 *\/\r\n.hx-dwu .dw-stage{background:var(--paper,#ffffff);border:1px solid var(--line,#E2E8EC);border-radius:var(--r,16px);\r\n  overflow:hidden;}\r\n.hx-dwu .dw-stage + .dw-stage{margin-top:14px;}\r\n.hx-dwu .dw-stage__t{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;\r\n  padding:16px 18px;background:color-mix(in srgb,var(--c) 10%,transparent);}\r\n.hx-dwu .dw-stage__k{width:46px;height:46px;border-radius:14px;background:var(--c);color:#fff;\r\n  display:grid;place-items:center;font-weight:700;font-size:1.05rem;flex:none;}\r\n.hx-dwu .dw-stage__t b{display:block;font-size:1.08rem;line-height:1.2;}\r\n.hx-dwu .dw-stage__t u{text-decoration:none;display:block;font-size:.78rem;color:var(--ink-2,#5A6E7E);margin-top:3px;}\r\n.hx-dwu .dw-stage__b{padding:16px 18px 18px;}\r\n.hx-dwu .dw-stage__b p{font-size:.93rem;color:var(--ink-2,#5A6E7E);line-height:1.65;margin:0;}\r\n.hx-dwu .dw-subj{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;}\r\n.hx-dwu .dw-s{font-size:.8rem;font-weight:700;border-radius:999px;padding:6px 13px;\r\n  background:color-mix(in srgb,var(--c) 13%,transparent);color:var(--c);\r\n  border:0;font-family:inherit;}\r\n\/* przedmiot, dla kt\u00f3rego mamy przyk\u0142ad w suwaku \u2014 klikalny *\/\r\n.hx-dwu button.dw-s{cursor:pointer;display:inline-flex;align-items:center;gap:6px;\r\n  transition:transform .25s ease,box-shadow .25s ease;}\r\n.hx-dwu button.dw-s::after{content:\"\u203a\";font-size:1.05rem;line-height:1;opacity:.75;\r\n  transition:transform .25s ease;}\r\n.hx-dwu button.dw-s:hover{transform:translateY(-1px);\r\n  box-shadow:0 8px 18px -12px color-mix(in srgb,var(--c) 90%,transparent);}\r\n.hx-dwu button.dw-s:hover::after{transform:translateX(3px);}\r\n.hx-dwu .dw-s.extra{background:var(--mist,#F3F6F8);color:var(--ink-2,#5A6E7E);\r\n  box-shadow:inset 0 0 0 1px var(--line,#E2E8EC);}\r\n.hx-dwu .dw-glab{font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;\r\n  color:var(--ink-2,#5A6E7E);margin:14px 0 0;}\r\n.hx-dwu .dw-native{display:inline-flex;align-items:center;gap:8px;margin-top:14px;\r\n  background:#FFF3D6;color:#7A5000;border-radius:999px;padding:8px 15px;font-size:.8rem;font-weight:700;}\r\n.hx-dwu .dw-native svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;flex:none;}\r\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\u2550\u2550\u2550\u2550\r\n   SUWAK PL \u21c4 EN \u2014 \u201eZOBACZ, JAK BRZMI LEKCJA\u201d\r\n   Dwie warstwy le\u017c\u0105 w tej samej kom\u00f3rce siatki, wi\u0119c wysoko\u015b\u0107 wyznacza\r\n   d\u0142u\u017cszy tekst. G\u00f3rna warstwa (angielska) jest przycinana clip-path.\r\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\u2550\u2550\u2550\u2550 *\/\r\n.hx-dwu .dwx{max-width:960px;margin:0 auto;}\r\n.hx-dwu .dwx-zakladki{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;\r\n  margin:0 0 18px;}\r\n.hx-dwu .dwx-zakladka{-webkit-appearance:none;appearance:none;font-family:inherit;\r\n  background:var(--paper,#ffffff);border:1px solid var(--line,#E2E8EC);color:var(--ink,#12324B);\r\n  border-radius:999px;padding:9px 16px;font-size:.82rem;font-weight:700;cursor:pointer;\r\n  display:inline-flex;align-items:center;gap:8px;\r\n  transition:border-color .25s ease,color .25s ease,background .25s ease,\r\n              box-shadow .25s ease,transform .25s ease;}\r\n.hx-dwu .dwx-zakladka em{font-style:normal;font-weight:600;font-size:.72rem;color:var(--ink-2,#5A6E7E);}\r\n.hx-dwu .dwx-zakladka:hover{border-color:var(--gold,#C9A227);transform:translateY(-1px);}\r\n.hx-dwu .dwx-zakladka[aria-pressed=\"true\"]{background:var(--navy,#0E2B4D);color:#fff;border-color:var(--navy,#0E2B4D);\r\n  box-shadow:0 12px 24px -16px rgba(14,43,77,.9);}\r\n.hx-dwu .dwx-zakladka[aria-pressed=\"true\"] em{color:var(--gold-l,#F0D98A);}\r\n\/* \u2500\u2500 SCENA SUWAKA \u2500\u2500\r\n   touch-action:pan-y \u2014 przewijanie strony palcem w pionie dzia\u0142a normalnie,\r\n   natomiast ruch w POZIOMIE przegl\u0105darka zostawia nam: dzi\u0119ki temu skrypt\r\n   dostaje pe\u0142en gest przeci\u0105gania i suwak da si\u0119 z\u0142apa\u0107 w dowolnym miejscu.\r\n   cursor:ew-resize na ca\u0142ej scenie m\u00f3wi to samo u\u017cytkownikowi myszy. *\/\r\n.hx-dwu .dwx-scena{position:relative;display:grid;border-radius:var(--r,16px);overflow:hidden;\r\n  border:1px solid var(--line,#E2E8EC);background:var(--paper,#ffffff);\r\n  box-shadow:0 26px 60px -40px rgba(14,43,77,.75);\r\n  -webkit-user-select:none;user-select:none;\r\n  touch-action:pan-y;cursor:ew-resize;}\r\n.hx-dwu .dwx-warstwa{grid-area:1 \/ 1;padding:26px var(--pad,18px) 28px;\r\n  display:flex;flex-direction:column;justify-content:center;min-width:0;}\r\n.hx-dwu .dwx-warstwa--en{background:linear-gradient(135deg,var(--navy,#0E2B4D) 0%,#16295C 100%);\r\n  color:#fff;clip-path:inset(0 0 0 50%);will-change:clip-path;}\r\n.hx-dwu .dwx-flaga{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;\r\n  font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;\r\n  padding:7px 14px;border-radius:999px;margin-bottom:14px;white-space:nowrap;}\r\n.hx-dwu .dwx-warstwa--pl .dwx-flaga{background:rgba(14,43,77,.07);color:var(--navy,#0E2B4D);}\r\n.hx-dwu .dwx-warstwa--en .dwx-flaga{background:rgba(240,217,138,.16);color:var(--gold-l,#F0D98A);\r\n  align-self:flex-end;}\r\n.hx-dwu .dwx-temat{font-size:clamp(1.15rem,4.6vw,1.6rem);font-weight:700;line-height:1.25;\r\n  margin:0 0 12px;}\r\n.hx-dwu .dwx-warstwa--pl .dwx-temat{color:var(--navy,#0E2B4D);}\r\n.hx-dwu .dwx-zdanie{font-size:clamp(.94rem,3.4vw,1.05rem);line-height:1.75;margin:0 0 16px;}\r\n.hx-dwu .dwx-warstwa--pl .dwx-zdanie{color:var(--ink-2,#5A6E7E);}\r\n.hx-dwu .dwx-warstwa--en .dwx-zdanie{color:#DCE7F0;}\r\n.hx-dwu .dwx-slowa{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px;}\r\n.hx-dwu .dwx-slowa li{font-size:.78rem;font-weight:700;padding:6px 12px;border-radius:999px;}\r\n.hx-dwu .dwx-warstwa--pl .dwx-slowa li{background:rgba(201,162,39,.15);color:var(--navy,#0E2B4D);}\r\n.hx-dwu .dwx-warstwa--en .dwx-slowa li{background:rgba(255,255,255,.12);color:var(--gold-l,#F0D98A);}\r\n.hx-dwu .dwx-tresc{display:block;}\r\n\/* pionowa linia podzia\u0142u + ga\u0142ka *\/\r\n.hx-dwu .dwx-uchwyt{position:absolute;top:0;bottom:0;left:50%;width:3px;z-index:3;\r\n  transform:translateX(-50%);pointer-events:none;\r\n  background:linear-gradient(180deg,var(--gold-l,#F0D98A),var(--gold,#C9A227));\r\n  box-shadow:0 0 22px rgba(240,217,138,.55);}\r\n.hx-dwu .dwx-galka{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);\r\n  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;\r\n  background:radial-gradient(circle at 32% 28%,#FFF6DA 0%,var(--gold-l,#F0D98A) 42%,var(--gold,#C9A227) 100%);\r\n  color:#3B2A00;font-weight:900;font-size:.62rem;letter-spacing:.04em;\r\n  box-shadow:0 10px 28px rgba(14,43,77,.4),inset 0 0 0 2px rgba(255,255,255,.55);}\r\n.hx-dwu .dwx-galka::before,.hx-dwu .dwx-galka::after{content:\"\";position:absolute;\r\n  width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;}\r\n.hx-dwu .dwx-galka::before{left:9px;border-right:6px solid #3B2A00;}\r\n.hx-dwu .dwx-galka::after{right:9px;border-left:6px solid #3B2A00;}\r\n\/* \u2500\u2500 NATYWNY SUWAK: TYLKO DLA KLAWIATURY \u2500\u2500\r\n   pointer-events:none \u2014 myszy i palca NIE obs\u0142uguje ju\u017c on, tylko skrypt\r\n   (patrz punkt 1 w nag\u0142\u00f3wku pliku). Element zostaje w kodzie, bo dzi\u0119ki\r\n   niemu suwak da si\u0119 obs\u0142u\u017cy\u0107 strza\u0142kami po doj\u015bciu Tabem i czytniki\r\n   ekranu widz\u0105 go jako normalny suwak z warto\u015bci\u0105. *\/\r\n.hx-dwu .dwx-zakres{position:absolute;inset:0;width:100%;height:100%;margin:0;\r\n  opacity:0;z-index:4;pointer-events:none;\r\n  -webkit-appearance:none;appearance:none;background:transparent;}\r\n.hx-dwu .dwx-zakres:focus-visible{outline:none;}\r\n.hx-dwu .dwx-zakres:focus-visible ~ .dwx-uchwyt .dwx-galka{\r\n  box-shadow:0 0 0 5px rgba(240,217,138,.5),0 10px 28px rgba(14,43,77,.4);}\r\n\/* skr\u00f3ty: poka\u017c ca\u0142o\u015b\u0107 po polsku \/ po angielsku *\/\r\n.hx-dwu .dwx-skroty{display:flex;justify-content:space-between;align-items:center;gap:10px;\r\n  margin-top:12px;}\r\n.hx-dwu .dwx-skrot{-webkit-appearance:none;appearance:none;font-family:inherit;cursor:pointer;\r\n  border:1px solid var(--line,#E2E8EC);background:var(--paper,#ffffff);color:var(--ink-2,#5A6E7E);\r\n  border-radius:999px;padding:8px 14px;font-size:.76rem;font-weight:700;\r\n  transition:border-color .25s ease,color .25s ease,transform .25s ease;}\r\n.hx-dwu .dwx-skrot:hover{border-color:var(--gold,#C9A227);color:var(--ink,#12324B);transform:translateY(-1px);}\r\n.hx-dwu .dwx-podpowiedz{font-size:.78rem;color:var(--ink-2,#5A6E7E);text-align:center;margin:0;\r\n  display:inline-flex;align-items:center;gap:8px;}\r\n.hx-dwu .dwx-podpowiedz i{font-style:normal;animation:dwx-machaj 2.6s ease-in-out infinite;}\r\n@keyframes dwx-machaj{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}\r\n\/* \u2500\u2500 TELEFON: OBA PRZYCISKI W JEDNYM RZ\u0118DZIE \u2500\u2500\r\n   Wcze\u015bniej \u201eflex-direction:column\u201d ustawia\u0142 je jeden pod drugim. Teraz jest\r\n   to siatka dwukolumnowa: podpowied\u017a zajmuje ca\u0142y pierwszy wiersz, a pod ni\u0105\r\n   stoj\u0105 oba przyciski \u2014 polski po lewej, angielski po prawej. Maj\u0105 r\u00f3wn\u0105\r\n   szeroko\u015b\u0107 (1fr 1fr) i wyr\u00f3wnan\u0105 wysoko\u015b\u0107, wi\u0119c d\u0142u\u017cszy napis mo\u017ce zawin\u0105\u0107\r\n   si\u0119 na dwa wiersze, a przyciski i tak zostan\u0105 r\u00f3wne. *\/\r\n@media (max-width:560px){\r\n  \/* Miejsca w siatce podajemy WPROST (grid-template-areas), a nie zdajemy si\u0119\r\n     na automatyczne uk\u0142adanie. W kodzie HTML kolejno\u015b\u0107 to: przycisk polski,\r\n     podpowied\u017a, przycisk angielski \u2014 przy automatycznym uk\u0142adaniu podpowied\u017a\r\n     rozpychaj\u0105ca si\u0119 na dwie kolumny wypycha\u0142a ka\u017cdy przycisk do osobnego\r\n     wiersza. Nazwane obszary ustawiaj\u0105 je niezale\u017cnie od kolejno\u015bci w HTML:\r\n     podpowied\u017a u g\u00f3ry, a pod ni\u0105 oba przyciski obok siebie. *\/\r\n  .hx-dwu .dwx-skroty{display:grid;grid-template-columns:1fr 1fr;gap:8px;\r\n    grid-template-areas:\"podp podp\" \"pl en\";align-items:stretch;}\r\n  .hx-dwu .dwx-podpowiedz{grid-area:podp;justify-content:center;}\r\n  .hx-dwu .dwx-skrot[data-do=\"100\"]{grid-area:pl;}\r\n  .hx-dwu .dwx-skrot[data-do=\"0\"]{grid-area:en;}\r\n  .hx-dwu .dwx-skrot{width:100%;text-align:center;padding:9px 8px;\r\n    font-size:.72rem;line-height:1.3;}\r\n  .hx-dwu .dwx-galka{width:50px;height:50px;font-size:.56rem;}\r\n  .hx-dwu .dwx-warstwa{padding:22px 16px 24px;}\r\n}\r\n@media (min-width:900px){\r\n  .hx-dwu .dwx-warstwa{padding:40px 44px;min-height:340px;}\r\n  .hx-dwu .dwx-zakladka{font-size:.86rem;padding:10px 18px;}\r\n}\r\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\u2550\u2550\u2550\u2550\r\n   CO Z TEGO WYNIKA \u2014 trzy fakty\r\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\u2550\u2550\u2550\u2550 *\/\r\n.hx-dwu .dw-fakty{display:grid;gap:14px;}\r\n.hx-dwu .dw-fakt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;\r\n  background:var(--paper,#ffffff);border:1px solid var(--line,#E2E8EC);border-left:4px solid var(--gold,#C9A227);\r\n  border-radius:var(--r,16px);padding:20px 22px;}\r\n.hx-dwu .dw-fakt__n{font-size:2.2rem;font-weight:800;line-height:1;color:var(--navy,#0E2B4D);\r\n  font-family:'Source Serif 4',Georgia,serif;white-space:nowrap;}\r\n.hx-dwu .dw-fakt__ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;\r\n  background:color-mix(in srgb,var(--gold,#C9A227) 18%,transparent);flex:none;}\r\n.hx-dwu .dw-fakt__ic svg{width:26px;height:26px;stroke:var(--navy,#0E2B4D);fill:none;stroke-width:1.9;}\r\n.hx-dwu .dw-fakt b{display:block;font-size:1.02rem;line-height:1.3;color:var(--ink,#12324B);}\r\n.hx-dwu .dw-fakt p{margin:6px 0 0;font-size:.88rem;line-height:1.6;color:var(--ink-2,#5A6E7E);}\r\n.hx-dwu .dw-fakt a{display:inline-flex;align-items:center;gap:7px;margin-top:10px;\r\n  font-size:.82rem;font-weight:700;color:var(--navy,#0E2B4D) !important;text-decoration:none !important;\r\n  border-bottom:1px solid var(--gold,#C9A227);padding-bottom:2px;transition:gap .25s ease;}\r\n.hx-dwu .dw-fakt a:hover{gap:12px;}\r\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\u2550\u2550\u2550\u2550\r\n   PASY ZE ZDJ\u0118CIAMI I GALERIA\r\n   ---------------------------------------------------------------------------\r\n   TELEFON (te regu\u0142y) \u2014 bez zmian, tu kadry by\u0142y dobre.\r\n   KOMPUTER \u2014 patrz osobny blok \u201ePASY NA KOMPUTERZE\u201d ni\u017cej.\r\n   --kadr \/ --kadr-d ustawiasz przy ka\u017cdym zdj\u0119ciu osobno (telefon \/ komputer)\r\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\u2550\u2550\u2550\u2550 *\/\r\n.hx-dwu .dw-band{position:relative;overflow:hidden;height:38vh;min-height:220px;max-height:420px;}\r\n.hx-dwu .dw-band img{position:absolute;left:0;top:-9%;width:100%;height:118%;\r\n  object-fit:cover;object-position:var(--kadr,center);will-change:transform;\r\n  opacity:0;clip-path:inset(14% 0 14% 0);\r\n  transition:opacity 1s ease,clip-path 1.25s cubic-bezier(.22,1,.36,1),filter .5s ease;}\r\n.hx-dwu .dw-band.widoczny img{opacity:1;clip-path:inset(0 0 0 0);}\r\n.hx-dwu .dw-band::after{content:\"\";position:absolute;inset:0;\r\n  background:linear-gradient(180deg,rgba(10,31,58,.22),rgba(10,31,58,.72));\r\n  transition:background .5s ease;}\r\n\/* delikatna smuga \u015bwiat\u0142a przep\u0142ywaj\u0105ca po zdj\u0119ciu *\/\r\n.hx-dwu .dw-band::before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:45%;z-index:3;\r\n  pointer-events:none;opacity:0;\r\n  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.10) 42%,\r\n    rgba(240,217,138,.20) 50%,rgba(255,255,255,.10) 58%,rgba(255,255,255,0) 100%);\r\n  transform:translateX(-140%) skewX(-12deg);}\r\n.hx-dwu .dw-band.widoczny::before{opacity:1;animation:dw-shine 9s ease-in-out infinite;}\r\n@keyframes dw-shine{\r\n  0%,62%{transform:translateX(-140%) skewX(-12deg);}\r\n  88%,100%{transform:translateX(260%) skewX(-12deg);}\r\n}\r\n.hx-dwu .dw-band p{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:20px var(--pad,18px);\r\n  margin:0;color:#fff;font-weight:700;\r\n  font-size:clamp(1.05rem,4.4vw,1.45rem);line-height:1.3;text-shadow:0 2px 14px rgba(0,0,0,.55);\r\n  opacity:0;transform:translateY(14px);\r\n  transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .8s ease;}\r\n.hx-dwu .dw-band.widoczny p{opacity:1;transform:none;}\r\n\/* drugi pas (native speaker) \u2014 na telefonie nieco wy\u017cszy ni\u017c pozosta\u0142e *\/\r\n.hx-dwu .dw-band--native{height:45vh;min-height:280px;max-height:500px;}\r\n\/* \u25b8 PODPIS POD ZDJ\u0118CIEM Z NATIVE SPEAKEREM\r\n   Wcze\u015bniej mia\u0142 wymuszon\u0105 jedn\u0105 lini\u0119 (white-space:nowrap) i sztucznie\r\n   zmniejszan\u0105 czcionk\u0119. Na telefonie zdanie i tak si\u0119 nie mie\u015bci\u0142o, wi\u0119c\r\n   po prostu ucieka\u0142o poza kraw\u0119d\u017a i by\u0142o uci\u0119te w po\u0142owie s\u0142owa. Teraz\r\n   na telefonie zawija si\u0119 normalnie na dwa wiersze, w czytelnym rozmiarze;\r\n   jedna linia zostaje tylko na komputerze, gdzie faktycznie si\u0119 mie\u015bci. *\/\r\n.hx-dwu .dw-band--native p{max-width:none !important;\r\n  white-space:normal;font-size:clamp(1.05rem,4.4vw,1.45rem);}\r\n@media (min-width:900px) and (hover:hover){\r\n  .hx-dwu .dw-band:hover img{filter:brightness(1.06) saturate(1.05);}\r\n  .hx-dwu .dw-band:hover p{transform:translateY(-4px);}\r\n}\r\n@media (prefers-reduced-motion:reduce){\r\n  .hx-dwu .dw-band img{opacity:1;clip-path:none;transition:none;}\r\n  .hx-dwu .dw-band p{opacity:1;transform:none;}\r\n  .hx-dwu .dw-band::before{display:none;}\r\n  .hx-dwu.dw-js [data-anim]{opacity:1;transform:none;}\r\n  .hx-dwu .dwx-podpowiedz i{animation:none;}\r\n}\r\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\u2550\u2550\u2550\u2550\r\n   KAFLE \u201ePOWI\u0104ZANE STRONY\u201d \u2014 REAKCJA NA NAJECHANIE\r\n   ---------------------------------------------------------------------------\r\n   Ten sam zestaw efekt\u00f3w co na podstronie \u201eMisja i wizja\u201d: kafel unosi si\u0119,\r\n   obw\u00f3dka i cie\u0144 przejmuj\u0105 jego w\u0142asny kolor (--c ustawiony przy ka\u017cdym\r\n   kaflu w HTML), ikona lekko ro\u015bnie i przechyla si\u0119, przy podpisie wysuwa\r\n   si\u0119 strza\u0142ka, a po ca\u0142o\u015bci przebiega delikatny b\u0142ysk.\r\n   Blok @media (hover:hover) sprawia, \u017ce dotyczy to wy\u0142\u0105cznie urz\u0105dze\u0144\r\n   ze wska\u017anikiem \u2014 na telefonie nic si\u0119 nie zmienia (tam \u201enajechanie\u201d\r\n   potrafi\u0142oby zosta\u0107 na sta\u0142e po dotkni\u0119ciu).\r\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\u2550\u2550\u2550\u2550 *\/\r\n.hx-dwu .hx-tile{position:relative;overflow:hidden;\r\n  transition:transform .38s cubic-bezier(.22,1,.36,1),box-shadow .38s ease,\r\n             border-color .38s ease;}\r\n.hx-dwu .hx-tile .hx-ic{display:inline-grid;place-items:center;\r\n  transition:transform .45s cubic-bezier(.34,1.56,.64,1);}\r\n.hx-dwu .hx-tile u{position:relative;transition:color .3s ease;}\r\n.hx-dwu .hx-tile u::after{content:\"\u2192\";margin-left:6px;display:inline-block;\r\n  opacity:0;transform:translateX(-5px);color:var(--c,#2E86C8);font-weight:800;\r\n  transition:opacity .3s ease,transform .35s ease;}\r\n.hx-dwu .hx-tile::before{content:\"\";position:absolute;inset:-40%;pointer-events:none;opacity:0;\r\n  background:linear-gradient(100deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.55) 50%,\r\n    rgba(255,255,255,0) 60%);\r\n  transform:translateX(-140%) skewX(-14deg);}\r\n@media (hover:hover){\r\n  .hx-dwu .hx-tile:hover{transform:translateY(-5px);border-color:var(--c,#2E86C8);\r\n    box-shadow:0 20px 34px -22px color-mix(in srgb,var(--c,#2E86C8) 60%,transparent);}\r\n  .hx-dwu .hx-tile:hover .hx-ic{transform:scale(1.16) rotate(-7deg);}\r\n  .hx-dwu .hx-tile:hover b{color:var(--c,#2E86C8);}\r\n  .hx-dwu .hx-tile:hover u{color:var(--c,#2E86C8);}\r\n  .hx-dwu .hx-tile:hover u::after{opacity:1;transform:translateX(0);}\r\n  .hx-dwu .hx-tile:hover::before{opacity:1;animation:dw-shine 1.1s ease-out;}\r\n}\r\n.hx-dwu .hx-tile:active{transform:scale(.985);}\r\n@media (prefers-reduced-motion:reduce){\r\n  .hx-dwu .hx-tile,.hx-dwu .hx-tile .hx-ic,.hx-dwu .hx-tile u::after{transition:none;}\r\n  .hx-dwu .hx-tile:hover{transform:none;}\r\n  .hx-dwu .hx-tile:hover::before{animation:none;opacity:0;}\r\n}\r\n.hx-dwu .dw-gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}\r\n.hx-dwu .dw-g{position:relative;display:block;aspect-ratio:4\/3;border-radius:14px;overflow:hidden;\r\n  background:var(--mist,#F3F6F8);cursor:zoom-in;border:0;padding:0;width:100%;}\r\n.hx-dwu .dw-g img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;\r\n  transition:transform 1s cubic-bezier(.22,1,.36,1);}\r\n.hx-dwu .dw-g::after{content:\"\";position:absolute;inset:0;\r\n  background:linear-gradient(180deg,rgba(10,31,58,0) 55%,rgba(10,31,58,.35));\r\n  opacity:0;transition:opacity .4s ease;}\r\n@media (hover:hover){\r\n  .hx-dwu .dw-g:hover img{transform:scale(1.07);}\r\n  .hx-dwu .dw-g:hover::after{opacity:1;}\r\n}\r\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\u2550\u2550\u2550\u2550\r\n   PASY ZE ZDJ\u0118CIAMI NA KOMPUTERZE  (patrz punkt 4 w nag\u0142\u00f3wku pliku)\r\n   ---------------------------------------------------------------------------\r\n   WYSOKO\u015a\u0106 W PIKSELACH, NIE W \u201evh\u201d.\r\n   Wcze\u015bniej pas mia\u0142 46vh, czyli 46% wysoko\u015bci OKNA. Skutek: przy 100%\r\n   powi\u0119kszenia przegl\u0105darki pas robi\u0142 si\u0119 niski i ze zdj\u0119cia zostawa\u0142 w\u0105ski\r\n   pasek bez ludzi, a przy 60% \u2014 wy\u017cszy i kadr wygl\u0105da\u0142 dobrze. To samo dzia\u0142o\r\n   si\u0119 na monitorach o r\u00f3\u017cnej wysoko\u015bci. Sta\u0142a liczba pikseli daje ten sam\r\n   kadr zawsze, niezale\u017cnie od zoomu i wielko\u015bci ekranu.\r\n   ZDJ\u0118CIE JEST WY\u017bSZE OD PASA (150%) \u2014 ten zapas skrypt przesuwa w rytm\r\n   przewijania strony, wi\u0119c w trakcie scrollowania ods\u0142aniaj\u0105 si\u0119 kolejne\r\n   partie fotografii zamiast ci\u0105gle tego samego wycinka.\r\n   REGULACJA:\r\n     \u2022 wysoko\u015b\u0107 pasa       \u2014 liczby \u201e560px\u201d i \u201e620px\u201d ni\u017cej\r\n     \u2022 ile zdj\u0119cia wida\u0107   \u2014 \u201e150%\u201d ni\u017cej (wi\u0119cej = d\u0142u\u017csza podr\u00f3\u017c kadru)\r\n     \u2022 jak mocno si\u0119 rusza \u2014 ZASIEG_PAS w skrypcie na dole pliku\r\n     \u2022 punkt zaczepienia   \u2014 --kadr-d przy ka\u017cdym zdj\u0119ciu w kodzie HTML\r\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\u2550\u2550\u2550\u2550 *\/\r\n@media (min-width:900px){\r\n  .hx-dwu .dw-band{height:560px;min-height:0;max-height:none;}\r\n  .hx-dwu .dw-band--native{height:620px;min-height:0;max-height:none;}\r\n  .hx-dwu .dw-band img{top:0;height:150%;\r\n    object-position:var(--kadr-d,var(--kadr,center 32%));}\r\n  .hx-dwu .dw-band p{max-width:40ch;font-size:1.7rem;}\r\n  .hx-dwu .dw-band--native p{max-width:none;font-size:1.7rem;white-space:nowrap;}\r\n  .hx-dwu .dw-stages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\r\n    align-items:stretch;}\r\n  .hx-dwu .dw-stage + .dw-stage{margin-top:0;}\r\n  .hx-dwu .dw-gal{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}\r\n  .hx-dwu .dw-fakty{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}\r\n  .hx-dwu .dw-fakt{padding:26px 26px;gap:18px;}\r\n  .hx-dwu .dw-fakt__n{font-size:2.6rem;}\r\n  .hx-dwu .dw-fakt b{font-size:1.05rem;}\r\n}\r\n\/* \u2500\u2500 POWI\u0118KSZENIE ZDJ\u0118CIA \u2500\u2500\r\n   Okno przenosimy do <body> i dajemy mu bardzo wysoki z-index, bo inaczej\r\n   globalny nag\u0142\u00f3wek strony potrafi je przykry\u0107. *\/\r\n.hx-lb-dwu{position:fixed;inset:0;z-index:2147480000;background:rgba(6,20,38,.94);\r\n  display:flex;align-items:center;justify-content:center;padding:16px;\r\n  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;\r\n  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}\r\n.hx-lb-dwu.on{opacity:1;visibility:visible;}\r\n.hx-lb-dwu img{max-width:100%;max-height:86vh;object-fit:contain;border-radius:12px;\r\n  box-shadow:0 40px 90px -40px #000;}\r\n.hx-lb-dwu__x{position:absolute;top:16px;right:16px;\r\n  -webkit-appearance:none !important;appearance:none !important;border:0 !important;\r\n  width:54px !important;height:54px !important;border-radius:50% !important;padding:0 !important;\r\n  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.35) 0%,\r\n    rgba(14,43,77,.9) 55%,rgba(6,20,38,.95) 100%) !important;\r\n  box-shadow:0 0 0 1px rgba(240,217,138,.55),0 14px 34px -14px rgba(0,0,0,.9) !important;\r\n  color:#F0D98A !important;display:grid !important;place-items:center !important;cursor:pointer;\r\n  animation:hx-lb-puls 6s ease-in-out infinite;}\r\n.hx-lb-dwu__x svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.6;\r\n  stroke-linecap:round;}\r\n@keyframes hx-lb-puls{\r\n  0%,100%{box-shadow:0 0 0 1px rgba(240,217,138,.5),0 14px 34px -14px rgba(0,0,0,.9);}\r\n  50%{box-shadow:0 0 0 1px rgba(240,217,138,.95),0 0 26px rgba(240,217,138,.35),\r\n      0 14px 34px -14px rgba(0,0,0,.9);}\r\n}\r\n@media (prefers-reduced-motion:reduce){.hx-lb-dwu__x{animation:none;}}\r\n<\/style>\r\n<section class=\"hx hx-dwu\" id=\"hil-dwu\" lang=\"pl\">\r\n <div class=\"hx-app\">\r\n  <!-- powr\u00f3t do strony szko\u0142y -->\r\n  <a class=\"hx-back\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=345\">\r\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>\r\n    <span data-en=\"Primary School\">Szko\u0142a Podstawowa<\/span>\r\n  <\/a>\r\n  <!-- \u2550\u2550 NAG\u0141\u00d3WEK Z PRZE\u0141\u0104CZNIKIEM J\u0118ZYKA \u2550\u2550 -->\r\n  <div class=\"dw-hero\">\r\n    <p class=\"hx-kicker\" data-en=\"About us\">O nas<\/p>\r\n    <h1 style=\"color:#fff;font-size:clamp(1.8rem,7.2vw,2.3rem)\" data-en=\"Bilingual education at Hilaris\">Dwuj\u0119zyczno\u015b\u0107 w Hilaris<\/h1>\r\n    <p class=\"dw-lead\" data-en=\"At Hilaris, being bilingual means covering the curriculum in Polish and in English alike. English is taught at an extended level, so that our pupils master it well enough to communicate freely and confidently.\">Dwuj\u0119zyczno\u015b\u0107 oznacza u nas realizowanie tre\u015bci edukacyjnych zar\u00f3wno po polsku, jak i po angielsku. J\u0119zyk angielski jest nauczany w wymiarze rozszerzonym \u2014 tak, aby uczniowie opanowali go w stopniu pozwalaj\u0105cym na swobodn\u0105, samodzieln\u0105 komunikacj\u0119.<\/p>\r\n    <div class=\"dw-lang\" id=\"dwLang\" role=\"group\" aria-label=\"J\u0119zyk strony\">\r\n      <i aria-hidden=\"true\"><\/i>\r\n      <button type=\"button\" data-l=\"pl\" aria-pressed=\"true\" lang=\"pl\">POLSKI<\/button>\r\n      <button type=\"button\" data-l=\"en\" aria-pressed=\"false\" lang=\"en\">ENGLISH<\/button>\r\n    <\/div>\r\n    <p class=\"dw-hint\" data-en=\"This whole page is bilingual \u2014 the switch above changes its language.\">Ca\u0142a ta strona jest dwuj\u0119zyczna \u2014 prze\u0142\u0105cznik powy\u017cej zmienia jej j\u0119zyk.<\/p>\r\n  <\/div>\r\n  <!-- \u2550\u2550 PAS ZE ZDJ\u0118CIEM \u2550\u2550\r\n       --kadr   = punkt zaczepienia kadru na TELEFONIE\r\n       --kadr-d = punkt zaczepienia kadru na KOMPUTERZE\r\n       Mniejszy procent = kadr wy\u017cej (wi\u0119cej g\u00f3ry zdj\u0119cia, czyli twarze). -->\r\n  <div class=\"dw-band\" data-anim>\r\n    <img decoding=\"async\" src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/08\/IMG-20250701-WA0084.jpg\" alt=\"Uczniowie Szko\u0142y Podstawowej Hilaris podczas zaj\u0119\u0107\"\r\n         data-en-alt=\"Pupils of Hilaris Primary School during a lesson\" loading=\"lazy\"\r\n         style=\"--kadr:center 40%;--kadr-d:center 32%\">\r\n    <p data-en=\"English is not just another subject here. It is the language we learn in.\">Angielski nie jest u nas przedmiotem obok. Jest j\u0119zykiem, w kt\u00f3rym si\u0119 uczymy.<\/p>\r\n  <\/div>\r\n  <!-- \u2550\u2550 TRZY ZA\u0141O\u017bENIA \u2550\u2550 -->\r\n  <div class=\"hx-sec\">\r\n    <h2 class=\"hx-h\" data-anim data-en=\"How it works\">Na czym to polega<\/h2>\r\n    <p class=\"hx-sub\" data-anim data-en=\"Three principles that shape the way we work with language.\">Trzy za\u0142o\u017cenia, kt\u00f3re porz\u0105dkuj\u0105 ca\u0142\u0105 nasz\u0105 prac\u0119 z j\u0119zykiem.<\/p>\r\n    <div class=\"hx-grid\" style=\"--cols:1;--cols-d:3\">\r\n      <div class=\"hx-card hx-card--acc\" style=\"--c:#2E86C8\" data-anim>\r\n        <span class=\"hx-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M20 12a7.5 7.5 0 0 1-10.9 6.7L4 20l1.4-4.8A7.5 7.5 0 1 1 20 12z\"\/><\/svg><\/span>\r\n        <p data-en=\"It increases how often pupils meet English at school \u2014 both spoken and written.\">Zwi\u0119ksza cz\u0119stotliwo\u015b\u0107 kontaktu ucznia z j\u0119zykiem angielskim w szkole \u2014 w mowie i w pi\u015bmie.<\/p>\r\n      <\/div>\r\n      <div class=\"hx-card hx-card--acc\" style=\"--c:#D9A417\" data-anim>\r\n        <span class=\"hx-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><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\"\/><\/svg><\/span>\r\n        <p data-en=\"It introduces English into subject teaching gradually, step by step.\">Zak\u0142ada stopniowe wprowadzanie element\u00f3w j\u0119zyka angielskiego do nauczania przedmiotowego.<\/p>\r\n      <\/div>\r\n      <div class=\"hx-card hx-card--acc\" style=\"--c:#3E8E5A\" data-anim>\r\n        <span class=\"hx-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M8 4h8a2 2 0 0 1 2 2v13a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z\"\/><path d=\"M9.6 9h4.8M9.6 13h4.8M9.6 17h3\"\/><\/svg><\/span>\r\n        <p data-en=\"It builds confidence in using subject-specific vocabulary in selected topics.\">Sprzyja sprawnemu pos\u0142ugiwaniu si\u0119 s\u0142ownictwem specjalistycznym w wybranych zagadnieniach.<\/p>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n  <!-- \u2550\u2550 DWA ETAPY \u2550\u2550\r\n       \u25b8 NAZWY PRZEDMIOT\u00d3W: polski tekst stoi w tre\u015bci znacznika, angielski\r\n         w data-en. Wcze\u015bniej po obu stronach by\u0142o to samo s\u0142owo angielskie\r\n         (\u201escience\u201d, \u201emaths\u201d, \u201eliteracy\u201d), wi\u0119c polska wersja strony mia\u0142a\r\n         angielskie nazwy przedmiot\u00f3w. Teraz s\u0105 rozdzielone.\r\n         Je\u015bli kt\u00f3ry\u015b przedmiot NAZYWA SI\u0118 u Was oficjalnie po angielsku\r\n         (bo tak brzmi w planie lekcji), wystarczy wpisa\u0107 t\u0119 nazw\u0119 z powrotem\r\n         jako polski tekst \u2014 reszta zadzia\u0142a bez zmian. -->\r\n  <div class=\"hx-sec hx-sec--mist\">\r\n    <h2 class=\"hx-h\" data-anim data-en=\"One goal, two stages\">Jeden cel, dwa etapy<\/h2>\r\n    <p class=\"hx-sub\" data-anim data-en=\"The goal is fluency, but our approach adapts to the age of the pupils. Tap a subject to see a sample lesson.\">Cel to swoboda j\u0119zykowa, ale nasze podej\u015bcie dostosowujemy do wieku uczni\u00f3w. Prosimy dotkn\u0105\u0107 nazwy przedmiotu, aby zobaczy\u0107 przyk\u0142ad lekcji.<\/p>\r\n    <div class=\"dw-stages\" id=\"dwStages\">\r\n      <div class=\"dw-stage\" style=\"--c:#D9A417\" data-anim>\r\n        <div class=\"dw-stage__t\"><span class=\"dw-stage__k\">1\u20133<\/span>\r\n          <span><b data-en=\"Lower primary\">Edukacja wczesnoszkolna<\/b><u data-en=\"First educational stage\">I etap edukacyjny<\/u><\/span><\/div>\r\n        <div class=\"dw-stage__b\">\r\n          <p data-en=\"We focus on communicating in English in everyday situations. Selected lessons, projects and clubs are taught bilingually.\">Szczeg\u00f3ln\u0105 uwag\u0119 zwracamy na porozumiewanie si\u0119 po angielsku w codziennych sytuacjach. Dwuj\u0119zycznie prowadzimy wybrane lekcje, projekty i ko\u0142a zainteresowa\u0144.<\/p>\r\n          <p class=\"dw-glab\" data-en=\"Lessons taught bilingually\">Lekcje prowadzone dwuj\u0119zycznie<\/p>\r\n          <div class=\"dw-subj\">\r\n            <button type=\"button\" class=\"dw-s\" data-do=\"0\" data-en=\"science\">przyroda<\/button>\r\n            <span class=\"dw-s\" data-en=\"literacy\">czytanie i pisanie<\/span>\r\n            <button type=\"button\" class=\"dw-s\" data-do=\"1\" data-en=\"maths\">matematyka<\/button>\r\n            <button type=\"button\" class=\"dw-s\" data-do=\"2\" data-en=\"music\">muzyka<\/button>\r\n          <\/div>\r\n          <span class=\"dw-native\">\r\n            <svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M12 2.9 2.9 7.5 12 12.1l9.1-4.6z\"\/><path d=\"M6.6 10.4v4.8c0 1.8 2.4 3.1 5.4 3.1s5.4-1.3 5.4-3.1v-4.8\"\/><\/svg>\r\n            <span data-en=\"A native speaker from Year 1\">Native speaker ju\u017c od pierwszej klasy<\/span>\r\n          <\/span>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"dw-stage\" style=\"--c:#2E86C8\" data-anim>\r\n        <div class=\"dw-stage__t\"><span class=\"dw-stage__k\">4\u20138<\/span>\r\n          <span><b data-en=\"Upper primary\">Klasy starsze<\/b><u data-en=\"Second educational stage\">II etap edukacyjny<\/u><\/span><\/div>\r\n        <div class=\"dw-stage__b\">\r\n          <p data-en=\"We develop communicative skills and broaden vocabulary \u2014 both general and specialist.\">Rozwijamy kompetencje komunikacyjne i poszerzamy zas\u00f3b s\u0142ownictwa \u2014 zar\u00f3wno og\u00f3lnego, jak i specjalistycznego.<\/p>\r\n          <p class=\"dw-glab\" data-en=\"Subjects taught bilingually\">Przedmioty prowadzone dwuj\u0119zycznie<\/p>\r\n          <div class=\"dw-subj\">\r\n            <button type=\"button\" class=\"dw-s\" data-do=\"2\" data-en=\"music\">muzyka<\/button>\r\n            <button type=\"button\" class=\"dw-s\" data-do=\"3\" data-en=\"history\">historia<\/button>\r\n            <span class=\"dw-s\" data-en=\"social studies\">wiedza o spo\u0142ecze\u0144stwie<\/span>\r\n          <\/div>\r\n          <p class=\"dw-glab\" data-en=\"Additional subjects\">Przedmioty dodatkowe<\/p>\r\n          <div class=\"dw-subj\">\r\n            <button type=\"button\" class=\"dw-s extra\" data-do=\"4\" data-en=\"English culture\">kultura angloj\u0119zyczna<\/button>\r\n            <span class=\"dw-s extra\" data-en=\"direct communication\">komunikacja bezpo\u015brednia<\/span>\r\n          <\/div>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n  <!-- \u2550\u2550 SUWAK PL \u21c4 EN \u2550\u2550 -->\r\n  <div class=\"hx-sec\" id=\"dwLekcja\">\r\n    <h2 class=\"hx-h\" data-anim data-en=\"See what a lesson sounds like\">Zobacz, jak brzmi lekcja<\/h2>\r\n    <p class=\"hx-sub\" data-anim data-en=\"The same topic in Polish and in English. Drag anywhere on the panel: Polish on the left, English on the right.\">Ten sam temat po polsku i po angielsku. Prosimy przeci\u0105gn\u0105\u0107 w dowolnym miejscu panelu: po lewej stronie wersja polska, po prawej \u2014 angielska.<\/p>\r\n    <div class=\"dwx\" data-anim>\r\n      <div class=\"dwx-zakladki\" id=\"dwxZakladki\" role=\"group\" aria-label=\"Wyb\u00f3r przyk\u0142adu\">\r\n        <button type=\"button\" class=\"dwx-zakladka\" data-i=\"0\" aria-pressed=\"true\"><span data-en=\"Science\">Przyroda<\/span><em data-en=\"Years 1\u20133\">klasy 1\u20133<\/em><\/button>\r\n        <button type=\"button\" class=\"dwx-zakladka\" data-i=\"1\" aria-pressed=\"false\"><span data-en=\"Maths\">Matematyka<\/span><em data-en=\"Years 1\u20133\">klasy 1\u20133<\/em><\/button>\r\n        <button type=\"button\" class=\"dwx-zakladka\" data-i=\"2\" aria-pressed=\"false\"><span data-en=\"Music\">Muzyka<\/span><em data-en=\"Years 4\u20138\">klasy 4\u20138<\/em><\/button>\r\n        <button type=\"button\" class=\"dwx-zakladka\" data-i=\"3\" aria-pressed=\"false\"><span data-en=\"History\">Historia<\/span><em data-en=\"Years 4\u20138\">klasy 4\u20138<\/em><\/button>\r\n        <button type=\"button\" class=\"dwx-zakladka\" data-i=\"4\" aria-pressed=\"false\"><span data-en=\"English culture\">Kultura angloj\u0119zyczna<\/span><em data-en=\"Years 4\u20138\">klasy 4\u20138<\/em><\/button>\r\n      <\/div>\r\n      <div class=\"dwx-scena\" id=\"dwxScena\">\r\n        <div class=\"dwx-warstwa dwx-warstwa--pl\" lang=\"pl\">\r\n          <span class=\"dwx-flaga\" data-en=\"In Polish\">Po polsku<\/span>\r\n          <div class=\"dwx-tresc\" data-i=\"0\">\r\n            <h3 class=\"dwx-temat\">Obieg wody w przyrodzie<\/h3>\r\n            <p class=\"dwx-zdanie\">Woda paruje z ocean\u00f3w, unosi si\u0119 i skrapla w chmurach. Potem wraca na ziemi\u0119 jako deszcz \u2014 i ca\u0142y cykl zaczyna si\u0119 od nowa.<\/p>\r\n            <ul class=\"dwx-slowa\"><li>parowanie<\/li><li>skraplanie<\/li><li>opady<\/li><li>obieg wody<\/li><\/ul>\r\n          <\/div>\r\n          <div class=\"dwx-tresc\" data-i=\"1\" hidden>\r\n            <h3 class=\"dwx-temat\">Figury i k\u0105ty<\/h3>\r\n            <p class=\"dwx-zdanie\">Kwadrat ma cztery r\u00f3wne boki i cztery k\u0105ty proste. Prostok\u0105t r\u00f3wnie\u017c ma cztery k\u0105ty proste, ale jego boki s\u0105 r\u00f3wne tylko parami.<\/p>\r\n            <ul class=\"dwx-slowa\"><li>kwadrat<\/li><li>prostok\u0105t<\/li><li>k\u0105t prosty<\/li><li>bok<\/li><\/ul>\r\n          <\/div>\r\n          <div class=\"dwx-tresc\" data-i=\"2\" hidden>\r\n            <h3 class=\"dwx-temat\">Instrumenty orkiestry<\/h3>\r\n            <p class=\"dwx-zdanie\">Orkiestra symfoniczna sk\u0142ada si\u0119 z czterech grup instrument\u00f3w: smyczkowych, d\u0119tych drewnianych, d\u0119tych blaszanych i perkusyjnych. Ka\u017cda z nich brzmi inaczej.<\/p>\r\n            <ul class=\"dwx-slowa\"><li>smyczki<\/li><li>instrumenty d\u0119te<\/li><li>perkusja<\/li><li>brzmienie<\/li><\/ul>\r\n          <\/div>\r\n          <div class=\"dwx-tresc\" data-i=\"3\" hidden>\r\n            <h3 class=\"dwx-temat\">Wielkie odkrycia geograficzne<\/h3>\r\n            <p class=\"dwx-zdanie\">W XV wieku \u017ceglarze wyruszyli w ocean w poszukiwaniu nowej drogi do Indii. Zmienili map\u0119 \u015bwiata i handel na kolejne stulecia.<\/p>\r\n            <ul class=\"dwx-slowa\"><li>odkrycie<\/li><li>\u017ceglarz<\/li><li>wyprawa<\/li><li>handel<\/li><\/ul>\r\n          <\/div>\r\n          <div class=\"dwx-tresc\" data-i=\"4\" hidden>\r\n            <h3 class=\"dwx-temat\">Szko\u0142a w Wielkiej Brytanii<\/h3>\r\n            <p class=\"dwx-zdanie\">W wielu brytyjskich szko\u0142ach dzie\u0144 zaczyna si\u0119 od assembly \u2014 porannego spotkania ca\u0142ej spo\u0142eczno\u015bci. To dobry moment, \u017ceby por\u00f3wna\u0107 zwyczaje szkolne w Polsce i w Wielkiej Brytanii.<\/p>\r\n            <ul class=\"dwx-slowa\"><li>zwyczaj<\/li><li>por\u00f3wnanie<\/li><li>tradycja<\/li><li>spo\u0142eczno\u015b\u0107<\/li><\/ul>\r\n          <\/div>\r\n        <\/div>\r\n        <div class=\"dwx-warstwa dwx-warstwa--en\" lang=\"en\" id=\"dwxEn\">\r\n          <span class=\"dwx-flaga\" data-en=\"In English\">Po angielsku<\/span>\r\n          <div class=\"dwx-tresc\" data-i=\"0\">\r\n            <h3 class=\"dwx-temat\">The Water Cycle<\/h3>\r\n            <p class=\"dwx-zdanie\">Water evaporates from the oceans, rises and condenses into clouds. Then it falls back to the ground as rain \u2014 and the whole cycle begins again.<\/p>\r\n            <ul class=\"dwx-slowa\"><li>evaporation<\/li><li>condensation<\/li><li>precipitation<\/li><li>water cycle<\/li><\/ul>\r\n          <\/div>\r\n          <div class=\"dwx-tresc\" data-i=\"1\" hidden>\r\n            <h3 class=\"dwx-temat\">Shapes and Angles<\/h3>\r\n            <p class=\"dwx-zdanie\">A square has four equal sides and four right angles. A rectangle also has four right angles, but only its opposite sides are equal.<\/p>\r\n            <ul class=\"dwx-slowa\"><li>square<\/li><li>rectangle<\/li><li>right angle<\/li><li>side<\/li><\/ul>\r\n          <\/div>\r\n          <div class=\"dwx-tresc\" data-i=\"2\" hidden>\r\n            <h3 class=\"dwx-temat\">Instruments of the Orchestra<\/h3>\r\n            <p class=\"dwx-zdanie\">A symphony orchestra is made up of four families of instruments: strings, woodwind, brass and percussion. Each of them has a sound of its own.<\/p>\r\n            <ul class=\"dwx-slowa\"><li>strings<\/li><li>woodwind<\/li><li>brass<\/li><li>percussion<\/li><\/ul>\r\n          <\/div>\r\n          <div class=\"dwx-tresc\" data-i=\"3\" hidden>\r\n            <h3 class=\"dwx-temat\">The Age of Discovery<\/h3>\r\n            <p class=\"dwx-zdanie\">In the fifteenth century, sailors set out across the ocean in search of a new route to India. They redrew the map of the world and reshaped trade for centuries to come.<\/p>\r\n            <ul class=\"dwx-slowa\"><li>discovery<\/li><li>sailor<\/li><li>voyage<\/li><li>trade<\/li><\/ul>\r\n          <\/div>\r\n          <div class=\"dwx-tresc\" data-i=\"4\" hidden>\r\n            <h3 class=\"dwx-temat\">School Life in Britain<\/h3>\r\n            <p class=\"dwx-zdanie\">In many British schools the day begins with an assembly \u2014 a morning gathering of the whole community. It is a good moment to compare school customs in Poland and in Britain.<\/p>\r\n            <ul class=\"dwx-slowa\"><li>custom<\/li><li>to compare<\/li><li>tradition<\/li><li>community<\/li><\/ul>\r\n          <\/div>\r\n        <\/div>\r\n        <input class=\"dwx-zakres\" id=\"dwxZakres\" type=\"range\" min=\"0\" max=\"100\" value=\"50\" step=\"0.1\"\r\n               aria-label=\"Przesu\u0144, aby por\u00f3wna\u0107 wersj\u0119 polsk\u0105 i angielsk\u0105\"\r\n               data-en-aria=\"Drag to compare the Polish and the English version\">\r\n        <div class=\"dwx-uchwyt\" id=\"dwxUchwyt\" aria-hidden=\"true\"><div class=\"dwx-galka\">PL\/EN<\/div><\/div>\r\n      <\/div>\r\n      <div class=\"dwx-skroty\">\r\n        <button type=\"button\" class=\"dwx-skrot\" data-do=\"100\" data-en=\"Show all in Polish\">Poka\u017c ca\u0142o\u015b\u0107 po polsku<\/button>\r\n        <p class=\"dwx-podpowiedz\"><i aria-hidden=\"true\">\u2194<\/i><span data-en=\"Drag anywhere\">Prosimy przeci\u0105gn\u0105\u0107 w dowolnym miejscu<\/span><\/p>\r\n        <button type=\"button\" class=\"dwx-skrot\" data-do=\"0\" data-en=\"Show all in English\">Poka\u017c ca\u0142o\u015b\u0107 po angielsku<\/button>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n  <!-- \u2550\u2550 PAS ZE ZDJ\u0118CIEM \u2550\u2550 -->\r\n  <div class=\"dw-band dw-band--native\" data-anim>\r\n    <img decoding=\"async\" src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/08\/Messenger_creation_F2BCDDB4-D6DF-49CA-B77F-9ABE8E134FCD.jpeg\"\r\n         alt=\"Uczniowie Hilaris na zaj\u0119ciach j\u0119zykowych\"\r\n         data-en-alt=\"Hilaris pupils during a language lesson\" loading=\"lazy\"\r\n         style=\"--kadr:center 15%;--kadr-d:center 30%\">\r\n    <p data-en=\"From Year 1, our pupils work with a native speaker.\">Od pierwszej klasy uczniowie pracuj\u0105 z native speakerem.<\/p>\r\n  <\/div>\r\n  <!-- \u2550\u2550 GALERIA \u2550\u2550 -->\r\n  <div class=\"hx-sec\">\r\n    <h2 class=\"hx-h\" data-anim data-en=\"English in everyday school life\">Angielski w codzienno\u015bci szkolnej<\/h2>\r\n    <p class=\"hx-sub\" data-anim data-en=\"Projects, clubs and everyday conversations in the corridor.\">Projekty, ko\u0142a zainteresowa\u0144 i zwyk\u0142e rozmowy na korytarzu.<\/p>\r\n    <div class=\"dw-gal\" id=\"dwGal\">\r\n      <button type=\"button\" class=\"dw-g\" data-f=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/08\/Messenger_creation_C5C822CF-4162-46D4-A408-15FA3483DB50.jpeg\" data-anim\r\n              aria-label=\"Powi\u0119ksz zdj\u0119cie\" data-en-aria=\"Enlarge the photo\">\r\n        <img decoding=\"async\" src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/08\/Messenger_creation_C5C822CF-4162-46D4-A408-15FA3483DB50.jpeg\" alt=\"\" loading=\"lazy\"><\/button>\r\n      <button type=\"button\" class=\"dw-g\" data-f=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/08\/Messenger_creation_3A5E81F0-A8B7-49B3-A0E9-5723B199E9EE.jpeg\" data-anim\r\n              aria-label=\"Powi\u0119ksz zdj\u0119cie\" data-en-aria=\"Enlarge the photo\">\r\n        <img decoding=\"async\" src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/08\/Messenger_creation_3A5E81F0-A8B7-49B3-A0E9-5723B199E9EE.jpeg\" alt=\"\" loading=\"lazy\"><\/button>\r\n      <button type=\"button\" class=\"dw-g\" data-f=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/08\/Messenger_creation_0DA343BD-4508-49DD-995E-AA4AB80F707A.jpeg\" data-anim\r\n              aria-label=\"Powi\u0119ksz zdj\u0119cie\" data-en-aria=\"Enlarge the photo\">\r\n        <img decoding=\"async\" src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/08\/Messenger_creation_0DA343BD-4508-49DD-995E-AA4AB80F707A.jpeg\" alt=\"\" loading=\"lazy\"><\/button>\r\n      <button type=\"button\" class=\"dw-g\" data-f=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/08\/IMG-20250704-WA0003.jpg\" data-anim\r\n              aria-label=\"Powi\u0119ksz zdj\u0119cie\" data-en-aria=\"Enlarge the photo\">\r\n        <img decoding=\"async\" src=\"https:\/\/hilaris-blonie.pl\/wp-content\/uploads\/2025\/08\/IMG-20250704-WA0003.jpg\" alt=\"\" loading=\"lazy\"><\/button>\r\n    <\/div>\r\n  <\/div>\r\n  <!-- \u2550\u2550 CO Z TEGO WYNIKA \u2550\u2550 -->\r\n  <div class=\"hx-sec hx-sec--mist\">\r\n    <h2 class=\"hx-h\" data-anim data-en=\"What it adds up to\">Co z tego wynika<\/h2>\r\n    <p class=\"hx-sub\" data-anim data-en=\"Three things that speak for themselves after a few years at Hilaris.\">Trzy rzeczy, kt\u00f3re wida\u0107 najlepiej po latach nauki w Hilaris.<\/p>\r\n    <div class=\"dw-fakty\">\r\n      <div class=\"dw-fakt\" data-anim>\r\n        <span class=\"dw-fakt__n\">100%<\/span>\r\n        <div>\r\n          <b data-en=\"pass rate in Cambridge exams\">zdawalno\u015bci egzamin\u00f3w Cambridge<\/b>\r\n          <p data-en=\"Every pupil who sits a Cambridge exam at Hilaris passes it.\">Egzaminy Cambridge zdaj\u0105 u nas wszyscy przyst\u0119puj\u0105cy uczniowie.<\/p>\r\n          <a href=\"https:\/\/hilaris-blonie.pl\/?page_id=4171\"><span data-en=\"See the certificates\">Zobacz certyfikaty<\/span>\r\n            <svg viewBox=\"0 0 24 24\" width=\"15\" height=\"15\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><path d=\"M5 12h13M13 6l6 6-6 6\"\/><\/svg><\/a>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"dw-fakt\" data-anim>\r\n        <span class=\"dw-fakt__n\">24<\/span>\r\n        <div>\r\n          <b data-en=\"Cambridge certificates in our pupils\u2019 hands\">certyfikaty Cambridge w r\u0119kach uczni\u00f3w<\/b>\r\n          <p data-en=\"In October 2025, pupils from Years 3\u20138 received their certificates from their English teachers. Our pupils sit the exams every year.\">W pa\u017adzierniku 2025 roku uczniowie klas III\u2013VIII odebrali swoje certyfikaty z r\u0105k nauczycieli j\u0119zyka angielskiego. Do egzamin\u00f3w przyst\u0119pujemy co roku.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n      <div class=\"dw-fakt\" data-anim>\r\n        <span class=\"dw-fakt__ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><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\"\/><\/svg><\/span>\r\n        <div>\r\n          <b data-en=\"Small language groups\">Ma\u0142e grupy j\u0119zykowe<\/b>\r\n          <p data-en=\"For language lessons the class is split into groups \u2014 so every child speaks in every lesson, not once every few weeks.\">Na lekcjach j\u0119zyka klasa dzieli si\u0119 na grupy \u2014 dzi\u0119ki temu ka\u017cde dziecko m\u00f3wi na ka\u017cdej lekcji, a nie raz na kilka tygodni.<\/p>\r\n        <\/div>\r\n      <\/div>\r\n    <\/div>\r\n  <\/div>\r\n  <!-- \u2550\u2550 POWI\u0104ZANE STRONY \u2550\u2550 -->\r\n  <div class=\"hx-sec\">\r\n    <h2 class=\"hx-h\" data-anim data-en=\"Related pages\">Powi\u0105zane strony<\/h2>\r\n    <div class=\"hx-grid\" style=\"--cols:2;--cols-d:4\">\r\n      <a class=\"hx-tile\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=4171\" style=\"--c:#8B54C4\" data-anim>\r\n        <span class=\"hx-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><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\"\/><\/svg><\/span>\r\n        <b data-en=\"Cambridge exams\">Certyfikaty Cambridge<\/b><u data-en=\"KET and PET\">KET i PET<\/u><\/a>\r\n      <a class=\"hx-tile\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=2650\" style=\"--c:#D9A417\" data-anim>\r\n        <span class=\"hx-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><rect x=\"3.2\" y=\"3.2\" width=\"7.2\" height=\"7.2\" rx=\"2\"\/><rect x=\"13.6\" y=\"3.2\" width=\"7.2\" height=\"7.2\" rx=\"2\"\/><rect x=\"3.2\" y=\"13.6\" width=\"7.2\" height=\"7.2\" rx=\"2\"\/><circle cx=\"17.2\" cy=\"17.2\" r=\"3.9\"\/><\/svg><\/span>\r\n        <b data-en=\"After-school clubs\">Zaj\u0119cia dodatkowe<\/b><u data-en=\"20 to choose from\">20 propozycji<\/u><\/a>\r\n      <a class=\"hx-tile\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=339\" style=\"--c:#3E8E5A\" data-anim>\r\n        <span class=\"hx-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><circle cx=\"12\" cy=\"12\" r=\"8.6\"\/><circle cx=\"12\" cy=\"12\" r=\"4.4\"\/><circle cx=\"12\" cy=\"12\" r=\"1\"\/><\/svg><\/span>\r\n        <b data-en=\"Mission and vision\">Misja i wizja<\/b><u data-en=\"what we believe in\">w co wierzymy<\/u><\/a>\r\n      <a class=\"hx-tile\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=342\" style=\"--c:#2E86C8\" data-anim>\r\n        <span class=\"hx-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.9\" stroke-linecap=\"round\" stroke-linejoin=\"round\" aria-hidden=\"true\"><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\"\/><\/svg><\/span>\r\n        <b data-en=\"Our team\">Nasz zesp\u00f3\u0142<\/b><u data-en=\"who teaches here\">kto uczy<\/u><\/a>\r\n    <\/div>\r\n  <\/div>\r\n  <!-- \u2550\u2550 PASEK SZYBKICH AKCJI (telefon) \u2550\u2550 -->\r\n  <nav class=\"hx-bar\" aria-label=\"Szybkie akcje\">\r\n    <a href=\"https:\/\/hilaris-blonie.pl\/?page_id=345\">\r\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>\r\n      <span data-en=\"School\">Szko\u0142a<\/span><\/a>\r\n    <a class=\"is-main\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=4127\">\r\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>\r\n      <span data-en=\"Visit\">Spotkanie<\/span><\/a>\r\n    <a href=\"tel:+48224985525\">\r\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>\r\n      <span data-en=\"Call us\">Zadzwo\u0144<\/span><\/a>\r\n  <\/nav>\r\n <\/div>\r\n<\/section>\r\n<script>\r\n\/* ==========================================================================\r\n   HILARIS \u2014 DWUJ\u0118ZYCZNO\u015a\u0106: interakcje\r\n   Skrypt tylko ULEPSZA stron\u0119. Gdyby si\u0119 nie wykona\u0142, tre\u015b\u0107 i tak jest\r\n   widoczna (siedzi w HTML) \u2014 zniknie jedynie prze\u0142\u0105cznik j\u0119zyka,\r\n   ruch suwaka i powi\u0119kszanie zdj\u0119\u0107.\r\n   ========================================================================== *\/\r\n(function(){\r\n  'use strict';\r\n  function start(){\r\n    var ROOT = document.getElementById('hil-dwu');\r\n    if(!ROOT || ROOT.getAttribute('data-gotowe')) return;\r\n    ROOT.setAttribute('data-gotowe','1');\r\n    var q  = function(s){ return ROOT.querySelector(s); };\r\n    var qa = function(s){ return Array.prototype.slice.call(ROOT.querySelectorAll(s)); };\r\n    var maloRuchu = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n    \/* \u2550\u2550 1. PRZE\u0141\u0104CZNIK J\u0118ZYKA \u2550\u2550\r\n       Polski tekst zapami\u0119tujemy przy pierwszym prze\u0142\u0105czeniu, angielski\r\n       stoi w atrybucie data-en. Zamieniamy tylko czysty tekst, wi\u0119c \u017caden\r\n       element nie mo\u017ce mie\u0107 jednocze\u015bnie data-en i dzieci HTML. *\/\r\n    var jezyk = 'pl';\r\n    function ustawJezyk(l){\r\n      jezyk = l;\r\n      qa('[data-en]').forEach(function(el){\r\n        if(el.getAttribute('data-pl') === null) el.setAttribute('data-pl', el.textContent);\r\n        el.textContent = (l === 'en') ? el.getAttribute('data-en') : el.getAttribute('data-pl');\r\n      });\r\n      qa('[data-en-alt]').forEach(function(el){\r\n        if(el.getAttribute('data-pl-alt') === null) el.setAttribute('data-pl-alt', el.getAttribute('alt') || '');\r\n        el.setAttribute('alt', l === 'en' ? el.getAttribute('data-en-alt') : el.getAttribute('data-pl-alt'));\r\n      });\r\n      qa('[data-en-aria]').forEach(function(el){\r\n        if(el.getAttribute('data-pl-aria') === null) el.setAttribute('data-pl-aria', el.getAttribute('aria-label') || '');\r\n        el.setAttribute('aria-label', l === 'en' ? el.getAttribute('data-en-aria') : el.getAttribute('data-pl-aria'));\r\n      });\r\n      ROOT.setAttribute('lang', l);\r\n      opiszSuwak();\r\n      \/* plakietki \u201ePo polsku \/ Po angielsku\u201d zmieniaj\u0105 napis, a wi\u0119c i szeroko\u015b\u0107 \u2014\r\n         warstwy trzeba wyr\u00f3wna\u0107 na nowo (patrz \u201eWYR\u00d3WNANIE WARSTW\u201d ni\u017cej) *\/\r\n      wyrownaj();\r\n    }\r\n    var przelacznik = q('#dwLang');\r\n    if(przelacznik){\r\n      przelacznik.addEventListener('click', function(e){\r\n        var b = e.target.closest ? e.target.closest('button') : null;\r\n        if(!b) return;\r\n        var nowy = b.getAttribute('data-l');\r\n        if(nowy === jezyk) return;\r\n        przelacznik.querySelectorAll('button').forEach(function(x){\r\n          x.setAttribute('aria-pressed', x === b ? 'true' : 'false');\r\n        });\r\n        przelacznik.classList.toggle('en', nowy === 'en');\r\n        if(document.startViewTransition && !maloRuchu){\r\n          document.startViewTransition(function(){ ustawJezyk(nowy); });\r\n        } else { ustawJezyk(nowy); }\r\n      });\r\n    }\r\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\r\n       2. SUWAK PL \u21c4 EN\r\n       ---------------------------------------------------------------------\r\n       Warto\u015b\u0107 0\u2013100 to miejsce, od kt\u00f3rego zaczyna si\u0119 warstwa angielska:\r\n         0   \u2192 ca\u0142a scena po angielsku\r\n         100 \u2192 ca\u0142a scena po polsku\r\n         50  \u2192 p\u00f3\u0142 na p\u00f3\u0142\r\n       \u25b8 PRZECI\u0104GANIE (poprawka na telefon)\r\n       Dawniej ruchem sterowa\u0142 natywny <input type=\"range\">, rozci\u0105gni\u0119ty\r\n       niewidocznie na ca\u0142\u0105 scen\u0119. Na telefonie taki suwak reaguje dopiero,\r\n       gdy palec wyl\u0105duje dok\u0142adnie na uchwycie \u2014 a przy skrajnym prawym\r\n       po\u0142o\u017ceniu uchwyt wystaje poza kraw\u0119d\u017a i nie ma czego dotkn\u0105\u0107. St\u0105d\r\n       wra\u017cenie, \u017ce suwak \u201esi\u0119 zacina\u201d.\r\n       Teraz przeci\u0105ganie obs\u0142ugujemy sami, zdarzeniami wska\u017anika (pointer),\r\n       kt\u00f3re dzia\u0142aj\u0105 tak samo dla palca, myszy i rysika:\r\n         \u2022 pointerdown w DOWOLNYM miejscu sceny \u2192 suwak natychmiast skacze\r\n           w to miejsce i zaczyna si\u0119 przeci\u0105ganie,\r\n         \u2022 setPointerCapture sprawia, \u017ce palec mo\u017ce wyjecha\u0107 poza scen\u0119\r\n           i ruch dalej dzia\u0142a (kluczowe przy ci\u0105gni\u0119ciu do samej kraw\u0119dzi),\r\n         \u2022 touch-action:pan-y w CSS zostawia nam gest poziomy, a pionowy\r\n           oddaje przegl\u0105darce, wi\u0119c strona normalnie si\u0119 przewija.\r\n       Natywny suwak zosta\u0142 pod spodem (pointer-events:none) wy\u0142\u0105cznie po to,\r\n       \u017ceby da\u0142o si\u0119 sterowa\u0107 strza\u0142kami z klawiatury i \u017ceby czytniki ekranu\r\n       widzia\u0142y normaln\u0105 kontrolk\u0119.\r\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 *\/\r\n    var scena  = q('#dwxScena'),\r\n        enWar  = q('#dwxEn'),\r\n        uchwyt = q('#dwxUchwyt'),\r\n        zakres = q('#dwxZakres');\r\n    \/* Po\u0142o\u017cenie spoczynkowe suwaka: r\u00f3wno po \u015brodku, na ka\u017cdym urz\u0105dzeniu.\r\n       Wcze\u015bniej na telefonie ko\u0144czy\u0142 skrajnie po prawej (100), czyli chowa\u0142\r\n       si\u0119 przy samej kraw\u0119dzi i wygl\u0105da\u0142, jakby go nie by\u0142o. *\/\r\n    var START = 50;\r\n    var wartosc = 100;\r\n    function opiszSuwak(){\r\n      if(!zakres) return;\r\n      zakres.setAttribute('aria-valuetext',\r\n        (100 - Math.round(wartosc)) + '% ' + (jezyk === 'pl' ? 'wersji angielskiej' : 'English'));\r\n    }\r\n    function przesun(v){\r\n      v = Math.max(0, Math.min(100, +v || 0));\r\n      wartosc = v;\r\n      if(enWar)  enWar.style.clipPath = 'inset(0 0 0 ' + v.toFixed(2) + '%)';\r\n      if(uchwyt) uchwyt.style.left = v.toFixed(2) + '%';\r\n      if(zakres) zakres.value = v;\r\n      opiszSuwak();\r\n    }\r\n    \/* \u2500\u2500 P\u0141YNNY PRZEJAZD \u2500\u2500\r\n       Zamiast \u0142a\u0144cucha przej\u015b\u0107 CSS (kt\u00f3ry dawa\u0142 efekt \u201eskok\u00f3w na boki\u201d)\r\n       animujemy warto\u015b\u0107 klatka po klatce z wyg\u0142adzeniem easeInOutCubic:\r\n       ruch startuje i ko\u0144czy si\u0119 mi\u0119kko, bez szarpni\u0119cia i bez zmiany\r\n       kierunku w po\u0142owie. *\/\r\n    var animId = null;\r\n    function stopAnim(){\r\n      if(animId){ window.cancelAnimationFrame(animId); animId = null; }\r\n    }\r\n    function plynnieDo(cel, czas, potem){\r\n      stopAnim();\r\n      if(maloRuchu){ przesun(cel); if(potem) potem(); return; }\r\n      var od = wartosc, t0 = null;\r\n      function klatka(t){\r\n        if(t0 === null) t0 = t;\r\n        var k = Math.min(1, (t - t0) \/ czas);\r\n        var e = (k < .5) ? 4 * k * k * k : 1 - Math.pow(-2 * k + 2, 3) \/ 2;\r\n        przesun(od + (cel - od) * e);\r\n        if(k < 1){ animId = window.requestAnimationFrame(klatka); }\r\n        else { animId = null; if(potem) potem(); }\r\n      }\r\n      animId = window.requestAnimationFrame(klatka);\r\n    }\r\n    \/* \u2500\u2500 PRZECI\u0104GANIE PALCEM \/ MYSZ\u0104 \u2500\u2500 *\/\r\n    if(scena){\r\n      var ciagnie = false;\r\n      function zPozycji(clientX){\r\n        var b = scena.getBoundingClientRect();\r\n        if(!b.width) return null;\r\n        return ((clientX - b.left) \/ b.width) * 100;\r\n      }\r\n      function odWskaznika(e){\r\n        var v = zPozycji(e.clientX);\r\n        if(v === null) return;\r\n        przesun(v);\r\n      }\r\n      scena.addEventListener('pointerdown', function(e){\r\n        \/* tylko lewy przycisk myszy; palec i rysik nie maj\u0105 numeru przycisku *\/\r\n        if(e.pointerType === 'mouse' && e.button !== 0) return;\r\n        ciagnie = true;\r\n        stopAnim();                       \/* u\u017cytkownik przejmuje kontrol\u0119 *\/\r\n        try{ scena.setPointerCapture(e.pointerId); }catch(err){}\r\n        odWskaznika(e);\r\n      });\r\n      scena.addEventListener('pointermove', function(e){\r\n        if(!ciagnie) return;\r\n        \/* blokujemy zaznaczanie tekstu i \u201eprzeci\u0105ganie\u201d obrazk\u00f3w w trakcie *\/\r\n        if(e.cancelable) e.preventDefault();\r\n        odWskaznika(e);\r\n      });\r\n      function koniecCiagniecia(e){\r\n        if(!ciagnie) return;\r\n        ciagnie = false;\r\n        try{ scena.releasePointerCapture(e.pointerId); }catch(err){}\r\n      }\r\n      scena.addEventListener('pointerup', koniecCiagniecia);\r\n      scena.addEventListener('pointercancel', koniecCiagniecia);\r\n      scena.addEventListener('lostpointercapture', function(){ ciagnie = false; });\r\n    }\r\n    \/* klawiatura \u2014 nadal przez natywny suwak (Tab, potem strza\u0142ki) *\/\r\n    if(zakres){\r\n      zakres.addEventListener('input', function(){ stopAnim(); przesun(this.value); });\r\n      zakres.addEventListener('keydown', function(){ stopAnim(); });\r\n    }\r\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\r\n       WYR\u00d3WNANIE WARSTWY POLSKIEJ I ANGIELSKIEJ\r\n       ---------------------------------------------------------------------\r\n       Obie warstwy le\u017c\u0105 w tej samej kom\u00f3rce siatki, jedna nad drug\u0105, i ka\u017cda\r\n       ustawia swoj\u0105 tre\u015b\u0107 pionowo na \u015brodku. K\u0142opot w tym, \u017ce ten sam tekst\r\n       po polsku i po angielsku ma inn\u0105 d\u0142ugo\u015b\u0107, wi\u0119c po zawini\u0119ciu wychodzi\r\n       inna liczba wierszy, a co za tym idzie \u2014 inna wysoko\u015b\u0107 ca\u0142ej warstwy.\r\n       Przy wy\u015brodkowaniu obu niezale\u017cnie od siebie napisy przestaj\u0105 sta\u0107\r\n       w jednej linii: nag\u0142\u00f3wek angielski wypada wy\u017cej albo ni\u017cej ni\u017c polski,\r\n       a na w\u0105skim ekranie potrafi to by\u0107 r\u00f3\u017cnica nawet dw\u00f3ch wierszy. Rozjazd\r\n       zale\u017cy od szeroko\u015bci ekranu i kroju pisma, wi\u0119c nie da si\u0119 go naprawi\u0107\r\n       na sztywno w CSS \u2014 trzeba zmierzy\u0107 realny uk\u0142ad.\r\n       Robimy wi\u0119c tak: dla ka\u017cdej pary odpowiadaj\u0105cych sobie element\u00f3w\r\n       (plakietka, temat, zdanie, lista s\u0142\u00f3wek) bierzemy WI\u0118KSZ\u0104 z dw\u00f3ch\r\n       wysoko\u015bci i nadajemy j\u0105 obu. Wtedy ka\u017cdy kawa\u0142ek zajmuje tyle samo\r\n       miejsca po obu stronach i wszystko stoi r\u00f3wno \u2014 niezale\u017cnie od j\u0119zyka,\r\n       urz\u0105dzenia i tego, jak akurat zawin\u0105\u0142 si\u0119 tekst.\r\n       Pomiary i zapisy s\u0105 rozdzielone (najpierw zerujemy wszystkie, potem\r\n       mierzymy wszystkie, na ko\u0144cu ustawiamy wszystkie), \u017ceby przegl\u0105darka\r\n       nie musia\u0142a przelicza\u0107 uk\u0142adu strony po ka\u017cdej pojedynczej zmianie.\r\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 *\/\r\n    function wyrownaj(){\r\n      if(!scena) return;\r\n      var pl = scena.querySelector('.dwx-warstwa--pl'),\r\n          en = scena.querySelector('.dwx-warstwa--en');\r\n      if(!pl || !en) return;\r\n      \/* true = element siedzi w widocznym przyk\u0142adzie lekcji (.dwx-tresc) *\/\r\n      var czesci = [['.dwx-flaga', false], ['.dwx-temat', true],\r\n                    ['.dwx-zdanie', true], ['.dwx-slowa', true]];\r\n      var pary = [];\r\n      czesci.forEach(function(c){\r\n        var pre = c[1] ? '.dwx-tresc:not([hidden]) ' : '';\r\n        var a = pl.querySelector(pre + c[0]), b = en.querySelector(pre + c[0]);\r\n        if(a && b) pary.push({a:a, b:b, h:0});\r\n      });\r\n      if(!pary.length) return;\r\n      pary.forEach(function(p){ p.a.style.minHeight = ''; p.b.style.minHeight = ''; });\r\n      pary.forEach(function(p){ p.h = Math.max(p.a.offsetHeight, p.b.offsetHeight); });\r\n      pary.forEach(function(p){\r\n        p.a.style.minHeight = p.h + 'px';\r\n        p.b.style.minHeight = p.h + 'px';\r\n      });\r\n    }\r\n    \/* wyb\u00f3r przyk\u0142adu lekcji *\/\r\n    var zakladki = q('#dwxZakladki');\r\n    function pokazPrzyklad(i){\r\n      qa('.dwx-tresc').forEach(function(el){\r\n        el.hidden = (el.getAttribute('data-i') !== String(i));\r\n      });\r\n      qa('.dwx-zakladka').forEach(function(b){\r\n        b.setAttribute('aria-pressed', b.getAttribute('data-i') === String(i) ? 'true' : 'false');\r\n      });\r\n      wyrownaj();          \/* nowy przyk\u0142ad = nowe d\u0142ugo\u015bci tekstu *\/\r\n    }\r\n    if(zakladki){\r\n      zakladki.addEventListener('click', function(e){\r\n        var b = e.target.closest ? e.target.closest('.dwx-zakladka') : null;\r\n        if(!b) return;\r\n        pokazPrzyklad(b.getAttribute('data-i'));\r\n      });\r\n    }\r\n    \/* przyciski \u201epoka\u017c ca\u0142o\u015b\u0107 po \u2026\u201d *\/\r\n    qa('.dwx-skrot').forEach(function(b){\r\n      b.addEventListener('click', function(){ plynnieDo(+b.getAttribute('data-do'), 700); });\r\n    });\r\n    \/* kafelek przedmiotu w opisie etapu \u2192 odpowiedni przyk\u0142ad w suwaku *\/\r\n    var etapy = q('#dwStages');\r\n    if(etapy){\r\n      etapy.addEventListener('click', function(e){\r\n        var b = e.target.closest ? e.target.closest('button.dw-s') : null;\r\n        if(!b) return;\r\n        pokazPrzyklad(b.getAttribute('data-do'));\r\n        var cel = q('#dwLekcja');\r\n        if(cel && cel.scrollIntoView){\r\n          cel.scrollIntoView({behavior: maloRuchu ? 'auto' : 'smooth', block:'start'});\r\n        }\r\n        window.setTimeout(function(){ plynnieDo(START, 900); }, maloRuchu ? 0 : 520);\r\n      });\r\n    }\r\n    \/* \u2550\u2550 3. POWI\u0118KSZENIE ZDJ\u0118CIA \u2550\u2550\r\n       Okno doklejamy do <body>, \u017ceby \u017caden przyklejony nag\u0142\u00f3wek go nie zas\u0142oni\u0142. *\/\r\n    var galeria = q('#dwGal');\r\n    if(galeria){\r\n      var lb = document.createElement('div');\r\n      lb.className = 'hx-lb-dwu';\r\n      lb.setAttribute('role','dialog');\r\n      lb.setAttribute('aria-modal','true');\r\n      lb.innerHTML = '<button type=\"button\" class=\"hx-lb-dwu__x\" aria-label=\"Zamknij\">'\r\n        + '<svg viewBox=\"0 0 24 24\"><path d=\"M6 6l12 12M18 6 6 18\"\/><\/svg><\/button><img decoding=\"async\" src=\"\" alt=\"\">';\r\n      document.body.appendChild(lb);\r\n      var lbImg = lb.querySelector('img'), lbX = lb.querySelector('.hx-lb-dwu__x');\r\n      var pozycja = 0, wracamDo = null;\r\n      function otworz(src, zrodlo){\r\n        wracamDo = zrodlo || null;\r\n        pozycja = window.pageYOffset || document.documentElement.scrollTop || 0;\r\n        lbImg.src = src;\r\n        lbX.setAttribute('aria-label', jezyk === 'pl' ? 'Zamknij powi\u0119kszenie' : 'Close the preview');\r\n        lb.classList.add('on');\r\n        document.body.style.overflow = 'hidden';\r\n        window.setTimeout(function(){ lbX.focus(); }, 60);\r\n      }\r\n      function zamknij(){\r\n        lb.classList.remove('on');\r\n        document.body.style.overflow = '';\r\n        window.scrollTo(0, pozycja);\r\n        if(wracamDo && wracamDo.focus) wracamDo.focus();\r\n        window.setTimeout(function(){ lbImg.src = ''; }, 320);\r\n      }\r\n      galeria.addEventListener('click', function(e){\r\n        var g = e.target.closest ? e.target.closest('.dw-g') : null;\r\n        if(g) otworz(g.getAttribute('data-f'), g);\r\n      });\r\n      lbX.addEventListener('click', zamknij);\r\n      lb.addEventListener('click', function(e){ if(e.target === lb || e.target === lbImg) zamknij(); });\r\n      document.addEventListener('keydown', function(e){\r\n        if(e.key === 'Escape' && lb.classList.contains('on')) zamknij();\r\n      });\r\n    }\r\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\r\n       4. ANIMACJE WEJ\u015aCIA SEKCJI\r\n       ---------------------------------------------------------------------\r\n       Wcze\u015bniej nowoczesne przegl\u0105darki dostawa\u0142y wersj\u0119 natywn\u0105\r\n       (\u201eanimation-timeline: view()\u201d), a reszta \u2014 t\u0119 poni\u017cej. To w\u0142a\u015bnie\r\n       wersja natywna powodowa\u0142a, \u017ce na telefonie d\u00f3\u0142 strony robi\u0142 si\u0119 blady\r\n       i ju\u017c taki zostawa\u0142 (szerzej w komentarzu przy stylach). Teraz zawsze\r\n       dzia\u0142a poni\u017cszy, sterowany skryptem wariant, z trzema zabezpieczeniami:\r\n         \u2022 element ods\u0142ania si\u0119, gdy tylko pojawi si\u0119 w polu widzenia,\r\n         \u2022 po 4 sekundach ods\u0142aniane jest wszystko, cokolwiek by si\u0119 sta\u0142o,\r\n         \u2022 po zako\u0144czeniu animacji atrybut data-anim jest USUWANY, wi\u0119c\r\n           element wraca do zupe\u0142nie zwyk\u0142ego stanu. To ostatnie ma znaczenie\r\n           dla kafli \u201ePowi\u0105zane strony\u201d: dop\u00f3ki atrybut istnia\u0142, jego regu\u0142a\r\n           \u201etransform:none\u201d by\u0142a silniejsza ni\u017c uniesienie kafla przy\r\n           najechaniu i efekt si\u0119 nie pokazywa\u0142.\r\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 *\/\r\n    function odslon(el){\r\n      el.classList.add('in');\r\n      \/* 800 ms > czas przej\u015bcia (600 ms), wi\u0119c nic nie \u201eprzeskoczy\u201d *\/\r\n      window.setTimeout(function(){ el.removeAttribute('data-anim'); }, 800);\r\n    }\r\n    if(!maloRuchu && 'IntersectionObserver' in window){\r\n      ROOT.classList.add('dw-js');\r\n      var io = new IntersectionObserver(function(w){\r\n        w.forEach(function(x, n){\r\n          if(!x.isIntersecting) return;\r\n          io.unobserve(x.target);\r\n          window.setTimeout(function(){ odslon(x.target); }, n * 70);\r\n        });\r\n      }, {threshold:.12, rootMargin:'0px 0px -5% 0px'});\r\n      qa('[data-anim]').forEach(function(el){ io.observe(el); });\r\n      \/* bezpiecznik: po 4 s wszystko jest widoczne, cokolwiek by si\u0119 sta\u0142o *\/\r\n      window.setTimeout(function(){ qa('[data-anim]').forEach(odslon); }, 4000);\r\n    }\r\n    \/* \u2550\u2550 5. ZDJ\u0118CIA W PASACH: kadr rozsuwa si\u0119 przy wje\u017adzie w ekran \u2550\u2550 *\/\r\n    var pasy = qa('.dw-band');\r\n    if(pasy.length){\r\n      if('IntersectionObserver' in window && !maloRuchu){\r\n        var io2 = new IntersectionObserver(function(w){\r\n          w.forEach(function(x){\r\n            if(!x.isIntersecting) return;\r\n            x.target.classList.add('widoczny'); io2.unobserve(x.target);\r\n          });\r\n        }, {threshold:.18});\r\n        pasy.forEach(function(el){ io2.observe(el); });\r\n      }\r\n      window.setTimeout(function(){\r\n        pasy.forEach(function(el){ el.classList.add('widoczny'); });\r\n      }, 3000);\r\n    }\r\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\r\n       6. PRZESUWANIE ZDJ\u0118\u0106 W PASACH W RYTM PRZEWIJANIA\r\n       ---------------------------------------------------------------------\r\n       TELEFON \u2014 jak dot\u0105d: delikatne bujanie w pionie o \u00b122 px.\r\n       KOMPUTER \u2014 w\u0142a\u015bciwy efekt ods\u0142aniania. Zdj\u0119cie jest o po\u0142ow\u0119 wy\u017csze\r\n       od pasa (150%, patrz CSS), wi\u0119c ma zapas: przewijaj\u0105c stron\u0119, widzimy\r\n       kolejne partie fotografii zamiast ci\u0105gle tego samego wycinka.\r\n       ZASIEG_PAS m\u00f3wi, JAKA CZ\u0118\u015a\u0106 tego zapasu jest wykorzystana. Celowo nie\r\n       100%: przy pe\u0142nym zakresie kadr doje\u017cd\u017ca\u0142by do samej kraw\u0119dzi zdj\u0119cia\r\n       i na ko\u0144cach ruchu wida\u0107 by\u0142oby sufit albo pod\u0142og\u0119 zamiast ludzi.\r\n       Zwi\u0119ksz, je\u015bli ruch ma by\u0107 mocniejszy; zmniejsz, je\u015bli delikatniejszy.\r\n       \u2500\u2500 DLACZEGO TAK, A NIE PRO\u015aCIEJ \u2500\u2500\r\n       a) wysoko\u015b\u0107 okna (WH) zapami\u0119tujemy zamiast czyta\u0107 przy ka\u017cdej klatce:\r\n          na telefonie pasek adresu chowa si\u0119 w trakcie przewijania i okno\r\n          ro\u015bnie o kilkadziesi\u0105t pikseli, co powodowa\u0142oby przeskok obrazu;\r\n       b) najpierw robimy WSZYSTKIE pomiary, potem WSZYSTKIE zapisy stylu \u2014\r\n          przeplatanie jednego z drugim zmusza przegl\u0105dark\u0119 do przeliczania\r\n          uk\u0142adu strony po ka\u017cdym zapisie i gubi klatki;\r\n       c) sta\u0142e wymiary (wysoko\u015b\u0107 zdj\u0119cia i pasa) mierzymy raz, nie co klatk\u0119.\r\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 *\/\r\n    var ZASIEG_PAS = 0.6;\r\n    var PROG_OKNA = 150;   \/* o ile px musi zmieni\u0107 si\u0119 wysoko\u015b\u0107 okna, \u017ceby\r\n                              uzna\u0107 to za obr\u00f3t ekranu, a nie pasek adresu *\/\r\n    var obrazy = qa('.dw-band img').map(function(img){\r\n      return {img:img, pas:img.parentNode, H:0, C:0, ost:null};\r\n    });\r\n    if(obrazy.length && !maloRuchu){\r\n      var czeka = false,\r\n          WH = window.innerHeight,\r\n          WW = window.innerWidth,\r\n          duzyEkran = window.matchMedia('(min-width:900px)');\r\n      function zmierz(){\r\n        obrazy.forEach(function(o){\r\n          o.H = o.img.offsetHeight;\r\n          o.C = o.pas.offsetHeight;\r\n        });\r\n      }\r\n      function przesunPasy(){\r\n        var duzy = duzyEkran.matches, plan = [], i;\r\n        \/* FAZA 1 \u2014 same odczyty *\/\r\n        for(i = 0; i < obrazy.length; i++){\r\n          plan.push({o:obrazy[i], r:obrazy[i].pas.getBoundingClientRect()});\r\n        }\r\n        \/* FAZA 2 \u2014 same zapisy *\/\r\n        for(i = 0; i < plan.length; i++){\r\n          var o = plan[i].o, r = plan[i].r, y;\r\n          if(r.bottom < -200 || r.top > WH + 200) continue;\r\n          if(duzy && o.H > o.C + 4){\r\n            \/* post\u0119p 0\u21921, gdy \u015brodek pasa w\u0119druje przez ekran z do\u0142u do g\u00f3ry *\/\r\n            var p = (WH * 0.92 - (r.top + r.height \/ 2)) \/ (WH * 0.78);\r\n            p = Math.max(0, Math.min(1, p));\r\n            y = (o.C - o.H) * ZASIEG_PAS * (1 - p);\r\n          } else {\r\n            y = ((r.top + r.height \/ 2 - WH \/ 2) \/ WH) * -22;\r\n          }\r\n          var txt = 'translate3d(0,' + y.toFixed(1) + 'px,0)';\r\n          if(txt === o.ost) continue;\r\n          o.ost = txt;\r\n          o.img.style.transform = txt;\r\n        }\r\n      }\r\n      window.addEventListener('scroll', function(){\r\n        if(czeka) return; czeka = true;\r\n        window.requestAnimationFrame(function(){ przesunPasy(); czeka = false; });\r\n      }, {passive:true});\r\n      window.addEventListener('resize', function(){\r\n        \/* zmiana szeroko\u015bci = realna zmiana uk\u0142adu, przeliczamy zawsze;\r\n           sam\u0105 zmian\u0119 wysoko\u015bci ignorujemy, dop\u00f3ki jest ma\u0142a (pasek adresu) *\/\r\n        var nW = window.innerWidth, nH = window.innerHeight;\r\n        if(nW === WW && Math.abs(nH - WH) < PROG_OKNA) return;\r\n        WW = nW; WH = nH;\r\n        zmierz(); przesunPasy();\r\n      });\r\n      obrazy.forEach(function(o){\r\n        if(o.img.complete) return;\r\n        o.img.addEventListener('load', function(){ zmierz(); przesunPasy(); }, {once:true});\r\n      });\r\n      zmierz();\r\n      przesunPasy();\r\n    }\r\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\r\n       7. STAN POCZ\u0104TKOWY I WEJ\u015aCIE SUWAKA\r\n       ---------------------------------------------------------------------\r\n       Scena startuje w ca\u0142o\u015bci po polsku, a gdy wjedzie w ekran, przeje\u017cd\u017ca\r\n       JEDNYM p\u0142ynnym ruchem do po\u0142o\u017cenia spoczynkowego \u2014 dok\u0142adnie na \u015brodek.\r\n       Wcze\u015bniej by\u0142y to trzy skoki na boki (50 \u2192 66 \u2192 34 \u2192 50), st\u0105d wra\u017cenie\r\n       agresywnego szarpania; teraz kierunek nie zmienia si\u0119 ani razu.\r\n       Na telefonie ruch ko\u0144czy\u0142 si\u0119 wcze\u015bniej przy samej prawej kraw\u0119dzi\r\n       (warto\u015b\u0107 100), przez co suwak chowa\u0142 si\u0119 poza kadr i wygl\u0105da\u0142, jakby\r\n       znikn\u0105\u0142. Teraz na ka\u017cdym urz\u0105dzeniu zatrzymuje si\u0119 na \u015brodku.\r\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 *\/\r\n    \/* Wyr\u00f3wnanie warstw liczymy z realnego uk\u0142adu, wi\u0119c musimy je powt\u00f3rzy\u0107\r\n       zawsze, gdy ten uk\u0142ad mo\u017ce si\u0119 zmieni\u0107:\r\n         \u2022 po zmianie szeroko\u015bci okna \/ obrocie telefonu (z op\u00f3\u017anieniem, \u017ceby\r\n           nie liczy\u0107 przy ka\u017cdym pikselu przeci\u0105gania okna),\r\n         \u2022 po doczytaniu czcionki Source Serif 4 \u2014 do tego czasu przegl\u0105darka\r\n           sk\u0142ada tekst zapasowym krojem o innych proporcjach, wi\u0119c pomiar\r\n           zrobiony za wcze\u015bnie by\u0142by nieaktualny. *\/\r\n    var czekaWyrownanie = null;\r\n    window.addEventListener('resize', function(){\r\n      window.clearTimeout(czekaWyrownanie);\r\n      czekaWyrownanie = window.setTimeout(wyrownaj, 160);\r\n    });\r\n    if(document.fonts && document.fonts.ready && document.fonts.ready.then){\r\n      document.fonts.ready.then(wyrownaj).catch(function(){});\r\n    }\r\n    wyrownaj();\r\n    \/* zapas na wolniejsze \u0142\u0105cza: gdyby czcionka dosz\u0142a p\u00f3\u017aniej *\/\r\n    window.setTimeout(wyrownaj, 1200);\r\n    przesun(100);\r\n    if(scena && 'IntersectionObserver' in window && !maloRuchu){\r\n      var pokazano = false;\r\n      var io3 = new IntersectionObserver(function(w){\r\n        w.forEach(function(x){\r\n          if(!x.isIntersecting || pokazano) return;\r\n          pokazano = true; io3.disconnect();\r\n          window.setTimeout(function(){ plynnieDo(START, 1400); }, 260);\r\n        });\r\n      }, {threshold:.35});\r\n      io3.observe(scena);\r\n    } else {\r\n      przesun(START);\r\n    }\r\n    \/* je\u017celi na stronie jest rdze\u0144 Hilaris, korzystamy z jego funkcji porz\u0105dkuj\u0105cej *\/\r\n    if(window.HX && HX.sierotki){ try{ HX.sierotki(ROOT); }catch(e){} }\r\n  }\r\n  function odpal(){\r\n    try{ start(); }\r\n    catch(e){ if(window.console && console.error) console.error('Hilaris \u2014 dwuj\u0119zyczno\u015b\u0107:', e); }\r\n  }\r\n  if(document.readyState === 'loading'){\r\n    document.addEventListener('DOMContentLoaded', odpal);\r\n  } else {\r\n    odpal();\r\n  }\r\n  \/* Elementor potrafi wstawi\u0107 widget po za\u0142adowaniu strony (podgl\u0105d na \u017cywo) *\/\r\n  if(window.jQuery){ jQuery(window).on('elementor\/frontend\/init', odpal); }\r\n})();\r\n<\/script>\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 Dwuj\u0119zyczno\u015b\u0107 w Hilaris Dwuj\u0119zyczno\u015b\u0107 oznacza u nas realizowanie tre\u015bci edukacyjnych zar\u00f3wno po polsku, jak i po angielsku. J\u0119zyk angielski jest nauczany w wymiarze rozszerzonym \u2014 tak, aby uczniowie opanowali go w stopniu pozwalaj\u0105cym na swobodn\u0105, samodzieln\u0105 komunikacj\u0119. POLSKI ENGLISH Ca\u0142a ta strona jest dwuj\u0119zyczna \u2014 prze\u0142\u0105cznik powy\u017cej zmienia jej j\u0119zyk. Angielski [&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-357","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=\/wp\/v2\/pages\/357","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=357"}],"version-history":[{"count":121,"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=\/wp\/v2\/pages\/357\/revisions"}],"predecessor-version":[{"id":7300,"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=\/wp\/v2\/pages\/357\/revisions\/7300"}],"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=357"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}