{"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-19T03:10:06","modified_gmt":"2026-08-19T01:10:06","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\r\n     HILARIS \u2014 SZKO\u0141A \u2192 DWUJ\u0118ZYCZNO\u015a\u0106 (page_id=357)\r\n\r\n     Jeden widget HTML w Elementorze. Blok jest w pe\u0142ni samodzielny:\r\n\r\n     nie wymaga rdzenia (hilaris-CORE) ani \u017cadnych dodatkowych plik\u00f3w.\r\n\r\n     ---------------------------------------------------------------------------\r\n\r\n     WA\u017bNA ZMIANA W TEJ WERSJI\r\n\r\n     Ca\u0142a tre\u015b\u0107 jest zapisana wprost w kodzie HTML. Wcze\u015bniej rysowa\u0142 j\u0105\r\n\r\n     JavaScript i gdy skrypt nie m\u00f3g\u0142 si\u0119 wykona\u0107 (wtyczka optymalizuj\u0105ca,\r\n\r\n     filtr bezpiecze\u0144stwa albo op\u00f3\u017anianie skrypt\u00f3w), na stronie zostawa\u0142y\r\n\r\n     puste kontenery i kreski \u201e\u2014\u201d. Teraz strona wygl\u0105da i czyta si\u0119\r\n\r\n     poprawnie NAWET Z WY\u0141\u0104CZONYM JAVASCRIPTEM \u2014 po polsku, ze wszystkimi\r\n\r\n     sekcjami. Skrypt jedynie dodaje interakcje:\r\n\r\n       \u2022 prze\u0142\u0105cznik POLSKI \/ ENGLISH,\r\n\r\n       \u2022 suwak PL \u21c4 EN z przyk\u0142adami lekcji,\r\n\r\n       \u2022 powi\u0119kszanie zdj\u0119\u0107,\r\n\r\n       \u2022 animacje wej\u015bcia sekcji.\r\n\r\n     ---------------------------------------------------------------------------\r\n\r\n     GDZIE EDYTOWA\u0106 TRE\u015a\u0106\r\n\r\n     Polski tekst stoi zwyczajnie w HTML, a jego angielski odpowiednik\r\n\r\n     siedzi obok, w atrybucie data-en=\"\u2026\". \u017beby poprawi\u0107 zdanie, wystarczy\r\n\r\n     zmieni\u0107 jedno i drugie w tym samym miejscu. Analogicznie:\r\n\r\n       data-en-alt=\"\u2026\"  \u2014 opis zdj\u0119cia,\r\n\r\n       data-en-aria=\"\u2026\" \u2014 etykieta dla czytnik\u00f3w ekranu.\r\n\r\n     ========================================================================== -->\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\r\n\r\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\r\n\r\n<link rel=\"stylesheet\"\r\n\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\r\n<style>\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\r\n   STYLE ZAPASOWE \u2014 DZIA\u0141ANIE BEZ RDZENIA\r\n\r\n   ---------------------------------------------------------------------------\r\n\r\n   Ten blok by\u0142 wcze\u015bniej zale\u017cny od pliku hilaris-CORE: stamt\u0105d bra\u0142 kolory\r\n\r\n   i podstawowe klasy (hx-app, hx-sec, hx-h, hx-grid, hx-tile\u2026). Je\u015bli na\r\n\r\n   danej podstronie rdzenia nie ma, kontenery by\u0142y puste, a napisy bia\u0142e\r\n\r\n   na bia\u0142ym tle. Poni\u017csze regu\u0142y s\u0105 zapisane w :where(), czyli maj\u0105 ZEROW\u0104\r\n\r\n   moc \u2014 gdy rdze\u0144 jest wczytany, to jego ustawienia wygrywaj\u0105, a gdy go nie\r\n\r\n   ma, blok wygl\u0105da i dzia\u0142a tak samo. Nic nie trzeba zmienia\u0107 r\u0119cznie.\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\r\n:where(.hx-dwu){\r\n\r\n  --navy:#0E2B4D; --gold:#C9A227; --gold-l:#F0D98A; --paper:#ffffff;\r\n\r\n  --mist:#F3F6F8; --line:#E2E8EC; --ink:#12324B; --ink-2:#5A6E7E;\r\n\r\n  --r:16px; --pad:18px;\r\n\r\n  display:block;color:var(--ink,#12324B);\r\n\r\n  font-family:'Figtree',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;\r\n\r\n  line-height:1.55;\r\n\r\n}\r\n\r\n:where(.hx-dwu) .hx-app{max-width:520px;margin:0 auto;background:#fff;}\r\n\r\n:where(.hx-dwu) .hx-sec{padding:34px var(--pad,18px);}\r\n\r\n:where(.hx-dwu) .hx-sec--mist{background:var(--mist,#F3F6F8);}\r\n\r\n:where(.hx-dwu) .hx-h{font-size:clamp(1.35rem,3vw,2rem);margin:0 0 8px;color:var(--navy,#0E2B4D);\r\n\r\n  line-height:1.2;}\r\n\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\r\n:where(.hx-dwu) .hx-kicker{color:var(--gold-l,#F0D98A);font-weight:800;letter-spacing:.14em;\r\n\r\n  text-transform:uppercase;font-size:.7rem;margin:0;}\r\n\r\n:where(.hx-dwu) .hx-back{display:inline-flex;gap:8px;align-items:center;\r\n\r\n  padding:12px var(--pad,18px);color:var(--ink-2,#5A6E7E);text-decoration:none;font-weight:700;\r\n\r\n  font-size:.9rem;}\r\n\r\n:where(.hx-dwu) .hx-back svg{width:18px;height:18px;}\r\n\r\n:where(.hx-dwu) .hx-grid{display:grid;gap:12px;\r\n\r\n  grid-template-columns:repeat(var(--cols,1),minmax(0,1fr));}\r\n\r\n:where(.hx-dwu) .hx-card{display:grid;grid-template-columns:auto minmax(0,1fr);gap:13px;\r\n\r\n  align-items:start;background:var(--paper,#fff);border:1px solid var(--line,#E2E8EC);\r\n\r\n  border-radius:var(--r,16px);padding:16px;}\r\n\r\n:where(.hx-dwu) .hx-card--acc{border-left:4px solid var(--c,#2E86C8);}\r\n\r\n:where(.hx-dwu) .hx-card p{font-size:.92rem;line-height:1.6;color:var(--ink-2,#5A6E7E);margin:0;}\r\n\r\n:where(.hx-dwu) .hx-tile{display:block;padding:18px;background:var(--paper,#fff);\r\n\r\n  border:1px solid var(--line,#E2E8EC);border-radius:var(--r,16px);\r\n\r\n  text-decoration:none;color:inherit;}\r\n\r\n:where(.hx-dwu) .hx-tile b{display:block;margin-top:9px;font-weight:700;font-size:.98rem;\r\n\r\n  color:var(--navy,#0E2B4D);}\r\n\r\n:where(.hx-dwu) .hx-tile u{text-decoration:none;display:block;font-size:.8rem;\r\n\r\n  color:var(--ink-2,#5A6E7E);margin-top:2px;}\r\n\r\n:where(.hx-dwu) .hx-ic svg{width:26px;height:26px;stroke:var(--c,#2E86C8);fill:none;stroke-width:1.9;}\r\n\r\n:where(.hx-dwu) .hx-bar{position:fixed;left:0;right:0;bottom:0;z-index:50;display:flex;\r\n\r\n  max-width:520px;margin:0 auto;background:#fff;border-top:1px solid var(--line,#E2E8EC);\r\n\r\n  padding-bottom:env(safe-area-inset-bottom);}\r\n\r\n:where(.hx-dwu) .hx-bar a{flex:1;display:grid;place-items:center;gap:3px;padding:9px 6px;\r\n\r\n  font-size:.7rem;text-decoration:none;color:var(--ink,#12324B);font-weight:600;}\r\n\r\n:where(.hx-dwu) .hx-bar svg{width:20px;height:20px;stroke:currentColor;fill:none;}\r\n\r\n:where(.hx-dwu) .hx-bar a.is-main{color:var(--navy,#0E2B4D);}\r\n\r\n@media (min-width:900px){\r\n\r\n  :where(.hx-dwu) .hx-app{max-width:1140px;}\r\n\r\n  :where(.hx-dwu) .hx-grid{grid-template-columns:repeat(var(--cols-d,3),minmax(0,1fr));}\r\n\r\n  :where(.hx-dwu) .hx-bar{display:none;}\r\n\r\n}\r\n\r\n<\/style>\r\n\r\n<style>\r\n\r\n\/* Wszystkie wymiary liczymy razem z obramowaniem i wype\u0142nieniem. *\/\r\n\r\n.hx-dwu [hidden]{display:none !important;}\r\n\r\n.hx-dwu,.hx-dwu *,.hx-dwu *::before,.hx-dwu *::after{box-sizing:border-box;}\r\n\r\n\/* \u2500\u2500 CZCIONKA NAG\u0141\u00d3WK\u00d3W (bez ozdobnego \u201eJ\u201d) \u2500\u2500 *\/\r\n\r\n.hx-dwu h1,.hx-dwu h2,.hx-dwu h3,.hx-dwu .hx-h,\r\n\r\n.hx-dwu .dw-stage__t b,.hx-dwu .dw-stage__k,.hx-dwu .dw-band p,\r\n\r\n.hx-dwu .dwx-temat,.hx-dwu .dwx-tytul,.hx-dwu .dw-fakt b{\r\n\r\n  font-family:'Source Serif 4',Georgia,'Times New Roman',serif !important;\r\n\r\n}\r\n\r\n\/* \u2500\u2500 WY\u015aRODKOWANE NAG\u0141\u00d3WKI SEKCJI \u2500\u2500 *\/\r\n\r\n.hx-dwu .hx-h{text-align:center;}\r\n\r\n.hx-dwu .hx-sub{text-align:center;max-width:64ch;margin-left:auto;margin-right:auto;}\r\n\r\n\/* po usuni\u0119ciu stopki: zapas na dolny pasek szybkich akcji (tylko telefon) *\/\r\n\r\n.hx-dwu .hx-app{padding-bottom:calc(48px + env(safe-area-inset-bottom));}\r\n\r\n\/* ============================================================================\r\n\r\n   SZEROKO\u015a\u0106 NA KOMPUTERZE\r\n\r\n   Rdze\u0144 zostawia kolumn\u0119 tre\u015bci w szeroko\u015bci \u201etelefonowej\u201d \u2014 bez tego bloku\r\n\r\n   strona na monitorze wygl\u0105da\u0142aby jak telefon rozci\u0105gni\u0119ty na \u015brodku ekranu.\r\n\r\n   \u2022 1140 px \u2014 laptop  \u2022 1280 px \u2014 szerokie monitory  \u2022 94vw \u2014 zawsze margines\r\n\r\n   ============================================================================ *\/\r\n\r\n@media (min-width:900px){\r\n\r\n  .hx-dwu .hx-app{padding-bottom:0;\r\n\r\n    max-width:min(1140px,94vw) !important;width:100%;\r\n\r\n    margin-left:auto !important;margin-right:auto !important;}\r\n\r\n  .hx-dwu{--pad:40px;}\r\n\r\n}\r\n\r\n@media (min-width:1400px){\r\n\r\n  .hx-dwu .hx-app{max-width:min(1280px,94vw) !important;}\r\n\r\n}\r\n\r\n\/* Kolumna 1fr potrafi rozepchn\u0105\u0107 si\u0119 do szeroko\u015bci najd\u0142u\u017cszego s\u0142owa\r\n\r\n   i wypchn\u0105\u0107 siatk\u0119 poza ekran \u2014 minmax(0,1fr) tego pilnuje. *\/\r\n\r\n.hx-dwu .hx-grid{grid-template-columns:repeat(var(--cols),minmax(0,1fr));}\r\n\r\n@media (min-width:900px){\r\n\r\n  .hx-dwu .hx-grid{grid-template-columns:repeat(var(--cols-d),minmax(0,1fr));}\r\n\r\n}\r\n\r\n.hx-dwu .hx-tile,.hx-dwu .hx-card{min-width:0;overflow-wrap:anywhere;}\r\n\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\u2550\u2550\u2550\u2550\r\n\r\n   NAG\u0141\u00d3WEK Z PRZE\u0141\u0104CZNIKIEM J\u0118ZYKA\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\r\n.hx-dwu .dw-hero{background:var(--navy,#0E2B4D);color:#fff;padding:28px var(--pad,18px) 32px;\r\n\r\n  position:relative;overflow:hidden;}\r\n\r\n.hx-dwu .dw-hero::after{content:\"\";position:absolute;right:-80px;top:-80px;width:240px;height:240px;\r\n\r\n  border-radius:50%;background:rgba(217,164,23,.13);}\r\n\r\n.hx-dwu .dw-hero > *{position:relative;z-index:2;}\r\n\r\n\/* tytu\u0142 tu\u017c pod napisem O NAS \u2014 motyw WordPressa dok\u0142ada w\u0142asne odst\u0119py *\/\r\n\r\n.hx-dwu .dw-hero > .hx-kicker{margin:0 0 4px !important;}\r\n\r\n.hx-dwu .dw-hero > h1{margin:0 !important;line-height:1.16;}\r\n\r\n.hx-dwu .dw-lead{color:#C6D7E5;font-size:.95rem;margin:12px 0 0;line-height:1.7;max-width:62ch;}\r\n\r\n.hx-dwu .dw-lang{display:inline-flex;background:rgba(255,255,255,.12);border-radius:999px;\r\n\r\n  padding:4px;margin-top:20px;position:relative;}\r\n\r\n.hx-dwu .dw-lang button{position:relative;z-index:2;padding:9px 20px;border-radius:999px;\r\n\r\n  font-weight:800;font-size:.82rem;letter-spacing:.06em;color:rgba(255,255,255,.72);\r\n\r\n  background:transparent !important;border:0 !important;cursor:pointer;\r\n\r\n  -webkit-appearance:none;appearance:none;transition:color .3s ease;}\r\n\r\n.hx-dwu .dw-lang button[aria-pressed=\"true\"]{color:#3B2A00;}\r\n\r\n.hx-dwu .dw-lang i{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);\r\n\r\n  border-radius:999px;background:linear-gradient(180deg,var(--gold-l,#F0D98A),var(--gold,#C9A227));\r\n\r\n  transition:transform .35s cubic-bezier(.22,1,.36,1);}\r\n\r\n.hx-dwu .dw-lang.en i{transform:translateX(100%);}\r\n\r\n.hx-dwu .dw-hint{font-size:.78rem;color:#9FB8CB;margin:10px 0 0;}\r\n\r\n@media (min-width:900px){\r\n\r\n  .hx-dwu .dw-hero{padding:52px var(--pad,18px) 54px;\r\n\r\n    display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);\r\n\r\n    column-gap:clamp(28px,3.4vw,52px);row-gap:0;align-items:center;\r\n\r\n    grid-template-rows:auto auto 1fr;}\r\n\r\n  .hx-dwu .dw-hero > .hx-kicker{grid-column:1;grid-row:1;align-self:end;}\r\n\r\n  .hx-dwu .dw-hero > h1{grid-column:1;grid-row:2;align-self:start;}\r\n\r\n  .hx-dwu .dw-hero > .dw-lang{grid-column:1;grid-row:3;align-self:start;justify-self:start;}\r\n\r\n  .hx-dwu .dw-lead{grid-column:2;grid-row:1 \/ span 3;align-self:center;margin:0;\r\n\r\n    font-size:1.02rem;}\r\n\r\n  .hx-dwu .dw-hint{grid-column:1;grid-row:4;margin-top:12px;}\r\n\r\n}\r\n\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\u2550\u2550\u2550\u2550\r\n\r\n   ANIMACJE STEROWANE PRZEWIJANIEM\r\n\r\n   Nowe przegl\u0105darki animuj\u0105 to natywnie (bez JavaScriptu). Starsze dostaj\u0105\r\n\r\n   ten sam efekt przez IntersectionObserver.\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\r\n@keyframes dw-in{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}\r\n\r\n@supports (animation-timeline: view()){\r\n\r\n  .hx-dwu [data-anim]{animation:dw-in linear both;animation-timeline:view();\r\n\r\n    animation-range:entry 4% cover 26%;}\r\n\r\n}\r\n\r\n@supports not (animation-timeline: view()){\r\n\r\n  .hx-dwu.dw-js [data-anim]{opacity:0;transform:translateY(22px);\r\n\r\n    transition:opacity .6s ease,transform .6s cubic-bezier(.22,1,.36,1);}\r\n\r\n  .hx-dwu.dw-js [data-anim].in{opacity:1;transform:none;}\r\n\r\n}\r\n\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\u2550\u2550\u2550\u2550\r\n\r\n   ETAPY EDUKACYJNE\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\r\n.hx-dwu .dw-stage{background:var(--paper,#ffffff);border:1px solid var(--line,#E2E8EC);border-radius:var(--r,16px);\r\n\r\n  overflow:hidden;}\r\n\r\n.hx-dwu .dw-stage + .dw-stage{margin-top:14px;}\r\n\r\n.hx-dwu .dw-stage__t{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:center;\r\n\r\n  padding:16px 18px;background:color-mix(in srgb,var(--c) 10%,transparent);}\r\n\r\n.hx-dwu .dw-stage__k{width:46px;height:46px;border-radius:14px;background:var(--c);color:#fff;\r\n\r\n  display:grid;place-items:center;font-weight:700;font-size:1.05rem;flex:none;}\r\n\r\n.hx-dwu .dw-stage__t b{display:block;font-size:1.08rem;line-height:1.2;}\r\n\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\r\n.hx-dwu .dw-stage__b{padding:16px 18px 18px;}\r\n\r\n.hx-dwu .dw-stage__b p{font-size:.93rem;color:var(--ink-2,#5A6E7E);line-height:1.65;margin:0;}\r\n\r\n.hx-dwu .dw-subj{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px;}\r\n\r\n.hx-dwu .dw-s{font-size:.8rem;font-weight:700;border-radius:999px;padding:6px 13px;\r\n\r\n  background:color-mix(in srgb,var(--c) 13%,transparent);color:var(--c);\r\n\r\n  border:0;font-family:inherit;}\r\n\r\n\/* przedmiot, dla kt\u00f3rego mamy przyk\u0142ad w suwaku \u2014 klikalny *\/\r\n\r\n.hx-dwu button.dw-s{cursor:pointer;display:inline-flex;align-items:center;gap:6px;\r\n\r\n  transition:transform .25s ease,box-shadow .25s ease;}\r\n\r\n.hx-dwu button.dw-s::after{content:\"\u203a\";font-size:1.05rem;line-height:1;opacity:.75;\r\n\r\n  transition:transform .25s ease;}\r\n\r\n.hx-dwu button.dw-s:hover{transform:translateY(-1px);\r\n\r\n  box-shadow:0 8px 18px -12px color-mix(in srgb,var(--c) 90%,transparent);}\r\n\r\n.hx-dwu button.dw-s:hover::after{transform:translateX(3px);}\r\n\r\n.hx-dwu .dw-s.extra{background:var(--mist,#F3F6F8);color:var(--ink-2,#5A6E7E);\r\n\r\n  box-shadow:inset 0 0 0 1px var(--line,#E2E8EC);}\r\n\r\n.hx-dwu .dw-glab{font-size:.68rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;\r\n\r\n  color:var(--ink-2,#5A6E7E);margin:14px 0 0;}\r\n\r\n.hx-dwu .dw-native{display:inline-flex;align-items:center;gap:8px;margin-top:14px;\r\n\r\n  background:#FFF3D6;color:#7A5000;border-radius:999px;padding:8px 15px;font-size:.8rem;font-weight:700;}\r\n\r\n.hx-dwu .dw-native svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.9;flex:none;}\r\n\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\u2550\u2550\u2550\u2550\r\n\r\n   SUWAK PL \u21c4 EN \u2014 \u201eZOBACZ, JAK BRZMI LEKCJA\u201d\r\n\r\n   Dwie warstwy le\u017c\u0105 w tej samej kom\u00f3rce siatki, wi\u0119c wysoko\u015b\u0107 wyznacza\r\n\r\n   d\u0142u\u017cszy tekst (nic si\u0119 nie ucina, tak\u017ce na w\u0105skim telefonie). G\u00f3rna\r\n\r\n   warstwa (angielska) jest przycinana clip-path w rytm suwaka.\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\r\n.hx-dwu .dwx{max-width:960px;margin:0 auto;}\r\n\r\n.hx-dwu .dwx-zakladki{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;\r\n\r\n  margin:0 0 18px;}\r\n\r\n.hx-dwu .dwx-zakladka{-webkit-appearance:none;appearance:none;font-family:inherit;\r\n\r\n  background:var(--paper,#ffffff);border:1px solid var(--line,#E2E8EC);color:var(--ink,#12324B);\r\n\r\n  border-radius:999px;padding:9px 16px;font-size:.82rem;font-weight:700;cursor:pointer;\r\n\r\n  display:inline-flex;align-items:center;gap:8px;\r\n\r\n  transition:border-color .25s ease,color .25s ease,background .25s ease,\r\n\r\n              box-shadow .25s ease,transform .25s ease;}\r\n\r\n.hx-dwu .dwx-zakladka em{font-style:normal;font-weight:600;font-size:.72rem;color:var(--ink-2,#5A6E7E);}\r\n\r\n.hx-dwu .dwx-zakladka:hover{border-color:var(--gold,#C9A227);transform:translateY(-1px);}\r\n\r\n.hx-dwu .dwx-zakladka[aria-pressed=\"true\"]{background:var(--navy,#0E2B4D);color:#fff;border-color:var(--navy,#0E2B4D);\r\n\r\n  box-shadow:0 12px 24px -16px rgba(14,43,77,.9);}\r\n\r\n.hx-dwu .dwx-zakladka[aria-pressed=\"true\"] em{color:var(--gold-l,#F0D98A);}\r\n\r\n.hx-dwu .dwx-scena{position:relative;display:grid;border-radius:var(--r,16px);overflow:hidden;\r\n\r\n  border:1px solid var(--line,#E2E8EC);background:var(--paper,#ffffff);\r\n\r\n  box-shadow:0 26px 60px -40px rgba(14,43,77,.75);\r\n\r\n  -webkit-user-select:none;user-select:none;}\r\n\r\n.hx-dwu .dwx-warstwa{grid-area:1 \/ 1;padding:26px var(--pad,18px) 28px;\r\n\r\n  display:flex;flex-direction:column;justify-content:center;min-width:0;}\r\n\r\n.hx-dwu .dwx-warstwa--en{background:linear-gradient(135deg,var(--navy,#0E2B4D) 0%,#16295C 100%);\r\n\r\n  color:#fff;clip-path:inset(0 0 0 50%);will-change:clip-path;}\r\n\r\n.hx-dwu .dwx-flaga{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;\r\n\r\n  font-size:.7rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;\r\n\r\n  padding:7px 14px;border-radius:999px;margin-bottom:14px;white-space:nowrap;}\r\n\r\n.hx-dwu .dwx-warstwa--pl .dwx-flaga{background:rgba(14,43,77,.07);color:var(--navy,#0E2B4D);}\r\n\r\n.hx-dwu .dwx-warstwa--en .dwx-flaga{background:rgba(240,217,138,.16);color:var(--gold-l,#F0D98A);\r\n\r\n  align-self:flex-end;}\r\n\r\n.hx-dwu .dwx-temat{font-size:clamp(1.15rem,4.6vw,1.6rem);font-weight:700;line-height:1.25;\r\n\r\n  margin:0 0 12px;}\r\n\r\n.hx-dwu .dwx-warstwa--pl .dwx-temat{color:var(--navy,#0E2B4D);}\r\n\r\n.hx-dwu .dwx-zdanie{font-size:clamp(.94rem,3.4vw,1.05rem);line-height:1.75;margin:0 0 16px;}\r\n\r\n.hx-dwu .dwx-warstwa--pl .dwx-zdanie{color:var(--ink-2,#5A6E7E);}\r\n\r\n.hx-dwu .dwx-warstwa--en .dwx-zdanie{color:#DCE7F0;}\r\n\r\n.hx-dwu .dwx-slowa{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:7px;}\r\n\r\n.hx-dwu .dwx-slowa li{font-size:.78rem;font-weight:700;padding:6px 12px;border-radius:999px;}\r\n\r\n.hx-dwu .dwx-warstwa--pl .dwx-slowa li{background:rgba(201,162,39,.15);color:var(--navy,#0E2B4D);}\r\n\r\n.hx-dwu .dwx-warstwa--en .dwx-slowa li{background:rgba(255,255,255,.12);color:var(--gold-l,#F0D98A);}\r\n\r\n\/* jeden przyk\u0142ad lekcji w scenie *\/\r\n\r\n.hx-dwu .dwx-tresc{display:block;}\r\n\r\n\/* pionowa linia podzia\u0142u + ga\u0142ka *\/\r\n\r\n.hx-dwu .dwx-uchwyt{position:absolute;top:0;bottom:0;left:50%;width:3px;z-index:3;\r\n\r\n  transform:translateX(-50%);pointer-events:none;\r\n\r\n  background:linear-gradient(180deg,var(--gold-l,#F0D98A),var(--gold,#C9A227));\r\n\r\n  box-shadow:0 0 22px rgba(240,217,138,.55);}\r\n\r\n.hx-dwu .dwx-galka{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);\r\n\r\n  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;\r\n\r\n  background:radial-gradient(circle at 32% 28%,#FFF6DA 0%,var(--gold-l,#F0D98A) 42%,var(--gold,#C9A227) 100%);\r\n\r\n  color:#3B2A00;font-weight:900;font-size:.62rem;letter-spacing:.04em;\r\n\r\n  box-shadow:0 10px 28px rgba(14,43,77,.4),inset 0 0 0 2px rgba(255,255,255,.55);}\r\n\r\n.hx-dwu .dwx-galka::before,.hx-dwu .dwx-galka::after{content:\"\";position:absolute;\r\n\r\n  width:0;height:0;border-top:5px solid transparent;border-bottom:5px solid transparent;}\r\n\r\n.hx-dwu .dwx-galka::before{left:9px;border-right:6px solid #3B2A00;}\r\n\r\n.hx-dwu .dwx-galka::after{right:9px;border-left:6px solid #3B2A00;}\r\n\r\n\/* przezroczysty suwak na ca\u0142ej scenie: myszka, palec i klawiatura *\/\r\n\r\n.hx-dwu .dwx-zakres{position:absolute;inset:0;width:100%;height:100%;margin:0;\r\n\r\n  opacity:0;cursor:ew-resize;z-index:4;touch-action:pan-y;\r\n\r\n  -webkit-appearance:none;appearance:none;background:transparent;}\r\n\r\n.hx-dwu .dwx-zakres::-webkit-slider-thumb{-webkit-appearance:none;width:58px;height:100%;\r\n\r\n  cursor:ew-resize;}\r\n\r\n.hx-dwu .dwx-zakres::-moz-range-thumb{width:58px;height:400px;border:0;cursor:ew-resize;}\r\n\r\n.hx-dwu .dwx-zakres:focus-visible{outline:none;}\r\n\r\n.hx-dwu .dwx-zakres:focus-visible ~ .dwx-uchwyt .dwx-galka{\r\n\r\n  box-shadow:0 0 0 5px rgba(240,217,138,.5),0 10px 28px rgba(14,43,77,.4);}\r\n\r\n\/* skr\u00f3ty: poka\u017c ca\u0142o\u015b\u0107 po polsku \/ po angielsku *\/\r\n\r\n.hx-dwu .dwx-skroty{display:flex;justify-content:space-between;align-items:center;gap:10px;\r\n\r\n  margin-top:12px;}\r\n\r\n.hx-dwu .dwx-skrot{-webkit-appearance:none;appearance:none;font-family:inherit;cursor:pointer;\r\n\r\n  border:1px solid var(--line,#E2E8EC);background:var(--paper,#ffffff);color:var(--ink-2,#5A6E7E);\r\n\r\n  border-radius:999px;padding:8px 14px;font-size:.76rem;font-weight:700;\r\n\r\n  transition:border-color .25s ease,color .25s ease,transform .25s ease;}\r\n\r\n.hx-dwu .dwx-skrot:hover{border-color:var(--gold,#C9A227);color:var(--ink,#12324B);transform:translateY(-1px);}\r\n\r\n.hx-dwu .dwx-podpowiedz{font-size:.78rem;color:var(--ink-2,#5A6E7E);text-align:center;margin:0;\r\n\r\n  display:inline-flex;align-items:center;gap:8px;}\r\n\r\n.hx-dwu .dwx-podpowiedz i{font-style:normal;animation:dwx-machaj 2.6s ease-in-out infinite;}\r\n\r\n@keyframes dwx-machaj{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}\r\n\r\n.hx-dwu .dwx-stopka{margin:14px 0 0;font-size:.74rem;color:var(--ink-2,#5A6E7E);text-align:center;\r\n\r\n  opacity:.85;}\r\n\r\n@media (max-width:560px){\r\n\r\n  .hx-dwu .dwx-skroty{flex-direction:column;}\r\n\r\n  .hx-dwu .dwx-podpowiedz{order:-1;}\r\n\r\n  .hx-dwu .dwx-galka{width:50px;height:50px;font-size:.56rem;}\r\n\r\n  .hx-dwu .dwx-warstwa{padding:22px 16px 24px;}\r\n\r\n}\r\n\r\n@media (min-width:900px){\r\n\r\n  .hx-dwu .dwx-warstwa{padding:40px 44px;min-height:340px;}\r\n\r\n  .hx-dwu .dwx-zakladka{font-size:.86rem;padding:10px 18px;}\r\n\r\n}\r\n\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\u2550\u2550\u2550\u2550\r\n\r\n   CO Z TEGO WYNIKA \u2014 trzy fakty\r\n\r\n   Na telefonie jeden pod drugim, od 900 px trzy obok siebie.\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\r\n.hx-dwu .dw-fakty{display:grid;gap:14px;}\r\n\r\n.hx-dwu .dw-fakt{display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px;align-items:start;\r\n\r\n  background:var(--paper,#ffffff);border:1px solid var(--line,#E2E8EC);border-left:4px solid var(--gold,#C9A227);\r\n\r\n  border-radius:var(--r,16px);padding:20px 22px;}\r\n\r\n.hx-dwu .dw-fakt__n{font-size:2.2rem;font-weight:800;line-height:1;color:var(--navy,#0E2B4D);\r\n\r\n  font-family:'Source Serif 4',Georgia,serif;white-space:nowrap;}\r\n\r\n.hx-dwu .dw-fakt__ic{width:52px;height:52px;border-radius:16px;display:grid;place-items:center;\r\n\r\n  background:color-mix(in srgb,var(--gold,#C9A227) 18%,transparent);flex:none;}\r\n\r\n.hx-dwu .dw-fakt__ic svg{width:26px;height:26px;stroke:var(--navy,#0E2B4D);fill:none;stroke-width:1.9;}\r\n\r\n.hx-dwu .dw-fakt b{display:block;font-size:1.02rem;line-height:1.3;color:var(--ink,#12324B);}\r\n\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\r\n.hx-dwu .dw-fakt a{display:inline-flex;align-items:center;gap:7px;margin-top:10px;\r\n\r\n  font-size:.82rem;font-weight:700;color:var(--navy,#0E2B4D) !important;text-decoration:none !important;\r\n\r\n  border-bottom:1px solid var(--gold,#C9A227);padding-bottom:2px;transition:gap .25s ease;}\r\n\r\n.hx-dwu .dw-fakt a:hover{gap:12px;}\r\n\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\u2550\u2550\u2550\u2550\r\n\r\n   PASY ZE ZDJ\u0118CIAMI I GALERIA\r\n\r\n   --kadr \/ --kadr-d ustawiasz przy ka\u017cdym zdj\u0119ciu osobno (telefon \/ komputer)\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\r\n.hx-dwu .dw-band{position:relative;overflow:hidden;height:38vh;min-height:220px;max-height:420px;}\r\n\r\n.hx-dwu .dw-band img{position:absolute;left:0;top:-9%;width:100%;height:118%;\r\n\r\n  object-fit:cover;object-position:var(--kadr,center);will-change:transform;\r\n\r\n  opacity:0;clip-path:inset(14% 0 14% 0);\r\n\r\n  transition:opacity 1s ease,clip-path 1.25s cubic-bezier(.22,1,.36,1),filter .5s ease;}\r\n\r\n@media (min-width:900px){\r\n\r\n  .hx-dwu .dw-band img{object-position:var(--kadr-d,var(--kadr,center));}\r\n\r\n}\r\n\r\n.hx-dwu .dw-band.widoczny img{opacity:1;clip-path:inset(0 0 0 0);}\r\n\r\n.hx-dwu .dw-band::after{content:\"\";position:absolute;inset:0;\r\n\r\n  background:linear-gradient(180deg,rgba(10,31,58,.22),rgba(10,31,58,.72));\r\n\r\n  transition:background .5s ease;}\r\n\r\n\/* delikatna smuga \u015bwiat\u0142a przep\u0142ywaj\u0105ca po zdj\u0119ciu *\/\r\n\r\n.hx-dwu .dw-band::before{content:\"\";position:absolute;top:0;bottom:0;left:0;width:45%;z-index:3;\r\n\r\n  pointer-events:none;opacity:0;\r\n\r\n  background:linear-gradient(100deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.10) 42%,\r\n\r\n    rgba(240,217,138,.20) 50%,rgba(255,255,255,.10) 58%,rgba(255,255,255,0) 100%);\r\n\r\n  transform:translateX(-140%) skewX(-12deg);}\r\n\r\n.hx-dwu .dw-band.widoczny::before{opacity:1;animation:dw-shine 9s ease-in-out infinite;}\r\n\r\n@keyframes dw-shine{\r\n\r\n  0%,62%{transform:translateX(-140%) skewX(-12deg);}\r\n\r\n  88%,100%{transform:translateX(260%) skewX(-12deg);}\r\n\r\n}\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\r\n  margin:0;color:#fff;font-weight:700;\r\n\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\r\n  opacity:0;transform:translateY(14px);\r\n\r\n  transition:transform .6s cubic-bezier(.22,1,.36,1),opacity .8s ease;}\r\n\r\n.hx-dwu .dw-band.widoczny p{opacity:1;transform:none;}\r\n\r\n@media (min-width:900px) and (hover:hover){\r\n\r\n  .hx-dwu .dw-band:hover img{filter:brightness(1.06) saturate(1.05);}\r\n\r\n  .hx-dwu .dw-band:hover p{transform:translateY(-4px);}\r\n\r\n}\r\n\r\n@media (prefers-reduced-motion:reduce){\r\n\r\n  .hx-dwu .dw-band img{opacity:1;clip-path:none;transition:none;}\r\n\r\n  .hx-dwu .dw-band p{opacity:1;transform:none;}\r\n\r\n  .hx-dwu .dw-band::before{display:none;}\r\n\r\n  .hx-dwu.dw-js [data-anim]{opacity:1;transform:none;}\r\n\r\n  .hx-dwu .dwx-podpowiedz i{animation:none;}\r\n\r\n}\r\n\r\n\r\n\r\n\/* \u2500\u2500 MODYFIKACJA DRUGIEGO PASA ZE ZDJ\u0118CIEM (NATIVE SPEAKER) \u2500\u2500 *\/\r\n\r\n.hx-dwu .dw-band--native {\r\n\r\n  height: 45vh; \r\n\r\n  min-height: 280px; \r\n\r\n  max-height: 500px;\r\n\r\n}\r\n\r\n.hx-dwu .dw-band--native p {\r\n\r\n  max-width: none !important;\r\n\r\n  white-space: nowrap;\r\n\r\n  font-size: clamp(0.65rem, 3.5vw, 1.45rem);\r\n\r\n}\r\n\r\n@media (min-width:900px){\r\n\r\n  .hx-dwu .dw-band--native {\r\n\r\n    height: 55vh; \r\n\r\n    max-height: 650px;\r\n\r\n  }\r\n\r\n  .hx-dwu .dw-band--native p {\r\n\r\n    font-size: 1.7rem;\r\n\r\n  }\r\n\r\n}\r\n\r\n\r\n\r\n.hx-dwu .dw-gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}\r\n\r\n.hx-dwu .dw-g{position:relative;display:block;aspect-ratio:4\/3;border-radius:14px;overflow:hidden;\r\n\r\n  background:var(--mist,#F3F6F8);cursor:zoom-in;border:0;padding:0;width:100%;}\r\n\r\n.hx-dwu .dw-g img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;\r\n\r\n  transition:transform 1s cubic-bezier(.22,1,.36,1);}\r\n\r\n.hx-dwu .dw-g::after{content:\"\";position:absolute;inset:0;\r\n\r\n  background:linear-gradient(180deg,rgba(10,31,58,0) 55%,rgba(10,31,58,.35));\r\n\r\n  opacity:0;transition:opacity .4s ease;}\r\n\r\n@media (hover:hover){\r\n\r\n  .hx-dwu .dw-g:hover img{transform:scale(1.07);}\r\n\r\n  .hx-dwu .dw-g:hover::after{opacity:1;}\r\n\r\n}\r\n\r\n@media (min-width:900px){\r\n\r\n  .hx-dwu .dw-stages{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;\r\n\r\n    align-items:start;}\r\n\r\n  .hx-dwu .dw-stage + .dw-stage{margin-top:0;}\r\n\r\n  .hx-dwu .dw-band{height:46vh;max-height:520px;}\r\n\r\n  .hx-dwu .dw-band p{max-width:40ch;font-size:1.7rem;}\r\n\r\n  .hx-dwu .dw-gal{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}\r\n\r\n  .hx-dwu .dw-fakty{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;}\r\n\r\n  .hx-dwu .dw-fakt{padding:26px 26px;gap:18px;}\r\n\r\n  .hx-dwu .dw-fakt__n{font-size:2.6rem;}\r\n\r\n  .hx-dwu .dw-fakt b{font-size:1.05rem;}\r\n\r\n}\r\n\r\n\/* \u2500\u2500 POWI\u0118KSZENIE ZDJ\u0118CIA \u2500\u2500\r\n\r\n   Okno przenosimy do <body> i dajemy mu bardzo wysoki z-index, bo inaczej\r\n\r\n   globalny nag\u0142\u00f3wek strony potrafi je przykry\u0107. Pozycj\u0119 przewijania\r\n\r\n   zapami\u0119tujemy i przywracamy po zamkni\u0119ciu. *\/\r\n\r\n.hx-lb-dwu{position:fixed;inset:0;z-index:2147480000;background:rgba(6,20,38,.94);\r\n\r\n  display:flex;align-items:center;justify-content:center;padding:16px;\r\n\r\n  opacity:0;visibility:hidden;transition:opacity .3s ease,visibility .3s ease;\r\n\r\n  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}\r\n\r\n.hx-lb-dwu.on{opacity:1;visibility:visible;}\r\n\r\n.hx-lb-dwu img{max-width:100%;max-height:86vh;object-fit:contain;border-radius:12px;\r\n\r\n  box-shadow:0 40px 90px -40px #000;}\r\n\r\n.hx-lb-dwu__x{position:absolute;top:16px;right:16px;\r\n\r\n  -webkit-appearance:none !important;appearance:none !important;border:0 !important;\r\n\r\n  width:54px !important;height:54px !important;border-radius:50% !important;padding:0 !important;\r\n\r\n  background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.35) 0%,\r\n\r\n    rgba(14,43,77,.9) 55%,rgba(6,20,38,.95) 100%) !important;\r\n\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\r\n  color:#F0D98A !important;display:grid !important;place-items:center !important;cursor:pointer;\r\n\r\n  animation:hx-lb-puls 6s ease-in-out infinite;}\r\n\r\n.hx-lb-dwu__x svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.6;\r\n\r\n  stroke-linecap:round;}\r\n\r\n@keyframes hx-lb-puls{\r\n\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\r\n  50%{box-shadow:0 0 0 1px rgba(240,217,138,.95),0 0 26px rgba(240,217,138,.35),\r\n\r\n      0 14px 34px -14px rgba(0,0,0,.9);}\r\n\r\n}\r\n\r\n@media (prefers-reduced-motion:reduce){.hx-lb-dwu__x{animation:none;}}\r\n\r\n<\/style>\r\n\r\n\r\n\r\n<section class=\"hx hx-dwu\" id=\"hil-dwu\" lang=\"pl\">\r\n\r\n <div class=\"hx-app\">\r\n\r\n\r\n\r\n  <!-- powr\u00f3t do strony szko\u0142y -->\r\n\r\n  <a class=\"hx-back\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=345\">\r\n\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\r\n    <span data-en=\"Primary School\">Szko\u0142a Podstawowa<\/span>\r\n\r\n  <\/a>\r\n\r\n\r\n\r\n  <!-- \u2550\u2550 NAG\u0141\u00d3WEK Z PRZE\u0141\u0104CZNIKIEM J\u0118ZYKA \u2550\u2550 -->\r\n\r\n  <div class=\"dw-hero\">\r\n\r\n    <p class=\"hx-kicker\" data-en=\"About us\">O nas<\/p>\r\n\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\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\r\n    <div class=\"dw-lang\" id=\"dwLang\" role=\"group\" aria-label=\"J\u0119zyk strony\">\r\n\r\n      <i aria-hidden=\"true\"><\/i>\r\n\r\n      <button type=\"button\" data-l=\"pl\" aria-pressed=\"true\" lang=\"pl\">POLSKI<\/button>\r\n\r\n      <button type=\"button\" data-l=\"en\" aria-pressed=\"false\" lang=\"en\">ENGLISH<\/button>\r\n\r\n    <\/div>\r\n\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\r\n  <\/div>\r\n\r\n\r\n\r\n  <!-- \u2550\u2550 PAS ZE ZDJ\u0118CIEM \u2550\u2550 -->\r\n\r\n  <div class=\"dw-band\" data-anim>\r\n\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\r\n         data-en-alt=\"Pupils of Hilaris Primary School during a lesson\" loading=\"lazy\"\r\n\r\n         style=\"--kadr:center 40%;--kadr-d:center 26%\">\r\n\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\r\n  <\/div>\r\n\r\n\r\n\r\n  <!-- \u2550\u2550 TRZY ZA\u0141O\u017bENIA \u2550\u2550 -->\r\n\r\n  <div class=\"hx-sec\">\r\n\r\n    <h2 class=\"hx-h\" data-anim data-en=\"How it works\">Na czym to polega<\/h2>\r\n\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\r\n    <div class=\"hx-grid\" style=\"--cols:1;--cols-d:3\">\r\n\r\n      <div class=\"hx-card hx-card--acc\" style=\"--c:#2E86C8\" data-anim>\r\n\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\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\r\n      <\/div>\r\n\r\n      <div class=\"hx-card hx-card--acc\" style=\"--c:#D9A417\" data-anim>\r\n\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\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\r\n      <\/div>\r\n\r\n      <div class=\"hx-card hx-card--acc\" style=\"--c:#3E8E5A\" data-anim>\r\n\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\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\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <!-- \u2550\u2550 DWA ETAPY \u2550\u2550 -->\r\n\r\n  <div class=\"hx-sec hx-sec--mist\">\r\n\r\n    <h2 class=\"hx-h\" data-anim data-en=\"Two stages, one method\">Dwa etapy, jedna metoda<\/h2>\r\n\r\n    <p class=\"hx-sub\" data-anim data-en=\"We work differently with a seven-year-old and with a Year 8 pupil. Tap a subject to see a sample lesson.\">Inaczej pracujemy z siedmiolatkiem, inaczej z \u00f3smoklasist\u0105. Prosimy dotkn\u0105\u0107 nazwy przedmiotu, aby zobaczy\u0107 przyk\u0142ad lekcji.<\/p>\r\n\r\n    <div class=\"dw-stages\" id=\"dwStages\">\r\n\r\n      <div class=\"dw-stage\" style=\"--c:#D9A417\" data-anim>\r\n\r\n        <div class=\"dw-stage__t\"><span class=\"dw-stage__k\">1\u20133<\/span>\r\n\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\r\n        <div class=\"dw-stage__b\">\r\n\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\r\n          <p class=\"dw-glab\" data-en=\"Lessons taught bilingually\">Lekcje prowadzone dwuj\u0119zycznie<\/p>\r\n\r\n          <div class=\"dw-subj\">\r\n\r\n            <button type=\"button\" class=\"dw-s\" data-do=\"0\" data-en=\"science\">science<\/button>\r\n\r\n            <span class=\"dw-s\" data-en=\"literacy\">literacy<\/span>\r\n\r\n            <button type=\"button\" class=\"dw-s\" data-do=\"1\" data-en=\"maths\">maths<\/button>\r\n\r\n            <button type=\"button\" class=\"dw-s\" data-do=\"2\" data-en=\"music\">muzyka<\/button>\r\n\r\n          <\/div>\r\n\r\n          <span class=\"dw-native\">\r\n\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\r\n            <span data-en=\"A native speaker from Year 1\">Native speaker ju\u017c od pierwszej klasy<\/span>\r\n\r\n          <\/span>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <div class=\"dw-stage\" style=\"--c:#2E86C8\" data-anim>\r\n\r\n        <div class=\"dw-stage__t\"><span class=\"dw-stage__k\">4\u20138<\/span>\r\n\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\r\n        <div class=\"dw-stage__b\">\r\n\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\r\n          <p class=\"dw-glab\" data-en=\"Subjects taught bilingually\">Przedmioty prowadzone dwuj\u0119zycznie<\/p>\r\n\r\n          <div class=\"dw-subj\">\r\n\r\n            <button type=\"button\" class=\"dw-s\" data-do=\"2\" data-en=\"music\">muzyka<\/button>\r\n\r\n            <button type=\"button\" class=\"dw-s\" data-do=\"3\" data-en=\"history\">historia<\/button>\r\n\r\n            <span class=\"dw-s\" data-en=\"social studies\">wiedza o spo\u0142ecze\u0144stwie<\/span>\r\n\r\n          <\/div>\r\n\r\n          <p class=\"dw-glab\" data-en=\"Additional subjects\">Przedmioty dodatkowe<\/p>\r\n\r\n          <div class=\"dw-subj\">\r\n\r\n            <span class=\"dw-s extra\" data-en=\"science\">science<\/span>\r\n\r\n            <button type=\"button\" class=\"dw-s extra\" data-do=\"4\" data-en=\"English culture\">English culture<\/button>\r\n\r\n            <span class=\"dw-s extra\" data-en=\"direct communication\">direct communication<\/span>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <!-- \u2550\u2550 SUWAK PL \u21c4 EN \u2550\u2550 -->\r\n\r\n  <div class=\"hx-sec\" id=\"dwLekcja\">\r\n\r\n    <h2 class=\"hx-h\" data-anim data-en=\"See what a lesson sounds like\">Zobacz, jak brzmi lekcja<\/h2>\r\n\r\n    <p class=\"hx-sub\" data-anim data-en=\"The same topic in Polish and in English. Drag the golden handle: Polish on the left, English on the right.\">Ten sam temat po polsku i po angielsku. Prosimy przesun\u0105\u0107 z\u0142oty suwak: po lewej stronie wersja polska, po prawej \u2014 angielska.<\/p>\r\n\r\n    <div class=\"dwx\" data-anim>\r\n\r\n      <div class=\"dwx-zakladki\" id=\"dwxZakladki\" role=\"group\" aria-label=\"Wyb\u00f3r przyk\u0142adu\">\r\n\r\n        <button type=\"button\" class=\"dwx-zakladka\" data-i=\"0\" aria-pressed=\"true\"><span data-en=\"Science\">Science<\/span><em data-en=\"Years 1\u20133\">klasy 1\u20133<\/em><\/button>\r\n\r\n        <button type=\"button\" class=\"dwx-zakladka\" data-i=\"1\" aria-pressed=\"false\"><span data-en=\"Maths\">Maths<\/span><em data-en=\"Years 1\u20133\">klasy 1\u20133<\/em><\/button>\r\n\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\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\r\n        <button type=\"button\" class=\"dwx-zakladka\" data-i=\"4\" aria-pressed=\"false\"><span data-en=\"English culture\">English culture<\/span><em data-en=\"Years 4\u20138\">klasy 4\u20138<\/em><\/button>\r\n\r\n      <\/div>\r\n\r\n      <div class=\"dwx-scena\" id=\"dwxScena\">\r\n\r\n        <div class=\"dwx-warstwa dwx-warstwa--pl\" lang=\"pl\">\r\n\r\n          <span class=\"dwx-flaga\" data-en=\"In Polish\">Po polsku<\/span>\r\n\r\n          <div class=\"dwx-tresc\" data-i=\"0\">\r\n\r\n            <h3 class=\"dwx-temat\">Obieg wody w przyrodzie<\/h3>\r\n\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\r\n            <ul class=\"dwx-slowa\"><li>parowanie<\/li><li>skraplanie<\/li><li>opady<\/li><li>obieg wody<\/li><\/ul>\r\n\r\n          <\/div>\r\n\r\n          <div class=\"dwx-tresc\" data-i=\"1\" hidden>\r\n\r\n            <h3 class=\"dwx-temat\">Figury i k\u0105ty<\/h3>\r\n\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\r\n            <ul class=\"dwx-slowa\"><li>kwadrat<\/li><li>prostok\u0105t<\/li><li>k\u0105t prosty<\/li><li>bok<\/li><\/ul>\r\n\r\n          <\/div>\r\n\r\n          <div class=\"dwx-tresc\" data-i=\"2\" hidden>\r\n\r\n            <h3 class=\"dwx-temat\">Instrumenty orkiestry<\/h3>\r\n\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\r\n            <ul class=\"dwx-slowa\"><li>smyczki<\/li><li>instrumenty d\u0119te<\/li><li>perkusja<\/li><li>brzmienie<\/li><\/ul>\r\n\r\n          <\/div>\r\n\r\n          <div class=\"dwx-tresc\" data-i=\"3\" hidden>\r\n\r\n            <h3 class=\"dwx-temat\">Wielkie odkrycia geograficzne<\/h3>\r\n\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\r\n            <ul class=\"dwx-slowa\"><li>odkrycie<\/li><li>\u017ceglarz<\/li><li>wyprawa<\/li><li>handel<\/li><\/ul>\r\n\r\n          <\/div>\r\n\r\n          <div class=\"dwx-tresc\" data-i=\"4\" hidden>\r\n\r\n            <h3 class=\"dwx-temat\">Szko\u0142a w Wielkiej Brytanii<\/h3>\r\n\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\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\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <div class=\"dwx-warstwa dwx-warstwa--en\" lang=\"en\" id=\"dwxEn\">\r\n\r\n          <span class=\"dwx-flaga\" data-en=\"In English\">Po angielsku<\/span>\r\n\r\n          <div class=\"dwx-tresc\" data-i=\"0\">\r\n\r\n            <h3 class=\"dwx-temat\">The Water Cycle<\/h3>\r\n\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\r\n            <ul class=\"dwx-slowa\"><li>evaporation<\/li><li>condensation<\/li><li>precipitation<\/li><li>water cycle<\/li><\/ul>\r\n\r\n          <\/div>\r\n\r\n          <div class=\"dwx-tresc\" data-i=\"1\" hidden>\r\n\r\n            <h3 class=\"dwx-temat\">Shapes and Angles<\/h3>\r\n\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\r\n            <ul class=\"dwx-slowa\"><li>square<\/li><li>rectangle<\/li><li>right angle<\/li><li>side<\/li><\/ul>\r\n\r\n          <\/div>\r\n\r\n          <div class=\"dwx-tresc\" data-i=\"2\" hidden>\r\n\r\n            <h3 class=\"dwx-temat\">Instruments of the Orchestra<\/h3>\r\n\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\r\n            <ul class=\"dwx-slowa\"><li>strings<\/li><li>woodwind<\/li><li>brass<\/li><li>percussion<\/li><\/ul>\r\n\r\n          <\/div>\r\n\r\n          <div class=\"dwx-tresc\" data-i=\"3\" hidden>\r\n\r\n            <h3 class=\"dwx-temat\">The Age of Discovery<\/h3>\r\n\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\r\n            <ul class=\"dwx-slowa\"><li>discovery<\/li><li>sailor<\/li><li>voyage<\/li><li>trade<\/li><\/ul>\r\n\r\n          <\/div>\r\n\r\n          <div class=\"dwx-tresc\" data-i=\"4\" hidden>\r\n\r\n            <h3 class=\"dwx-temat\">School Life in Britain<\/h3>\r\n\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\r\n            <ul class=\"dwx-slowa\"><li>custom<\/li><li>to compare<\/li><li>tradition<\/li><li>community<\/li><\/ul>\r\n\r\n          <\/div>\r\n\r\n        <\/div>\r\n\r\n        <input class=\"dwx-zakres\" id=\"dwxZakres\" type=\"range\" min=\"0\" max=\"100\" value=\"50\"\r\n\r\n               aria-label=\"Przesu\u0144, aby por\u00f3wna\u0107 wersj\u0119 polsk\u0105 i angielsk\u0105\"\r\n\r\n               data-en-aria=\"Drag to compare the Polish and the English version\">\r\n\r\n        <div class=\"dwx-uchwyt\" id=\"dwxUchwyt\" aria-hidden=\"true\"><div class=\"dwx-galka\">PL\/EN<\/div><\/div>\r\n\r\n      <\/div>\r\n\r\n      <div class=\"dwx-skroty\">\r\n\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\r\n        <p class=\"dwx-podpowiedz\"><i aria-hidden=\"true\">\u2194<\/i><span data-en=\"Drag the handle\">Prosimy przeci\u0105gn\u0105\u0107 suwak<\/span><\/p>\r\n\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\r\n      <\/div>\r\n\r\n      <p class=\"dwx-stopka\" data-en=\"Sample lesson extracts \u2014 they illustrate the method rather than record a particular class.\">Przyk\u0142adowe fragmenty lekcji \u2014 pokazuj\u0105 spos\u00f3b pracy, a nie zapis konkretnych zaj\u0119\u0107.<\/p>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <!-- \u2550\u2550 PAS ZE ZDJ\u0118CIEM \u2550\u2550 -->\r\n\r\n  <div class=\"dw-band dw-band--native\" data-anim>\r\n\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\r\n         alt=\"Uczniowie Hilaris na zaj\u0119ciach j\u0119zykowych\"\r\n\r\n         data-en-alt=\"Hilaris pupils during a language lesson\" loading=\"lazy\"\r\n\r\n         style=\"--kadr:center 15%;--kadr-d:center 10%\">\r\n\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\r\n  <\/div>\r\n\r\n\r\n\r\n  <!-- \u2550\u2550 GALERIA \u2550\u2550 -->\r\n\r\n  <div class=\"hx-sec\">\r\n\r\n    <h2 class=\"hx-h\" data-anim data-en=\"English in everyday school life\">Angielski w codzienno\u015bci szkolnej<\/h2>\r\n\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\r\n    <div class=\"dw-gal\" id=\"dwGal\">\r\n\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\r\n              aria-label=\"Powi\u0119ksz zdj\u0119cie\" data-en-aria=\"Enlarge the photo\">\r\n\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\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\r\n              aria-label=\"Powi\u0119ksz zdj\u0119cie\" data-en-aria=\"Enlarge the photo\">\r\n\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\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\r\n              aria-label=\"Powi\u0119ksz zdj\u0119cie\" data-en-aria=\"Enlarge the photo\">\r\n\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\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\r\n              aria-label=\"Powi\u0119ksz zdj\u0119cie\" data-en-aria=\"Enlarge the photo\">\r\n\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\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <!-- \u2550\u2550 CO Z TEGO WYNIKA \u2550\u2550 -->\r\n\r\n  <div class=\"hx-sec hx-sec--mist\">\r\n\r\n    <h2 class=\"hx-h\" data-anim data-en=\"What it adds up to\">Co z tego wynika<\/h2>\r\n\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\r\n    <div class=\"dw-fakty\">\r\n\r\n      <div class=\"dw-fakt\" data-anim>\r\n\r\n        <span class=\"dw-fakt__n\">100%<\/span>\r\n\r\n        <div>\r\n\r\n          <b data-en=\"pass rate in Cambridge exams\">zdawalno\u015bci egzamin\u00f3w Cambridge<\/b>\r\n\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\r\n          <a href=\"https:\/\/hilaris-blonie.pl\/?page_id=4171\"><span data-en=\"See the certificates\">Zobacz certyfikaty<\/span>\r\n\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\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <div class=\"dw-fakt\" data-anim>\r\n\r\n        <span class=\"dw-fakt__n\">24<\/span>\r\n\r\n        <div>\r\n\r\n          <b data-en=\"Cambridge certificates in our pupils\u2019 hands\">certyfikaty Cambridge w r\u0119kach uczni\u00f3w<\/b>\r\n\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\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n      <div class=\"dw-fakt\" data-anim>\r\n\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\r\n        <div>\r\n\r\n          <b data-en=\"Small language groups\">Ma\u0142e grupy j\u0119zykowe<\/b>\r\n\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\r\n        <\/div>\r\n\r\n      <\/div>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <!-- \u2550\u2550 POWI\u0104ZANE STRONY \u2550\u2550 -->\r\n\r\n  <div class=\"hx-sec\">\r\n\r\n    <h2 class=\"hx-h\" data-anim data-en=\"Related pages\">Powi\u0105zane strony<\/h2>\r\n\r\n    <div class=\"hx-grid\" style=\"--cols:2;--cols-d:4\">\r\n\r\n      <a class=\"hx-tile\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=4171\" style=\"--c:#8B54C4\" data-anim>\r\n\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\r\n        <b data-en=\"Cambridge exams\">Certyfikaty Cambridge<\/b><u data-en=\"KET and PET\">KET i PET<\/u><\/a>\r\n\r\n      <a class=\"hx-tile\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=2650\" style=\"--c:#D9A417\" data-anim>\r\n\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\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\r\n      <a class=\"hx-tile\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=339\" style=\"--c:#3E8E5A\" data-anim>\r\n\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\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\r\n      <a class=\"hx-tile\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=342\" style=\"--c:#2E86C8\" data-anim>\r\n\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\r\n        <b data-en=\"Our team\">Nasz zesp\u00f3\u0142<\/b><u data-en=\"who teaches here\">kto uczy<\/u><\/a>\r\n\r\n    <\/div>\r\n\r\n  <\/div>\r\n\r\n\r\n\r\n  <!-- \u2550\u2550 PASEK SZYBKICH AKCJI (telefon) \u2550\u2550 -->\r\n\r\n  <nav class=\"hx-bar\" aria-label=\"Szybkie akcje\">\r\n\r\n    <a href=\"https:\/\/hilaris-blonie.pl\/?page_id=345\">\r\n\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\r\n      <span data-en=\"School\">Szko\u0142a<\/span><\/a>\r\n\r\n    <a class=\"is-main\" href=\"https:\/\/hilaris-blonie.pl\/?page_id=4127\">\r\n\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\r\n      <span data-en=\"Visit\">Spotkanie<\/span><\/a>\r\n\r\n    <a href=\"tel:+48224985525\">\r\n\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\r\n      <span data-en=\"Call us\">Zadzwo\u0144<\/span><\/a>\r\n\r\n  <\/nav>\r\n\r\n\r\n\r\n <\/div>\r\n\r\n<\/section>\r\n\r\n\r\n\r\n<script>\r\n\r\n\/* ==========================================================================\r\n\r\n   HILARIS \u2014 DWUJ\u0118ZYCZNO\u015a\u0106: interakcje\r\n\r\n   Skrypt tylko ULEPSZA stron\u0119. Gdyby si\u0119 nie wykona\u0142, tre\u015b\u0107 i tak jest\r\n\r\n   widoczna (siedzi w HTML) \u2014 zniknie jedynie prze\u0142\u0105cznik j\u0119zyka,\r\n\r\n   ruch suwak\u00f3w i powi\u0119kszanie zdj\u0119\u0107.\r\n\r\n   ========================================================================== *\/\r\n\r\n(function(){\r\n\r\n  'use strict';\r\n\r\n  function start(){\r\n\r\n    var ROOT = document.getElementById('hil-dwu');\r\n\r\n    if(!ROOT || ROOT.getAttribute('data-gotowe')) return;\r\n\r\n    ROOT.setAttribute('data-gotowe','1');\r\n\r\n\r\n\r\n    var q  = function(s){ return ROOT.querySelector(s); };\r\n\r\n    var qa = function(s){ return Array.prototype.slice.call(ROOT.querySelectorAll(s)); };\r\n\r\n    var maloRuchu = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\r\n\r\n\r\n\r\n    \/* \u2550\u2550 1. PRZE\u0141\u0104CZNIK J\u0118ZYKA \u2550\u2550\r\n\r\n       Polski tekst zapami\u0119tujemy przy pierwszym prze\u0142\u0105czeniu, angielski\r\n\r\n       stoi w atrybucie data-en. Zamieniamy tylko czysty tekst, wi\u0119c \u017caden\r\n\r\n       element nie mo\u017ce mie\u0107 jednocze\u015bnie data-en i dzieci HTML. *\/\r\n\r\n    var jezyk = 'pl';\r\n\r\n    function ustawJezyk(l){\r\n\r\n      jezyk = l;\r\n\r\n      qa('[data-en]').forEach(function(el){\r\n\r\n        if(el.getAttribute('data-pl') === null) el.setAttribute('data-pl', el.textContent);\r\n\r\n        el.textContent = (l === 'en') ? el.getAttribute('data-en') : el.getAttribute('data-pl');\r\n\r\n      });\r\n\r\n      qa('[data-en-alt]').forEach(function(el){\r\n\r\n        if(el.getAttribute('data-pl-alt') === null) el.setAttribute('data-pl-alt', el.getAttribute('alt') || '');\r\n\r\n        el.setAttribute('alt', l === 'en' ? el.getAttribute('data-en-alt') : el.getAttribute('data-pl-alt'));\r\n\r\n      });\r\n\r\n      qa('[data-en-aria]').forEach(function(el){\r\n\r\n        if(el.getAttribute('data-pl-aria') === null) el.setAttribute('data-pl-aria', el.getAttribute('aria-label') || '');\r\n\r\n        el.setAttribute('aria-label', l === 'en' ? el.getAttribute('data-en-aria') : el.getAttribute('data-pl-aria'));\r\n\r\n      });\r\n\r\n      ROOT.setAttribute('lang', l);\r\n\r\n      opiszSuwak();\r\n\r\n    }\r\n\r\n    var przelacznik = q('#dwLang');\r\n\r\n    if(przelacznik){\r\n\r\n      przelacznik.addEventListener('click', function(e){\r\n\r\n        var b = e.target.closest ? e.target.closest('button') : null;\r\n\r\n        if(!b) return;\r\n\r\n        var nowy = b.getAttribute('data-l');\r\n\r\n        if(nowy === jezyk) return;\r\n\r\n        przelacznik.querySelectorAll('button').forEach(function(x){\r\n\r\n          x.setAttribute('aria-pressed', x === b ? 'true' : 'false');\r\n\r\n        });\r\n\r\n        przelacznik.classList.toggle('en', nowy === 'en');\r\n\r\n        if(document.startViewTransition && !maloRuchu){\r\n\r\n          document.startViewTransition(function(){ ustawJezyk(nowy); });\r\n\r\n        } else { ustawJezyk(nowy); }\r\n\r\n      });\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* \u2550\u2550 2. SUWAK PL \u21c4 EN \u2550\u2550\r\n\r\n       Warto\u015b\u0107 suwaka to miejsce, od kt\u00f3rego zaczyna si\u0119 warstwa angielska:\r\n\r\n       0 \u2192 ca\u0142a scena po angielsku, 100 \u2192 ca\u0142a po polsku, 50 \u2192 p\u00f3\u0142 na p\u00f3\u0142. *\/\r\n\r\n    var scena  = q('#dwxScena'),\r\n\r\n        enWar  = q('#dwxEn'),\r\n\r\n        uchwyt = q('#dwxUchwyt'),\r\n\r\n        zakres = q('#dwxZakres');\r\n\r\n    \/* na w\u0105skim ekranie zaczynamy od pe\u0142nego polskiego \u2014 przy podziale 50\/50\r\n\r\n       po\u0142\u00f3wki zda\u0144 zachodzi\u0142yby na siebie i tekst by\u0142by nieczytelny *\/\r\n\r\n    var szeroko = window.matchMedia('(min-width:700px)').matches;\r\n\r\n    var START = szeroko ? 50 : 100;\r\n\r\n\r\n\r\n    function opiszSuwak(){\r\n\r\n      if(!zakres) return;\r\n\r\n      zakres.setAttribute('aria-valuetext',\r\n\r\n        (100 - Math.round(+zakres.value)) + '% ' + (jezyk === 'pl' ? 'wersji angielskiej' : 'English'));\r\n\r\n    }\r\n\r\n    function przesun(v, plynnie){\r\n\r\n      if(!enWar || !uchwyt || !zakres) return;\r\n\r\n      if(plynnie && !maloRuchu){\r\n\r\n        enWar.style.transition  = 'clip-path .55s cubic-bezier(.22,1,.36,1)';\r\n\r\n        uchwyt.style.transition = 'left .55s cubic-bezier(.22,1,.36,1)';\r\n\r\n        window.setTimeout(function(){\r\n\r\n          enWar.style.transition = ''; uchwyt.style.transition = '';\r\n\r\n        }, 620);\r\n\r\n      }\r\n\r\n      enWar.style.clipPath = 'inset(0 0 0 ' + v + '%)';\r\n\r\n      uchwyt.style.left = v + '%';\r\n\r\n      zakres.value = v;\r\n\r\n      opiszSuwak();\r\n\r\n    }\r\n\r\n    if(zakres) zakres.addEventListener('input', function(){ przesun(this.value); });\r\n\r\n\r\n\r\n    \/* wyb\u00f3r przyk\u0142adu lekcji *\/\r\n\r\n    var zakladki = q('#dwxZakladki');\r\n\r\n    function pokazPrzyklad(i){\r\n\r\n      qa('.dwx-tresc').forEach(function(el){\r\n\r\n        el.hidden = (el.getAttribute('data-i') !== String(i));\r\n\r\n      });\r\n\r\n      qa('.dwx-zakladka').forEach(function(b){\r\n\r\n        b.setAttribute('aria-pressed', b.getAttribute('data-i') === String(i) ? 'true' : 'false');\r\n\r\n      });\r\n\r\n    }\r\n\r\n    if(zakladki){\r\n\r\n      zakladki.addEventListener('click', function(e){\r\n\r\n        var b = e.target.closest ? e.target.closest('.dwx-zakladka') : null;\r\n\r\n        if(!b) return;\r\n\r\n        pokazPrzyklad(b.getAttribute('data-i'));\r\n\r\n      });\r\n\r\n    }\r\n\r\n    \/* przyciski \u201epoka\u017c ca\u0142o\u015b\u0107 po \u2026\u201d *\/\r\n\r\n    qa('.dwx-skrot').forEach(function(b){\r\n\r\n      b.addEventListener('click', function(){ przesun(+b.getAttribute('data-do'), true); });\r\n\r\n    });\r\n\r\n    \/* kafelek przedmiotu w opisie etapu \u2192 odpowiedni przyk\u0142ad w suwaku *\/\r\n\r\n    var etapy = q('#dwStages');\r\n\r\n    if(etapy){\r\n\r\n      etapy.addEventListener('click', function(e){\r\n\r\n        var b = e.target.closest ? e.target.closest('button.dw-s') : null;\r\n\r\n        if(!b) return;\r\n\r\n        pokazPrzyklad(b.getAttribute('data-do'));\r\n\r\n        var cel = q('#dwLekcja');\r\n\r\n        if(cel && cel.scrollIntoView){\r\n\r\n          cel.scrollIntoView({behavior: maloRuchu ? 'auto' : 'smooth', block:'start'});\r\n\r\n        }\r\n\r\n        window.setTimeout(function(){ przesun(START, true); }, maloRuchu ? 0 : 520);\r\n\r\n      });\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* \u2550\u2550 3. POWI\u0118KSZENIE ZDJ\u0118CIA \u2550\u2550\r\n\r\n       Okno doklejamy do <body>, \u017ceby \u017caden przyklejony nag\u0142\u00f3wek go nie zas\u0142oni\u0142. *\/\r\n\r\n    var galeria = q('#dwGal');\r\n\r\n    if(galeria){\r\n\r\n      var lb = document.createElement('div');\r\n\r\n      lb.className = 'hx-lb-dwu';\r\n\r\n      lb.setAttribute('role','dialog');\r\n\r\n      lb.setAttribute('aria-modal','true');\r\n\r\n      lb.innerHTML = '<button type=\"button\" class=\"hx-lb-dwu__x\" aria-label=\"Zamknij\">'\r\n\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\r\n      document.body.appendChild(lb);\r\n\r\n      var lbImg = lb.querySelector('img'), lbX = lb.querySelector('.hx-lb-dwu__x');\r\n\r\n      var pozycja = 0, wracamDo = null;\r\n\r\n      function otworz(src, zrodlo){\r\n\r\n        wracamDo = zrodlo || null;\r\n\r\n        pozycja = window.pageYOffset || document.documentElement.scrollTop || 0;\r\n\r\n        lbImg.src = src;\r\n\r\n        lbX.setAttribute('aria-label', jezyk === 'pl' ? 'Zamknij powi\u0119kszenie' : 'Close the preview');\r\n\r\n        lb.classList.add('on');\r\n\r\n        document.body.style.overflow = 'hidden';\r\n\r\n        window.setTimeout(function(){ lbX.focus(); }, 60);\r\n\r\n      }\r\n\r\n      function zamknij(){\r\n\r\n        lb.classList.remove('on');\r\n\r\n        document.body.style.overflow = '';\r\n\r\n        window.scrollTo(0, pozycja);\r\n\r\n        if(wracamDo && wracamDo.focus) wracamDo.focus();\r\n\r\n        window.setTimeout(function(){ lbImg.src = ''; }, 320);\r\n\r\n      }\r\n\r\n      galeria.addEventListener('click', function(e){\r\n\r\n        var g = e.target.closest ? e.target.closest('.dw-g') : null;\r\n\r\n        if(g) otworz(g.getAttribute('data-f'), g);\r\n\r\n      });\r\n\r\n      lbX.addEventListener('click', zamknij);\r\n\r\n      lb.addEventListener('click', function(e){ if(e.target === lb || e.target === lbImg) zamknij(); });\r\n\r\n      document.addEventListener('keydown', function(e){\r\n\r\n        if(e.key === 'Escape' && lb.classList.contains('on')) zamknij();\r\n\r\n      });\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* \u2550\u2550 4. ANIMACJE WEJ\u015aCIA (dla przegl\u0105darek bez animation-timeline) \u2550\u2550 *\/\r\n\r\n    var natywne = !!(window.CSS && CSS.supports && CSS.supports('animation-timeline','view()'));\r\n\r\n    if(!natywne && !maloRuchu){\r\n\r\n      ROOT.classList.add('dw-js');\r\n\r\n      if('IntersectionObserver' in window){\r\n\r\n        var io = new IntersectionObserver(function(w){\r\n\r\n          w.forEach(function(x, n){\r\n\r\n            if(!x.isIntersecting) return;\r\n\r\n            window.setTimeout(function(){ x.target.classList.add('in'); }, n * 70);\r\n\r\n            io.unobserve(x.target);\r\n\r\n          });\r\n\r\n        }, {threshold:.12, rootMargin:'0px 0px -5% 0px'});\r\n\r\n        qa('[data-anim]').forEach(function(el){ io.observe(el); });\r\n\r\n      }\r\n\r\n      \/* bezpiecznik: po 4 s wszystko jest widoczne, cokolwiek by si\u0119 sta\u0142o *\/\r\n\r\n      window.setTimeout(function(){\r\n\r\n        qa('[data-anim]').forEach(function(el){ el.classList.add('in'); });\r\n\r\n      }, 4000);\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* \u2550\u2550 5. ZDJ\u0118CIA W PASACH: kadr rozsuwa si\u0119 przy wje\u017adzie w ekran \u2550\u2550 *\/\r\n\r\n    var pasy = qa('.dw-band');\r\n\r\n    if(pasy.length){\r\n\r\n      if('IntersectionObserver' in window && !maloRuchu){\r\n\r\n        var io2 = new IntersectionObserver(function(w){\r\n\r\n          w.forEach(function(x){\r\n\r\n            if(!x.isIntersecting) return;\r\n\r\n            x.target.classList.add('widoczny'); io2.unobserve(x.target);\r\n\r\n          });\r\n\r\n        }, {threshold:.18});\r\n\r\n        pasy.forEach(function(el){ io2.observe(el); });\r\n\r\n      }\r\n\r\n      window.setTimeout(function(){\r\n\r\n        pasy.forEach(function(el){ el.classList.add('widoczny'); });\r\n\r\n      }, 3000);\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* \u2550\u2550 6. PARALAKSA PAS\u00d3W \u2550\u2550 *\/\r\n\r\n    var obrazy = qa('.dw-band img');\r\n\r\n    if(obrazy.length && !maloRuchu){\r\n\r\n      var czeka = false;\r\n\r\n      var przesunPasy = function(){\r\n\r\n        obrazy.forEach(function(img){\r\n\r\n          var b = img.parentNode.getBoundingClientRect();\r\n\r\n          if(b.bottom < 0 || b.top > window.innerHeight) return;\r\n\r\n          var p = (b.top + b.height \/ 2 - window.innerHeight \/ 2) \/ window.innerHeight;\r\n\r\n          img.style.transform = 'translateY(' + (p * -22).toFixed(1) + 'px)';\r\n\r\n        });\r\n\r\n      };\r\n\r\n      window.addEventListener('scroll', function(){\r\n\r\n        if(czeka) return; czeka = true;\r\n\r\n        window.requestAnimationFrame(function(){ przesunPasy(); czeka = false; });\r\n\r\n      }, {passive:true});\r\n\r\n      przesunPasy();\r\n\r\n    }\r\n\r\n\r\n\r\n    \/* \u2550\u2550 7. STAN POCZ\u0104TKOWY \u2550\u2550 *\/\r\n\r\n    przesun(START);\r\n\r\n    \/* powitalne \u201emrugni\u0119cie\u201d suwakiem \u2014 pokazuje, \u017ce da si\u0119 go przeci\u0105gn\u0105\u0107 *\/\r\n\r\n    if(scena && 'IntersectionObserver' in window && !maloRuchu){\r\n\r\n      var pokazano = false;\r\n\r\n      var io3 = new IntersectionObserver(function(w){\r\n\r\n        w.forEach(function(x){\r\n\r\n          if(!x.isIntersecting || pokazano) return;\r\n\r\n          pokazano = true; io3.disconnect();\r\n\r\n          var kroki = szeroko ? [66, 34, 50] : [34, 100], k = 0;\r\n\r\n          var id = window.setInterval(function(){\r\n\r\n            przesun(kroki[k], true); k++;\r\n\r\n            if(k >= kroki.length) window.clearInterval(id);\r\n\r\n          }, 620);\r\n\r\n        });\r\n\r\n      }, {threshold:.35});\r\n\r\n      io3.observe(scena);\r\n\r\n    }\r\n\r\n    \/* je\u017celi na stronie jest rdze\u0144 Hilaris, korzystamy z jego funkcji porz\u0105dkuj\u0105cej *\/\r\n\r\n    if(window.HX && HX.sierotki){ try{ HX.sierotki(ROOT); }catch(e){} }\r\n\r\n  }\r\n\r\n\r\n\r\n  function odpal(){\r\n\r\n    try{ start(); }\r\n\r\n    catch(e){ if(window.console && console.error) console.error('Hilaris \u2014 dwuj\u0119zyczno\u015b\u0107:', e); }\r\n\r\n  }\r\n\r\n  if(document.readyState === 'loading'){\r\n\r\n    document.addEventListener('DOMContentLoaded', odpal);\r\n\r\n  } else {\r\n\r\n    odpal();\r\n\r\n  }\r\n\r\n  \/* Elementor potrafi wstawi\u0107 widget po za\u0142adowaniu strony (podgl\u0105d na \u017cywo) *\/\r\n\r\n  if(window.jQuery){ jQuery(window).on('elementor\/frontend\/init', odpal); }\r\n\r\n})();\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":106,"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=\/wp\/v2\/pages\/357\/revisions"}],"predecessor-version":[{"id":7146,"href":"https:\/\/hilaris-blonie.pl\/index.php?rest_route=\/wp\/v2\/pages\/357\/revisions\/7146"}],"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}]}}