/* Theme Name: Custom Theme Theme URI: https://jaringdigital.com Description: Custom WordPress Theme Author: Jaring Digital Author URI: https://jaringdigital.com Version: 1.0 License: GPL License URI: http://www.gnu.org/copyleft/gpl.html */ /* -------------------------------------------------- BASIC STYLES -------------------------------------------------- */ html, body {border: 0; margin: 0; padding: 0; width: 100%; height: 100%; position: relative;} a img {border: 0} html {scroll-behavior: smooth;} *, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;} body {background: #fff; color: #444; padding: 0; margin: 0!important; font-size: 1rem; line-height: 1.4;} img, object, embed {max-width: 100%; height: auto;} input:focus {outline: none;} *:focus {outline: none;} input, textarea, select, button {transition: .3s;} input::placeholder {color: #adadad; opacity: 1;} .icon::before {display: inline-block; text-rendering: auto; -webkit-font-smoothing: antialiased;} select {-webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e"); background-repeat: no-repeat; background-position: right 0.4em center; background-size: 18px; padding-right: 2em; border: 1px solid #ccc; border-radius: 6px; font-size: 16px; line-height: 1.4; color: #333;} select:focus {outline: none; border-color: #009b5d;} select::-ms-expand {display: none;} select {cursor: pointer;box-shadow: 0 1px 2px rgba(0,0,0,0.05);} select option:first-child {color: #d3d3d3;} .select {position: relative; line-height: 3; display: flex; overflow: hidden;} .select::after {background: url('images/chev-down.svg') no-repeat; background-size: 10px; width: 10px; height: 10px; color: #222; position: absolute; top: 37%; right: 10px; cursor: pointer; pointer-events: none; transition:.25s all ease; content: '';} .select:hover::after {color: #23b499;} .required {color: #ff0000;} ::-webkit-scrollbar {width: 8px; height: 6px;} ::-webkit-scrollbar-track {background: #f1f1f1;} ::-webkit-scrollbar-thumb {background-color: #7f7f7f; border-radius: 30px; border: 1px solid #f1f1f1;} ::-webkit-scrollbar-thumb:hover {background-color: #555;} /* -------------------------------------------------- LINK -------------------------------------------------- */ a, input, #submit, textarea, button, button:hover, a i, a:hover i,.thumb a img, .thumb a:hover img, a:hover .thumb img, a .thumb img, .close img, .close img:hover, a .thumb::before, a:hover .thumb::before, .b-menu a, .b-menu a:hover {text-decoration: none; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;} a {-webkit-tap-highlight-color: transparent !important;} *{-webkit-tap-highlight-color: rgba(0, 0, 0, 0) !important;} /* -------------------------------------------------- TYPOGRAPHY -------------------------------------------------- */ h1, h2, h3, h4, h5, h6 {font-weight: 700; color: #222; letter-spacing: -.02em; margin: 0; padding: 0;} ul, li, ol {list-style: none; margin: 0; padding: 0;} p {margin: 0;} li, p, input, textarea, select, button {letter-spacing: -.02em;} body, input, textarea, select, button {font-family: 'Inter', Helvetica Neue, Helvetica, Arial, "sans-serif"!important;} button, select {cursor: pointer;} button {border: none; padding: 0; box-shadow: 0; background: none;} /* -------------------------------------------------- LAYOUT CONTROL -------------------------------------------------- */ .control {max-width: 1300px; margin: 0 auto; position: relative; padding: 0 20px;} .sec {width: 100%; position: relative;} .thumb img {width: 100%; height: auto; margin-bottom: -5px;} .js-offcanvas, .b-menu, .fancybox-caption-wrap {display: none;} /* -------------------------------------------------- ELEMENTOR FIX -------------------------------------------------- */ .elementor-widget-text-editor p {margin-bottom: 15px!important;} .elementor-widget-text-editor p strong {font-weight: 600;} .elementor-widget-text-editor a {color: #2836e5; font-weight: 500;} .elementor-widget-text-editor a:hover {text-decoration: underline;} .elementor-widget-text-editor h3 {font-weight: normal;} .elementor-widget-text-editor h3 strong {font-weight: 600;} .elementor-widget-text-editor ul, .elementor-widget-text-editor ol {padding-left: 18px; margin-bottom: 20px;} .elementor-widget-text-editor ul li {list-style: disc; margin-bottom: 10px;} .elementor-widget-text-editor ol li {list-style: decimal;} .elementor-widget:not(:last-child), .elementor-widget-text-editor p:last-child {margin-bottom: 0!important;} .text-one a {color: #fff;} .text-two a {color: #000; font-weight: 400;} .text-one a:hover, .text-two a:hover {text-decoration: none;} .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {margin: 0 3px!important;} .elementor-counter .elementor-counter-number-suffix {font-size: 2.4rem; line-height: 1.5; margin-left: 2px;} .i-btn a i {font-size: .55rem;} .i-btn .elementor-button-icon .e-font-icon-svg {height: .7em!important;} .swiper-button-prev, .swiper-button-next {width: 44px!important; height: 44px!important; background: #fff; display: flex; justify-content: center; align-items: center; border-radius: 50%; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;} .swiper-button-prev:after, .swiper-button-next:after {font-size: 1.2rem!important; color: #000;} .swiper-button-prev:after {margin-right: 2px;} .swiper-button-next:after {margin-left: 2px;} /* -------------------------------------------------- BREADCRUMB -------------------------------------------------- */ #breadcrumbs span, #breadcrumbs a {font-size: .8rem; color: #fff;} #breadcrumbs a {font-weight: 600; color: #fff;} #breadcrumbs a:hover {text-decoration: underline;} #breadcrumbs i {font-size: .5rem; margin: 0 5px; color: #a1a1a1; vertical-align: .5px;} /* -------------------------------------------------- HEADER -------------------------------------------------- */ .head {padding: 15px 0; background: #fff; border-bottom: 1px solid #ddd; width: 100%; position: relative; z-index: 3;} .h-box {display: flex; justify-content: space-between; align-items: center;} .l-head {display: flex; align-items: center; gap: 40px;} .r-head {display: flex; align-items: center; gap: 20px;} .logo-head img {height: auto; margin-bottom: -6px;} /* -------------------------------------------------- FOOTER -------------------------------------------------- */ .footer {background: #000; position: relative; width: 100%;} .f-top {padding: 40px 0; display: flex; gap: 60px;} .f-top .row-one {width: 45%;} .f-top .row-two {width: 55%;} .f-info img {width: 140px; height: auto; margin-bottom: 10px;} .f-info p {font-size: 1rem; line-height: 1.4; color: #fff;} .social-media {display: flex; align-items: center; gap: 15px; margin-top: 15px;} .social-media a {display: block;} .social-media svg {width: 24px; height: 24px; color: #fff;} .f-top .row-two {display: flex; justify-content: space-between; gap: 60px;} .f-top .row-two h3 {font-size: 1.1rem; font-weight: 600; color: #FFFFFF; margin-bottom: 10px;} .f-btm {padding: 30px 0; border-top: 1px solid rgba(255,255,255,.15)} .copy p {font-size: .9rem; line-height: 1.3; color: #fff;} .f-note {margin-top: 10px; max-width: 84%;} .f-note p {font-size: .785rem; line-height: 1.35; color: #d4d4d5;} /* -------------------------------------------------- NAVIGATION -------------------------------------------------- */ #cssmenu {display: block; padding: 0; margin: 0;} #cssmenu > ul {padding: 0; margin: 0; display: flex; justify-content: center; align-items: center; gap: 28px;} #cssmenu > ul > li {padding: 0; margin: 0; display: block; position: relative; list-style: none;} #cssmenu > ul > li > a {padding: 10px 0; font-size: 1.1rem; line-height: 1.2; font-weight: 500; text-decoration: none; display: block; position: relative; transition: .3s ease-in-out;} #cssmenu > ul > li.has-sub > a {display: flex; gap: 4px;} #cssmenu > ul > li.has-sub > a:after {margin-top: 5px; -webkit-mask: url('images/chev-down.svg') no-repeat center; mask: url('images/chev-down.svg') no-repeat center; -webkit-mask-size: contain; mask-size: contain; width: 11px; height: 11px; position: relative; transition: .3s ease-in-out; content: '';} #cssmenu .submenu-wrap {width: 230px; padding: 5px 0; background: #fff; border: 1px solid #ddd; border-radius: 6px; box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; opacity: 0; visibility: hidden; position: absolute; top: 90%; left: -16px; z-index: 99; transition: all .25s ease-in-out;} #cssmenu li.has-sub:hover > .submenu-wrap {opacity: 1; visibility: visible; top: calc(100%);} #cssmenu .submenu-wrap ul {display: flex; flex-direction: column; margin: 0; list-style: none;} #cssmenu .submenu-wrap ul li {width: 100%; padding: 0; margin: 0; display: block; position: relative;} #cssmenu .submenu-wrap ul li a {padding: 8px 15px; margin: 0; font-size: 1rem; line-height: 1.2; font-weight: 500; text-transform: capitalize; text-decoration: none; display: block; position: relative; transition: all .2s ease-in-out;} #cssmenu > ul > li > a {color: #2F3D38;} #cssmenu > ul > li.has-sub > a:after {background-color: #000;} #cssmenu > ul > li > a:hover, #cssmenu > ul > li.has-sub:hover > a {color: #3845ee;} #cssmenu > ul > li.has-sub > a:hover:after {background-color: #000;} #cssmenu .submenu-wrap ul li a {color: #000;} #cssmenu .submenu-wrap ul li a:hover {color: #0a54d7;} /* -------------------------------------------------- PAGE -------------------------------------------------- */ .page-main {padding: 30px 0 60px;} .p-title {margin-bottom: 30px;} .p-title h1, .p-title h2 {font-size: 3.4rem; line-height: 1.1; text-transform: capitalize;} .post-edit-link {position: fixed; left: 20px; bottom: 20px; font-size: .75rem; font-weight: 500; color: #fff; background: #36980a; text-transform: uppercase; width: 50px; height: 50px; border-radius: 50%; display: block; padding-top: 17px; text-align: center; z-index: 999;} .page-content h2, .page-content h3, .page-content h4 {margin: 25px 0 10px;} .page-content h2:first-child {margin-top: 0;} .page-content h2 {font-size: 1.3rem; line-height: 1.4; text-transform: uppercase; text-decoration: underline;} .page-content h3 {font-size: 1.12rem; line-height: 1.4;} .page-content h4 {font-size: 1.1rem; line-height: 1.4;} .page-content p {margin-bottom: 10px; word-wrap: break-word;} .page-content p, .page-content ul li, .page-content ol li {font-size: 1rem; line-height: 1.35; color: #222;} .page-content a {color: #0A54D7; font-weight: 600;} .page-content a:hover {text-decoration: underline;} .page-content ul, .page-content ol {margin: 0 0 15px; padding-left: 30px;} .page-content ol li {list-style: decimal;} .page-content ul li {list-style: disc;} .page-content ul li, .page-content ol li {padding: 1px 0; word-wrap: break-word; margin-bottom: 2px;} .o-page .box {display: grid; grid-template-columns: 250px 1fr; gap: 40px;} .o-page .control {} .st-title {margin: 12px 0 12px;} .st-title h3 {font-size: 1.1rem; line-height: 1.2;} .st-nav ul {display: flex; flex-direction: column; gap: 6px;} .st-nav ul li a {font-size: 1rem; line-height: 1.3; color: #333;} .st-nav ul li a:hover {color: #0A54D7;} .page-sep {margin: 40px 0; width: 100%; height: 1px; background: #ccc; display: block;} /* -------------------------------------------------- BLOG LIST -------------------------------------------------- */ .post-meta ul {display: flex; align-items: center; gap: 10px;} .post-meta ul li {font-size: .85rem; line-height: 1.2; color: #777777;} .post-meta ul li a {color: #777777;} .post-meta ul li a:hover {color: #333;} .post-meta ul li::before {content: ''; height: 10px; border: 1px solid #e5e5e5; margin-right: 10px; display: inline-block;} .post-meta ul li:first-child::before {display: none;} .post-meta span {font-size: .5rem;} .b-list a .thumb {border: 1px solid rgba(100, 100, 100, .15); border-radius: 8px; overflow: hidden;} .b-list .info {margin-top: 20px;} .b-list a h3 {font-size: 1.6rem; line-height: 1.4; font-weight: 600; text-transform: none; color: #333; transition: .3s;} .b-list a:hover h3 {color: #0A54D7} .b-list a .excerpt {margin: 10px 0 25px;} .b-list a .excerpt p {color: #333; font-size: 1.05rem; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3;.post-meta ul} .b-list a .btn {font-size: .95rem; line-height: 1.2; color: #3845ee; font-weight: 600; margin-top: 12px; display: flex; align-items: center;} .b-list a .btn svg {width: 12px; height: 12px;} .more-btn {margin-top: 30px;} .more-btn a {padding: 12px 30px; font-size: .95rem; line-height: 1; font-weight: 500; color: #000; border: 1px solid #666; display: inline-block; border-radius: 4px;} .more-btn a span {display: flex; align-items: center; gap: 4px;} .more-btn a svg {width: 10px; height: 10px;} .more-btn a:hover {border-color: #000;} .b-list .swiper-button-next, .b-list .swiper-button-prev {width: 38px!important; height: 38px!important; background: #fff; top: -38px; display: block; box-shadow: none; border-radius: 0; transition: .3s;} .b-list .swiper-button-prev {right: 40px; left: inherit;} .b-list .swiper-button-next {right: 0;} .b-list .swiper-button-next:after, .b-list .swiper-button-prev:after {color: #222; padding-top: 1px; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%;} .b-list .swiper-button-prev:after {content: ''; background: url('images/arrow-left.svg') no-repeat center; background-size: 22px;} .b-list .swiper-button-next:after {content: ''; background: url('images/arrow-right.svg') no-repeat center; background-size: 22px;} .b-list .swiper-button-next.swiper-button-disabled, .b-list .swiper-button-prev.swiper-button-disabled {opacity: .3!important;} .b-list .bs-box {display: grid; grid-template-columns: repeat(3, 1fr); column-gap: 35px; grid-row-gap: 60px;} /* -------------------------------------------------- BLOG SINGLE -------------------------------------------------- */ .bs .bs-box {display: grid; grid-template-columns: 1fr 300px; gap: 40px;} .sb-top {margin-bottom: 40px;} .sb-top h1 {font-size: 2.75rem; line-height: 1.35; font-weight: 600; text-transform: none;} .sb-top .post-meta {margin: 10px 0 0;} .sb-top .post-meta ul {justify-content: flex-start;} .sb-top .post-meta ul li {font-size: .9rem;} /* -------------------------------------------------- ENTRY CONTENT -------------------------------------------------- */ .sb-thumb {margin-bottom: 15px;} .sb-thumb img {width: 100%; height: auto; border: 1px solid rgba(100, 100, 100, .15);} .entry-content h2, .entry-content h3 {font-size: 1.6rem; line-height: 1.3;} .entry-content h4 {font-size: 1.5rem; line-height: 1.3;} .entry-content h2, .entry-content h3, .entry-content h4 {font-weight: 600; margin: 30px 0 15px; text-transform: capitalize;} .entry-content p {margin-bottom: 12px;} .entry-content p, .entry-content ul li, .entry-content ol li {font-size: 1.08rem; line-height: 1.5; color: #333;} .entry-content p strong {font-weight: 600;} .entry-content a {color: #0A54D7; font-weight: 600;} .entry-content a:hover {text-decoration: underline;} .entry-content img, .page-content img {width: 100%; height: auto; margin-bottom: 15px;} .entry-content ul, .entry-content ol {margin: 0 0 12px; padding-left: 30px;} .entry-content ul li, .entry-content ol li {padding: 1px 0; margin-bottom: 2px;} .entry-content ul li {list-style: disc;} .entry-content ol li {list-style: decimal;} .entry-content iframe {display: flex; margin: 0 auto;} .entry-content .video {margin-bottom: 15px;} .b-update {font-size: 1.65rem; line-height: 1.4; font-weight: 500; color: #333; border-top: 1px solid #666; padding: 30px 0; margin-top: 30px;} .galeri {display: flex; flex-wrap: wrap;} .galeri .item {width: 33.3333333333%; padding: 5px;} .galeri .item a img {margin-bottom: -5px;} .galeri .item a:hover img {opacity: .7;} .wp-embedded-content {width: 100%!important;} .twitter-tweet {margin: 0 auto 10px!important;} .tag {margin-bottom: 20px; display: flex; flex-wrap: wrap; gap: 5px;} .tag span {font-size: .815rem; line-height: 1.3; font-weight: 300; color: #000; background: #f8f8f8; padding: 6px 8px; border: 1px solid transparent; border-radius: 4px; display: inline-block; transition: .3s;} .sharer {margin: 30px 0;} .sharer h4 {margin-bottom: 10px; font-size: .95rem; line-height: 1.2; font-weight: 300; color: #000; z-index: 3;} .sharer ul {display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px;} .sharer li a {font-size: .75rem; line-height: 1.1; color: #000; font-weight: 300; text-transform: uppercase; text-align: center; border-radius: 50%; display: block;} .sharer li a svg {width: 30px; height: 30px;} .sharer li a span {display: block; margin-top: 8px;} .sharer li a:hover, .sharer li a:hover span {color: #0A54D7;} /* -------------------------------------------------- COMMENT AREA -------------------------------------------------- */ .comment-area {width: 100%; padding-top: 30px;} .comment-title h3 {font-size: 1.6rem; line-height: 1; font-weight: 600; text-transform: none; margin-bottom: 10px;} .comment-title h3 i {margin-right: 4px; font-size: 1.1rem;} .comment-title p {font-size: .95rem; line-height: 1.4; color: #444;} .comment-title p em {color: #ff0000;} .no-cmt {margin: 40px 0;} .no-cmt p {font-size: 1.1rem; line-height: 1.3; font-weight: 300; color: #444;} .commentlist {margin-bottom: 30px;} .commentlist li:first-child {border-top: none;} .commentlist li {border-top: 1px solid #ddd; padding: 20px 0 20px; position: relative; display: block;} .author-gravatar {position: absolute; width: 50px; height: 50px;} .author-gravatar img {border-radius: 50%;} .comment-right {padding-left: 65px;} .comment-meta {display: flex; align-items: center; gap: 5px; font-size: .8rem; line-height: 1.1; color: #797d86; position: relative;} .komenName, .komenName a {font-size: .93rem; line-height: 1.1; font-weight: 600; text-transform: capitalize;} .komenName a {color: #0A54D7;} .komenName a:hover {color: #0b4fc8;} .comment-content {margin: 8px 0 0;} .comment-wrp p {font-size: .96rem; line-height: 1.4; color: #000; margin-bottom: 10px; word-wrap: break-word;} .comment-wrp p:last-child {margin-bottom: 0;} .commentlist li ul.children {margin-bottom: -20px;} .commentlist li ul.children li.depth-2 {padding-left: 60px;} .commentlist .reply {margin-top: 5px;} .commentlist .reply a {font-size: .8rem; font-weight: 600; color: #000; margin-right: 10px;} .commentlist .reply a:hover {color: #0A54D7;} .commentlist li ul.children .comment-respond {margin-bottom: 25px;} /* -------------------------------------------------- COMMENT FORM -------------------------------------------------- */ .comment-respond {margin-top: 50px; padding-top: 40px; border-top: 1px solid #666;} .logged-in-as {font-size: .95rem; line-height: 1.2; margin-bottom: 12px;} .logged-in-as strong {font-weight: 500; color: #0A54D7; text-transform: capitalize;} .logged-in-as a {color: #fff;} .logged-in-as a:hover {text-decoration: underline;} .cmt-form .col {position: relative; margin-bottom: 25px;} .cmtform-one {display: flex; gap: 20px;} .cmtform-one .col {width: 50%;} #commentform label {display: block; width: 100%; font-size: 1rem; line-height: 1.2; font-weight: 500; color: #000; margin-bottom: 8px;} #commentform label span {color: #ff0000;} #commentform input, #commentform textarea {font-size: 1.1rem; line-height: 1.2; padding: 10px; background: #fff; color: #000; border: 2px solid #ccc; border-radius: 4px; width: 100%;} #commentform input:hover, #commentform textarea:hover {border-color: #7a7a7a;} #commentform input:focus, #commentform textarea:focus {border-color: #0A54D7;} #commentform textarea {line-height: 1.4; height: 150px; width: 100%; font-family: 'Inter', sans-serif;} .btn-submit {margin-top: 10px;} .btn-submit input#submit {background: #0A54D7; color: #fff; font-size: .98rem; line-height: 1.1; font-weight: 600; padding: 16px 0; border: none; cursor: pointer; text-align: center; width: 100%; border-radius: 4px; transition: all 0.2s ease-in-out; display: block;} .btn-submit input:hover#submit {background: #094bc1;} .cancel-comment-reply {margin: 20px 0 20px;} .cancel-comment-reply a {font-size: 1.2rem; color: #0A54D7; font-weight: 500;} .comment-extra {font-size: 12px!important;} /* -------------------------------------------------- SINGLE MORE POST -------------------------------------------------- */ .b-title h2 {font-size: 1.8rem; line-height: 1.2; font-weight: 600;} .sb-more {margin-top: 60px; padding-top: 60px; border-top: 1px solid #666;} .sb-more.b-list .row {padding: 25px 0; border-bottom: 1px solid #ddd;} .sb-more.b-list .row:last-child {border-bottom: 0;} .sb-more a {display: grid; grid-template-columns: 300px 1fr; align-items: center; gap: 30px;} .sb-more.b-list .info {margin-top: 0;} .sb-more.b-list a h3 {text-align: left; font-size: 1.6rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;} .sb-more.b-list a .excerpt {margin: 10px 0 15px;} .sb-more.b-list a .excerpt p {-webkit-line-clamp: 2; text-align: left;} .sb-more.b-list .post-meta ul {justify-content: flex-start;} /* -------------------------------------------------- SIDEBAR -------------------------------------------------- */ .wp-block-search__label {display: none;} .sidebar h3, h2.wp-block-heading {font-size: 1.3rem; line-height: 1.2; font-weight: 600;} .c-side li a {display: flex; align-items: center; padding: 15px 0; border-bottom: 1px solid #ddd; position: relative;} .c-side .info {padding-right: 15px; width: 100%;} .c-side li a h4 {font-size: 1.05rem; line-height: 1.35; color: #000; font-weight: 500; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; transition: .3s;} .c-side li a:hover h4 {color: #0A54D7;} .c-side li a .post-meta {font-size: .78rem; line-height: 1.1; color: #666; display: flex; align-items: center; margin-top: 10px;} .c-side a .thumb {max-width: 110px; height: 110px; overflow: hidden;} .c-side a .thumb img {min-width: 200px; margin-left: -40%; transition: 1.3s;} .wp-block-search {margin: 30px 0 20px;} .wp-block-search__input {padding: 10px; border-radius: 4px;} .wp-block-search__button {padding: 8px 16px; display: flex; justify-content: center; align-items: center; border-radius: 4px; margin-left: 5px;} .wp-block-search__button:hover {background: #151618;} h2.wp-block-heading {margin-bottom: 10px;} ul.wp-block-archives {display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;} ul.wp-block-archives li a {font-size: .95rem; line-height: 1.2; color: #000;} ul.wp-block-archives li a:hover {color: #0A54D7;} /* -------------------------------------------------- PAGINATION -------------------------------------------------- */ .WPpagi {width: 100%; position: relative; margin: 30px 0 0; display: flex; justify-content: center; align-items: center;} .WPpagi span, .WPpagi a {font-size: 1rem; line-height: 1; font-weight: 300; color: #000; border: none!important; border-radius: 50%; width: 1.5em; height: 2em; display: flex; align-items: center; justify-content: center; margin: 0!important; padding: 0!important;} .WPpagi a:hover {color: #666;} .WPpagi span.current {color: #0A54D7; font-weight: 600!important;} .WPpagi .prev, .WPpagi .next {content: '';} .WPpagi .prev {background: url('images/chev-left.svg') no-repeat center; background-size: 12px;} .WPpagi .next {background: url('images/chev-right.svg') no-repeat center; background-size: 12px;} /* -------------------------------------------------- FAQ -------------------------------------------------- */ .faq { width: 80%; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; } .faq-item { background: #ffffff; border: 1px solid transparent; border-radius: 8px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); overflow: hidden; transition: border-color 0.3s ease; } .faq-q { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px; cursor: pointer; user-select: none; } .faq-title { display: flex; align-items: center; gap: 10px; min-width: 0; } .faq-number { color: #FFB127; font-size: 18px; font-weight: 700; line-height: 1; flex-shrink: 0; } .faq-q h3 { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.4; color: #111111; } .faq-q svg { width: 14px; height: 14px; flex-shrink: 0; color: #FFB127; transition: transform 0.3s ease, color 0.3s ease; } .faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; } .faq-inner { overflow: hidden; font-size: 16px; line-height: 1.6; color: #222222; } .faq-inner > * { margin-left: 20px; margin-right: 20px; } .faq-inner > *:first-child { margin-top: 0; } .faq-inner > *:last-child { margin-bottom: 20px; } .faq-item.active { border-color: #FFB127; } .faq-item.active .faq-a { grid-template-rows: 1fr; } .faq-item.active .faq-q svg { transform: rotate(180deg); color: #FFB127; } @media (max-width: 767px) { .faq { gap: 12px; } .faq-q { padding: 16px; } .faq-number { font-size: 17px; } .faq-q h3 { font-size: 15px; } .faq-inner { font-size: 14px; } .faq-inner > * { margin-left: 16px; margin-right: 16px; } .faq-inner > *:last-child { margin-bottom: 16px; } } /* -------------------------------------------------- 404 -------------------------------------------------- */ .notfound {padding: 5em 0;} .notfound h1 {font-size: 15rem; line-height: 1.1; font-weight: 700;} .notfound p {font-size: 1.2rem; line-height: 1.2;} /* -------------------------------------------------- ADD ON -------------------------------------------------- */ .clearfix {clear: both;} .video, .maps {overflow: hidden; padding-bottom: 50%; position: relative; height: 0;} .video iframe, .maps iframe {left: 0; top: 0; height: 100%; width: 100%; position: absolute;} .maps {margin-bottom: 0;} .fb {color: #4267b2;} .twit {color: #55acee;} .ig {color: #f24d58;} .pin {color: #e60023;} .utube {color: #ff0000;} .whatsapp {color: #00a500;} .tele {color: #0088cc;} .fb-ico {background: #4267b2;} .twit-ico {background: #000;} .ig-ico {background: #d6249f; background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);} .pin-ico {background: #cc2127;} .in-ico {background: #0077b5;} .utube-ico {background: #ff0000;} .tiktok-ico {background: #000;} .whatsapp-ico {background: #00a500;} .web-ico {background: #a67c52;} .tele-ico {background: #0088cc;} .messenger-ico {background: #007fff;} /* -------------------------------------------------- MENU MOBILE -------------------------------------------------- */ .b-menu {margin-right: -5px;} .b-menu button {width: 34px; height: 34px; display: flex; justify-content: center; align-items: center; padding: 3px;} .b-menu img {width: 28px; height: 28px; display: block;} .offcanvas-close {width: 32px; height: 32px; padding: 9px; margin: 0; display: flex; justify-content: center; align-items: center; top: 10px; right: 5px; position: absolute;} .canv {padding: 20px;} .bb-logo {margin-bottom: 20px; max-width: 130px;} .bb-nav {margin-bottom: 25px;} #navhp ul {display: flex; flex-direction: column; gap: 5px;} #navhp li a {font-size: 1.1rem; line-height: 1.2; font-weight: 500; color: #000; padding: 5.5px 0; display: block; width: 100%;} .bb-socmed ul {display: flex; flex-wrap: wrap; gap: 3px;} .bb-socmed li a {color: #000; width: 36px; height: 36px; border: 1px solid #000; display: flex; justify-content: center; align-items: center; border-radius: 50%;} .bb-socmed li a svg {width: 18px; height: 18px; fill: currentColor; color: #000;} /* -------------------------------------------------- OFF CANVAS -------------------------------------------------- */ .offcanvas {position: fixed; top: 0; width: 280px; max-width: 85vw; height: 100vh; background: #fff; z-index: 9999; transition: transform .35s ease; overflow-y: auto;} .offcanvas-left {left: 0; transform: translateX(-100%);} .offcanvas-left.active {transform: translateX(0);} .offcanvas-right {width: 400px; right: 0; transform: translateX(100%);} .offcanvas-right.active {transform: translateX(0);} .offcanvas-right .offcanvas-close {top: 8px; z-index: 9;} .offcanvas-top {top: 0; left: 0; width: 100%; max-height: 90vh; transform: translateY(-100%);} .offcanvas-bottom {bottom: 0; left: 0; width: 100%; max-height: 90vh; border-radius: 20px 20px 0 0; transform: translateY(100%);} .offcanvas-bottom.active {transform: translateY(0);} .offcanvas-overlay {position: fixed; inset: 0; background: rgba(0,0,0,.7); opacity: 0; visibility: hidden; transition: .3s ease; z-index: 9998;} .offcanvas-overlay.active {opacity: 1; visibility: visible;} /* -------------------------------------------------- CF7 -------------------------------------------------- */ .wpcf7 br {display: none!important;} .wpcf7 .box {display: flex; gap: 20px;} .wpcf7 .col {margin-bottom: 20px; position: relative;} .wpcf7 .box .col {width: 100%;} .wpcf7 label {display: block; font-size: .95rem; line-height: 1; font-weight: 500; margin-bottom: 8px;} .wpcf7 label span {color: #ff0000; font-weight: 700;} .wpcf7 .col input, .wpcf7 .col textarea, .wpcf7 select {width: 100%; padding: 12px; font-size: 1.08rem; line-height: 1.2; font-weight: 400; background: #fff; border: 1px solid #a8a8a8; border-radius: 4px;} .wpcf7 .col textarea {height: 180px; line-height: 1.5;} .wpcf7 .col input:hover, .wpcf7 .col textarea:hover, .wpcf7 select:hover {border-color: #787878;} .wpcf7 .col input:focus, .wpcf7 .col textarea:focus {border-color: #008ebc;} .wpcf7 .col.select {display: block;} .wpcf7 .col.select::after {font-size: .9rem; top: 20px; height: 22px;} .wpcf7 select {line-height: 1.1; cursor: pointer; position: relative; display: block;} .wpcf7 select option:first-child {display: none;} .wpcf7 select option {color: #000;} .wpcf7 .col.address textarea {height: 80px;} .wpcf7 .wpcf7-radio {margin-top: 12px; display: block;} .wpcf7 .wpcf7-checkbox {margin-top: 12px; display: flex; flex-wrap: wrap;} .wpcf7 .wpcf7-list-item {margin: 0; padding-right: 20px;} .wpcf7 .wpcf7-list-item input {width: 16px; height: 16px; margin: 0 4px 0 0; padding: inherit; vertical-align: -2.5px;} .wpcf7 .wpcf7-list-item input:focus {border: none; outline: none;} .wpcf7 .wpcf7-list-item label {text-transform: none; font-size: .95rem; line-height: 1.2;} .wpcf7 .wpcf7-list-item label, .wpcf7 .wpcf7-list-item input {cursor: pointer;} .wpcf7 .wpcf7-list-item .wpcf7-list-item-label {color: #000; font-weight: 400;} .wpcf7 .wpcf7-acceptance .wpcf7-list-item {width: 100%;} .wpcf7 .wpcf7-acceptance label {font-size: .9rem; line-height: 1.2;} .wpcf7 .button {position: relative; margin-top: 10px;} .wpcf7 .button input {background: #1ab64f; color: #fff; font-size: 1.1rem; line-height: 1.2; font-weight: 500; padding: 14px 0; text-align: center; width: 100%; display: block; border-radius: 4px; cursor: pointer; border: none;} .wpcf7 .button input:hover {background: #16a446;} .wpcf7 .button input:focus {box-shadow: none;} .wpcf7-not-valid {border: 1px solid #ff0000!important;} .wpcf7-response-output {padding: 0!important; margin: 15px 0 0!important; text-align: center;} .wpcf7 form.sent .wpcf7-response-output {border: none; font-size: .9rem; line-height: 1.2; color: #46b450;} .wpcf7 form.invalid .wpcf7-response-output {border: none; font-size: .8rem; line-height: 1.2; color: #ff0000;} .wpcf7-not-valid-tip {display: none!important;} .wpcf7 .wpcf7-checkbox.wpcf7-not-valid {border: none!important;} .wpcf7 .wpcf7-checkbox.wpcf7-not-valid .wpcf7-list-item .wpcf7-list-item-label {color: #ff0000;} /** CF7 Loding **/ #cf7-overlay {display: none; position: fixed; inset: 0; background: rgba(255, 255, 255, .85); backdrop-filter: blur(2px); z-index: 9999; align-items: center; justify-content: center; flex-direction: column; opacity: 0; transition: opacity .3s ease;} #cf7-overlay.active {display: flex; opacity: 1;} .cf7-spinner {width: 48px; height: 48px; border: 4px solid #e0e0e0; border-top-color: #00C332; border-radius: 50%; animation: cf7-spin .8s linear infinite;} .cf7-success {text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px;} .cf7-checkmark {width: 64px; height: 64px;} .cf7-checkmark svg {width: 100%; height: 100%;} .cf7-checkmark circle {stroke: #00C332; stroke-width: 2; stroke-dasharray: 166; stroke-dashoffset: 166; animation: cf7-circle .5s ease forwards;} .cf7-checkmark path {stroke: #00C332; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 48; stroke-dashoffset: 48; animation: cf7-check .4s .5s ease forwards;} .cf7-success p {font-size: 1.1rem; font-weight: 600; color: #222; margin: 0;} .cf7-success span {font-size: .85rem; color: #666;} @keyframes cf7-spin { to {transform: rotate(360deg);} } @keyframes cf7-circle { to {stroke-dashoffset: 0;} } @keyframes cf7-check { to {stroke-dashoffset: 0;} } /* Mobile menu */ body.jd-menu-open { overflow: hidden; } #offcanvas-left { height: 100dvh; } #offcanvas-left .offcanvas-close { z-index: 1; } #navhp .sub-menu { padding-left: 15px; } @media (prefers-reduced-motion: reduce) { #offcanvas-left, .offcanvas-overlay { transition: none; } } /* MOBILE NAV — EXPAND FROM MENU BUTTON */ #offcanvas-left { --menu-x: calc(100% - 24px); --menu-y: 24px; --menu-radius: 1200px; position: fixed; inset: 16px 8px; width: auto; max-width: none; height: auto; background: #fff; border-radius: 24px; z-index: 9999; /* Gantikan animasi slide lama */ transform: none; clip-path: circle(0px at var(--menu-x) var(--menu-y)); visibility: hidden; pointer-events: none; overflow: hidden; transition: clip-path 0.5s cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0.5s; } #offcanvas-left.active { transform: none; clip-path: circle(var(--menu-radius) at var(--menu-x) var(--menu-y)); visibility: visible; pointer-events: auto; transition: clip-path 0.5s cubic-bezier(.22, 1, .36, 1), visibility 0s; } /* Ruang kandungan boleh scroll */ #offcanvas-left .canv { box-sizing: border-box; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 28px 22px; } /* Logo di bahagian atas */ #offcanvas-left .bb-logo { max-width: 150px; padding-right: 40px; margin-bottom: 30px; } #offcanvas-left .bb-logo img { display: block; max-width: 100%; height: auto; } /* Button tutup */ #offcanvas-left .offcanvas-close { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; padding: 9px; border: 0; background: #fff; border-radius: 50%; cursor: pointer; z-index: 2; } #offcanvas-left .offcanvas-close img { display: block; width: 18px; height: 18px; } /* Senarai menu sedia ada */ #offcanvas-left #navhp ul { display: flex; flex-direction: column; gap: 14px; margin: 0; padding: 0; list-style: none; } #offcanvas-left #navhp li a { display: block; padding: 0; color: #111; font-size: clamp(30px, 6vw, 28px); font-weight: 400; line-height: 1.25; text-transform: uppercase; text-decoration: none; } #offcanvas-left #navhp .sub-menu { padding: 12px 0 0 16px; gap: 10px; } #offcanvas-left #navhp .sub-menu a { font-size: 18px; } /* Sembunyikan ikon sosial bawah */ #offcanvas-left .bb-socmed { display: none; } /* Kandungan muncul selepas panel mula mengembang */ #offcanvas-left .bb-logo, #offcanvas-left .bb-nav { opacity: 0; transform: translateY(20px); transition: opacity .15s ease, transform .15s ease; } #offcanvas-left.active .bb-logo, #offcanvas-left.active .bb-nav { opacity: 1; transform: translateY(0); transition: opacity .25s ease .15s, transform .25s ease .15s; } /* Background kuning seperti contoh */ .offcanvas-overlay { background: #ffde33; } body.jd-menu-open { overflow: hidden; } @media (prefers-reduced-motion: reduce) { #offcanvas-left, #offcanvas-left .bb-logo, #offcanvas-left .bb-nav, .offcanvas-overlay { transition: none; } } /* -------------------------------------------------- footer -------------------------------------------------- */ .footer.footer-new { background: #fff; color: #000; padding: 50px 20px; } .footer.footer-new .footer-simple { width: 80%; max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 15px; } .footer.footer-new .footer-logo img { display: block; margin: 0 auto; } .footer.footer-new .footer-copy p { margin: 0; color: #fff; font-size: 14px; line-height: 1.5; } .footer.footer-new .footer-disclaimer { width: 100%; max-width: 850px; } .footer.footer-new .footer-disclaimer p { margin: 0; color: #999; font-size: 11px; line-height: 1.6; } /* MOBILE */ @media (max-width: 767px) { .footer.footer-new { padding: 35px 20px; } .footer.footer-new .footer-simple { gap: 12px; } .footer.footer-new .footer-copy p { font-size: 13px; } .footer.footer-new .footer-disclaimer p { font-size: 10px; line-height: 1.5; } } /* ========================================= SPACE GALLERY ========================================= */ .space-gallery { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; box-sizing: border-box; } .space-gallery * { box-sizing: border-box; } /* ========================================= DESKTOP - 3 COLUMN ========================================= */ .space-gallery-track { width: 100%; display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 20px; margin: 0; padding: 0; } .space-slide { width: 100% !important; min-width: 0; margin: 0 !important; } .space-card { width: 100%; margin: 0; } .space-image { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 24px; } .space-image img { display: block; width: 100% !important; height: 100% !important; object-fit: cover; } .space-content { width: 100%; padding-top: 14px; text-align: left; } .space-eyebrow { margin-bottom: 8px; font-size: 12px; font-weight: 700; line-height: 1.3; text-transform: uppercase; } .space-content h3 { margin: 0 0 6px; font-family: Georgia, 'Times New Roman', serif; font-size: 30px; font-weight: 500; line-height: 1.2; } .space-content p { margin: 0; font-family: Open Sans, 'humanist', sans-serif; font-size: 16px; line-height: 1.5; } /* ========================================= TABLET + MOBILE CAROUSEL ========================================= */ @media (max-width: 979px) { .space-gallery { width: 100% !important; overflow: hidden; } .space-gallery-track { display: flex !important; grid-template-columns: none !important; width: 100%; gap: 16px; overflow-x: auto; overflow-y: hidden; padding: 0 16px 10px; scroll-snap-type: x mandatory; scroll-padding-left: 16px; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .space-gallery-track::-webkit-scrollbar { display: none; } .space-slide { display: block; flex: 0 0 88% !important; width: 88% !important; max-width: 88% !important; scroll-snap-align: start; } .space-card { width: 100%; } .space-image { width: 100%; border-radius: 20px; } .space-content { padding-top: 12px; } .space-content h3 { font-size: 30px; } .space-content p { font-size: 15px; } } /* ========================================= SMALL MOBILE ========================================= */ @media (max-width: 600px) { .space-gallery-track { gap: 12px; padding-left: 15px; padding-right: 15px; } .space-slide { flex-basis: 90% !important; width: 90% !important; max-width: 90% !important; } .space-image { border-radius: 18px; } .space-content h3 { font-size: 20px; } .space-content p { font-size: 14px; } }