/* Theme Name: Jadi Pinter Child Theme URI: https://jadipinter.online Description: Child theme Hello Elementor untuk platform e-course Jadi Pinter. Terintegrasi dengan Elementor, Xpro Elementor Addons, Tutor LMS, WooCommerce, dan WPForms. Mengikuti design system "Corporate Navy". Author: Jadi Pinter Official Author URI: https://jadipinter.online Template: hello-elementor Version: 1.1.0 Requires PHP: 8.2 License: GNU General Public License v2 or later Text Domain: jadipinter */ /* ========================================================================== Token fallback. Nilai hidup dicetak oleh inc/design-tokens.php di . ========================================================================== */ :root { --jp-primary: #16294F; --jp-primary-foreground: #FFFFFF; --jp-primary-soft: #2A3F6B; --jp-secondary: #EAEEF5; --jp-secondary-foreground: #16294F; --jp-support: #E8A33D; --jp-support-foreground: #1B2A2F; --jp-foreground: #1B2A2F; --jp-muted-foreground: #5C6B72; --jp-background: #FFFFFF; --jp-page-background: #F6F5F1; --jp-border: #E3E1D8; --jp-input-background: #F6F5F1; --jp-radius: 6px; --jp-radius-lg: 14px; --jp-radius-pill: 999px; --jp-space-sm: 12px; --jp-space-md: 24px; --jp-space-lg: 48px; --jp-font-display: "Sora", system-ui, -apple-system, "Segoe UI", sans-serif; --jp-font-body: "Work Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --jp-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; } body { font-family: var(--jp-font-body); font-weight: 400; color: var(--jp-foreground); background: var(--jp-background); } h1, h2, h3, h4, h5, h6 { font-family: var(--jp-font-display); font-weight: 600; color: var(--jp-foreground); } .jp-eyebrow { font-family: var(--jp-font-mono); font-weight: 500; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--jp-muted-foreground); } /* ========================================================================== Kartu kursus — 14px radius, border 1px, tanpa drop shadow. ========================================================================== */ .jp-course-grid { display: grid; gap: var(--jp-space-md); grid-template-columns: repeat(var(--jp-cols, 4), minmax(0, 1fr)); } @media (max-width: 1024px) { .jp-course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .jp-course-grid { grid-template-columns: 1fr; } } .jp-card { border: 1px solid var(--jp-border); border-radius: var(--jp-radius-lg); background: var(--jp-background); overflow: hidden; transition: border-color .2s ease; } .jp-card:hover { border-color: var(--jp-primary); } .jp-card__media { display: block; line-height: 0; } .jp-card__img { width: 100%; height: auto; object-fit: cover; } .jp-card__body { padding: var(--jp-space-sm) var(--jp-space-md) var(--jp-space-md); } .jp-card__title { margin: 0 0 var(--jp-space-sm); font-size: 1.0625rem; line-height: 1.4; } .jp-card__title a { color: inherit; text-decoration: none; } .jp-card__title a:hover { color: var(--jp-primary); } /* Badge: netral = tint navy; diskon/sale = amber. */ .jp-badge { display: inline-block; padding: .25rem .625rem; border-radius: var(--jp-radius-pill); font-size: .75rem; line-height: 1.4; background: var(--jp-secondary); color: var(--jp-secondary-foreground); } .jp-badge--sale, .jp-badge--discount { background: var(--jp-support); color: var(--jp-support-foreground); font-weight: 600; } /* Harga pakai amber — support color, sesuai design system. */ .jp-price { font-family: var(--jp-font-display); font-weight: 600; display: flex; align-items: baseline; gap: .5rem; } .jp-price__now { color: var(--jp-support-foreground); } .jp-price__strike { color: var(--jp-muted-foreground); text-decoration: line-through; font-size: .8125rem; font-weight: 400; } /* Rating bintang — amber. */ .jp-rating { color: var(--jp-support); } /* ========================================================================== Kontak & rekening ========================================================================== */ .jp-accounts { margin-block: var(--jp-space-md); } .jp-account { border: 1px solid var(--jp-border); background: var(--jp-page-background); border-radius: var(--jp-radius-lg); padding: var(--jp-space-md); margin-bottom: var(--jp-space-sm); } .jp-account__provider { font-size: .8125rem; color: var(--jp-muted-foreground); } .jp-account__number { font-family: var(--jp-font-mono); font-weight: 500; font-size: 1.125rem; letter-spacing: .04em; color: var(--jp-primary); } .jp-account__holder { font-size: .875rem; color: var(--jp-muted-foreground); } .jp-account__copy { cursor: pointer; margin-top: .5rem; border: 1px solid var(--jp-primary); background: transparent; color: var(--jp-primary); border-radius: var(--jp-radius-pill); padding: .375rem .875rem; font-family: var(--jp-font-body); font-size: .8125rem; } .jp-account__copy:hover { background: var(--jp-primary); color: var(--jp-primary-foreground); } /* ========================================================================== Tutor LMS ========================================================================== */ .tutor-course-topics-sidebar, .tutor-course-single-sidebar { border-radius: var(--jp-radius-lg); border: 1px solid var(--jp-border); } .tutor-course-topic-item.is-active { background: var(--jp-secondary); box-shadow: inset 3px 0 0 var(--jp-primary); } .tutor-course-topic-item.is-active .tutor-course-topic-item-title { color: var(--jp-primary); font-weight: 600; } .tutor-btn-primary, .tutor-course-progress-bar .tutor-progress-value { background-color: var(--jp-primary) !important; border-color: var(--jp-primary) !important; color: var(--jp-primary-foreground) !important; } .tutor-btn-primary { border-radius: var(--jp-radius-pill) !important; } /* ========================================================================== WooCommerce — tombol navy, pill, teks putih. ========================================================================== */ .woocommerce .button, .woocommerce-page .button, .woocommerce button.button, .woocommerce a.button, .wc-block-components-button { background-color: var(--jp-primary) !important; color: var(--jp-primary-foreground) !important; border-radius: var(--jp-radius-pill) !important; font-family: var(--jp-font-body); font-weight: 500; } .woocommerce .button:hover, .woocommerce a.button:hover, .wc-block-components-button:hover { background-color: var(--jp-primary-soft) !important; } .woocommerce-message, .woocommerce-info { border-top-color: var(--jp-primary); } .woocommerce div.product p.price, .woocommerce div.product span.price, .woocommerce ul.products li.product .price { color: var(--jp-support-foreground); font-family: var(--jp-font-display); font-weight: 600; } /* ========================================================================== WPForms ========================================================================== */ .wpforms-container .wpforms-field input, .wpforms-container .wpforms-field textarea, .wpforms-container .wpforms-field select { background: var(--jp-input-background); border: 1px solid var(--jp-border); border-radius: var(--jp-radius); font-family: var(--jp-font-body); } .wpforms-container button[type="submit"] { background: var(--jp-primary) !important; color: var(--jp-primary-foreground) !important; border-radius: var(--jp-radius-pill) !important; font-family: var(--jp-font-body); font-weight: 500; } .wpforms-container button[type="submit"]:hover { background: var(--jp-primary-soft) !important; } /* ========================================================================== Aksesibilitas & responsif ========================================================================== */ :where(a, button, input, select, textarea):focus-visible { outline: 3px solid var(--jp-primary-soft); outline-offset: 2px; } @media (max-width: 1024px) { .jp-lms-layout { grid-template-columns: 1fr; } } /* ========================================================================== Perbaikan pasca-deploy: default Elementor & form bawaan WordPress. Form pencarian header memakai markup core WP (.search-form), yang tidak ikut token tema kalau tidak ditarget eksplisit. ========================================================================== */ .search-form .search-submit, input[type="submit"].search-submit { background: var(--jp-primary) !important; color: var(--jp-primary-foreground) !important; border: 1px solid var(--jp-primary) !important; border-radius: var(--jp-radius-pill) !important; font-family: var(--jp-font-body); font-weight: 500; padding: .5rem 1.125rem; } .search-form .search-submit:hover { background: var(--jp-primary-soft) !important; border-color: var(--jp-primary-soft) !important; } .search-form .search-field { border: 1px solid var(--jp-border); border-radius: var(--jp-radius-pill); background: var(--jp-background); padding: .5rem 1rem; min-width: 0; max-width: 15rem; font-family: var(--jp-font-body); } .search-form label { margin: 0; display: block; } /* Header: cegah menu utama membungkus jadi tiga baris. */ .elementor-widget-xpro-horizontal-menu { flex: 1 1 auto; min-width: 0; } .elementor-widget-xpro-horizontal-menu ul.xpro-menu, .elementor-widget-xpro-horizontal-menu .xpro-menu-wrapper > ul, .elementor-widget-xpro-horizontal-menu .xpro-nav-menu > ul { flex-wrap: nowrap !important; white-space: nowrap; } @media (max-width: 1200px) { .search-form .search-field { max-width: 10rem; } } /* ========================================================================== Komponen landing page — meniru layout prototipe React dengan palet navy. Radius 24px & shadow dipakai sesuai permintaan (menimpa aturan flat). ========================================================================== */ /* --- Hero slider --- */ .jp-hero { position: relative; } .jp-hero__frame { position: relative; aspect-ratio: 4 / 3; border-radius: var(--jp-radius-lg, 24px); overflow: hidden; background: var(--jp-secondary); box-shadow: var(--jp-shadow-lg, 0 28px 60px -20px rgba(22,41,79,.28)); } .jp-hero__slide { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity .7s ease; } .jp-hero__slide.is-active { opacity: 1; } .jp-hero__img { width: 100%; height: 100%; object-fit: cover; display: block; } .jp-hero__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(27,42,47,.45), transparent 55%); } .jp-hero__code { position: absolute; left: 1rem; bottom: 1rem; z-index: 2; background: rgba(255,255,255,.95); backdrop-filter: blur(6px); border-radius: var(--jp-radius-md, 16px); padding: .625rem 1rem; box-shadow: var(--jp-shadow, 0 10px 30px -12px rgba(22,41,79,.18)); } .jp-hero__code span { display: block; font-size: .75rem; color: var(--jp-muted-foreground); } .jp-hero__code strong { font-family: var(--jp-font-display); font-weight: 700; color: var(--jp-primary); } .jp-hero__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: 0; border-radius: 999px; background: #fff; color: var(--jp-foreground); font-size: 1.5rem; line-height: 1; cursor: pointer; box-shadow: var(--jp-shadow, 0 10px 30px -12px rgba(22,41,79,.18)); transition: background .2s ease, color .2s ease; } .jp-hero__nav:hover { background: var(--jp-primary); color: #fff; } .jp-hero__nav--prev { left: -.75rem; } .jp-hero__nav--next { right: -.75rem; } .jp-hero__dots { display: flex; justify-content: center; gap: .5rem; margin-top: 1rem; } .jp-hero__dot { height: .5rem; width: .5rem; border: 0; padding: 0; border-radius: 999px; background: color-mix(in srgb, var(--jp-primary) 30%, transparent); cursor: pointer; transition: width .25s ease, background .25s ease; } .jp-hero__dot.is-active { width: 1.5rem; background: var(--jp-primary); } /* --- Kartu kursus: radius 24 + shadow, sesuai Figma --- */ .jp-card { border-radius: var(--jp-radius-lg, 24px); box-shadow: var(--jp-shadow, 0 10px 30px -12px rgba(22,41,79,.18)); transition: transform .3s ease, box-shadow .3s ease, border-color .2s ease; display: flex; flex-direction: column; } .jp-card:hover { transform: translateY(-4px); box-shadow: var(--jp-shadow-lg, 0 28px 60px -20px rgba(22,41,79,.28)); } .jp-card__media { aspect-ratio: 8 / 5; overflow: hidden; background: var(--jp-secondary); } .jp-card__img { width: 100%; height: 100%; object-fit: cover; } .jp-card__body { display: flex; flex-direction: column; gap: .5rem; flex: 1; } /* --- Kartu voucher --- */ .jp-voucher-grid { display: grid; gap: var(--jp-space-md, 24px); grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1024px) { .jp-voucher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .jp-voucher-grid { grid-template-columns: 1fr; } } .jp-voucher { position: relative; border: 1px solid var(--jp-border); border-radius: var(--jp-radius-lg, 24px); background: var(--jp-background); padding: var(--jp-space-md, 24px); box-shadow: var(--jp-shadow, 0 10px 30px -12px rgba(22,41,79,.18)); display: flex; flex-direction: column; gap: .5rem; overflow: hidden; } /* Pita navy di kepala kartu — pengganti warna-warni Figma, tetap on-brand. */ .jp-voucher::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--jp-primary), var(--jp-primary-soft)); } /* Badge diskon: amber, satu-satunya tempat amber boleh tampil mencolok. */ .jp-voucher__badge { align-self: flex-start; font-family: var(--jp-font-display); font-weight: 700; font-size: 1.75rem; line-height: 1.1; color: var(--jp-support-foreground); background: var(--jp-support); border-radius: var(--jp-radius-md, 16px); padding: .375rem .75rem; margin-top: .25rem; } .jp-voucher__title { margin: .5rem 0 0; font-size: 1.0625rem; } .jp-voucher__desc { margin: 0; font-size: .875rem; color: var(--jp-muted-foreground); } .jp-voucher__meta { margin: .5rem 0 0; display: grid; gap: .25rem; } .jp-voucher__meta dt { font-size: .8125rem; color: var(--jp-muted-foreground); } .jp-voucher__code { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; width: 100%; cursor: pointer; border: 1px dashed var(--jp-primary); background: var(--jp-secondary); color: var(--jp-primary); border-radius: var(--jp-radius-md, 16px); padding: .625rem .875rem; font-family: var(--jp-font-mono); font-weight: 500; letter-spacing: .06em; } .jp-voucher__code em { font-style: normal; font-family: var(--jp-font-body); font-size: .75rem; letter-spacing: 0; } .jp-voucher__code:hover { background: var(--jp-primary); color: #fff; } /* --- Kartu keunggulan & testimoni --- */ .jp-feature, .jp-testimonial { border: 1px solid var(--jp-border); border-radius: var(--jp-radius-lg, 24px); background: var(--jp-background); padding: var(--jp-space-md, 24px); box-shadow: var(--jp-shadow, 0 10px 30px -12px rgba(22,41,79,.18)); } /* Elementor: samakan kartu bawaan dengan bahasa visual di atas. */ .jp-elementor-card > .e-con-inner, .jp-elementor-card { border-radius: var(--jp-radius-lg, 24px) !important; box-shadow: var(--jp-shadow, 0 10px 30px -12px rgba(22,41,79,.18)); } /* --- CTA & kartu keunggulan (seksi Elementor) --- */ .jp-cta { color: #fff; text-align: center; } .jp-cta h1, .jp-cta h2, .jp-cta h3, .jp-cta p { color: #fff !important; } .jp-cta .elementor-button { border-radius: var(--jp-radius-pill) !important; } /* Tombol kedua di CTA: outline putih di atas navy. */ .jp-cta .elementor-widget-button:last-child .elementor-button { background: transparent !important; border: 1px solid rgba(255,255,255,.45) !important; color: #fff !important; } .jp-cta .elementor-widget-button:last-child .elementor-button:hover { background: rgba(255,255,255,.12) !important; } .jp-feature { border: 1px solid var(--jp-border); border-radius: var(--jp-radius-lg, 24px); background: var(--jp-background); padding: var(--jp-space-md, 24px) !important; box-shadow: var(--jp-shadow, 0 10px 30px -12px rgba(22,41,79,.18)); transition: transform .3s ease, box-shadow .3s ease; } .jp-feature:hover { transform: translateY(-4px); box-shadow: var(--jp-shadow-lg, 0 28px 60px -20px rgba(22,41,79,.28)); } .jp-testimonial { border: 1px solid var(--jp-border); border-radius: var(--jp-radius-lg, 24px); box-shadow: var(--jp-shadow, 0 10px 30px -12px rgba(22,41,79,.18)); padding: var(--jp-space-lg, 48px) !important; } .jp-testimonial .elementor-testimonial-wrapper .elementor-testimonial-image img { border-radius: 999px; width: 56px; height: 56px; object-fit: cover; } /* Seksi hero: latar lembut seperti gradient di prototipe. */ .jp-hero-section { background: linear-gradient(180deg, var(--jp-secondary) 0%, var(--jp-background) 70%); } /* ========================================================================== Perbaikan putaran 2: header, ikon keunggulan, kontras tombol. ========================================================================== */ /* --- Header: cegah pembungkusan, samakan proporsi seperti referensi. --- */ .jp-header { flex-wrap: nowrap !important; } .jp-header__menu { flex: 0 1 auto; min-width: 0; } .jp-header__actions { flex: 0 0 auto; } .jp-brand { display: flex; align-items: center; } .jp-brand__icon { display: inline-grid; place-items: center; width: 2rem; height: 2rem; margin-right: .5rem; border-radius: var(--jp-radius, 6px); background: var(--jp-primary); font-size: 1.05rem; vertical-align: middle; } /* Bug fix: form pencarian bawaan WP jadi 2 baris karena label {display:block} ditambahkan di iterasi sebelumnya. Jadikan form flex row supaya field + tombol sejajar seperti semula. */ .search-form { display: flex !important; align-items: center; gap: .5rem; flex-wrap: nowrap; } .search-form label { margin: 0; display: flex; align-items: center; } /* --- Ikon kartu keunggulan: lingkaran navy-soft, berubah navy saat hover. --- */ .jp-feature { display: flex; flex-direction: column; gap: .75rem; } .jp-feature__icon { display: inline-grid; place-items: center; width: 3rem; height: 3rem; border-radius: var(--jp-radius, 6px); background: var(--jp-secondary); color: var(--jp-primary); font-size: 1.375rem; transition: background .2s ease, color .2s ease; } .jp-feature:hover .jp-feature__icon { background: var(--jp-primary); color: #fff; } .jp-feature .elementor-widget-heading { margin-top: .25rem; } @media (max-width: 1024px) { .jp-header__menu { display: none; } } /* ========================================================================== Header — disamakan dengan referensi Figma: logo bulat, nav pill aktif, search dengan ikon, tombol ikon dashboard, Login/Register. ========================================================================== */ .jp-brand__icon { width: 2.25rem; height: 2.25rem; border-radius: 12px; background: linear-gradient(135deg, var(--jp-primary), var(--jp-primary-soft)); box-shadow: 0 10px 20px -8px rgba(22,41,79,.4); font-size: 1.125rem; } /* Nav: item aktif jadi pill navy-soft, item lain abu netral. */ .jp-header__menu .xpro-elementor-horizontal-navbar-nav > li > a { border-radius: var(--jp-radius-pill, 999px); padding: .5rem .875rem !important; transition: background .2s ease, color .2s ease; } .jp-header__menu .xpro-elementor-horizontal-navbar-nav > li.current-menu-item > a, .jp-header__menu .xpro-elementor-horizontal-navbar-nav > li.current_page_item > a { background: var(--jp-secondary); color: var(--jp-primary) !important; font-weight: 600; } .jp-header__menu .xpro-elementor-horizontal-navbar-nav > li:not(.current-menu-item) > a:hover { background: var(--jp-page-background); } /* Search: pill dengan ikon kaca pembesar di kiri. */ .search-form { position: relative; background: var(--jp-input-background); border-radius: var(--jp-radius-pill, 999px); padding: 0 .25rem 0 2.25rem; border: 1px solid var(--jp-border); } .search-form::before { content: ""; position: absolute; left: .875rem; top: 50%; transform: translateY(-50%); width: 1rem; height: 1rem; border: 2px solid var(--jp-muted-foreground); border-radius: 50%; box-sizing: border-box; } .search-form::after { content: ""; position: absolute; left: 1.5rem; top: 63%; width: 6px; height: 2px; background: var(--jp-muted-foreground); transform: rotate(45deg); } .search-form .search-field { border: 0 !important; background: transparent !important; padding: .55rem .25rem !important; } .search-form .search-submit { margin: .2rem; padding: .4rem .875rem !important; font-size: .8125rem; } /* Tombol ikon (Dashboard) di header. */ .jp-header__icon-btn { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: var(--jp-radius-pill, 999px); color: var(--jp-muted-foreground); transition: background .2s ease, color .2s ease; } .jp-header__icon-btn:hover { background: var(--jp-secondary); color: var(--jp-primary); } /* Login: teks polos dengan hover pill. */ .jp-header__login { cursor: pointer; padding: .5rem .875rem; border-radius: var(--jp-radius-pill, 999px); transition: background .2s ease; } .jp-header__login a { color: var(--jp-foreground) !important; text-decoration: none; } .jp-header__login:hover { background: var(--jp-page-background); } /* Register: shadow navy lembut. */ .jp-header__register .elementor-button { box-shadow: 0 10px 24px -10px rgba(22,41,79,.5) !important; } /* ======================================================================== Keunggulan Platform: ikon rounded-square besar, spacing disamakan. ======================================================================== */ .jp-feature__icon { width: 3.5rem; height: 3.5rem; border-radius: 16px; font-size: 1.5rem; } .jp-feature { gap: .875rem; padding: 1.75rem !important; } .jp-feature .elementor-widget-heading .elementor-heading-title { font-size: 1.1875rem; } /* ========================================================================== Kartu voucher — 4 warna bergilir (pengecualian yang disetujui khusus voucher; aturan navy-tunggal tetap berlaku di seluruh situs lainnya). ========================================================================== */ .jp-voucher { border: 0; color: #fff; padding: 1.5rem !important; gap: .625rem; overflow: hidden; position: relative; } .jp-voucher::before { display: none; } .jp-voucher--violet { background: linear-gradient(135deg, #7c3aed, #9333ea); } .jp-voucher--orange { background: linear-gradient(135deg, #f97316, #ea580c); } .jp-voucher--emerald { background: linear-gradient(135deg, #10b981, #059669); } .jp-voucher--pink { background: linear-gradient(135deg, #ec4899, #db2777); } .jp-voucher__top { display: flex; align-items: center; justify-content: space-between; gap: .5rem; } .jp-voucher__ticket { font-size: 1.375rem; opacity: .9; } .jp-voucher__badge { font-family: var(--jp-font-display); font-weight: 700; font-size: 1.75rem; color: #fff; background: none; padding: 0; margin: 0; } .jp-voucher__title { color: #fff; margin: 0; } .jp-voucher__desc { color: rgba(255,255,255,.85); } .jp-voucher__meta { display: flex; flex-wrap: wrap; gap: .375rem 1rem; font-size: .8125rem; color: rgba(255,255,255,.85); } .jp-voucher__code { margin-top: auto; border: 1px dashed rgba(255,255,255,.55); background: rgba(255,255,255,.14); color: #fff; } .jp-voucher__code:hover { background: rgba(255,255,255,.24); color: #fff; }