/* ===================================================================== motion.css — lapisan animasi & polesan visual landing karyawan.id - Dimuat SETELAH style.css; tidak mengubah rule lama, hanya menambah. - Semua "sembunyi lalu muncul" digerbangi html.js-motion (diset inline di ). Tanpa JS, konten tetap tampil normal. - Hanya transform/opacity/filter → ringan (GPU), tak memicu layout. - prefers-reduced-motion: reduce → semua animasi dimatikan. ===================================================================== */ :root { --mo-ease: cubic-bezier(.22, 1, .36, 1); --mo-dur: .7s; --mo-shadow-hover: 0 18px 40px -18px rgba(207, 58, 74, .35), 0 10px 24px -14px rgba(17, 24, 39, .18); } /* ---------- Scroll progress bar (di atas navbar) ---------- */ #mo-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--primary--50), var(--secondary--50), var(--warning--50)); z-index: 60; pointer-events: none; transition: width .12s linear; } /* ---------- Navbar: kaca saat di-scroll ---------- */ .landing-page-desktop .navbar { transition: background-color .3s ease, box-shadow .3s ease, border-color .3s ease, padding .3s ease; } .landing-page-desktop .navbar.is-scrolled { background-color: rgba(255, 255, 255, .82); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom-color: transparent; box-shadow: 0 8px 30px rgba(17, 24, 39, .07); } /* Indikator menu: geser halus */ .landing-page-desktop .menu .menu-indicator { transition: transform .25s var(--mo-ease), opacity .25s ease; } /* ---------- Hero: orb latar mengambang + grid halus ---------- */ .landing-page-desktop .hero-content { position: relative; z-index: 1; } .mo-orbs { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background-image: radial-gradient(rgba(207, 58, 74, .07) 1px, transparent 1.5px); background-size: 28px 28px; -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 85%); mask-image: linear-gradient(180deg, rgba(0,0,0,.9), transparent 85%); } .mo-orb { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55; will-change: transform; animation: mo-drift 18s ease-in-out infinite alternate; } .mo-orb--1 { width: 520px; height: 520px; left: -160px; top: -120px; background: radial-gradient(circle at 30% 30%, rgba(225, 100, 78, .55), rgba(207, 58, 74, 0) 70%); animation-duration: 16s; } .mo-orb--2 { width: 460px; height: 460px; right: -140px; top: 40px; background: radial-gradient(circle at 60% 40%, rgba(246, 170, 100, .5), rgba(246, 170, 100, 0) 70%); animation-duration: 21s; animation-delay: -6s; } .mo-orb--3 { width: 380px; height: 380px; left: 38%; bottom: -160px; background: radial-gradient(circle at 50% 50%, rgba(214, 86, 99, .38), rgba(214, 86, 99, 0) 70%); animation-duration: 24s; animation-delay: -11s; } @keyframes mo-drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(40px, -30px, 0) scale(1.08); } 100% { transform: translate3d(-30px, 26px, 0) scale(.96); } } /* ---------- Hero: entrance bertahap saat halaman dibuka ---------- */ html.js-motion .landing-page-desktop .hero-content .hero-label, html.js-motion .landing-page-desktop .hero-content .sub-description-container h1, html.js-motion .landing-page-desktop .hero-content .sub-description-container p, html.js-motion .landing-page-desktop .hero-content .store-badges, html.js-motion .landing-page-desktop .hero-section .image-container { animation: mo-rise .9s var(--mo-ease) both; } html.js-motion .landing-page-desktop .hero-content .hero-label { animation-delay: .05s; } html.js-motion .landing-page-desktop .hero-content .sub-description-container h1 { animation-delay: .18s; } html.js-motion .landing-page-desktop .hero-content .sub-description-container p { animation-delay: .32s; } html.js-motion .landing-page-desktop .hero-content .store-badges { animation-delay: .46s; } html.js-motion .landing-page-desktop .hero-section .image-container { animation-delay: .25s; animation-duration: 1.1s; } @keyframes mo-rise { from { opacity: 0; transform: translate3d(0, 26px, 0); } to { opacity: 1; transform: none; } } /* Kata "Cepat": teks gradien berkilau */ .landing-page-desktop .hero-content .sub-description-container h1 span { background: linear-gradient(100deg, var(--primary--50) 0%, var(--secondary--50) 40%, var(--warning--70) 55%, var(--secondary--50) 70%, var(--primary--50) 100%); background-size: 220% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; animation: mo-shimmer 5s linear infinite; } @keyframes mo-shimmer { to { background-position: 220% center; } } /* Gambar hero: mengambang pelan + gambar "bernapas" */ .landing-page-desktop .hero-section .image-container { box-shadow: 0 30px 60px -30px rgba(207, 58, 74, .28); } html.js-motion .landing-page-desktop .hero-section .image-container.is-live { animation: mo-float 6.5s ease-in-out infinite; } html.js-motion .landing-page-desktop .hero-section .image-container .image { animation: mo-breathe 14s ease-in-out infinite; } @keyframes mo-float { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(0,-10px,0); } } @keyframes mo-breathe { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } } /* ---------- Reveal saat di-scroll (selector-based, tanpa ubah HTML) ---------- */ html.js-motion .mo-reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease); transition-delay: var(--d, 0ms); will-change: opacity, transform; } html.js-motion .mo-reveal.is-visible { opacity: 1; transform: none; } /* varian: dari kiri/kanan (dipakai gambar) */ html.js-motion .mo-reveal.mo-from-left { transform: translate3d(-32px, 0, 0); } html.js-motion .mo-reveal.mo-from-right { transform: translate3d(32px, 0, 0); } html.js-motion .mo-reveal.mo-zoom { transform: scale(.94); } html.js-motion .mo-reveal.is-visible.mo-from-left, html.js-motion .mo-reveal.is-visible.mo-from-right, html.js-motion .mo-reveal.is-visible.mo-zoom { transform: none; } /* Label kecil (FITUR-FITUR / CARA KERJA / HARGA): pill berkilau lembut */ .landing-page-desktop .tittle-section .label { position: relative; overflow: hidden; } .landing-page-desktop .tittle-section .label::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.55) 50%, transparent 70%); transform: translateX(-120%); animation: mo-sheen 3.6s ease-in-out infinite; } @keyframes mo-sheen { 0%, 60% { transform: translateX(-120%); } 100% { transform: translateX(120%); } } /* ---------- Kartu fitur: hover terangkat + gambar membesar ---------- */ .landing-page-desktop .feature { transition: transform .35s var(--mo-ease), box-shadow .35s ease, background-color .35s ease; } .landing-page-desktop .feature:hover { transform: translateY(-6px); box-shadow: var(--mo-shadow-hover); } .landing-page-desktop .feature .image-container img, .landing-page-desktop .feature .image-container .sc { transition: transform .6s var(--mo-ease); } .landing-page-desktop .feature:hover .image-container img, .landing-page-desktop .feature:hover .image-container .sc { transform: scale(1.04); } .landing-page-desktop .feature h3 span { transition: color .3s ease; } /* ---------- Cara kerja: kartu opsi & ikon ---------- */ .landing-page-desktop .how-it-work-container .option { transition: transform .3s var(--mo-ease), box-shadow .3s ease, border-color .3s ease; cursor: pointer; } .landing-page-desktop .how-it-work-container .option:hover { transform: translateY(-4px); box-shadow: var(--mo-shadow-hover); } .landing-page-desktop .how-it-work-container .option .icon-container { transition: background-color .3s ease, box-shadow .3s ease, transform .3s var(--mo-ease); } .landing-page-desktop .how-it-work-container .option:hover .icon-container { transform: scale(1.08) rotate(-4deg); } .landing-page-desktop .how-it-work-image { transition: opacity .35s ease, transform .35s var(--mo-ease); } .landing-page-desktop .how-it-work-image.is-switching { opacity: 0; transform: translateY(8px) scale(.98); } /* ---------- Harga: kartu dengan bingkai gradien halus + badge berdenyut ---------- */ .landing-page-desktop .pricing-section .price-content-container { position: relative; border-radius: 1.5rem; transition: transform .35s var(--mo-ease), box-shadow .35s ease; } .landing-page-desktop .pricing-section .price-content-container:hover { transform: translateY(-4px); box-shadow: var(--mo-shadow-hover); } .landing-page-desktop .pricing-section .price h4 { display: inline-block; position: relative; animation: mo-pulse 2.8s ease-in-out infinite; } @keyframes mo-pulse { 0%,100% { transform: scale(1); } 50% { transform: scale(1.04); } } .landing-page-desktop .pricing-section .price-description .list { transition: transform .25s var(--mo-ease); } .landing-page-desktop .pricing-section .price-description .list:hover { transform: translateX(4px); } /* ---------- CTA: gambar mengambang ---------- */ /* CTA foto: zoom sangat perlahan (Ken Burns) + sedikit terangkat saat hover */ html.js-motion .landing-page-desktop .cta-section .cta-photo img { animation: mo-kenburns 22s ease-in-out infinite alternate; transform-origin: 50% 45%; } .landing-page-desktop .cta-section .cta-image-container--photo { transition: transform .6s var(--mo-ease), box-shadow .6s var(--mo-ease); } .landing-page-desktop .cta-section .cta-image-container--photo:hover { transform: translateY(-4px); box-shadow: 0 2.5rem 4.5rem -2.5rem rgba(207, 58, 74, .45); } @keyframes mo-kenburns { from { transform: scale(1.02); } to { transform: scale(1.09); } } /* kartu teks & chip di depan foto: muncul bertahap setelah kontainer terlihat (mo-reveal .is-visible) */ html.js-motion .landing-page-desktop .cta-image-container--photo .cta-photo__card { opacity: 0; transform: translateY(14px); transition: opacity .7s var(--mo-ease) .25s, transform .7s var(--mo-ease) .25s; } html.js-motion .landing-page-desktop .cta-image-container--photo.is-visible .cta-photo__card { opacity: 1; transform: none; } html.js-motion .landing-page-desktop .cta-image-container--photo .cta-photo__chips li { opacity: 0; transform: translateY(8px); transition: opacity .5s var(--mo-ease), transform .5s var(--mo-ease); } html.js-motion .landing-page-desktop .cta-image-container--photo.is-visible .cta-photo__chips li { opacity: 1; transform: none; } html.js-motion .landing-page-desktop .cta-image-container--photo.is-visible .cta-photo__chips li:nth-child(1) { transition-delay: .55s; } html.js-motion .landing-page-desktop .cta-image-container--photo.is-visible .cta-photo__chips li:nth-child(2) { transition-delay: .65s; } html.js-motion .landing-page-desktop .cta-image-container--photo.is-visible .cta-photo__chips li:nth-child(3) { transition-delay: .75s; } html.js-motion .landing-page-desktop .cta-image-container--photo .cta-photo__stars svg { opacity: 0; transform: scale(.6); transition: opacity .4s var(--mo-ease), transform .4s var(--mo-ease); } html.js-motion .landing-page-desktop .cta-image-container--photo.is-visible .cta-photo__stars svg { opacity: 1; transform: none; } html.js-motion .landing-page-desktop .cta-image-container--photo.is-visible .cta-photo__stars svg:nth-child(1) { transition-delay: .55s; } html.js-motion .landing-page-desktop .cta-image-container--photo.is-visible .cta-photo__stars svg:nth-child(2) { transition-delay: .63s; } html.js-motion .landing-page-desktop .cta-image-container--photo.is-visible .cta-photo__stars svg:nth-child(3) { transition-delay: .71s; } html.js-motion .landing-page-desktop .cta-image-container--photo.is-visible .cta-photo__stars svg:nth-child(4) { transition-delay: .79s; } html.js-motion .landing-page-desktop .cta-image-container--photo.is-visible .cta-photo__stars svg:nth-child(5) { transition-delay: .87s; } /* ---------- FAQ: aksordion halus ---------- */ .landing-page-desktop .accordion .description { transition: height .38s var(--mo-ease), margin-top .38s var(--mo-ease); } .landing-page-desktop .accordion .icon-accordion { transition: transform .35s var(--mo-ease); } .landing-page-desktop .accordion .accordion-tittle { cursor: pointer; } .landing-page-desktop .accordion .accordion-tittle .question { transition: color .25s ease; } .landing-page-desktop .accordion .accordion-tittle:hover .question, .landing-page-desktop .accordion.open .accordion-tittle .question { color: var(--primary--50); } /* ---------- Tombol & badge: terangkat + kilau ---------- */ .landing-page-desktop .cta-email, .landing-page-desktop .cta-daftar, .landing-page-desktop .cta-download { transition: transform .25s var(--mo-ease), box-shadow .25s ease, background-color .2s ease; } .landing-page-desktop .cta-email:hover, .landing-page-desktop .cta-download:hover { transform: translateY(-2px); box-shadow: 0 10px 24px -14px rgba(17,24,39,.3); } .landing-page-desktop .cta-daftar { overflow: hidden; } .landing-page-desktop .cta-daftar:hover { transform: translateY(-2px); box-shadow: 0 12px 28px -12px rgba(207,58,74,.55); } .landing-page-desktop .cta-daftar::after { content: ""; position: absolute; top: 0; bottom: 0; left: -75%; width: 50%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.45), transparent); transform: skewX(-20deg); transition: left .6s var(--mo-ease); pointer-events: none; } .landing-page-desktop .cta-daftar:hover::after { left: 125%; } .store-badges a img { transition: transform .25s var(--mo-ease), filter .25s ease; } .store-badges a:hover img { transform: translateY(-2px) scale(1.03); filter: drop-shadow(0 8px 14px rgba(17,24,39,.22)); } /* ---------- Tombol kembali ke atas ---------- */ #mo-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 50; width: 44px; height: 44px; border-radius: 999px; border: 0; cursor: pointer; background: linear-gradient(135deg, var(--primary--50), var(--secondary--50)); color: #fff; display: grid; place-items: center; box-shadow: 0 12px 28px -12px rgba(207,58,74,.6); opacity: 0; transform: translateY(12px) scale(.9); pointer-events: none; transition: opacity .3s ease, transform .3s var(--mo-ease); } #mo-top.is-show { opacity: 1; transform: none; pointer-events: auto; } #mo-top:hover { transform: translateY(-2px); } #mo-top svg { width: 20px; height: 20px; } /* ---------- Mobile: orb lebih kecil & hemat ---------- */ @media screen and (max-width: 880px) { .mo-orb { filter: blur(40px); opacity: .45; } .mo-orb--1 { width: 320px; height: 320px; left: -120px; top: -80px; } .mo-orb--2 { width: 280px; height: 280px; right: -120px; top: 120px; } .mo-orb--3 { display: none; } #mo-top { right: 1rem; bottom: 1rem; width: 40px; height: 40px; } } /* ---------- Hormati preferensi "kurangi gerakan" ---------- */ @media (prefers-reduced-motion: reduce) { html.js-motion .mo-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .mo-orb, .mo-orbs, .landing-page-desktop .tittle-section .label::after, html.js-motion .landing-page-desktop .hero-content .hero-label, html.js-motion .landing-page-desktop .hero-content .sub-description-container h1, html.js-motion .landing-page-desktop .hero-content .sub-description-container p, html.js-motion .landing-page-desktop .hero-content .store-badges, html.js-motion .landing-page-desktop .hero-section .image-container, html.js-motion .landing-page-desktop .hero-section .image-container .image, html.js-motion .landing-page-desktop .cta-section .cta-photo img, .landing-page-desktop .pricing-section .price h4, .landing-page-desktop .hero-content .sub-description-container h1 span { animation: none !important; } .mo-orbs { display: none; } *, *::before, *::after { transition-duration: .01ms !important; } } @media (prefers-reduced-motion: reduce) { html.js-motion .landing-page-desktop .cta-image-container--photo .cta-photo__card, html.js-motion .landing-page-desktop .cta-image-container--photo .cta-photo__chips li, html.js-motion .landing-page-desktop .cta-image-container--photo .cta-photo__stars svg { opacity: 1 !important; transform: none !important; transition: none !important; } }