{"id":544,"date":"2025-07-28T02:21:19","date_gmt":"2025-07-28T02:21:19","guid":{"rendered":"https:\/\/demo.7iquid.com\/little-sprouts\/?page_id=544"},"modified":"2026-08-24T07:32:41","modified_gmt":"2026-08-24T07:32:41","slug":"articles","status":"publish","type":"page","link":"https:\/\/flatterium.com\/sunshine-new\/articles\/","title":{"rendered":"Blog No Sidebar"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"544\" class=\"elementor elementor-544\">\n\t\t\t\t<div class=\"elementor-element elementor-element-7502d51 e-flex e-con-boxed e-con e-parent\" data-id=\"7502d51\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-6163b51 e-con-full e-flex e-con e-child\" data-id=\"6163b51\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t\t<div class=\"elementor-element elementor-element-f597af2 elementor-widget__width-inherit elementor-absolute elementor-widget elementor-widget-pxl_image\" data-id=\"f597af2\" data-element_type=\"widget\" data-e-type=\"widget\" data-settings=\"{&quot;_position&quot;:&quot;absolute&quot;}\" data-widget_type=\"pxl_image.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t<div id=\"pxl_image-f597af2-5253\" class=\"pxl-image-wg d-flex animated-left-right\">\r\n\t\t\t<img decoding=\"async\" width=\"42\" height=\"46\" src=\"https:\/\/flatterium.com\/sunshine-new\/wp-content\/uploads\/2025\/08\/bee.webp\" class=\"attachment-full size-full wp-image-3769\" alt=\"\" \/>\t\t\t<\/div>\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-19b14db e-con e-atomic-element e-flexbox-base e-d31302b \" data-id=\"19b14db\" data-element_type=\"e-flexbox\" data-e-type=\"e-flexbox\" data-interaction-id=\"19b14db\">\n    \t\t<div class=\"elementor-element elementor-element-f0b8645 elementor-widget elementor-widget-html\" data-id=\"f0b8645\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!-- ============================================================\n  SUNSHINE HEARTS PRESCHOOL \u2014 ARTICLES SECTION\n  Elementor HTML Widget \u2014 self-contained (scoped CSS + JS)\n  - Semua font pakai `inherit` dari theme, tidak override family\n  - Semua <img> src dikosongin: src=\"\" (isi manual \/ via Elementor)\n============================================================= -->\n<div class=\"sh-articles\">\n\n  <!-- decorative floating elements -->\n  <div class=\"sh-deco sh-deco--cloud\" aria-hidden=\"true\">\n    <svg viewBox=\"0 0 140 90\" width=\"100%\" height=\"100%\">\n      <ellipse cx=\"45\" cy=\"55\" rx=\"42\" ry=\"26\" fill=\"#7FC1E8\"\/>\n      <circle cx=\"80\" cy=\"35\" r=\"26\" fill=\"#FBBE3A\"\/>\n      <g stroke=\"#FBBE3A\" stroke-width=\"4\" stroke-linecap=\"round\">\n        <line x1=\"80\" y1=\"2\" x2=\"80\" y2=\"12\"\/>\n        <line x1=\"112\" y1=\"12\" x2=\"105\" y2=\"19\"\/>\n        <line x1=\"122\" y1=\"35\" x2=\"112\" y2=\"35\"\/>\n      <\/g>\n    <\/svg>\n  <\/div>\n\n  <div class=\"sh-deco sh-deco--dash1\" aria-hidden=\"true\"><\/div>\n  <div class=\"sh-deco sh-deco--dash2\" aria-hidden=\"true\"><\/div>\n\n  <div class=\"sh-deco sh-deco--tree\" aria-hidden=\"true\">\n    <svg viewBox=\"0 0 100 130\" width=\"100%\" height=\"100%\">\n      <rect x=\"44\" y=\"90\" width=\"12\" height=\"38\" rx=\"4\" fill=\"#8a5a34\"\/>\n      <circle cx=\"50\" cy=\"55\" r=\"42\" fill=\"#4CAF50\"\/>\n      <circle cx=\"25\" cy=\"70\" r=\"26\" fill=\"#4CAF50\"\/>\n      <circle cx=\"75\" cy=\"70\" r=\"26\" fill=\"#4CAF50\"\/>\n    <\/svg>\n  <\/div>\n\n  <div class=\"sh-deco sh-deco--chick\" aria-hidden=\"true\">\n    <svg viewBox=\"0 0 90 90\" width=\"100%\" height=\"100%\">\n      <circle cx=\"45\" cy=\"50\" r=\"30\" fill=\"#FBD33A\"\/>\n      <circle cx=\"30\" cy=\"40\" r=\"14\" fill=\"#FBD33A\"\/>\n      <path d=\"M18 40 L2 34 L18 30 Z\" fill=\"#F2A33A\"\/>\n      <circle cx=\"22\" cy=\"38\" r=\"2.4\" fill=\"#333\"\/>\n      <path d=\"M55 60 Q65 75 45 78 Q30 78 40 60Z\" fill=\"#E8792B\"\/>\n    <\/svg>\n  <\/div>\n\n  <div class=\"sh-container\">\n\n    <!-- Card 1: image left \/ colored panel right -->\n    <article class=\"sh-card sh-card--split sh-card--orange\">\n      <div class=\"sh-card__media\">\n        <img decoding=\"async\" src=\"https:\/\/flatterium.com\/sunshine-new\/wp-content\/uploads\/2026\/08\/hf_20260819_083218_a990f36b-8dbe-4b3d-9f47-f0fc333e2699.png\" loading=\"lazy\">\n      <\/div>\n      <div class=\"sh-card__body\">\n        <span class=\"sh-card__date\">May 2026<\/span>\n        <h2 class=\"sh-card__title\">Building Strong Social Skills in Early Childhood<\/h2>\n        <p class=\"sh-card__desc\">\n          Positive relationships are an important part of every child's learning journey.\n          Learn how preschool experiences help children develop communication skills,\n          empathy, teamwork, and lasting friendships.\n        <\/p>\n        <a href=\"#\" class=\"sh-btn\">Read Article<\/a>\n      <\/div>\n    <\/article>\n\n    <!-- Card 2: colored panel left \/ image right -->\n    <article class=\"sh-card sh-card--split sh-card--green sh-card--reverse\">\n      <div class=\"sh-card__body\">\n        <span class=\"sh-card__date\">May 2026<\/span>\n        <h2 class=\"sh-card__title\">Encouraging a Love for Learning Through Play<\/h2>\n        <p class=\"sh-card__desc\">\n          Play-based learning helps children develop creativity, problem-solving skills,\n          and confidence while making learning enjoyable and meaningful. Discover how\n          play supports your child's growth and development in the early years.\n        <\/p>\n        <a href=\"#\" class=\"sh-btn\">Read Article<\/a>\n      <\/div>\n      <div class=\"sh-card__media\">\n        <img decoding=\"async\" src=\"https:\/\/flatterium.com\/sunshine-new\/wp-content\/uploads\/2026\/08\/hf_20260819_102721_b84c683c-e84d-475a-9f72-95ed523dd878.png\">\n      <\/div>\n    <\/article>\n\n    <!-- Card 3: image left \/ colored panel right -->\n    <article class=\"sh-card sh-card--split sh-card--blue\">\n      <div class=\"sh-card__media\">\n        <img decoding=\"async\" src=\"https:\/\/flatterium.com\/sunshine-new\/wp-content\/uploads\/2026\/08\/hf_20260819_084913_1786f010-5343-4f6b-ba97-ccb16a54219c.png\">\n      <\/div>\n      <div class=\"sh-card__body\">\n        <span class=\"sh-card__date\">June 2026<\/span>\n        <h2 class=\"sh-card__title\">Supporting Your Child's School Readiness Journey<\/h2>\n        <p class=\"sh-card__desc\">\n          School readiness goes beyond academics. Explore how children build independence,\n          resilience, confidence, and essential life skills that prepare them for a\n          successful transition to primary school.\n        <\/p>\n        <a href=\"#\" class=\"sh-btn\">Read Article<\/a>\n      <\/div>\n    <\/article>\n\n    <!-- Pagination -->\n    <nav class=\"sh-pagination\" aria-label=\"Articles pagination\">\n      <button type=\"button\" class=\"sh-page is-active\" data-page=\"1\" aria-current=\"page\">1<\/button>\n      <button type=\"button\" class=\"sh-page\" data-page=\"2\">2<\/button>\n      <button type=\"button\" class=\"sh-page\" data-page=\"3\">3<\/button>\n    <\/nav>\n\n  <\/div>\n<\/div>\n\n<style>\n  \/* ==== Scoped tokens ==== *\/\n  .sh-articles{\n    --sh-orange:#EF5B27;\n    --sh-orange-dark:#E24A17;\n    --sh-green:#3C9A4A;\n    --sh-blue:#1E7FBE;\n    --sh-yellow:#F5C531;\n    --sh-yellow-dark:#E6B01E;\n    --sh-cream:#FEF6E4;\n    --sh-ink:#20211f;\n    --sh-white:#ffffff;\n    --sh-radius:26px;\n    --sh-gap:34px;\n    --sh-maxw:1200px;\n\n    position:relative;\n    background:var(--sh-cream);\n    padding:70px 20px 90px;\n    overflow:hidden;\n    box-sizing:border-box;\n    font-family:inherit; \/* inherit dari theme *\/\n    color:var(--sh-ink);\n  }\n  .sh-articles *,\n  .sh-articles *::before,\n  .sh-articles *::after{\n    box-sizing:border-box;\n    font-family:inherit;\n  }\n  .sh-articles img{\n    max-width:100%;\n    display:block;\n    border:0;\n  }\n\n  .sh-container{\n    position:relative;\n    z-index:2;\n    max-width:var(--sh-maxw);\n    margin:0 auto;\n    display:flex;\n    flex-direction:column;\n    gap:var(--sh-gap);\n  }\n\n  \/* ==== Decorative elements ==== *\/\n  .sh-deco{ position:absolute; z-index:1; pointer-events:none; }\n  .sh-deco--cloud{ top:2%; left:34%; width:140px; height:90px; }\n  .sh-deco--tree{ right:2%; top:56%; width:120px; height:150px; opacity:.95; }\n  .sh-deco--chick{ left:1%; bottom:6%; width:90px; height:90px; }\n  .sh-deco--dash1,\n  .sh-deco--dash2{\n    height:0;\n    border-top:3px dashed var(--sh-orange);\n    opacity:.55;\n  }\n  .sh-deco--dash1{ width:230px; left:0; top:62%; transform:rotate(-6deg); }\n  .sh-deco--dash2{ width:230px; right:0; bottom:14%; transform:rotate(-4deg); }\n\n  \/* ==== Card base ==== *\/\n  .sh-card{\n    position:relative;\n    border-radius:var(--sh-radius);\n    overflow:hidden;\n    background:var(--sh-orange);\n  }\n  .sh-card--split{\n    display:grid;\n    grid-template-columns:1fr 1fr;\n    align-items:stretch;\n  }\n  .sh-card--reverse{\n    grid-template-columns:1fr 1fr;\n  }\n  .sh-card--orange{ background:var(--sh-orange); }\n  .sh-card--green{ background:var(--sh-green); }\n  .sh-card--blue{ background:var(--sh-blue); }\n\n  .sh-card__media{\n    position:relative;\n    min-height:340px;\n    background:#d8d8d8; \/* placeholder color kalau img kosong *\/\n  }\n  .sh-card__media img{\n    position:absolute;\n    inset:0;\n    width:100%;\n    height:100%;\n    object-fit:cover;\n  }\n\n  .sh-card__body{\n    padding:56px 56px;\n    display:flex;\n    flex-direction:column;\n    justify-content:center;\n    color:var(--sh-white);\n  }\n\n  .sh-card__date{\n    font-size:1.15rem;\n    font-weight:600;\n    opacity:.95;\n    margin-bottom:18px;\n    display:block;\n  }\n\n  .sh-card__title{\n    font-size:2.1rem;\n    line-height:1.2;\n    font-weight:800;\n    margin:0 0 20px;\n  }\n\n  .sh-card__desc{\n    font-size:1.05rem;\n    line-height:1.65;\n    margin:0 0 30px;\n    max-width:46ch;\n    opacity:.97;\n  }\n\n  \/* ==== Button ==== *\/\n  .sh-btn{\n    display:inline-block;\n    background:var(--sh-yellow);\n    color:var(--sh-ink);\n    font-weight:700;\n    font-size:1rem;\n    text-decoration:none;\n    padding:14px 30px;\n    border-radius:999px;\n    box-shadow:0 6px 0 var(--sh-yellow-dark);\n    transition:transform .15s ease, box-shadow .15s ease, background .15s ease;\n    align-self:flex-start;\n  }\n  .sh-btn:hover{\n    background:#ffd54a;\n    transform:translateY(2px);\n    box-shadow:0 4px 0 var(--sh-yellow-dark);\n  }\n  .sh-btn:active{\n    transform:translateY(6px);\n    box-shadow:0 0 0 var(--sh-yellow-dark);\n  }\n  .sh-btn:focus-visible{\n    outline:3px solid var(--sh-ink);\n    outline-offset:3px;\n  }\n\n  \/* ==== Pagination ==== *\/\n  .sh-pagination{\n    display:flex;\n    justify-content:center;\n    align-items:center;\n    gap:16px;\n    margin-top:10px;\n  }\n  .sh-page{\n    width:44px;\n    height:44px;\n    border-radius:50%;\n    border:2px solid #7a4fb0;\n    background:var(--sh-white);\n    color:#7a4fb0;\n    font-weight:700;\n    font-size:1rem;\n    cursor:pointer;\n    transition:all .15s ease;\n  }\n  .sh-page:hover{\n    background:#f1e8fa;\n  }\n  .sh-page.is-active{\n    background:#7a4fb0;\n    color:var(--sh-white);\n  }\n  .sh-page:focus-visible{\n    outline:3px solid #7a4fb0;\n    outline-offset:2px;\n  }\n\n  \/* ==== Responsive ==== *\/\n  @media (max-width: 900px){\n    .sh-card--split,\n    .sh-card--reverse{\n      grid-template-columns:1fr;\n    }\n    .sh-card--reverse .sh-card__media{ order:2; }\n    .sh-card--reverse .sh-card__body{ order:1; }\n    .sh-card__media{ min-height:260px; }\n    .sh-card__body{ padding:40px 32px; }\n    .sh-card__title{ font-size:1.7rem; }\n    .sh-deco--tree,\n    .sh-deco--cloud{ opacity:.5; transform:scale(.8); }\n  }\n\n  @media (max-width: 560px){\n    .sh-articles{ padding:44px 14px 60px; }\n    .sh-card{ border-radius:20px; }\n    .sh-card__body{ padding:30px 22px; }\n    .sh-card__title{ font-size:1.4rem; }\n    .sh-card__desc{ font-size:.95rem; max-width:none; }\n    .sh-btn{ padding:12px 24px; font-size:.95rem; }\n    .sh-deco--tree,\n    .sh-deco--chick,\n    .sh-deco--cloud{ display:none; }\n  }\n\n  @media (prefers-reduced-motion: reduce){\n    .sh-btn{ transition:none; }\n  }\n<\/style>\n\n<script>\n(function(){\n  var scope = document.currentScript.previousElementSibling;\n  if(!scope) return;\n  var pages = scope.querySelectorAll ? scope.parentElement.querySelectorAll('.sh-page') : null;\n  var buttons = document.querySelectorAll('.sh-articles .sh-page');\n  buttons.forEach(function(btn){\n    btn.addEventListener('click', function(){\n      buttons.forEach(function(b){\n        b.classList.remove('is-active');\n        b.removeAttribute('aria-current');\n      });\n      btn.classList.add('is-active');\n      btn.setAttribute('aria-current','page');\n      \/\/ TODO: hubungkan ke logic load\/filter artikel sesuai kebutuhan (AJAX \/ Elementor query)\n    });\n  });\n})();\n<\/script>\t\t\t\t<\/div>\n\t\t\n<\/div>\n\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>May 2026 Building Strong Social Skills in Early Childhood Positive relationships are an important part of every child&#8217;s learning journey. Learn how preschool experiences help children develop communication skills, empathy, teamwork, and lasting friendships. Read Article May 2026 Encouraging a Love for Learning Through Play Play-based learning helps children develop creativity, problem-solving skills, and confidence [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-544","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/flatterium.com\/sunshine-new\/wp-json\/wp\/v2\/pages\/544","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/flatterium.com\/sunshine-new\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/flatterium.com\/sunshine-new\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/flatterium.com\/sunshine-new\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/flatterium.com\/sunshine-new\/wp-json\/wp\/v2\/comments?post=544"}],"version-history":[{"count":29,"href":"https:\/\/flatterium.com\/sunshine-new\/wp-json\/wp\/v2\/pages\/544\/revisions"}],"predecessor-version":[{"id":9473,"href":"https:\/\/flatterium.com\/sunshine-new\/wp-json\/wp\/v2\/pages\/544\/revisions\/9473"}],"wp:attachment":[{"href":"https:\/\/flatterium.com\/sunshine-new\/wp-json\/wp\/v2\/media?parent=544"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}