{"id":3644,"date":"2026-10-28T10:42:47","date_gmt":"2026-10-28T02:42:47","guid":{"rendered":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/?page_id=3644"},"modified":"2026-10-30T08:29:50","modified_gmt":"2026-10-30T00:29:50","slug":"visi-misi-objektif","status":"publish","type":"page","link":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/visi-misi-objektif\/","title":{"rendered":"VISI, MISI &#038; OBJEKTIF"},"content":{"rendered":"\n<section class=\"vm-section\">\n\n<style>\n\/* =========================================================\n   HOSPITAL SIBU VISI & MISI PREMIUM MEDICAL 3D + SMOOTH ANIMATION\n========================================================= *\/\n\n*{\n    box-sizing:border-box;\n}\n\n\/* =========================================================\n   MAIN SECTION\n========================================================= *\/\n\n.vm-section{\n    width:100%;\n    padding:65px 6%;\n    position:relative;\n    overflow:hidden;\n    background:\n        radial-gradient(\n            circle at 10% 10%,\n            rgba(85,170,176,.13),\n            transparent 28%\n        ),\n        radial-gradient(\n            circle at 90% 85%,\n            rgba(40,108,115,.10),\n            transparent 30%\n        ),\n        linear-gradient(\n            135deg,\n            #f8fbfc,\n            #eef5f6\n        );\n    font-family:\n        \"Plus Jakarta Sans\",\n        \"Segoe UI\",\n        Arial,\n        sans-serif;\n}\n\n\/* =========================================================\n   BACKGROUND DECORATION\n========================================================= *\/\n\n.vm-section::before{\n    content:\"\";\n    position:absolute;\n    width:360px;\n    height:360px;\n    top:-180px;\n    right:-120px;\n    border-radius:50%;\n    background:\n        radial-gradient(\n            circle,\n            rgba(85,170,176,.12),\n            rgba(85,170,176,0)\n        );\n    animation: vmFloatOne 8s ease-in-out infinite;\n    pointer-events:none;\n}\n\n.vm-section::after{\n    content:\"\";\n    position:absolute;\n    width:300px;\n    height:300px;\n    bottom:-160px;\n    left:-120px;\n    border-radius:50%;\n    background:\n        radial-gradient(\n            circle,\n            rgba(23,78,86,.08),\n            rgba(23,78,86,0)\n        );\n    animation: vmFloatTwo 10s ease-in-out infinite;\n    pointer-events:none;\n}\n\n\/* =========================================================\n   CONTAINER\n========================================================= *\/\n\n.vm-container{\n    max-width:1120px;\n    margin:auto;\n    position:relative;\n    z-index:2;\n}\n\n\/* =========================================================\n   NEW HEADER STYLES (MASKING ANIMATION)\n========================================================= *\/\n\n.masking-container {\n    display: flex !important;\n    flex-direction: column !important;\n    justify-content: center !important;\n    align-items: center !important;\n    padding: 10px 0 35px 0 !important;\n    text-align: center !important;\n}\n\n.masked-text {\n    font-size: clamp(26px, 3.5vw, 36px) !important;\n    font-weight: 900 !important;\n    text-transform: uppercase !important;\n    letter-spacing: 2px !important;\n    margin: 0 !important;\n    font-family: 'Segoe UI', Arial, sans-serif !important;\n    \n    background: linear-gradient(135deg, #0a2540 0%, #0056b3 40%, #38bdf8 70%, #0a2540 100%) !important;\n    background-size: 200% auto !important;\n    -webkit-background-clip: text !important;\n    -webkit-text-fill-color: transparent !important;\n    \n    animation: shineMask 3s linear infinite alternate !important;\n}\n\n.title-animated-bar {\n    width: 80px;\n    height: 4px;\n    background: linear-gradient(90deg, #0284c7, #38bdf8);\n    border-radius: 2px;\n    margin-top: 10px;\n    animation: expandBar 2.5s ease-in-out infinite alternate;\n}\n\n@keyframes shineMask {\n    0% {\n        background-position: 0% 50%;\n    }\n    100% {\n        background-position: 100% 50%;\n    }\n}\n\n@keyframes expandBar {\n    0% {\n        width: 50px;\n        opacity: 0.6;\n    }\n    100% {\n        width: 140px;\n        opacity: 1;\n    }\n}\n\n\/* =========================================================\n   GRID\n========================================================= *\/\n\n.vm-grid{\n    display:grid;\n    grid-template-columns: repeat(2,minmax(0,1fr));\n    gap:24px;\n}\n\n\/* =========================================================\n   PREMIUM 3D CARD\n========================================================= *\/\n\n.vm-card{\n    position:relative;\n    min-height:220px;\n    border-radius:24px;\n    overflow:hidden;\n    display:flex;\n    align-items:center;\n    background-size:cover;\n    background-position:center;\n    border: 1px solid rgba(255,255,255,.9);\n    box-shadow:\n        0 7px 15px rgba(15,23,42,.07),\n        0 18px 40px rgba(23,78,86,.11),\n        0 30px 70px rgba(23,78,86,.05),\n        inset 0 1px 0 rgba(255,255,255,.9);\n    transform: translateY(35px) scale(.97);\n    opacity:0;\n    animation: vmCardIn .75s cubic-bezier(.22,.61,.36,1) forwards;\n    transition:\n        transform .45s cubic-bezier(.22,.61,.36,1),\n        box-shadow .45s ease,\n        border-color .45s ease;\n    isolation:isolate;\n    will-change: transform, box-shadow;\n}\n\n\/* =========================================================\n   STAGGER ANIMATION\n========================================================= *\/\n\n.vm-card:nth-child(1){ animation-delay:.10s; }\n.vm-card:nth-child(2){ animation-delay:.22s; }\n.vm-card:nth-child(3){ animation-delay:.34s; }\n.vm-card:nth-child(4){ animation-delay:.46s; }\n.vm-card:nth-child(5){ animation-delay:.58s; }\n.vm-card:nth-child(6){ animation-delay:.70s; }\n\n\/* =========================================================\n   CARD HOVER\n========================================================= *\/\n\n.vm-card:hover{\n    transform:\n        translateY(-9px)\n        scale(1.012)\n        perspective(1000px)\n        rotateX(1deg)\n        rotateY(-1deg);\n    border-color: rgba(85,170,176,.45);\n    box-shadow:\n        0 12px 20px rgba(15,23,42,.10),\n        0 25px 55px rgba(23,78,86,.19),\n        0 40px 80px rgba(23,78,86,.08),\n        inset 0 1px 0 rgba(255,255,255,1);\n}\n\n\/* =========================================================\n   IMAGE OVERLAY\n========================================================= *\/\n\n.vm-card::after{\n    content:\"\";\n    position:absolute;\n    inset:0;\n    z-index:0;\n    background:\n        linear-gradient(\n            110deg,\n            rgba(255,255,255,.97) 0%,\n            rgba(255,255,255,.92) 43%,\n            rgba(255,255,255,.73) 100%\n        );\n    transition: opacity .45s ease;\n}\n\n\/* =========================================================\n   IMAGE MOVEMENT ON HOVER\n========================================================= *\/\n\n.vm-card:hover{\n    background-position: calc(50% + 8px) calc(50% - 5px);\n}\n\n\/* =========================================================\n   LIGHT ORB\n========================================================= *\/\n\n.vm-card::before{\n    content:\"\";\n    position:absolute;\n    width:220px;\n    height:220px;\n    top:-110px;\n    right:-100px;\n    border-radius:50%;\n    z-index:1;\n    background:\n        radial-gradient(\n            circle,\n            rgba(255,255,255,.82) 0%,\n            rgba(255,255,255,.28) 35%,\n            rgba(255,255,255,0) 72%\n        );\n    animation: vmOrb 6s ease-in-out infinite;\n    pointer-events:none;\n    transition: transform .5s ease, opacity .5s ease;\n}\n\n.vm-card:hover::before{\n    transform: translate(-35px,35px) scale(1.25);\n    opacity:.9;\n}\n\n\/* =========================================================\n   SHINE EFFECT\n========================================================= *\/\n\n.vm-card{ isolation:isolate; }\n\n.vm-card .vm-content::after{\n    content:\"\";\n    position:absolute;\n    top:-100%;\n    left:-150%;\n    width:70px;\n    height:300%;\n    z-index:5;\n    pointer-events:none;\n    transform: rotate(25deg);\n    background:\n        linear-gradient(\n            90deg,\n            rgba(255,255,255,0),\n            rgba(255,255,255,.42),\n            rgba(255,255,255,0)\n        );\n    opacity:0;\n    transition: opacity .25s ease;\n}\n\n.vm-card:hover .vm-content::after{\n    opacity:1;\n    animation: vmShine 1.1s ease forwards;\n}\n\n\/* =========================================================\n   CONTENT\n========================================================= *\/\n\n.vm-content{\n    position:relative;\n    z-index:4;\n    width:100%;\n    padding:30px 34px;\n}\n\n\/* =========================================================\n   TITLE (TUKAR KEPADA BIRU)\n========================================================= *\/\n\n.vm-content h3{\n    position:relative;\n    display:inline-block;\n    margin: 0 0 14px;\n    padding-left:15px;\n    font-size:24px;\n    line-height:1.2;\n    font-weight:800;\n    color:#0056b3 !important; \/* Warna Biru *\/\n    letter-spacing:-.2px;\n    transition: transform .35s ease, color .35s ease;\n}\n\n.vm-card:hover .vm-content h3{\n    transform: translateX(3px);\n    color:#0284c7 !important; \/* Biru terang semasa hover *\/\n}\n\n\/* =========================================================\n   TITLE ACCENT\n========================================================= *\/\n\n.vm-content h3::before{\n    content:\"\";\n    position:absolute;\n    left:0;\n    top:1px;\n    width:4px;\n    height:22px;\n    border-radius:10px;\n    background: linear-gradient(180deg, #38bdf8, #0056b3);\n    box-shadow: 0 3px 9px rgba(0, 86, 179, 0.28);\n    transform: scaleY(.55);\n    transform-origin:center;\n    transition: transform .4s ease, box-shadow .4s ease;\n}\n\n.vm-card:hover .vm-content h3::before{\n    transform: scaleY(1.12);\n    box-shadow: 0 4px 13px rgba(0, 86, 179, 0.35);\n}\n\n\/* =========================================================\n   ALL PARAGRAPHS (<p>) - TUKAR KEPADA HITAM\n========================================================= *\/\n\n.vm-content p,\n.vm-card:nth-child(1) p,\n.vm-card:nth-child(2) p,\n.vm-card:nth-child(3) p,\n.vm-card:nth-child(4) p,\n.vm-card:nth-child(5) p,\n.vm-card:nth-child(6) p{\n    margin:0;\n    max-width:930px;\n    font-size:16px;\n    line-height:1.75;\n    font-weight:400 !important;\n    color:#000000 !important; \/* Warna Hitam *\/\n    text-align:justify;\n    text-shadow:none !important;\n    transition: color .35s ease;\n}\n\n.vm-card:hover .vm-content p{\n    color:#000000 !important;\n}\n\n\/* Style khusus Visi, Misi, Wawasan, Slogan, Moto *\/\n.vm-card:nth-child(2) p,\n.vm-card:nth-child(3) p,\n.vm-card:nth-child(4) p,\n.vm-card:nth-child(5) p,\n.vm-card:nth-child(6) p{\n    font-size:17px;\n    line-height:1.6;\n    color:#000000 !important;\n    text-align:left;\n}\n\n.vm-card:nth-child(2) p,\n.vm-card:nth-child(5) p,\n.vm-card:nth-child(6) p{\n    font-size:18px;\n    color:#000000 !important;\n}\n\n\/* =========================================================\n   FULL WIDTH\n========================================================= *\/\n\n.full{\n    grid-column:span 2;\n}\n\n\/* =========================================================\n   OBJECTIVE & CARDS BACKGROUNDS\n========================================================= *\/\n\n.objektif{ min-height:235px; background-image: url(\"https:\/\/images.unsplash.com\/photo-1576091160399-112ba8d25d1d\"); }\n.visi{ background-image: url(\"https:\/\/images.unsplash.com\/photo-1586773860418-d37222d8fce3\"); }\n.misi{ background-image: url(\"https:\/\/images.unsplash.com\/photo-1579684385127-1ef15d508118\"); }\n.wawasan{ background-image: url(\"https:\/\/images.unsplash.com\/photo-1505751172876-fa1923c5c528\"); }\n.slogan{ background-image: url(\"https:\/\/images.unsplash.com\/photo-1519494026892-80bbd2d6fd0d\"); }\n.moto{ min-height:190px; background-image: url(\"https:\/\/images.unsplash.com\/photo-1516549655169-df83a0774514\"); }\n\n\/* =========================================================\n   ANIMATION KEYFRAMES\n========================================================= *\/\n\n@keyframes vmCardIn{\n    from{ opacity:0; transform: translateY(35px) scale(.97); }\n    to{ opacity:1; transform: translateY(0) scale(1); }\n}\n\n@keyframes vmOrb{\n    0%, 100%{ transform: translate(0,0) scale(1); }\n    50%{ transform: translate(-18px,18px) scale(1.08); }\n}\n\n@keyframes vmFloatOne{\n    0%, 100%{ transform: translate(0,0) scale(1); }\n    50%{ transform: translate(-25px,25px) scale(1.08); }\n}\n\n@keyframes vmFloatTwo{\n    0%, 100%{ transform: translate(0,0) scale(1); }\n    50%{ transform: translate(25px,-20px) scale(1.06); }\n}\n\n@keyframes vmShine{\n    from{ left:-150%; }\n    to{ left:150%; }\n}\n\n\/* =========================================================\n   TABLET & MOBILE RESPONSIVE\n========================================================= *\/\n\n@media(max-width:850px){\n    .vm-section{ padding: 55px 5%; }\n    .vm-grid{ gap:19px; }\n    .vm-content{ padding: 27px 28px; }\n}\n\n@media(max-width:768px){\n    .vm-section{ padding: 45px 5%; }\n    .vm-grid{ grid-template-columns:1fr; gap:18px; }\n    .full{ grid-column:auto; }\n    .vm-card{ min-height:210px; border-radius:20px; }\n    .objektif{ min-height:auto; }\n    .moto{ min-height:180px; }\n    .vm-content{ padding: 25px 24px; }\n    .vm-content h3{ font-size:22px; }\n    .vm-content p{ font-size:14px; line-height:1.7; }\n    .vm-card:nth-child(2) p,\n    .vm-card:nth-child(3) p,\n    .vm-card:nth-child(4) p,\n    .vm-card:nth-child(5) p,\n    .vm-card:nth-child(6) p{ font-size:16px; }\n}\n\n@media(max-width:480px){\n    .vm-section{ padding: 38px 4%; }\n    .vm-content{ padding: 23px 21px; }\n    .vm-content h3{ font-size:21px; }\n    .vm-content p{ font-size:14px; }\n    .vm-card:nth-child(2) p,\n    .vm-card:nth-child(3) p,\n    .vm-card:nth-child(4) p,\n    .vm-card:nth-child(5) p,\n    .vm-card:nth-child(6) p{ font-size:15px; }\n}\n\n\/* =========================================================\n   ACCESSIBILITY\n========================================================= *\/\n\n@media(prefers-reduced-motion:reduce){\n    .vm-section::before,\n    .vm-section::after,\n    .vm-card::before,\n    .vm-card,\n    .vm-card .vm-content::after {\n        animation:none !important;\n    }\n    .vm-card{ opacity:1; transform:none; }\n    .vm-card:hover{ transform: translateY(-3px); }\n}\n<\/style>\n\n<div class=\"vm-container\">\n\n<!-- =====================================================\n     HEADER (ANIMATED MASKING TITLE)\n===================================================== -->\n<div class=\"masking-container\">\n    <h1 class=\"masked-text\">Visi &amp; Misi Hospital Sibu<\/h1>\n    <div class=\"title-animated-bar\"><\/div>\n<\/div>\n\n<!-- =====================================================\n     GRID\n===================================================== -->\n<div class=\"vm-grid\">\n\n<!-- OBJEKTIF -->\n<div class=\"vm-card objektif full\">\n    <div class=\"vm-content\">\n        <h3>Objektif<\/h3>\n        <p>\n            Untuk memberikan perkhidmatan perubatan yang cekap,\n            efektif, berkemampuan dan saksama kepada semua pelanggan\n            berdasarkan kepakaran serta teknologi yang bersesuaian\n            dengan memberi penekanan kepada kualiti, inovasi,\n            promosi kesihatan serta menggalakkan penyertaan individu\n            dan masyarakat ke arah merealisasikan wawasan negara\n            untuk mencapai tahap kesihatan yang tinggi.\n        <\/p>\n    <\/div>\n<\/div>\n\n<!-- VISI -->\n<div class=\"vm-card visi\">\n    <div class=\"vm-content\">\n        <h3>Visi<\/h3>\n        <p>&#8220;To Care With Passion&#8221;<\/p>\n    <\/div>\n<\/div>\n\n<!-- MISI -->\n<div class=\"vm-card misi\">\n    <div class=\"vm-content\">\n        <h3>Misi<\/h3>\n        <p>\n            Melaksanakan perkhidmatan yang berkualiti dengan\n            berteraskan ciri-ciri perkhidmatan penyayang,\n            kerja berpasukan dan profesionalisme untuk memenuhi\n            keperluan serta ekspektasi pelanggan.\n        <\/p>\n    <\/div>\n<\/div>\n\n<!-- WAWASAN -->\n<div class=\"vm-card wawasan\">\n    <div class=\"vm-content\">\n        <h3>Wawasan<\/h3>\n        <p>Mencapai taraf sebagai pusat perkhidmatan perubatan yang unggul.<\/p>\n    <\/div>\n<\/div>\n\n<!-- SLOGAN -->\n<div class=\"vm-card slogan\">\n    <div class=\"vm-content\">\n        <h3>Slogan<\/h3>\n        <p>&#8220;Perkhidmatan Berkualiti Masyarakat Sihat&#8221;<\/p>\n    <\/div>\n<\/div>\n\n<!-- MOTO -->\n<div class=\"vm-card moto full\">\n    <div class=\"vm-content\">\n        <h3>Moto<\/h3>\n        <p>&#8220;Perkhidmatan berkualiti amalan bersama&#8221;<\/p>\n    <\/div>\n<\/div>\n\n<\/div>\n\n<\/div>\n\n<\/section>\n ","protected":false},"excerpt":{"rendered":"<p>Visi &amp; Misi Hospital Sibu Objektif Untuk memberikan perkhidmatan perubatan yang cekap, efektif, berkemampuan dan saksama kepada semua pelanggan berdasarkan kepakaran serta teknologi yang bersesuaian dengan memberi penekanan kepada kualiti, inovasi, promosi kesihatan serta menggalakkan penyertaan individu dan masyarakat ke arah merealisasikan wawasan negara untuk mencapai tahap kesihatan yang tinggi. Visi &#8220;To Care With Passion&#8221;&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_themeisle_gutenberg_block_has_review":false,"_kad_post_transparent":"default","_kad_post_title":"hide","_kad_post_layout":"default","_kad_post_sidebar_id":"","_kad_post_content_style":"default","_kad_post_vertical_padding":"bottom","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"class_list":["post-3644","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/wp-json\/wp\/v2\/pages\/3644","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/wp-json\/wp\/v2\/comments?post=3644"}],"version-history":[{"count":3,"href":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/wp-json\/wp\/v2\/pages\/3644\/revisions"}],"predecessor-version":[{"id":3801,"href":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/wp-json\/wp\/v2\/pages\/3644\/revisions\/3801"}],"wp:attachment":[{"href":"https:\/\/jknsarawak.moh.gov.my\/hsibu\/wp-json\/wp\/v2\/media?parent=3644"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}