{"id":117,"date":"2025-08-11T04:37:42","date_gmt":"2025-08-11T04:37:42","guid":{"rendered":"https:\/\/sophos.sch.id\/?page_id=117"},"modified":"2025-08-27T09:01:24","modified_gmt":"2025-08-27T09:01:24","slug":"our-values-and-fundamentals","status":"publish","type":"page","link":"https:\/\/sophos.sch.id\/index.php\/our-values-and-fundamentals\/","title":{"rendered":"Our Values and Fundamentals"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"117\" class=\"elementor elementor-117\">\n\t\t\t\t<div class=\"elementor-element elementor-element-9eb144e e-flex e-con-boxed e-con e-parent\" data-id=\"9eb144e\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;slideshow&quot;,&quot;background_slideshow_gallery&quot;:[{&quot;id&quot;:270,&quot;url&quot;:&quot;https:\\\/\\\/sophos.sch.id\\\/wp-content\\\/uploads\\\/2025\\\/08\\\/Vision-9.png&quot;}],&quot;background_slideshow_loop&quot;:&quot;yes&quot;,&quot;background_slideshow_slide_duration&quot;:5000,&quot;background_slideshow_slide_transition&quot;:&quot;fade&quot;,&quot;background_slideshow_transition_duration&quot;:500}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-2f43bfd elementor-widget elementor-widget-heading\" data-id=\"2f43bfd\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h1 class=\"elementor-heading-title elementor-size-default\">Our Values and Fundamentals<\/h1>\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-2ac321e e-con-full e-flex e-con e-parent\" data-id=\"2ac321e\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-249304e elementor-widget elementor-widget-html\" data-id=\"249304e\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n  .values-section {\r\n    display: flex;\r\n    flex-wrap: nowrap; \/* One row only *\/\r\n    overflow-x: auto;\r\n    gap: 1rem;\r\n    padding: 2rem 1rem;\r\n    background: linear-gradient(to right, #25396E, #25396E); \/* brighter blue gradient *\/\r\n    font-family: 'Segoe UI', sans-serif;\r\n    scroll-snap-type: x mandatory;\r\n  }\r\n\r\n  .flip-card {\r\n    flex: 0 0 280px;\r\n    height: 200px;\r\n    perspective: 1000px;\r\n    scroll-snap-align: start;\r\n  }\r\n\r\n  .flip-card-inner {\r\n    position: relative;\r\n    width: 100%;\r\n    height: 100%;\r\n    text-align: center;\r\n    transition: transform 0.6s;\r\n    transform-style: preserve-3d;\r\n    border-radius: 1rem;\r\n  }\r\n\r\n  .flip-card:hover .flip-card-inner {\r\n    transform: rotateY(180deg);\r\n  }\r\n\r\n  .flip-card-front,\r\n  .flip-card-back {\r\n    position: absolute;\r\n    width: 100%;\r\n    height: 100%;\r\n    backface-visibility: hidden;\r\n    border-radius: 1rem;\r\n    display: flex;\r\n    justify-content: center;\r\n    align-items: center;\r\n    padding: 1rem;\r\n    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);\r\n  }\r\n\r\n  .flip-card-front {\r\n    background: white;\r\n    color: #0d1a3d;\r\n    font-weight: bold;\r\n    font-size: 1.4rem;\r\n  }\r\n\r\n  .flip-card-back {\r\n    background: #2f70a6; \/* brighter blue *\/\r\n    color: white;\r\n    transform: rotateY(180deg);\r\n    font-size: 0.95rem;\r\n    line-height: 1.5;\r\n  }\r\n\r\n  \/* Optional: Hide scrollbar in some browsers *\/\r\n  .values-section::-webkit-scrollbar {\r\n    height: 6px;\r\n  }\r\n\r\n  .values-section::-webkit-scrollbar-thumb {\r\n    background: #555;\r\n    border-radius: 3px;\r\n  }\r\n\r\n  .values-section::-webkit-scrollbar-track {\r\n    background: transparent;\r\n  }\r\n<\/style>\r\n\r\n<div class=\"values-section\">\r\n  <div class=\"flip-card\">\r\n    <div class=\"flip-card-inner\">\r\n      <div class=\"flip-card-front\">SINCERE<\/div>\r\n      <div class=\"flip-card-back\">We have our own way to always speak and act truly on our feelings, beliefs, thoughts, and desires. We have our own way to be aware that everyone is different and to respect difference.<\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"flip-card\">\r\n    <div class=\"flip-card-inner\">\r\n      <div class=\"flip-card-front\">OBSERVANT<\/div>\r\n      <div class=\"flip-card-back\">We have our own way of thinking, making breakthrough and innovation, and showing appreciation, love and sympathy in different ways.<\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"flip-card\">\r\n    <div class=\"flip-card-inner\">\r\n      <div class=\"flip-card-front\">PASSIONATE<\/div>\r\n      <div class=\"flip-card-back\">We have our own way of always learning from anything and anyone. We have our own way of being lifelong learners.<\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"flip-card\">\r\n    <div class=\"flip-card-inner\">\r\n      <div class=\"flip-card-front\">HONEST<\/div>\r\n      <div class=\"flip-card-back\">We have our own way of saying things that really happened, being brave to admit our mistakes and making an apology. We have our own way of showing ourselves without pretending.<\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"flip-card\">\r\n    <div class=\"flip-card-inner\">\r\n      <div class=\"flip-card-front\">ORIGINAL<\/div>\r\n      <div class=\"flip-card-back\">We have our own way of always learning from surroundings and nature, explain phenomena through observing, and experiencing and analysing it.<\/div>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"flip-card\">\r\n    <div class=\"flip-card-inner\">\r\n      <div class=\"flip-card-front\">SIGNIFICANT<\/div>\r\n      <div class=\"flip-card-back\">We have our own way of making great things noteworthy for ourselves and others. We have our own way of understanding our responsibilities and doing it seriously without being forced.<\/div>\r\n    <\/div>\r\n  <\/div>\r\n<\/div>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-71843a7 e-con-full e-flex e-con e-parent\" data-id=\"71843a7\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-66966c1 elementor-widget elementor-widget-html\" data-id=\"66966c1\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<!DOCTYPE html>\r\n<html lang=\"en\">\r\n  <head>\r\n    <meta charset=\"UTF-8\" \/>\r\n    <title>Responsive Circular Diagram<\/title>\r\n    <style>\r\n      body {\r\n        margin: 0;\r\n        font-family: \"Segoe UI\", sans-serif;\r\n      }\r\n\r\n.circular-wrapper {\r\n  position: relative;\r\n  background-image: url('https:\/\/tpltos9b.wp.neoapp.id\/wp-content\/uploads\/2025\/07\/DSC00618-scaled.jpg');\r\n  background-size: cover;\r\n  background-position: center;\r\n  background-repeat: no-repeat;\r\n  padding: 2rem 0;\r\n  z-index: 0;\r\n  overflow: visible;\r\n}\r\n\r\n.circular-wrapper::before {\r\n  content: \"\";\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  background-color: rgba(0, 123, 255, 0.4); \/* blue with 40% opacity *\/\r\n  z-index: 1;\r\n  pointer-events: none;\r\n}\r\n\r\n      .circular-values {\r\n          overflow: visible; \/* don't hide the glow *\/\r\n\r\n        width: 100%;\r\n        max-width: 500px;\r\n        margin: 0 auto 0 auto;\r\n          position: relative;\r\n  z-index: 2;\r\n      }\r\n\r\n      @media (max-width: 768px) {\r\n        .circular-values {\r\n          max-width: 400px;\r\n        }\r\n      }\r\n\r\n      @media (max-width: 480px) {\r\n        .circular-values {\r\n          max-width: 320px;\r\n        }\r\n      }\r\n\r\nsvg {\r\n  width: 100%;\r\n  height: auto;\r\n  display: block;\r\n  overflow: visible; \/* <- THIS IS IMPORTANT *\/\r\n}\r\n\r\n      .segment-group {\r\n  transition: transform 0.3s ease;\r\n  transform-origin: center;\r\n}\r\n\r\n.segment-group:hover {\r\n  transform: scale(1.08); \/* scales both path and text together *\/\r\n  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));\r\n}\r\n\r\n      .segment-path {\r\n        cursor: pointer;\r\n        transition: transform 0.3s ease, filter 0.3s ease;\r\n        transform-origin: center;\r\n      }\r\n\r\n      .segment-label {\r\n        fill: #fff;\r\n        font-weight: bold;\r\n        pointer-events: none;\r\n        transition: transform 0.3s ease;\r\n      }\r\n\r\n\r\n      @media (max-width: 768px) {\r\n        .segment-label {\r\n          font-size: 9px !important;\r\n        }\r\n      }\r\n\r\n      @media (max-width: 480px) {\r\n        .segment-label {\r\n          font-size: 7px !important;\r\n        }\r\n      }\r\n    <\/style>\r\n  <\/head>\r\n  <body>\r\n    <div class=\"circular-wrapper\">\r\n      <div class=\"circular-values\">\r\n        <svg viewBox=\"0 0 400 400\" preserveAspectRatio=\"xMidYMid meet\">\r\n          <g id=\"segments\"><\/g>\r\n          <circle\r\n            cx=\"200\"\r\n            cy=\"200\"\r\n            r=\"40\"\r\n            fill=\"#ffffff\"\r\n            stroke=\"#ccc\"\r\n            stroke-width=\"2\" \/>\r\n          <image\r\n            href=\"https:\/\/sophos.sch.id\/wp-content\/uploads\/2025\/08\/cropped-cropped-cropped-LOGO-SOPHOS-PUTIH-01-1.png\"\r\n            x=\"170\"\r\n            y=\"170\"\r\n            width=\"60\"\r\n            height=\"60\" \/>\r\n        <\/svg>\r\n      <\/div>\r\n    <\/div>\r\n\r\n    <script>\r\n      const layers = [\r\n        {\r\n          radius: [140, 180],\r\n          fontSize: 12,\r\n          items: [\r\n            { label: \"Sincere\", color: \"#003A6B\" },\r\n            { label: \"VALUES\", color: \"#003A6B\", double: true },\r\n            { label: \"Observant\", color: \"#1B5886\" },\r\n            { label: \"Passionate\", color: \"#1B5886\" },\r\n            { label: \"Honest\", color: \"#1B5886\" },\r\n            { label: \"Original\", color: \"#1B5886\" },\r\n            { label: \"Significant\", color: \"#1B5886\" },\r\n          ],\r\n        },\r\n        {\r\n          radius: [100, 140],\r\n          fontSize: 10,\r\n          items: [\r\n            { label: \"APPROACHES\", color: \"#3776A1\" },\r\n            { label: \"Problem-Based Learning\", color: \"#3776A1\" },\r\n            { label: \"Experiental and Real-Life Education\", color: \"#5293BB\" },\r\n            { label: \"Student-Centered\", color: \"#5293BB\" },\r\n          ],\r\n        },\r\n        {\r\n          radius: [60, 100],\r\n          fontSize: 9,\r\n          items: [\r\n            { label: \"CURRICULUM\", color: \"#6EB1D6\" },\r\n            { label: \"National Curriculum\", color: \"#6EB1D6\" },\r\n            { label: \"Cambridge International\", color: \"#89CFF1\" },\r\n            { label: \"OxfordAQA\", color: \"#89CFF1\" },\r\n          ],\r\n        },\r\n      ];\r\n\r\n      const centerX = 200;\r\n      const centerY = 200;\r\n      const segments = document.getElementById(\"segments\");\r\n      const rotationOffsets = [0, Math.PI \/ 4, Math.PI \/ 4];\r\n\r\n      layers.forEach((layer, layerIndex) => {\r\n        const total = layer.items.reduce(\r\n          (acc, item) => acc + (item.double ? 2 : 1),\r\n          0\r\n        );\r\n        const anglePer = (2 * Math.PI) \/ total;\r\n        let cumulativeAngle = 0;\r\n\r\n        layer.items.forEach((item, i) => {\r\n          const segmentSize = item.double ? 2 : 1;\r\n          const offset = rotationOffsets[layerIndex] || 0;\r\n          const start = cumulativeAngle + offset;\r\n          const end = start + segmentSize * anglePer;\r\n          cumulativeAngle += segmentSize * anglePer;\r\n\r\n          const [innerR, outerR] = layer.radius;\r\n\r\n          const x1 = centerX + outerR * Math.cos(start);\r\n          const y1 = centerY + outerR * Math.sin(start);\r\n          const x2 = centerX + outerR * Math.cos(end);\r\n          const y2 = centerY + outerR * Math.sin(end);\r\n          const x3 = centerX + innerR * Math.cos(end);\r\n          const y3 = centerY + innerR * Math.sin(end);\r\n          const x4 = centerX + innerR * Math.cos(start);\r\n          const y4 = centerY + innerR * Math.sin(start);\r\n\r\n          const d = `\r\n          M ${x1},${y1}\r\n          A ${outerR},${outerR} 0 0 1 ${x2},${y2}\r\n          L ${x3},${y3}\r\n          A ${innerR},${innerR} 0 0 0 ${x4},${y4}\r\n          Z\r\n        `;\r\n\r\n          const group = document.createElementNS(\r\n            \"http:\/\/www.w3.org\/2000\/svg\",\r\n            \"g\"\r\n          );\r\n          group.setAttribute(\"class\", \"segment-group\");\r\n\r\n          const path = document.createElementNS(\r\n            \"http:\/\/www.w3.org\/2000\/svg\",\r\n            \"path\"\r\n          );\r\n          path.setAttribute(\"d\", d);\r\n          path.setAttribute(\"fill\", item.color);\r\n          path.setAttribute(\"class\", \"segment-path\");\r\n          group.appendChild(path);\r\n\r\n          const isFlipped = [\"VALUES\", \"APPROACHES\", \"CURRICULUM\"].includes(\r\n            item.label.toUpperCase()\r\n          );\r\n\r\n          const arcId = `arcPath_${layerIndex}_${i}`;\r\n          const labelRadius = (innerR + outerR) \/ 2;\r\n          const arcStartX = centerX + labelRadius * Math.cos(start);\r\n          const arcStartY = centerY + labelRadius * Math.sin(start);\r\n          const arcEndX = centerX + labelRadius * Math.cos(end);\r\n          const arcEndY = centerY + labelRadius * Math.sin(end);\r\n          const largeArcFlag = segmentSize * anglePer > Math.PI ? 1 : 0;\r\n\r\n          const arcPath = document.createElementNS(\r\n            \"http:\/\/www.w3.org\/2000\/svg\",\r\n            \"path\"\r\n          );\r\n          arcPath.setAttribute(\r\n            \"d\",\r\n            isFlipped\r\n              ? `M ${arcEndX} ${arcEndY} A ${labelRadius} ${labelRadius} 0 ${largeArcFlag} 0 ${arcStartX} ${arcStartY}`\r\n              : `M ${arcStartX} ${arcStartY} A ${labelRadius} ${labelRadius} 0 ${largeArcFlag} 1 ${arcEndX} ${arcEndY}`\r\n          );\r\n          arcPath.setAttribute(\"fill\", \"none\");\r\n          arcPath.setAttribute(\"id\", arcId);\r\n          group.appendChild(arcPath);\r\n\r\n          const text = document.createElementNS(\r\n            \"http:\/\/www.w3.org\/2000\/svg\",\r\n            \"text\"\r\n          );\r\n          text.setAttribute(\r\n            \"class\",\r\n            isFlipped ? \"segment-label flip-hover\" : \"segment-label\"\r\n          );\r\n          text.setAttribute(\"font-size\", layer.fontSize);\r\n\r\n          const textPath = document.createElementNS(\r\n            \"http:\/\/www.w3.org\/2000\/svg\",\r\n            \"textPath\"\r\n          );\r\n          textPath.setAttributeNS(\r\n            \"http:\/\/www.w3.org\/1999\/xlink\",\r\n            \"xlink:href\",\r\n            `#${arcId}`\r\n          );\r\n          textPath.setAttribute(\"startOffset\", \"50%\");\r\n          textPath.setAttribute(\"text-anchor\", \"middle\");\r\n          textPath.textContent = item.label;\r\n\r\n          text.appendChild(textPath);\r\n          group.appendChild(text);\r\n          segments.appendChild(group);\r\n        });\r\n      });\r\n    <\/script>\r\n  <\/body>\r\n<\/html>\r\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-a20d2f6 e-flex e-con-boxed e-con e-parent\" data-id=\"a20d2f6\" 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-6575175 elementor-widget elementor-widget-html\" data-id=\"6575175\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<script>\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n  const nav = document.getElementById('site-navigation');\r\n  window.addEventListener('scroll', function () {\r\n    if (window.scrollY > 50) {\r\n      nav.classList.add('scrolled');\r\n    } else {\r\n      nav.classList.remove('scrolled');\r\n    }\r\n  });\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Our Values and Fundamentals SINCERE We have our own way to always speak and act truly on our feelings, beliefs, thoughts, and desires. We have our own way to be aware that everyone is different and to respect difference. OBSERVANT We have our own way of thinking, making breakthrough and innovation, and showing appreciation, love &hellip; <\/p>\n<p class=\"link-more\"><a href=\"https:\/\/sophos.sch.id\/index.php\/our-values-and-fundamentals\/\" class=\"more-link\">Read more<span class=\"screen-reader-text\"> &#8220;Our Values and Fundamentals&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/full-width-transparent.php","meta":{"inspiro_hide_title":false,"footnotes":""},"class_list":["post-117","page","type-page","status-publish","hentry"],"featured_media_urls":[],"_links":{"self":[{"href":"https:\/\/sophos.sch.id\/index.php\/wp-json\/wp\/v2\/pages\/117","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sophos.sch.id\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/sophos.sch.id\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/sophos.sch.id\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/sophos.sch.id\/index.php\/wp-json\/wp\/v2\/comments?post=117"}],"version-history":[{"count":17,"href":"https:\/\/sophos.sch.id\/index.php\/wp-json\/wp\/v2\/pages\/117\/revisions"}],"predecessor-version":[{"id":1956,"href":"https:\/\/sophos.sch.id\/index.php\/wp-json\/wp\/v2\/pages\/117\/revisions\/1956"}],"wp:attachment":[{"href":"https:\/\/sophos.sch.id\/index.php\/wp-json\/wp\/v2\/media?parent=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}