{"id":29,"date":"2025-07-25T05:04:58","date_gmt":"2025-07-25T05:04:58","guid":{"rendered":"https:\/\/wordpress.vecurosoft.com\/toddly\/?page_id=29"},"modified":"2026-03-02T08:10:43","modified_gmt":"2026-03-02T07:10:43","slug":"home-03","status":"publish","type":"page","link":"https:\/\/mozaikaszczecin.pl\/","title":{"rendered":"Home 03"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"29\" class=\"elementor elementor-29\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8002bc2 e-con-full e-flex e-con e-parent\" data-id=\"8002bc2\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b5be5c8 elementor-widget elementor-widget-html\" data-id=\"b5be5c8\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<div class=\"mz-split4\" id=\"mz-split4\">\r\n  <!-- LEFT -->\r\n  <section class=\"mz-layer mz-left\" aria-label=\"Mozaika Szczecin \u017b\u0142obek TWP\">\r\n    <div class=\"mz-bg\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"mz-tint\" aria-hidden=\"true\"><\/div>\r\n\r\n    <div class=\"mz-card mz-card-left\">\r\n      <div class=\"mz-logoWrap\">\r\n        <img decoding=\"async\" class=\"mz-logo\"\r\n          src=\"https:\/\/mozaikaszczecin.pl\/wp-content\/uploads\/2026\/02\/zlobek.png\"\r\n          alt=\"Mozaika Szczecin \u017b\u0142obek TWP\" loading=\"eager\">\r\n      <\/div>\r\n      <h2 class=\"mz-title\">Mozaika Szczecin<br><span>\u017b\u0142obek TWP<\/span><\/h2>\r\n      <p class=\"mz-subtitle\">Opieka \u2022 Adaptacja \u2022 Blisko\u015b\u0107<\/p>\r\n      <a class=\"mz-cta\" href=\"https:\/\/zlobek.mozaikaszczecin.pl\" data-side=\"left\">Wejd\u017a \u2192<\/a>\r\n    <\/div>\r\n\r\n    <span class=\"mz-badge\">0\u20133<\/span>\r\n  <\/section>\r\n\r\n  <!-- RIGHT -->\r\n  <section class=\"mz-layer mz-right\" aria-label=\"Mozaika Szczecin Przedszkole TWP\">\r\n    <div class=\"mz-bg\" aria-hidden=\"true\"><\/div>\r\n    <div class=\"mz-tint\" aria-hidden=\"true\"><\/div>\r\n\r\n    <div class=\"mz-card mz-card-right\">\r\n      <div class=\"mz-logoWrap\">\r\n        <img decoding=\"async\" class=\"mz-logo\"\r\n          src=\"https:\/\/mozaikaszczecin.pl\/wp-content\/uploads\/2026\/02\/przedszkole.png\"\r\n          alt=\"Mozaika Szczecin Przedszkole TWP\" loading=\"eager\">\r\n      <\/div>\r\n      <h2 class=\"mz-title\">Mozaika Szczecin<br><span>Przedszkole TWP<\/span><\/h2>\r\n      <p class=\"mz-subtitle\">Rozw\u00f3j \u2022 Kreatywno\u015b\u0107 \u2022 Przyja\u017a\u0144<\/p>\r\n      <a class=\"mz-cta\" href=\"https:\/\/przedszkole.mozaikaszczecin.pl\" data-side=\"right\">Wejd\u017a \u2192<\/a>\r\n    <\/div>\r\n\r\n    <span class=\"mz-badge\">3\u20136<\/span>\r\n  <\/section>\r\n\r\n  <div class=\"mz-divider\" aria-hidden=\"true\"><\/div>\r\n<\/div>\r\n\r\n<style>\r\n  #mz-split4{\r\n    \/* KOLORY T\u0141A (Twoje) *\/\r\n    --bg-left:  #87C90C; \/* \u017c\u0142obek *\/\r\n    --bg-right: #00AFAF; \/* przedszkole *\/\r\n\r\n    \/* akcenty do po\u015bwiaty *\/\r\n    --glowL: rgba(135, 201, 12, .55);\r\n    --glowR: rgba(245, 155, 47, .55);\r\n\r\n    --radius: 22px;\r\n    --shadow: 0 20px 60px rgba(0,0,0,.18);\r\n    --divider: rgba(255,255,255,.55);\r\n\r\n    \/* karta *\/\r\n    --cardBg: rgba(255,255,255,.90);\r\n    --cardBorder: rgba(255,255,255,.55);\r\n    --cardText: #0f172a;\r\n    --cardMuted: rgba(15,23,42,.72);\r\n\r\n    --ease: cubic-bezier(.2,.85,.2,1);\r\n\r\n    \/* ci\u0119cie start *\/\r\n    --cut: 50%;\r\n\r\n    \/* \u2705 FIX: nie blokuj wysoko\u015bci vh (ucina\u0142o d\u00f3\u0142 na telefonie) *\/\r\n    width: 100%;\r\n    min-height: clamp(520px, 72vh, 860px);\r\n    height: auto;\r\n  }\r\n\r\n  #mz-split4.mz-split4{\r\n    width: 100%;\r\n    border-radius: var(--radius);\r\n    overflow: hidden;\r\n    box-shadow: var(--shadow);\r\n    position: relative;\r\n    isolation: isolate;\r\n    background: #0b0f19;\r\n\r\n    \/* \u2705 FIX: lepsze viewporty na mobile (iOS\/Android) *\/\r\n    min-height: clamp(520px, 72vh, 860px);\r\n    min-height: clamp(520px, 72svh, 860px);\r\n    min-height: clamp(520px, 72dvh, 860px);\r\n  }\r\n\r\n  \/* Warstwy przyci\u0119te -> dwie po\u0142\u00f3wki *\/\r\n  #mz-split4 .mz-layer{\r\n    position: absolute;\r\n    inset: 0;\r\n    overflow: hidden;\r\n  }\r\n  #mz-split4 .mz-left{\r\n    clip-path: polygon(0 0, var(--cut) 0, var(--cut) 100%, 0 100%);\r\n    transition: clip-path .75s var(--ease);\r\n    will-change: clip-path;\r\n  }\r\n  #mz-split4 .mz-right{\r\n    clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, var(--cut) 100%);\r\n    transition: clip-path .75s var(--ease);\r\n    will-change: clip-path;\r\n  }\r\n\r\n  \/* T\u0141O bez zdj\u0119\u0107: kolor + gradient + delikatny pattern *\/\r\n  #mz-split4 .mz-bg{\r\n    position: absolute;\r\n    inset: 0;\r\n    transform: scale(1.01);\r\n    transition: transform .85s var(--ease), filter .85s var(--ease);\r\n    will-change: transform;\r\n\r\n    \/* pattern: subtelne kropki (bez obrazk\u00f3w) *\/\r\n    background-image:\r\n      radial-gradient(circle at 18px 18px, rgba(255,255,255,.14) 2px, transparent 2.5px),\r\n      radial-gradient(circle at 54px 54px, rgba(255,255,255,.10) 2px, transparent 2.5px),\r\n      linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.06));\r\n    background-size: 72px 72px, 72px 72px, 100% 100%;\r\n    background-position: 0 0, 0 0, 0 0;\r\n    background-blend-mode: overlay, overlay, normal;\r\n  }\r\n  #mz-split4 .mz-left  .mz-bg{ background-color: var(--bg-left); }\r\n  #mz-split4 .mz-right .mz-bg{ background-color: var(--bg-right); }\r\n\r\n  \/* Tint: robi \"premium\" g\u0142\u0119bi\u0119 *\/\r\n  #mz-split4 .mz-tint{\r\n    position: absolute;\r\n    inset: 0;\r\n    opacity: .95;\r\n    transition: opacity .55s var(--ease);\r\n  }\r\n  #mz-split4 .mz-left .mz-tint{\r\n    background:\r\n      radial-gradient(800px 520px at 30% 55%, rgba(255,255,255,.22), rgba(255,255,255,0) 60%),\r\n      radial-gradient(900px 700px at 70% 20%, rgba(0,0,0,.12), rgba(0,0,0,0) 55%),\r\n      linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,.05));\r\n  }\r\n  #mz-split4 .mz-right .mz-tint{\r\n    background:\r\n      radial-gradient(800px 520px at 70% 55%, rgba(255,255,255,.20), rgba(255,255,255,0) 60%),\r\n      radial-gradient(900px 700px at 30% 20%, rgba(0,0,0,.12), rgba(0,0,0,0) 55%),\r\n      linear-gradient(0deg, rgba(0,0,0,.18), rgba(0,0,0,.05));\r\n  }\r\n\r\n  \/* Divider idzie za cut *\/\r\n  #mz-split4 .mz-divider{\r\n    position: absolute;\r\n    top: 0; bottom: 0;\r\n    left: var(--cut);\r\n    width: 2px;\r\n    transform: translateX(-1px);\r\n    background: linear-gradient(180deg, transparent, var(--divider), transparent);\r\n    z-index: 50;\r\n    pointer-events: none;\r\n    transition: left .75s var(--ease);\r\n  }\r\n\r\n  \/* KARTY *\/\r\n  #mz-split4 .mz-card{\r\n    position: absolute;\r\n    top: 50%;\r\n    transform: translateY(-50%);\r\n    z-index: 20;\r\n    width: min(520px, 42vw);\r\n    padding: 26px 22px;\r\n    border-radius: 18px;\r\n    background: var(--cardBg);\r\n    border: 1px solid var(--cardBorder);\r\n    backdrop-filter: blur(10px);\r\n    -webkit-backdrop-filter: blur(10px);\r\n    text-align: center;\r\n    color: var(--cardText);\r\n    box-shadow: 0 18px 42px rgba(0,0,0,.16);\r\n  }\r\n  #mz-split4 .mz-card-left{ left: clamp(16px, 4vw, 56px); }\r\n  #mz-split4 .mz-card-right{ right: clamp(16px, 4vw, 56px); }\r\n\r\n  #mz-split4 .mz-logoWrap{\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 10px 14px;\r\n    border-radius: 16px;\r\n    background: rgba(255,255,255,.95);\r\n    border: 1px solid rgba(15,23,42,.08);\r\n    box-shadow: 0 12px 30px rgba(0,0,0,.10);\r\n    margin-bottom: 14px;\r\n  }\r\n  #mz-split4 .mz-logo{\r\n    width: clamp(120px, 16vw, 180px);\r\n    height: auto;\r\n    display: block;\r\n  }\r\n\r\n  #mz-split4 .mz-title{\r\n    margin: 0 0 8px 0;\r\n    font-weight: 950;\r\n    letter-spacing: .2px;\r\n    line-height: 1.06;\r\n    font-size: clamp(20px, 2.1vw, 34px);\r\n  }\r\n  #mz-split4 .mz-subtitle{\r\n    margin: 0 0 14px 0;\r\n    color: var(--cardMuted);\r\n    font-weight: 600;\r\n    font-size: clamp(13px, 1.05vw, 16px);\r\n  }\r\n\r\n  \/* CTA *\/\r\n  #mz-split4 .mz-cta{\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    padding: 12px 16px;\r\n    border-radius: 999px;\r\n    text-decoration: none;\r\n    font-weight: 900;\r\n    letter-spacing: .2px;\r\n    color: #0f172a;\r\n    background: rgba(255,255,255,.97);\r\n    border: 1px solid rgba(15,23,42,.12);\r\n    box-shadow: 0 10px 28px rgba(0,0,0,.12);\r\n    transition: transform .25s var(--ease), box-shadow .25s var(--ease);\r\n  }\r\n  #mz-split4 .mz-cta:hover{\r\n    transform: translateY(-1px);\r\n    box-shadow: 0 14px 34px rgba(0,0,0,.16);\r\n  }\r\n  #mz-split4 .mz-cta:focus-visible{\r\n    outline: 3px solid rgba(255,255,255,.75);\r\n    outline-offset: 3px;\r\n  }\r\n\r\n  \/* Badge *\/\r\n  #mz-split4 .mz-badge{\r\n    position: absolute;\r\n    top: 16px;\r\n    left: 16px;\r\n    z-index: 60;\r\n    font-weight: 900;\r\n    font-size: 13px;\r\n    padding: 8px 10px;\r\n    border-radius: 999px;\r\n    background: rgba(255,255,255,.22);\r\n    border: 1px solid rgba(255,255,255,.35);\r\n    color: #fff;\r\n    backdrop-filter: blur(10px);\r\n    -webkit-backdrop-filter: blur(10px);\r\n  }\r\n  #mz-split4 .mz-right .mz-badge{ left: auto; right: 16px; }\r\n\r\n  \/* AKTYWACJA TYLKO PRZYCISKIEM *\/\r\n  #mz-split4.mz-active-left{  --cut: 76%; }\r\n  #mz-split4.mz-active-left .mz-left .mz-bg{\r\n    transform: scale(1.08);\r\n    filter: saturate(1.08) contrast(1.03);\r\n  }\r\n  #mz-split4.mz-active-left .mz-left .mz-tint{ opacity: .92; }\r\n  #mz-split4.mz-active-left .mz-card-left{\r\n    box-shadow: 0 22px 54px rgba(0,0,0,.18), 0 0 0 10px rgba(255,255,255,.06), 0 0 70px var(--glowL);\r\n  }\r\n\r\n  #mz-split4.mz-active-right{ --cut: 24%; }\r\n  #mz-split4.mz-active-right .mz-right .mz-bg{\r\n    transform: scale(1.08);\r\n    filter: saturate(1.08) contrast(1.03);\r\n  }\r\n  #mz-split4.mz-active-right .mz-right .mz-tint{ opacity: .92; }\r\n  #mz-split4.mz-active-right .mz-card-right{\r\n    box-shadow: 0 22px 54px rgba(0,0,0,.18), 0 0 0 10px rgba(255,255,255,.06), 0 0 70px var(--glowR);\r\n  }\r\n\r\n  \/* RESPONSYWNO\u015a\u0106 *\/\r\n  @media (max-width: 980px){\r\n    #mz-split4 .mz-card{ width: min(520px, 86%); }\r\n  }\r\n\r\n  @media (max-width: 860px){\r\n    \/* Mobile: stack *\/\r\n    #mz-split4.mz-split4{\r\n      display: grid;\r\n      grid-template-rows: 1fr 1fr;\r\n\r\n      \/* \u2705 FIX: nie ograniczaj wysoko\u015bci na mobile *\/\r\n      height: auto;\r\n      min-height: unset;\r\n    }\r\n\r\n    #mz-split4{ --cut: 50% !important; }\r\n\r\n    #mz-split4 .mz-layer{\r\n      position: relative;\r\n      inset: auto;\r\n      min-height: 420px;\r\n      clip-path: none !important;\r\n    }\r\n    #mz-split4 .mz-divider{ display:none; }\r\n    #mz-split4 .mz-card{\r\n      left: 50% !important;\r\n      right: auto !important;\r\n      transform: translate(-50%, -50%);\r\n      width: min(520px, 90%);\r\n    }\r\n  }\r\n\r\n  @media (prefers-reduced-motion: reduce){\r\n    #mz-split4 .mz-left,\r\n    #mz-split4 .mz-right,\r\n    #mz-split4 .mz-bg,\r\n    #mz-split4 .mz-tint,\r\n    #mz-split4 .mz-divider,\r\n    #mz-split4 .mz-cta{\r\n      transition: none !important;\r\n    }\r\n  }\r\n<\/style>\r\n\r\n<script>\r\n  (function(){\r\n    const root = document.getElementById('mz-split4');\r\n    if(!root) return;\r\n\r\n    \/\/ dodaj klas\u0119 bazow\u0105 (jak wcze\u015bniej)\r\n    root.classList.add('mz-split4');\r\n\r\n    const activate = (side) => {\r\n      root.classList.toggle('mz-active-left', side === 'left');\r\n      root.classList.toggle('mz-active-right', side === 'right');\r\n    };\r\n    const clear = () => root.classList.remove('mz-active-left','mz-active-right');\r\n\r\n    \/\/ tylko CTA odpala\r\n    root.querySelectorAll('.mz-cta').forEach(btn => {\r\n      const side = btn.getAttribute('data-side');\r\n      btn.addEventListener('mouseenter', () => activate(side));\r\n      btn.addEventListener('mouseleave', clear);\r\n      btn.addEventListener('focus', () => activate(side));\r\n      btn.addEventListener('blur', clear);\r\n    });\r\n\r\n    \/\/ touch: pierwszy tap aktywuje, drugi przechodzi\r\n    const isTouch = matchMedia('(hover: none)').matches;\r\n    if(isTouch){\r\n      root.querySelectorAll('.mz-cta').forEach(btn => {\r\n        const side = btn.getAttribute('data-side');\r\n        btn.addEventListener('click', (e) => {\r\n          const want = side === 'left' ? 'mz-active-left' : 'mz-active-right';\r\n          if(!root.classList.contains(want)){\r\n            e.preventDefault();\r\n            activate(side);\r\n          }\r\n        }, {passive:false});\r\n      });\r\n    }\r\n\r\n    root.addEventListener('mouseleave', clear);\r\n  })();\r\n<\/script>\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>Mozaika Szczecin\u017b\u0142obek TWP Opieka \u2022 Adaptacja \u2022 Blisko\u015b\u0107 Wejd\u017a \u2192 0\u20133 Mozaika SzczecinPrzedszkole TWP Rozw\u00f3j \u2022 Kreatywno\u015b\u0107 \u2022 Przyja\u017a\u0144 Wejd\u017a \u2192 3\u20136<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"template-builder.php","meta":{"footnotes":""},"class_list":["post-29","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mozaikaszczecin.pl\/index.php?rest_route=\/wp\/v2\/pages\/29","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mozaikaszczecin.pl\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mozaikaszczecin.pl\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mozaikaszczecin.pl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mozaikaszczecin.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=29"}],"version-history":[{"count":94,"href":"https:\/\/mozaikaszczecin.pl\/index.php?rest_route=\/wp\/v2\/pages\/29\/revisions"}],"predecessor-version":[{"id":1791,"href":"https:\/\/mozaikaszczecin.pl\/index.php?rest_route=\/wp\/v2\/pages\/29\/revisions\/1791"}],"wp:attachment":[{"href":"https:\/\/mozaikaszczecin.pl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=29"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}