/* ============================================================ AI-ANCHOR: CSS_V99108_START_LANDING — landing / "Your phone is a business" (v0.99.112, TASK-024; sebelumnya /start v0.99.108) Visual-first (±10% teks). Warna/font/radius HANYA dari token css/brand.css (dimuat lebih dulu). Radius 4px. Font: Bakbak One (judul) · Inter (UI) · JetBrains Mono (angka). Motion: transform/opacity saja (60 fps), berhenti di luar layar (.st-off dari start.js), reduced-motion: brand.css mematikan durasi. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } html.i18n-wait body { visibility: hidden; } body { margin: 0; min-width: 320px; overflow-x: hidden; } h1, h2, h3, p, ul, ol, figure { margin: 0; } a { color: inherit; } svg { display: block; } :where(main, .st-top) :where(svg:not([width])) { width: 100%; height: 100%; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -4px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: 12px; top: -64px; z-index: 100; padding: 12px 16px; border-radius: var(--radius-md); background: var(--brand); color: var(--on-brand); font-weight: 700; text-decoration: none; } .skip:focus { top: 12px; } .st-wrap { width: 100%; max-width: var(--max-w); margin-left: auto; margin-right: auto; padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px); } .st-off *, .st-off *::before, .st-off *::after { animation-play-state: paused !important; } @keyframes st-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } .st-reveal { opacity: 0; transform: translateY(18px); } .st-reveal.in { animation: st-rise .6s var(--motion-ease) both; } .c-wa { color: #25D366; } .c-tg { color: #2AABEE; } .c-tt { color: #FFFFFF; } .c-ig { color: #E1306C; } .c-fb { color: #1877F2; } .c-yt { color: #FF0033; } .c-x { color: #FFFFFF; } /* ---------- top bar ---------- */ .st-top { position: sticky; top: 0; z-index: 40; background: rgba(var(--bg-rgb), .92); border-bottom: 1px solid rgba(var(--line-rgb), .8); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { .st-top { background: rgba(var(--bg-rgb), .66); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); } } .st-top-in { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; } .st-logo { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--txt); font-family: var(--font-title); font-size: 20px; letter-spacing: .04em; text-decoration: none; } .st-top-act { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 16px); } .st-lang { display: inline-flex; overflow: hidden; border: 1px solid var(--line2); border-radius: var(--radius-md); } .st-lang button { -webkit-appearance: none; appearance: none; min-width: 44px; min-height: 44px; padding: 0 12px; border: 0; background: transparent; color: var(--mut); font: 700 12px/1 var(--font-data); letter-spacing: .06em; cursor: pointer; transition: background-color var(--motion-fast) var(--motion-ease), color var(--motion-fast) var(--motion-ease); } .st-lang button + button { border-left: 1px solid var(--line2); } .st-lang button:hover { color: var(--txt); } .st-lang button.on { background: rgba(var(--brand-rgb), .16); color: var(--brand2); } .st-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--txt); font-size: 14px; font-weight: 500; text-decoration: none; } .st-link:hover { color: var(--brand2); } /* ---------- buttons ---------- */ .st-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 54px; padding: 0 24px; border: 0; border-radius: var(--radius-md); background: var(--surface-btn-primary); color: var(--on-brand); font: 700 16px/1.1 var(--font-ui); text-align: center; text-decoration: none; cursor: pointer; box-shadow: 0 10px 26px rgba(var(--brand-rgb), .24); transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-base) var(--motion-ease); } .st-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-glow); } .st-btn:active { transform: scale(.98); } .st-btn-sm { min-height: 44px; padding: 0 16px; font-size: 14px; box-shadow: none; } .st-ghost { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--brand2); font-size: 16px; font-weight: 600; text-decoration: none; } .st-ghost::after { content: "\2192"; transition: transform var(--motion-fast) var(--motion-ease); } .st-ghost:hover::after { transform: translateX(3px); } .st-note { color: var(--mut); font-size: 14px; line-height: 1.5; } .st-lead { max-width: 52ch; color: rgba(var(--txt-rgb), .74); font-size: clamp(16px, 1.5vw, 19px); line-height: 1.55; } /* AI-ANCHOR: CSS_V99112_START_HERO */ .st-hero { position: relative; overflow: hidden; padding-top: clamp(32px, 6vw, 96px); padding-bottom: clamp(48px, 7vw, 96px); } .st-hero::before { content: ""; position: absolute; top: -20%; right: -14%; width: min(980px, 130vw); height: min(980px, 130vw); background: radial-gradient(closest-side, rgba(var(--brand-rgb), .22), rgba(var(--brand-rgb), 0)); pointer-events: none; } .st-hero-grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(32px, 5vw, 64px); align-items: center; } .st-kick { margin-bottom: 16px; color: var(--brand2); font: 700 12px/1.3 var(--font-data); letter-spacing: .1em; text-transform: uppercase; } .st-hero h1 { color: var(--txt); font-family: var(--font-title); font-size: clamp(44px, 8vw, 92px); font-weight: 400; line-height: .98; letter-spacing: -.005em; text-wrap: balance; } .st-hero .st-lead { margin-top: 16px; } .st-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 24px; } .st-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 460px; margin-top: 32px; padding: 0; list-style: none; } .st-facts li { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--radius-md); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); } .st-facts b { color: var(--txt); font: 800 20px/1 var(--font-data); } .st-facts span { color: var(--mut); font-size: 12px; } @keyframes st-ping { 0% { transform: scale(1); opacity: .6; } 80%, 100% { transform: scale(3); opacity: 0; } } @keyframes st-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } /* AI-ANCHOR: CSS_V99108_START_PHONE — HP berisi toko member + notifikasi komisi berulang (feed diisi start.js) */ .st-phone-wrap { position: relative; display: flex; justify-content: center; padding: 24px 0; } .st-phone-wrap::before { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 84%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(var(--brand-rgb), .36), rgba(var(--brand-rgb), 0)); pointer-events: none; } .st-phone { position: relative; width: min(300px, 76vw); height: min(600px, 152vw); padding: 12px; border-radius: 32px; background: linear-gradient(160deg, var(--card2), var(--panel)); box-shadow: 0 0 0 1px var(--line2), 0 40px 90px rgba(0, 0, 0, .75); animation: st-tilt 9s ease-in-out infinite; } @keyframes st-tilt { 0%, 100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-10px) rotate(1.2deg); } } .st-phone-notch { position: absolute; top: 18px; left: 50%; z-index: 3; width: 84px; height: 22px; margin-left: -48px; border-radius: 10px; background: var(--bg); } .st-screen { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 24px; background: radial-gradient(120% 60% at 50% 0%, rgba(var(--brand-rgb), .3), rgba(var(--brand-rgb), 0) 60%), var(--bg); } /* TASK-080: padding atas 48 → 8 + jarak dirapatkan karena SECTION_START_STEPS3 kini mengisi bagian atas layar HP. `min-height: 0` + `overflow: hidden`: kalau layar HP pendek, yang terpotong adalah bagian bawah etalase — bukan menimpa feed. */ .st-store { display: flex; flex: 0 1 auto; flex-direction: column; align-items: center; gap: 6px; min-height: 0; padding: 8px 24px 8px; overflow: hidden; } /* isi etalase TIDAK boleh ikut mengecil saat ruang kurang (nanti saling menindih) — yang terjadi: bagian bawah terpotong */ .st-store > * { flex: none; } .st-url { padding: 4px 12px; border-radius: var(--radius-md); background: rgba(var(--bg-rgb), .6); box-shadow: inset 0 0 0 1px var(--line2); color: var(--brand2); font: 700 12px/1 var(--font-data); } /* AI-ANCHOR: CSS_START_REV — TASK-080 (owner #152): "Your store revenue $x/month" di demo HP, angkanya terus bertambah (JS_START_REV). `tabular-nums` supaya lebar angka tidak goyang saat naik; kilau naik pakai transform/opacity saja. */ .st-rev { display: flex; flex-direction: column; align-items: center; gap: 2px; margin-top: 2px; text-align: center; } .st-rev em { color: var(--mut); font: 700 9px/1 var(--font-data); font-style: normal; letter-spacing: .1em; text-transform: uppercase; } .st-rev-v { display: inline-flex; align-items: baseline; gap: 4px; } .st-rev b { color: #3DDC84; font: 800 20px/1.1 var(--font-data); font-variant-numeric: tabular-nums; } .st-rev b.up { animation: rev-up .45s var(--spring) both; } .st-rev small { color: var(--mut); font: 700 9px/1 var(--font-data); letter-spacing: .04em; } @keyframes rev-up { 0% { opacity: .5; transform: translateY(4px) scale(.96); } 100% { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .st-rev b.up { animation: none; } } /* AI-ANCHOR: CSS_START_SHOP — TASK-080 (owner #151): pengganti lingkaran avatar di demo HP — etalase toko yang MENERIMA UANG. Semua dari kode (tanpa gambar): tenda bergaris · badan toko · 2 kaca etalase · pintu menyala · 3 koin jatuh masuk ke toko bergantian · chip hijau "uang masuk" berdenyut. Hanya transform/opacity; ikut dijeda oleh .s3off lewat .st-screen. */ .st-shop { position: relative; display: block; width: 76px; height: 64px; } .st-shop i { position: absolute; display: block; } .sh-awn { top: 14px; left: 8px; width: 60px; height: 11px; border-radius: 6px 6px 3px 3px; background: repeating-linear-gradient(90deg, var(--brand) 0 6px, var(--brand2) 6px 12px); box-shadow: 0 2px 6px rgba(3, 10, 32, .45); } .sh-body { top: 25px; left: 11px; width: 54px; height: 31px; border-radius: 3px 3px 6px 6px; background: var(--card2); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .45); } .sh-win { top: 31px; width: 13px; height: 10px; border-radius: 2px; background: rgba(var(--brand2-rgb), .35); } .sh-win.w1 { left: 15px; } .sh-win.w2 { right: 15px; } .sh-door { bottom: 8px; left: 50%; width: 16px; height: 20px; margin-left: -8px; border-radius: 3px 3px 0 0; background: var(--surface-btn-primary); animation: sh-door 2400ms ease-in-out infinite; } .sh-coin { top: 0; width: 9px; height: 9px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #B9FFD9, #3DDC84 65%); box-shadow: 0 0 8px rgba(61, 220, 132, .6); opacity: 0; } .sh-coin.c1 { left: 20px; animation: sh-drop 2400ms cubic-bezier(.45, 0, .7, 1) infinite; } .sh-coin.c2 { left: 50%; margin-left: -4.5px; animation: sh-drop 2400ms cubic-bezier(.45, 0, .7, 1) infinite -800ms; } .sh-coin.c3 { right: 20px; animation: sh-drop 2400ms cubic-bezier(.45, 0, .7, 1) infinite -1600ms; } .sh-pay { right: 0; bottom: 14px; width: 22px; height: 8px; border-radius: 999px; background: rgba(61, 220, 132, .92); box-shadow: 0 0 10px rgba(61, 220, 132, .45); opacity: 0; animation: sh-pay 2400ms cubic-bezier(.2, .8, .2, 1) infinite; } @keyframes sh-drop { 0% { opacity: 0; transform: translateY(-6px) scale(.7); } 18% { opacity: 1; transform: translateY(0) scale(1); } 62% { opacity: 1; transform: translateY(14px) scale(1); } 78%, 100% { opacity: 0; transform: translateY(18px) scale(.6); } } @keyframes sh-door { 0%, 100% { transform: scaleY(1); } 55% { transform: scaleY(1.12); } } @keyframes sh-pay { 0%, 40% { opacity: 0; transform: translateY(6px) scale(.8); } 56%, 84% { opacity: 1; transform: none; } 96%, 100% { opacity: 0; transform: translateY(-6px) scale(.9); } } @media (prefers-reduced-motion: reduce) { .sh-coin, .sh-pay, .sh-door { animation: none; } .sh-coin, .sh-pay { opacity: 1; } } .sk { display: block; height: 9px; border-radius: 2px; background: rgba(var(--txt-rgb), .85); } .sk.dim { background: rgba(var(--mut-rgb), .55); height: 7px; } .w80 { width: 80%; } .w70 { width: 70%; } .w60 { width: 60%; } .w45 { width: 45%; } .st-offer { display: flex; flex-direction: column; gap: 8px; width: 100%; margin-top: 8px; padding: 16px; border-radius: var(--radius-md); background: var(--card2); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .35); } .st-offer-cta { display: block; height: 30px; margin-top: 4px; border-radius: var(--radius-md); background: var(--surface-btn-primary); } .st-links { display: flex; flex-direction: column; gap: 8px; width: 100%; } .st-links i { display: block; height: 30px; border-radius: var(--radius-md); background: var(--card); box-shadow: inset 0 0 0 1px var(--line2); } /* TASK-080 (owner #150, #156): feed notifikasi IKUT ALUR (bukan absolut) → urutan di layar HP selalu 3 langkah → etalase → notifikasi, tumpang tindih mustahil. `margin-top: auto` DIHAPUS (owner #156): itu yang bikin lubang hitam besar antara angka pendapatan dan kartu pertama. Sekarang kartu menempel tepat di bawah etalase seperti notifikasi HP sungguhan. */ .st-feed { position: static; flex: none; margin: 10px 10px 10px; display: flex; flex-direction: column; gap: 6px; padding: 0; list-style: none; } .st-note-card { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: rgba(23, 23, 23, .96); box-shadow: 0 10px 24px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--line2); animation: st-drop .55s var(--spring) both; } .st-note-card.out { animation: st-lift .45s var(--motion-ease) both; } .st-note-card .ic { display: flex; width: 26px; height: 26px; padding: 6px; border-radius: 8px; background: var(--surface-btn-primary); color: var(--on-brand); } /* owner #156: judul boleh turun ke baris kedua — lebih baik daripada dipotong "Recurring paym…" seperti notifikasi HP sungguhan */ .st-note-card b { display: block; color: var(--txt); font: 700 11px/1.3 var(--font-ui); overflow-wrap: anywhere; } .st-note-card small { display: block; overflow: hidden; color: var(--mut); font: 600 9px/1.3 var(--font-ui); white-space: nowrap; text-overflow: ellipsis; } .st-note-card em { align-self: center; color: #3DDC84; font: 800 13px/1 var(--font-data); font-style: normal; white-space: nowrap; } @keyframes st-drop { from { opacity: 0; transform: translateY(-14px) scale(.94); } to { opacity: 1; transform: none; } } @keyframes st-lift { to { opacity: 0; transform: translateY(-12px) scale(.96); } } .st-orb { position: absolute; z-index: 2; display: flex; width: 50px; height: 50px; padding: 12px; border-radius: 50%; background: var(--card2); box-shadow: 0 0 0 1px var(--line2), 0 14px 30px rgba(0, 0, 0, .55); animation: st-float 6s ease-in-out infinite; } .st-orb.o1 { top: 16%; left: max(2%, calc(50% - 210px)); } .st-orb.o2 { top: 8%; right: max(2%, calc(50% - 205px)); animation-delay: -1.5s; } .st-orb.o3 { bottom: 20%; left: max(0%, calc(50% - 222px)); animation-delay: -3s; } .st-orb.o4 { bottom: 12%; right: max(0%, calc(50% - 218px)); animation-delay: -4.5s; } @keyframes st-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } /* ---------- sections ---------- */ .st-sec { padding-top: var(--section-gap); padding-bottom: var(--section-gap); } .st-sec h2, .st-final h2 { max-width: 20ch; color: var(--txt); font-family: var(--font-title); font-size: clamp(32px, 4.4vw, 54px); font-weight: 400; line-height: 1.02; text-wrap: balance; } .st-sec h2 + .st-lead { margin-top: 16px; } .st-sec h3 { font-size: 20px; font-weight: 700; line-height: 1.25; } /* AI-ANCHOR: CSS_V99108_START_ASSET — 2 produk */ .st-duo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap); margin-top: clamp(24px, 4vw, 48px); } .st-prod { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 300px; padding: clamp(24px, 2.6vw, 32px); overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-card-bg); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line); } .st-prod-hot { background: linear-gradient(155deg, rgba(var(--brand-rgb), .22), rgba(var(--panel-rgb), .98) 58%); box-shadow: var(--shadow-card), var(--shadow-glow); } .st-prod h3 { font-family: var(--font-title); font-size: clamp(28px, 3vw, 36px); font-weight: 400; } .st-no { color: var(--brand2); font: 800 14px/1 var(--font-data); } .st-prod-vis { position: relative; height: 150px; margin-bottom: auto; } .st-stack span { position: absolute; left: 50%; display: flex; width: 150px; height: 70px; margin-left: -64px; padding: 24px 64px; border-radius: var(--radius-md); background: var(--card2); box-shadow: 0 14px 30px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--line2); color: var(--brand2); } .st-stack .l1 { top: 0; transform: translateX(-34px) rotate(-6deg); } .st-stack .l2 { top: 34px; transform: translateX(0); z-index: 1; } .st-stack .l3 { top: 68px; transform: translateX(34px) rotate(5deg); z-index: 2; background: var(--surface-btn-primary); color: var(--on-brand); box-shadow: 0 14px 30px rgba(var(--brand-rgb), .35); } .st-in .st-stack span { animation: st-rise .6s var(--motion-ease) both; } .st-in .st-stack .l2 { animation-delay: .12s; } .st-in .st-stack .l3 { animation-delay: .24s; } .st-tree { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; } .st-tree .you { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-btn-primary); box-shadow: 0 0 0 6px rgba(var(--brand-rgb), .2); } .st-tree .row { display: flex; gap: 12px; } .st-tree .r1 i { width: 20px; height: 20px; border-radius: 50%; background: var(--brand); } .st-tree .r2 { gap: 8px; } .st-tree .r2 i { width: 12px; height: 12px; border-radius: 50%; background: rgba(var(--brand-rgb), .55); } .st-in .st-tree .row i { animation: st-pop .45s var(--motion-ease) both; } .st-in .st-tree .r2 i { animation-delay: .3s; } @keyframes st-pop { 0% { opacity: 0; transform: scale(.4); } 70% { opacity: 1; transform: scale(1.15); } 100% { opacity: 1; transform: none; } } .st-tags { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; } .st-tags li { padding: 8px 12px; border-radius: var(--radius-md); background: rgba(var(--brand-rgb), .12); color: var(--brand2); font: 700 12px/1 var(--font-data); } /* AI-ANCHOR: CSS_V99108_START_HOW — 4 langkah */ .st-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin-top: clamp(24px, 4vw, 48px); padding: 0; list-style: none; } .st-step { position: relative; display: flex; flex-direction: column; gap: 8px; padding: clamp(16px, 2.2vw, 24px); border-radius: var(--radius-lg); background: var(--surface-card-bg); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line); } .st-step-hot { box-shadow: var(--shadow-card), var(--shadow-glow); } .st-step-ico { display: flex; width: 52px; height: 52px; padding: 12px; border-radius: 14px; background: rgba(var(--brand-rgb), .15); color: var(--brand2); } .st-step-hot .st-step-ico { background: var(--surface-btn-primary); color: var(--on-brand); } .st-step-n { position: absolute; top: 14px; right: 16px; color: rgba(var(--brand2-rgb), .25); font: 800 48px/1 var(--font-data); } .st-step h3 { margin-top: 8px; font-size: 16px; } .st-step small { color: var(--mut); font-size: 14px; } /* AI-ANCHOR: CSS_V99108_START_HABIT — recurring: batang akumulasi per bulan */ .st-rec-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center; } .st-months { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: end; gap: 12px; height: 280px; padding: 16px; border-radius: var(--radius-lg); background: var(--surface-card-bg); box-shadow: var(--shadow-card); } .st-mo { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; } .st-mo em { color: var(--brand2); font: 800 12px/1 var(--font-data); font-style: normal; white-space: nowrap; } .st-mo i { display: block; width: 100%; height: var(--h, 20%); border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--brand2), var(--brand)); transform-origin: 50% 100%; transform: scaleY(0); } .st-in .st-mo i { animation: st-grow .8s var(--motion-ease) both; animation-delay: var(--d, 0s); } @keyframes st-grow { to { transform: scaleY(1); } } .st-mo span { color: var(--mut); font: 700 12px/1 var(--font-data); } /* AI-ANCHOR: CSS_V99108_START_PLANS — 5 level (scroll-snap di HP), tertinggi disorot */ .st-tiers { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(208px, 72%); gap: 12px; margin: clamp(24px, 3.4vw, 36px) calc(-1 * clamp(16px, 4vw, 32px)) 0; padding: 4px clamp(16px, 4vw, 32px) 16px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .st-tiers::-webkit-scrollbar { display: none; } .st-tier { display: flex; flex-direction: column; gap: 12px; padding: 16px; scroll-snap-align: start; border-radius: var(--radius-lg); background: var(--surface-card-bg); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line); } .st-tier.top { background: linear-gradient(160deg, rgba(var(--brand-rgb), .24), rgba(var(--panel-rgb), .98) 60%); box-shadow: var(--shadow-card), var(--shadow-glow); } .st-tier header { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .st-tier h3 { font-family: var(--font-title); font-size: 24px; font-weight: 400; } .st-tag { padding: 4px 8px; border-radius: var(--radius-md); background: var(--surface-btn-primary); color: var(--on-brand); font: 800 10px/1 var(--font-data); letter-spacing: .06em; text-transform: uppercase; } .st-tier-price b { font: 800 32px/1 var(--font-data); } .st-tier-price span { margin-left: 4px; color: var(--mut); font-size: 14px; } .st-tier-day { color: var(--mut); font: 600 12px/1 var(--font-data); } .st-pct { display: flex; align-items: baseline; gap: 8px; } .st-pct b { background: var(--surface-btn-primary); -webkit-background-clip: text; background-clip: text; color: transparent; font: 800 40px/1 var(--font-data); } .st-pct span { color: rgba(var(--txt-rgb), .75); font-size: 12px; line-height: 1.3; } .st-bar { height: 6px; overflow: hidden; border-radius: 2px; background: var(--line); } .st-bar i { display: block; height: 100%; background: var(--surface-btn-primary); transform-origin: 0 50%; transform: scaleX(var(--s, 0)); transition: transform .9s var(--motion-ease); } .st-tier .st-btn { width: 100%; min-height: 46px; margin-top: auto; font-size: 14px; box-shadow: none; } .st-tier:not(.top) .st-btn { background: var(--surface-btn-secondary); color: var(--brand2); box-shadow: inset 0 0 0 1px var(--line2); } /* AI-ANCHOR: CSS_V99108_START_NETWORK — tangga L1–L10 (rate server) */ .st-ladder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; max-width: 720px; margin-top: 24px; padding: clamp(16px, 2.2vw, 24px); border-radius: var(--radius-lg); background: var(--surface-card-bg); box-shadow: var(--shadow-card); } .st-rung { display: grid; grid-template-columns: 48px minmax(0, 1fr) 64px; align-items: center; gap: 12px; color: var(--mut); font: 700 12px/1 var(--font-data); } .st-rung i { display: block; height: 10px; border-radius: var(--radius-sm); background: linear-gradient(90deg, var(--brand), rgba(var(--brand-rgb), .3)); transform-origin: 0 50%; transform: scaleX(0); transition: transform .8s var(--motion-ease) var(--d, 0ms); } .st-in .st-rung i { transform: scaleX(var(--s, 1)); } .st-rung b { color: var(--txt); text-align: right; } .st-rung.l1 b, .st-rung.l1 span { color: var(--brand2); } /* AI-ANCHOR: CSS_V99112_START_CALC */ .st-calc { display: flex; flex-direction: column; gap: 16px; max-width: 640px; margin: 0 auto; padding: clamp(24px, 3vw, 32px); border-radius: var(--radius-lg); background: var(--surface-card-bg); box-shadow: var(--shadow-card), var(--shadow-glow); } .st-calc-big { display: flex; flex-direction: column; gap: 4px; } .st-calc-big b { background: var(--surface-btn-primary); -webkit-background-clip: text; background-clip: text; color: transparent; font: 800 clamp(46px, 11vw, 76px)/1 var(--font-data); letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .st-calc-big span, .st-calc-year { color: var(--mut); font-size: 14px; } .st-range { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; color: var(--mut); font-size: 14px; } .st-range b { color: var(--txt); font: 800 20px/1 var(--font-data); } .st-range input { grid-column: 1 / -1; width: 100%; height: 36px; margin: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; } .st-range input::-webkit-slider-runnable-track { height: 6px; border-radius: 2px; background: var(--line2); } .st-range input::-moz-range-track { height: 6px; border-radius: 2px; background: var(--line2); } .st-range input::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -12px; border: 0; border-radius: 50%; background: var(--surface-btn-primary); box-shadow: 0 0 0 5px rgba(var(--brand-rgb), .25); -webkit-appearance: none; appearance: none; } .st-range input::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--brand); box-shadow: 0 0 0 5px rgba(var(--brand-rgb), .25); } .st-chips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; } .st-chips button { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 56px; padding: 8px 4px; border: 1px solid var(--line2); border-radius: var(--radius-md); background: var(--card); color: var(--txt); cursor: pointer; } .st-chips button b { font: 700 12px/1 var(--font-ui); } .st-chips button span { color: var(--mut); font: 700 12px/1 var(--font-data); } .st-chips button.on { border-color: var(--brand); background: rgba(var(--brand-rgb), .14); } .st-chips button.on span { color: var(--brand2); } .st-calc .st-btn { align-self: flex-start; } /* AI-ANCHOR: CSS_V99112_START_SOCIAL */ .st-soc-sec { text-align: center; } .st-soc-sec h2 { margin: 0 auto; } .st-soc { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 2vw, 16px); margin-top: 24px; padding: 0; list-style: none; } .st-soc li { display: flex; width: 64px; height: 64px; padding: 16px; border-radius: 16px; background: var(--card2); box-shadow: 0 12px 26px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--line2); } .st-in .st-soc li { animation: st-pop .45s var(--motion-ease) both; } .st-in .st-soc li:nth-child(2) { animation-delay: .06s; } .st-in .st-soc li:nth-child(3) { animation-delay: .12s; } .st-in .st-soc li:nth-child(4) { animation-delay: .18s; } .st-in .st-soc li:nth-child(5) { animation-delay: .24s; } .st-in .st-soc li:nth-child(6) { animation-delay: .3s; } .st-in .st-soc li:nth-child(7) { animation-delay: .36s; } .st-soc-note { display: inline-flex; align-items: center; gap: 12px; margin-top: 24px; color: rgba(var(--txt-rgb), .8); font-size: 16px; font-weight: 600; } .st-soc-note svg { width: 22px; height: 22px; color: var(--brand2); } /* AI-ANCHOR: CSS_V99108_START_FAQ */ .st-faq { max-width: 820px; } .st-faq h2 { margin-bottom: clamp(16px, 3vw, 32px); } .st-faq details { border-bottom: 1px solid var(--line); } .st-faq details:first-of-type { border-top: 1px solid var(--line); } .st-faq summary { position: relative; display: flex; align-items: center; min-height: 56px; padding: 16px 48px 16px 0; font-size: 16px; font-weight: 600; list-style: none; cursor: pointer; } .st-faq summary::-webkit-details-marker { display: none; } .st-faq summary::after { content: ""; position: absolute; top: 50%; right: 6px; width: 9px; height: 9px; margin-top: -8px; border-right: 2px solid var(--brand2); border-bottom: 2px solid var(--brand2); transform: rotate(45deg); transition: transform var(--motion-base) var(--motion-ease); } .st-faq details[open] summary::after { margin-top: -4px; transform: rotate(225deg); } .st-faq summary:hover { color: var(--brand2); } .st-faq summary:focus-visible { outline: 2px solid var(--brand2); outline-offset: 3px; } .st-faq details p { max-width: 66ch; padding-bottom: 16px; color: rgba(var(--txt-rgb), .7); font-size: 16px; } /* AI-ANCHOR: CSS_V99108_START_FINAL */ .st-final { position: relative; overflow: hidden; padding-top: clamp(64px, 10vw, 96px); padding-bottom: clamp(64px, 10vw, 96px); border-top: 1px solid var(--line); text-align: center; } .st-final::before { content: ""; position: absolute; bottom: -40%; left: 50%; width: min(1000px, 140vw); height: min(700px, 100vw); transform: translateX(-50%); background: radial-gradient(closest-side, rgba(var(--brand-rgb), .26), rgba(var(--brand-rgb), 0)); pointer-events: none; } .st-final .st-wrap { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; } .st-final h2 { max-width: 16ch; font-size: clamp(36px, 5.4vw, 64px); } .st-final .st-btn { margin-top: 12px; } /* AI-ANCHOR: CSS_V99108_START_STICKY — CTA bawah ala app, mobile saja */ .st-sticky { position: fixed; right: 0; bottom: 0; left: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px clamp(16px, 4vw, 32px); padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--line); background: rgba(var(--bg-rgb), .94); transform: translateY(110%); transition: transform var(--motion-base) var(--motion-ease); } .st-sticky.show { transform: none; } /* TASK-065: hanya teks bar sendiri — sebelumnya ikut mewarnai "I want" di tombol (abu di atas biru = 1:1) */ .st-sticky > span { color: var(--mut); font-size: 14px; } .st-sticky .st-btn-sm { min-height: 44px; } /* ---------- footer ---------- */ .st-foot { padding-top: 32px; padding-bottom: calc(28px + 72px); border-top: 1px solid var(--line); color: var(--mut); font-size: 14px; } .st-foot-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; } .st-foot nav { display: flex; flex-wrap: wrap; gap: 4px 16px; } .st-foot a { display: inline-flex; align-items: center; min-height: 44px; color: var(--mut); text-decoration: none; } .st-foot a:hover { color: var(--txt); } /* ---------- responsive ---------- */ @media (min-width: 720px) { .st-duo { grid-template-columns: repeat(2, minmax(0, 1fr)); } .st-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } .st-tiers { grid-auto-flow: row; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-columns: auto; margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; overflow: visible; } } @media (min-width: 900px) { .st-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } .st-rec-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); } .st-sticky { display: none; } .st-foot { padding-bottom: 32px; } } @media (min-width: 720px) and (max-width: 1080px) { .st-tier { padding: 16px; } .st-pct b { font-size: 32px; } .st-tier-price b { font-size: 24px; } } @media (max-width: 639px) { .st-top-act > .st-btn-sm { display: none; } .st-cta-row { flex-direction: column; align-items: stretch; gap: 8px; } .st-cta-row .st-ghost { justify-content: center; } .st-orb { width: 42px; height: 42px; padding: 12px; } .st-months { height: 230px; gap: 8px; padding: 16px 12px; } .st-mo em { font-size: 10px; } } /* ============================================================ AI-ANCHOR: CSS_V99112_START_V2 — revisi owner (TASK-024): hero kinetik (kata berganti, easing spring), alur ikon pengganti paragraf, baris bayar BTC/LTC, baki notifikasi (maks 2), kipas 3 layar produk, badge nomor, marquee semua sosmed + chat (Simple Icons). Grid 4/8 px, target sentuh ≥ 44 px (CLAUDE.md §8.12). Motion: transform/opacity, berhenti di luar layar (.st-off). ============================================================ */ :root { --spring: cubic-bezier(.34, 1.56, .64, 1); } @supports (animation-timing-function: linear(0, 1)) { :root { --spring: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1.004 83.8%, 1); } } .st-h-pre { display: block; } .st-rot { position: relative; display: inline-grid; height: 1.08em; padding-bottom: .04em; overflow: hidden; vertical-align: top; } .st-rot span { grid-area: 1 / 1; background: var(--surface-btn-primary); -webkit-background-clip: text; background-clip: text; color: transparent; white-space: nowrap; opacity: 0; transform: translateY(100%); transition: transform .8s var(--spring), opacity .3s var(--motion-ease); } .st-rot span.on { opacity: 1; transform: none; } .st-rot span.out { opacity: 0; transform: translateY(-100%); transition: transform .5s var(--motion-ease), opacity .3s var(--motion-ease); } .st-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 24px; padding: 0; list-style: none; } .st-flow li { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px 8px 8px; border-radius: var(--radius-md); background: var(--card); box-shadow: inset 0 0 0 1px var(--line); } .st-flow .ic { display: flex; width: 32px; height: 32px; padding: 8px; border-radius: var(--radius-md); background: rgba(var(--brand-rgb), .16); color: var(--brand2); } .st-flow li:last-child .ic { background: var(--surface-btn-primary); color: var(--on-brand); } .st-flow b { color: var(--txt); font: 700 14px/1 var(--font-data); white-space: nowrap; } .st-flow .arr { width: 16px; height: 16px; padding: 0; background: none; box-shadow: none; color: var(--mut); } .st-in .st-flow li, .st-hero .st-flow li { animation: st-rise .6s var(--spring) both; } .st-hero .st-flow li:nth-child(3) { animation-delay: .1s; } .st-hero .st-flow li:nth-child(5) { animation-delay: .2s; } .st-pay { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; color: var(--mut); font-size: 12px; } /* TASK-068 B11: rata tengah + spasi/ukuran dari skala */ .st-pay svg { flex: none; width: 22px; height: 22px; } .st-feed { padding: 0; } /* owner #156: panel buram di belakang notifikasi dihapus — kartu mengambang sendiri, persis notifikasi HP */ .st-feed:not(:empty) { padding: 0; background: none; } .st-no { align-self: flex-start; padding: 4px 8px; border-radius: var(--radius-sm); background: rgba(var(--brand-rgb), .14); } .st-fan { position: relative; height: 176px; margin-bottom: auto; } .st-fan > span { position: absolute; top: 12px; left: 50%; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 96px; height: 136px; margin-left: -48px; padding: 16px 12px 12px; border-radius: 14px; background: var(--card2); box-shadow: 0 16px 34px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--line2); color: var(--brand2); transform-origin: 50% 120%; } .st-fan svg { flex: none; width: 32px; height: 32px; } .st-fan i { display: block; width: 72%; height: 6px; border-radius: 2px; background: rgba(var(--txt-rgb), .28); } .st-fan i + i { width: 52%; } .st-fan em { margin-top: auto; color: var(--mut); font: 700 10px/1 var(--font-data); font-style: normal; letter-spacing: .04em; } .st-fan .f1 { transform: translateX(-80px) rotate(-10deg); } .st-fan .f2 { z-index: 1; transform: translateY(-8px); } .st-fan .f3 { z-index: 2; transform: translateX(80px) rotate(10deg); background: var(--surface-btn-primary); color: var(--on-brand); box-shadow: 0 16px 34px rgba(var(--brand-rgb), .38); } .st-fan .f3 i { background: rgba(var(--on-brand-rgb), .35); } .st-fan .f3 em { color: var(--on-brand); } .st-in .st-fan > span { animation: st-fanin .9s var(--spring) both; } .st-in .st-fan .f2 { animation-delay: .1s; } .st-in .st-fan .f3 { animation-delay: .2s; } @keyframes st-fanin { from { opacity: 0; transform: translateY(40px) rotate(0) scale(.9); } } .st-marq { display: flex; flex-direction: column; gap: 16px; margin-top: 32px; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .st-marq-row { display: flex; gap: 16px; width: max-content; margin: 0; padding: 0 8px; list-style: none; animation: st-marq 42s linear infinite; } .st-marq-row.rev { animation-direction: reverse; animation-duration: 48s; } .st-marq-row li { display: flex; flex: none; width: 64px; height: 64px; padding: 16px; border-radius: 16px; background: var(--card2); box-shadow: 0 12px 26px rgba(0, 0, 0, .45), inset 0 0 0 1px var(--line2); } .st-marq:hover .st-marq-row { animation-play-state: paused; } @keyframes st-marq { to { transform: translateX(-50%); } } @media (max-width: 639px) { .st-flow { gap: 8px; } .st-flow li { padding-right: 12px; } .st-flow .arr { display: none; } .st-marq-row li { width: 56px; height: 56px; padding: 16px; border-radius: 16px; } } /* AI-ANCHOR: CSS_V99112_START_HOOK — hook 3 detik (revisi owner #19): pil tantangan berdenyut, angka tujuan menghitung naik, badge "Starts free", baris hitungan tier, top earner asli. Grid 4/8 px. */ @keyframes st-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(var(--brand-rgb), .45); } 50% { box-shadow: 0 0 0 8px rgba(var(--brand-rgb), 0); } } @keyframes st-shine { from { background-position: 200% 0; } to { background-position: -200% 0; } } .st-kick-pill { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 8px 12px; border-radius: 16px; background: rgba(var(--brand-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .45); animation: st-pulse 2.4s var(--motion-ease) infinite; } .st-kick-pill i { width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; } .st-hero h1 .st-h-pre, .st-hero h1 .st-h-post { display: block; } .st-hero h1 .st-h-post { font-size: .62em; color: rgba(var(--txt-rgb), .92); } .st-amt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .18em; } .st-amt b { background: linear-gradient(90deg, var(--brand2), var(--brand), var(--brand2)); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--font-data); font-weight: 800; font-size: 1.04em; letter-spacing: -.04em; font-variant-numeric: tabular-nums; animation: st-shine 4s linear infinite; } .st-amt b.peak { animation: st-shine 4s linear infinite, st-pop .6s var(--spring); } .st-per { color: var(--mut); font-family: var(--font-data); font-size: .34em; font-weight: 700; } /* TASK-055: label periode meluncur masuk tiap ganti /day → /week → /month (transform + opacity saja); padding kanan angka supaya glyph terakhir tidak tertimpa label */ .st-amt b { padding-right: .06em; } .st-per { display: inline-block; overflow: hidden; padding-block: .1em; vertical-align: baseline; } .st-per > span { display: inline-block; color: var(--brand2); } .st-per > span.swap { animation: st-per-in .45s var(--spring) both; } @keyframes st-per-in { from { opacity: 0; transform: translateY(80%); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .st-per > span.swap { animation: none; } } .st-hookrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 16px; } .st-free { display: inline-flex; align-items: center; min-height: 32px; padding: 8px 12px; border-radius: 16px; background: rgba(61, 220, 132, .14); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .5); color: #3DDC84; font: 800 12px/1 var(--font-data); letter-spacing: .04em; text-transform: uppercase; } .st-math { color: var(--mut); font: 600 12px/1.4 var(--font-data); } .st-math b { color: var(--brand2); } /* AI-ANCHOR: CSS_V99112_START_WISH — hook keinginan + jalur semua orang (TASK-030, owner #22/#23): kartu ketuk → /onboarding?wish|mode= Grid 4/8 px, sentuh >= 44 px (kartu 72–96 px), satu garis kiri per kartu, motion transform/opacity saat masuk layar. */ .st-wish, .st-modes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: clamp(24px, 4vw, 48px) 0 0; padding: 0; list-style: none; } .st-wish a, .st-modes a { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; height: 100%; min-height: 96px; padding: 16px; border-radius: var(--radius-lg); background: var(--surface-card-bg); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line); color: var(--txt); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); } .st-wish a:hover, .st-modes a:hover { transform: translateY(-2px); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--brand); } .st-wish a:active, .st-modes a:active { transform: scale(.98); } .st-wish a:focus-visible, .st-modes a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .st-wish .ic, .st-modes .ic { display: flex; width: 40px; height: 40px; padding: 12px; border-radius: 10px; background: rgba(var(--brand-rgb), .15); color: var(--brand2); } /* TASK-031 (owner #25/#26): semua "cara" dikunci — blur + gembok (rincian kalkulator, tangga 10 level, langkah 5 menit) */ .st-lockwrap { position: relative; } .st-lockbox { display: flex; flex-direction: column; gap: 16px; opacity: .55; filter: blur(6px); pointer-events: none; -webkit-user-select: none; user-select: none; } .st-ladder.st-lockbox { display: grid; } .st-lock-ov { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: flex; align-items: center; justify-content: center; padding: 8px; } .st-lock-card { display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(100%, 320px); padding: 16px 24px; border-radius: var(--radius-lg); background: rgba(var(--bg-rgb), .84); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .45), var(--shadow-glow); text-align: center; } .st-lock-card .ic { display: flex; width: 40px; height: 40px; margin-bottom: 4px; padding: 12px; border-radius: 50%; background: var(--surface-btn-primary); color: var(--on-brand); } .st-lock-card b { color: var(--txt); font-size: 16px; line-height: 1.3; } .st-lock-card small { color: var(--mut); font-size: 14px; line-height: 1.4; } .st-chip-d { display: flex; flex-direction: column; align-items: center; gap: 4px; min-height: 56px; padding: 8px 4px; border: 1px solid var(--line2); border-radius: var(--radius-md); background: var(--card); } .st-chip-d b { font: 700 12px/1 var(--font-ui); } .st-chip-d span { color: var(--mut); font: 700 12px/1 var(--font-data); } .st-chip-d.on { border-color: var(--brand); background: rgba(var(--brand-rgb), .14); } .st-step-lock { box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(var(--brand-rgb), .45); } .st-step-lock .st-step-ico { background: var(--surface-btn-primary); color: var(--on-brand); } .st-step-lock small { color: var(--brand2); } .st-wish b, .st-modes b { font-size: 16px; font-weight: 700; line-height: 1.25; } .st-modes small { margin-top: -4px; color: var(--mut); font-size: 14px; line-height: 1.35; } .st-modes li:nth-child(2) .ic { background: var(--surface-btn-primary); color: var(--on-brand); } .st-lockline { display: flex; align-items: center; gap: 8px; margin-top: 16px; color: var(--mut); font-size: 14px; line-height: 1.4; } .st-lockline svg { flex: none; width: 16px; height: 16px; color: var(--brand2); } .st-in .st-wish li, .st-in .st-modes li { animation: st-rise .6s var(--spring) both; } .st-in .st-wish li:nth-child(2), .st-in .st-modes li:nth-child(2) { animation-delay: .06s; } .st-in .st-wish li:nth-child(3), .st-in .st-modes li:nth-child(3) { animation-delay: .12s; } .st-in .st-wish li:nth-child(4), .st-in .st-modes li:nth-child(4) { animation-delay: .18s; } .st-in .st-wish li:nth-child(5) { animation-delay: .24s; } .st-in .st-wish li:nth-child(6) { animation-delay: .3s; } @media (min-width: 720px) { .st-wish { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .st-modes { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .st-wish a, .st-modes a { padding: 24px; } } /* ============================================================ AI-ANCHOR: CSS_V99112_START_LOCKTIERS — TASK-038 B8 / kontrak K7: 5 level + tangga 10 level dalam SATU kotak terkunci. Tidak ada angka harga di DOM; bentuk tangga tetap terbaca sebagai "ada 5 level" (blur + gembok + CTA). Grid 4/8 px, tanpa scroll horizontal di 320 px. ============================================================ */ .st-locktiers { gap: 16px; } .st-ladder-t { margin-top: 24px; } .st-ladder-t .st-rung { grid-template-columns: minmax(64px, 84px) minmax(0, 1fr) 48px; } .st-ladder-t .st-rung span { overflow: hidden; color: var(--txt); font-family: var(--font-ui); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; } .st-ladder-t .st-rung.top span, .st-ladder-t .st-rung.top b { color: var(--brand2); } .st-lock-card .st-btn { width: 100%; margin-top: 8px; } /* ============================================================ AI-ANCHOR: CSS_V99112_START_APPS — TASK-038 B10: cluster sosmed padat di sekitar HP demo + pemilih "aplikasi yang kamu punya". 7 kanal = sama dengan jawaban channels di onboarding. Target sentuh 48 px, grid 4/8 px, wrap di 320 px (tanpa overflow). Motion: transform/opacity saja; orb ikut berhenti lewat .st-off (start.js) — 3 orb tambahan hanya tampil >= 720 px. ============================================================ */ .st-phone-wrap { flex-direction: column; align-items: center; gap: clamp(16px, 2.6vw, 32px); } .st-phone-wrap::before { content: none; } .st-stage { position: relative; display: flex; justify-content: center; width: 100%; } .st-stage::before { content: ""; position: absolute; top: 50%; left: 50%; width: 100%; height: 84%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(var(--brand-rgb), .36), rgba(var(--brand-rgb), 0)); pointer-events: none; } .st-orb.o5 { top: 42%; left: max(0%, calc(50% - 232px)); animation-delay: -2.2s; } .st-orb.o6 { top: 36%; right: max(0%, calc(50% - 228px)); animation-delay: -3.8s; } .st-orb.o7 { top: 2%; left: max(4%, calc(50% - 160px)); animation-delay: -5.2s; } .st-apps { display: flex; flex-direction: column; align-items: center; gap: 12px; width: min(100%, 420px); text-align: center; } .st-apps-q { color: rgba(var(--txt-rgb), .82); font-size: 14px; font-weight: 600; line-height: 1.45; } .st-apps-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .st-app { display: flex; width: 48px; height: 48px; padding: 12px; border: 0; border-radius: var(--radius-md); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); cursor: pointer; opacity: .5; -webkit-tap-highlight-color: transparent; transition: transform var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); } .st-app:hover { opacity: .82; transform: translateY(-2px); } .st-app:active { transform: scale(.94); } .st-app.on { opacity: 1; box-shadow: inset 0 0 0 1px var(--brand), 0 8px 20px rgba(var(--brand-rgb), .28); transform: translateY(-2px); } .st-app:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .st-apps-out { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 48px; } .st-apps-out .q { color: var(--mut); font-size: 14px; line-height: 1.45; } .st-apps-out b { color: var(--txt); font: 800 clamp(17px, 4.6vw, 21px)/1.2 var(--font-data); } .st-apps-out.on b { color: var(--brand2); animation: st-pop .45s var(--spring) both; } .st-apps-out span { color: var(--mut); font: 700 10px/1 var(--font-data); letter-spacing: .08em; text-transform: uppercase; } .st-apps-lock { display: inline-flex; align-items: center; gap: 8px; color: var(--mut); font-size: 12px; line-height: 1.4; } .st-apps-lock svg { flex: none; width: 14px; height: 14px; color: var(--brand2); } @media (max-width: 719px) { .st-orb.o5, .st-orb.o6, .st-orb.o7 { display: none; } } /* AI-ANCHOR: CSS_START_WHO — TASK-038 B9: persona "siapa pun Anda" + kartu lowongan (pola job board) */ .st-who { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: clamp(24px, 4vw, 48px) 0 0; padding: 0; list-style: none; } .st-who a { display: flex; align-items: center; gap: 12px; height: 100%; min-height: 64px; padding: 12px; border-radius: var(--radius-lg); background: var(--surface-card-bg); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line); color: var(--txt); text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform var(--motion-fast) var(--motion-ease), box-shadow var(--motion-fast) var(--motion-ease); } .st-who a:hover { transform: translateY(-2px); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--brand); } .st-who a:active { transform: scale(.98); } .st-who a:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; } .st-who .ic { display: flex; flex: none; width: 40px; height: 40px; padding: 12px; border-radius: 10px; background: rgba(var(--brand-rgb), .15); color: var(--brand2); } .st-who b { min-width: 0; font-size: 14px; line-height: 1.25; } .st-job { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; padding: clamp(16px, 3vw, 24px); border-radius: var(--radius-lg); background: linear-gradient(150deg, rgba(var(--brand-rgb), .16), rgba(var(--panel-rgb), .96) 60%); box-shadow: var(--shadow-card), inset 0 0 0 1px rgba(var(--brand-rgb), .45); } .st-job-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; } .st-job-badge { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 999px; background: rgba(61, 220, 132, .14); color: #3DDC84; font: 800 12px/1.3 var(--font-data); letter-spacing: .06em; text-transform: uppercase; } .st-job-badge i { width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 4px rgba(61, 220, 132, .2); } .st-job-loc { color: var(--mut); font: 700 12px/1.3 var(--font-data); } .st-job h3 { margin: 0; font-size: clamp(22px, 5vw, 28px); line-height: 1.15; } .st-job-meta { display: flex; flex-wrap: wrap; gap: 8px 16px; margin: 0; padding: 0; list-style: none; } .st-job-meta li { display: flex; align-items: center; gap: 8px; color: var(--txt); font-size: 14px; font-weight: 600; } .st-job-meta svg { width: 18px; height: 18px; color: var(--brand2); } .st-job-est { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; } .st-job-est b { color: #3DDC84; font: 800 20px/1.2 var(--font-data); } .st-job-est span { color: var(--mut); font: 700 12px/1.3 var(--font-data); text-transform: uppercase; letter-spacing: .06em; } .st-job-type { display: flex; flex-wrap: wrap; gap: 8px; } .st-job-type a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); color: var(--txt); font-size: 14px; font-weight: 700; text-decoration: none; } .st-job-type a:hover { box-shadow: inset 0 0 0 1px var(--brand); } .st-job .st-btn { align-self: stretch; } @media (min-width: 720px) { .st-who { grid-template-columns: repeat(5, minmax(0, 1fr)); } .st-who a { flex-direction: column; align-items: flex-start; min-height: 96px; } .st-job .st-btn { align-self: flex-start; } } /* AI-ANCHOR: CSS_START_INC — TASK-038 B11: tumpukan fasilitas "sudah termasuk sejak level pertama" + lencana 24/7 berputar */ .st-inc { display: flex; flex-direction: column; gap: 16px; margin-top: clamp(24px, 4vw, 48px); } .st-inc-h { display: flex; align-items: center; gap: 16px; } .st-inc-h h3 { margin: 0; font-size: clamp(18px, 4vw, 22px); line-height: 1.2; } .st-inc-h .st-lead { margin: 4px 0 0; } .st-247 { position: relative; display: flex; flex: none; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); } .st-247::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: conic-gradient(from 0deg, #3DDC84, rgba(61, 220, 132, 0) 70%); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 3px)); animation: st-spin 4s linear infinite; } .st-247 b { color: #3DDC84; font: 800 16px/1 var(--font-data); } @keyframes st-spin { to { transform: rotate(360deg); } } .st-inc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .st-inc-grid li { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 12px 12px; border-radius: var(--radius-md); background: var(--surface-card-bg); box-shadow: inset 0 0 0 1px var(--line); } .st-inc-grid .ic { display: flex; flex: none; width: 36px; height: 36px; padding: 8px; border-radius: 10px; background: rgba(61, 220, 132, .12); color: #3DDC84; } .st-inc-grid b { min-width: 0; font-size: 14px; line-height: 1.3; } @media (min-width: 720px) { .st-inc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (min-width: 1024px) { .st-inc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (prefers-reduced-motion: reduce) { .st-247::before { animation: none; } } @media (max-width: 360px) { .st-who a { gap: 8px; padding: 12px; } .st-who .ic { width: 34px; height: 34px; padding: 8px; } .st-who b { font-size: 14px; overflow-wrap: anywhere; } } /* AI-ANCHOR: CSS_START_PLATFORM — TASK-060 (owner #77 #78): konsep platform langganan — alur 4 langkah bergaris, kartu "10 orang" interaktif (avatar pop + chip +$/bln), pohon 10 level (css/tree.css), tantangan 7·30·100, 2 langkah autopilot. Grid 4/8, transform/opacity. */ .pf-flow { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 32px 0 0; padding: 0; list-style: none; counter-reset: pf; } @media (min-width: 900px) { .pf-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .pf-flow li { position: relative; display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 16px; border-radius: var(--radius-lg); background: var(--surface-card-bg); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line); counter-increment: pf; opacity: 0; transform: translateY(12px); transition: opacity .5s ease, transform .5s cubic-bezier(.2, .8, .2, 1); } .pf-flow li:nth-child(2) { transition-delay: .08s; } .pf-flow li:nth-child(3) { transition-delay: .16s; } .pf-flow li:nth-child(4) { transition-delay: .24s; } .st-in .pf-flow li { opacity: 1; transform: none; } .pf-flow li::before { content: counter(pf); position: absolute; top: 16px; right: 16px; color: var(--mut); font: 700 12px/1 var(--font-data); } .pf-flow li b { font-size: 16px; line-height: 1.25; overflow-wrap: anywhere; } .pf-flow li small { color: var(--mut); font: 600 12px/1.4 var(--font-data); } .pf-flow li.hot { box-shadow: var(--shadow-card), var(--shadow-glow); } .pf-ic { display: flex; width: 48px; height: 48px; padding: 12px; border-radius: var(--radius-lg); background: rgba(var(--brand-rgb), .15); color: var(--brand2); } .pf-ic svg { width: 24px; height: 24px; } .pf-flow li.hot .pf-ic { background: var(--surface-btn-primary); color: var(--on-brand); } .pf-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 16px; } @media (min-width: 900px) { .pf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .pf-card { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 24px 16px; border-radius: var(--radius-lg); background: var(--surface-card-bg); box-shadow: var(--shadow-card), inset 0 0 0 1px var(--line); } @media (min-width: 640px) { .pf-card { padding: 24px; } } .pf-k { margin: 0; color: var(--brand2); font: 700 12px/1.3 var(--font-data); letter-spacing: .08em; text-transform: uppercase; } .pf-eq { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-family: var(--font-data); font-variant-numeric: tabular-nums; } .pf-eq b { font-size: 20px; font-weight: 800; line-height: 1.2; } .st-plat .st-kick { margin-bottom: 16px; } .st-plat h2 + .st-lead { margin-top: 16px; } .pf-ten .st-note { font-size: 14px; line-height: 1.5; } .pf-eq span { color: var(--mut); font-size: 16px; } .pf-eq strong { color: #3DDC84; font-size: clamp(32px, 8vw, 40px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; } .pf-eq small { color: var(--mut); font-size: 14px; font-weight: 700; } .pf-loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .pf-loop li { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; text-align: center; } .pf-loop li + li::before { content: ""; position: absolute; top: 20px; left: -8px; width: 8px; height: 2px; background: var(--brand); opacity: .6; } .pf-lic { display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; max-width: 64px; height: 40px; border-radius: var(--radius-lg); background: rgba(var(--brand-rgb), .14); color: var(--brand2); animation: pf-beat 3.2s ease-in-out infinite; } .pf-loop li:nth-child(2) .pf-lic { animation-delay: .8s; } .pf-loop li:nth-child(3) .pf-lic { animation-delay: 1.6s; } .pf-loop li:nth-child(4) .pf-lic { animation-delay: 2.4s; } .pf-lic svg { width: 20px; height: 20px; } .pf-loop li.soc .pf-lic svg { width: 16px; height: 16px; } .pf-loop li.hot .pf-lic { background: var(--surface-btn-primary); color: var(--on-brand); } .pf-loop small { color: var(--mut); font: 700 10px/1.2 var(--font-data); } @keyframes pf-beat { 0%, 20%, 100% { transform: none; box-shadow: none; } 8% { transform: translateY(-4px); box-shadow: 0 0 0 2px rgba(var(--brand-rgb), .5); } } .pf-day { display: inline-flex; align-items: baseline; gap: 4px; margin-right: 8px; padding: 4px 8px; border-radius: var(--radius-sm); background: rgba(var(--brand-rgb), .16); color: var(--brand2); font: 700 12px/1.3 var(--font-data); text-transform: uppercase; } .pf-day b { font-size: 14px; } .pf-cal { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; } .pf-cal i { display: block; aspect-ratio: 1; border-radius: 2px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); transition: background-color .25s ease; } .pf-cal i.on { background: rgba(61, 220, 132, .75); box-shadow: none; } .pf-cal i.ten.on { background: #3DDC84; } .pf-cal i.pop { animation: pf-pop .45s cubic-bezier(.34, 1.56, .64, 1); } @keyframes pf-pop { 0% { transform: scale(.3); } 60% { transform: scale(1.3); } 100% { transform: none; } } .pf-range { width: 100%; height: 44px; margin: 0; background: transparent; accent-color: #3DDC84; cursor: pointer; } .pf-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; } .pf-add { min-height: 48px; } .pf-jump { display: flex; gap: 8px; } .pf-jump button { min-width: 44px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-md); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); color: var(--txt); font: 800 14px/1 var(--font-data); cursor: pointer; } .pf-jump button.on { background: rgba(61, 220, 132, .16); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .6); color: #3DDC84; } .pf-ten .st-note { margin: 0; } .pf-full .pf-eq strong { animation: pf-glow 1.2s ease-out; } @keyframes pf-glow { 30% { transform: scale(1.06); } } .pf-days { display: flex; align-items: center; gap: 8px; } .pf-days span { display: flex; align-items: center; justify-content: center; min-width: 56px; height: 56px; padding: 0 12px; border-radius: var(--radius-lg); background: rgba(var(--brand-rgb), .14); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .45); color: var(--brand2); font: 800 24px/1 var(--font-data); } .pf-days span:last-child { background: var(--surface-btn-primary); color: var(--on-brand); box-shadow: var(--shadow-glow); } .pf-days i { flex: 1; max-width: 32px; height: 2px; background: linear-gradient(90deg, rgba(var(--brand-rgb), .2), var(--brand)); } .pf-ch-t { font-size: 20px; line-height: 1.25; } .pf-need { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 0; padding: 0; list-style: none; } /* TASK-068 B11: rata tengah */ .pf-need li { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 8px 12px; border-radius: 999px; background: var(--card2); box-shadow: inset 0 0 0 1px var(--line2); font-size: 14px; font-weight: 600; } .pf-need svg { width: 16px; height: 16px; color: var(--brand2); } .pf-two { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; } .pf-two li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 12px; } .pf-two span { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-btn-primary); color: var(--on-brand); font: 800 16px/1 var(--font-data); } .pf-two b { font-size: 20px; line-height: 1.25; } .pf-badge { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: #3DDC84; font: 700 14px/1.4 var(--font-data); } .pf-badge i { width: 8px; height: 8px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 0 0 rgba(61, 220, 132, .6); animation: pf-live 2s ease-out infinite; } @keyframes pf-live { 70%, 100% { box-shadow: 0 0 0 8px rgba(61, 220, 132, 0); } } .pf-auto .st-btn { align-self: flex-start; } /* AI-ANCHOR: CSS_START_COPY63 — TASK-063 (owner #84): all-in-one strip · kartu "bayangkan" (HP + notifikasi + bulan 1–6) · 3 langkah · "cukup 10 pelanggan" (avatar + gembok buka angka) · 5 menit vs full time (segmen + bar). Grid 4/8, transform/opacity. */ .pf-all { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; } @media (min-width: 900px) { .pf-all { grid-template-columns: repeat(6, minmax(0, 1fr)); } } .pf-all li { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; padding: 12px 8px; border-radius: var(--radius-lg); background: var(--surface-card-bg); box-shadow: inset 0 0 0 1px var(--line); text-align: center; } .pf-all svg { width: 24px; height: 24px; color: var(--brand2); } .pf-all span { max-width: 100%; font-size: 12px; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; } .pf-all li.hot { background: rgba(61, 220, 132, .08); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .5); } .pf-all li.hot svg { color: #3DDC84; } .pf-imagine { margin-top: 16px; } .pf-img-grid { display: grid; grid-template-columns: 136px minmax(0, 1fr); align-items: center; gap: 16px; } @media (min-width: 640px) { .pf-img-grid { grid-template-columns: 184px minmax(0, 1fr); gap: 32px; } } .pf-phone { position: relative; height: 240px; padding: 32px 8px 8px; overflow: hidden; border-radius: 24px; background: linear-gradient(180deg, var(--card2), var(--surface-card-bg)); box-shadow: inset 0 0 0 2px var(--line2), var(--shadow-card); } .pf-notch { position: absolute; top: 8px; left: 50%; width: 48px; height: 8px; margin-left: -24px; border-radius: 999px; background: var(--line2); } .pf-notes { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; } .pf-notes li { display: grid; grid-template-columns: 24px minmax(0, 1fr); align-items: center; gap: 8px; padding: 8px; border-radius: var(--radius-md); background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line); animation: pf-note-in .5s cubic-bezier(.2, .8, .2, 1) both; } .pf-notes li:first-child { box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .55); } @keyframes pf-note-in { from { opacity: 0; transform: translateY(-12px) scale(.96); } to { opacity: 1; transform: none; } } .pf-note-ic { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(61, 220, 132, .18); color: #3DDC84; font: 800 10px/1 var(--font-data); } .pf-note-tx { display: flex; flex-direction: column; min-width: 0; } .pf-note-tx b { font-size: 10px; line-height: 1.2; overflow-wrap: anywhere; } .pf-note-tx small { color: #3DDC84; font: 800 12px/1.25 var(--font-data); } .pf-img-tx { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .pf-img-t { font-size: clamp(20px, 5vw, 32px); line-height: 1.15; letter-spacing: -.01em; } .pf-img-s { margin: 0; color: var(--mut); font-size: 14px; line-height: 1.5; } /* TASK-067 (owner #97): tile bulan tidak lagi menyempit sampai "+$399" pecah 2 baris — minimal 64 px, sisa pindah ke baris berikutnya */ .pf-months { display: grid; grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } .pf-months li { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 8px 4px; border-radius: var(--radius-sm); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); transition: transform .3s ease, box-shadow .3s ease; } /* TASK-067 (owner #97): tile belum aktif tidak lagi dipudarkan (opacity .45 → teks 2.5:1, terlihat berantakan) — warna teks redup yang tetap terbaca */ .pf-months li:not(.on) b, .pf-months li:not(.on) small { color: var(--mut); } .pf-months li.on { opacity: 1; transform: translateY(-2px); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .55); } .pf-months b { max-width: 100%; color: #3DDC84; font: 800 12px/1.25 var(--font-data); white-space: nowrap; } .pf-months small { color: var(--mut); font: 700 10px/1.2 var(--font-data); } /* AI-ANCHOR: CSS_START_WANT — TASK-062: tombol "I want " — frasa ditumpuk (lebar tetap = terpanjang), kata kunci meluncur naik */ .st-btn.wt { gap: 4px; } .wt-pre { flex: none; } .wt-roll { display: inline-grid; overflow: hidden; text-align: left; } .wt-roll b { grid-area: 1 / 1; color: inherit; font-weight: 800; white-space: nowrap; opacity: 0; transform: translateY(100%); transition: opacity .35s ease, transform .45s cubic-bezier(.2, .8, .2, 1); } .wt-roll b.on { opacity: 1; transform: none; } .wt-roll b.off { transform: translateY(-100%); } /* TASK-079 (owner #146): sorotan frasa terbaca sebagai CTA. Sebelumnya putih .62 — ALPHA di atas gradien #C8D8FF → #4D7EFF, jadi warna pil ikut berubah sepanjang tombol (ujung kanan ≈ #B3C8FF → terlihat redup). Sekarang permukaan OPAQUE #FFF (konstan di seluruh gradien) + teks #0A1A4A ≈ 15.3:1 (WCAG AAA) + ring & bayangan halus supaya pil terangkat. Warna peran diturunkan dari keterbacaan, bukan dari alpha yang tergantung latar (skill color-expert). */ .st-btn.wt .wt-roll b { padding: 0 6px; border-radius: var(--radius-sm); background: #FFFFFF; color: #0A1A4A; box-shadow: 0 0 0 1px rgba(10, 26, 74, .14), 0 2px 10px rgba(3, 10, 32, .32), 0 0 18px rgba(255, 255, 255, .55); } /* AI-ANCHOR: CSS_TAP_HINT — TASK-079 (owner #146, #147): visual "tangan mengetuk" + riak di SEMUA tombol utama menuju /onboarding. Owner #147: tangan DIPERBESAR (44 px) + fingertip tepat di TENGAH tepi bawah tombol, riak besar, dan tombolnya ikut "ditekan" (tap-press) → motion tinggi. Murni CSS (::before riak, ::after tangan SVG data-URI) → ikut jalan di halaman tanpa JS (legal.css memakai blok kembar). Di luar alur layout (absolute + pointer-events:none), hanya transform/opacity, 1 siklus 2,6 dtk. JS_TAP_HINT menambah .tapx saat tombol di luar layar / tab tersembunyi → animasi dijeda. reduced-motion → tangan statis. */ a.st-btn[href^="/onboarding"] { position: relative; animation: tap-press 2600ms cubic-bezier(.2, .8, .2, 1) infinite; } a.st-btn[href^="/onboarding"]:active { animation: none; } a.st-btn[href^="/onboarding"]::before, a.st-btn[href^="/onboarding"]::after { content: ""; position: absolute; left: 50%; pointer-events: none; } a.st-btn[href^="/onboarding"]::before { top: calc(100% - 34px); width: 40px; height: 40px; margin-left: -20px; border-radius: 50%; box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .95), 0 0 24px rgba(255, 255, 255, .45); opacity: 0; transform: scale(.2); animation: tap-ring 2600ms cubic-bezier(.2, .8, .2, 1) infinite; } a.st-btn[href^="/onboarding"]::after { top: calc(100% - 16px); width: 40px; height: 40px; margin-left: -19px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.5 2a2 2 0 0 0-2 2v8.4L8.2 11A2 2 0 0 0 5 13.4l3.4 4.9A6.5 6.5 0 0 0 13.8 21h1A5.2 5.2 0 0 0 20 15.8V9.6a1.8 1.8 0 0 0-2.9-1.4 1.8 1.8 0 0 0-2.8-1.3 1.8 1.8 0 0 0-.8-.6V4a2 2 0 0 0-2-2Z' fill='%23FFFFFF' stroke='%230A1A4A' stroke-width='1.1' stroke-linejoin='round'/%3E%3C/svg%3E") 50% / contain no-repeat; filter: drop-shadow(0 6px 14px rgba(3, 10, 32, .55)); opacity: 0; transform: translate(10px, 14px); transform-origin: 48% 8%; animation: tap-hand 2600ms cubic-bezier(.2, .8, .2, 1) infinite; } a.st-btn.st-btn-sm[href^="/onboarding"]::before { top: calc(100% - 28px); width: 32px; height: 32px; margin-left: -16px; } a.st-btn.st-btn-sm[href^="/onboarding"]::after { top: calc(100% - 15px); width: 34px; height: 34px; margin-left: -16px; } a.st-btn[href^="/onboarding"].tapx, a.st-btn[href^="/onboarding"].tapx::before, a.st-btn[href^="/onboarding"].tapx::after { animation-play-state: paused; } @keyframes tap-hand { 0% { opacity: 0; transform: translate(10px, 14px) scale(.9); } 9% { opacity: 1; transform: translate(0, 0) scale(1); } 17% { transform: translate(0, 3px) scale(.86); } 25% { transform: translate(0, 0) scale(1); } 33% { transform: translate(0, 3px) scale(.86); } 41%, 68% { opacity: 1; transform: translate(0, 0) scale(1); } 82%, 100% { opacity: 0; transform: translate(10px, 14px) scale(.9); } } @keyframes tap-ring { 0%, 15% { opacity: 0; transform: scale(.2); } 21% { opacity: .95; transform: scale(.45); } 48%, 100% { opacity: 0; transform: scale(1.9); } } /* tombol ikut "ditekan" saat tangan mengetuk + tarikan napas pelan → motion tinggi tapi hanya transform */ @keyframes tap-press { 0%, 12% { transform: scale(1); } 17% { transform: scale(.965); } 25% { transform: scale(1.012); } 33% { transform: scale(.965); } 41% { transform: scale(1.012); } 50% { transform: scale(1); } 64% { transform: scale(1.03); } 80%, 100% { transform: scale(1); } } @media (prefers-reduced-motion: reduce) { a.st-btn[href^="/onboarding"] { animation: none; } a.st-btn[href^="/onboarding"]::before { animation: none; opacity: 0; } a.st-btn[href^="/onboarding"]::after { animation: none; opacity: 1; transform: none; } } /* AI-ANCHOR: CSS_START_STEPS3 — TASK-080 (owner #148 … #154): "3 langkah" di dalam layar HP, berbentuk SLIDE ala Status/Story. Slide ditumpuk dalam satu sel grid → tinggi tetap, tanpa lompatan layout; yang bergerak hanya transform/opacity. Bar bersegmen (scaleX) = progres & auto-lanjut; JS_START_STEPS3 menjeda semuanya lewat .s3off saat di luar layar / tab tersembunyi. Ukuran font di sini sengaja di bawah skala tipe global: ini gambar layar HP (mockup, aria-hidden), bukan teks halaman. */ .st-3s { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 6px; padding: 34px 12px 4px; } .st-3s-kick { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; min-height: 20px; padding: 0 8px; border-radius: 999px; background: rgba(var(--brand-rgb), .16); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .45); color: var(--brand2); font: 700 8px/1 var(--font-data); letter-spacing: .14em; text-transform: uppercase; } .st-3s-kick b { color: #FFFFFF; font: 800 12px/1 var(--font-data); letter-spacing: 0; } .s3-nav { display: flex; gap: 4px; } .s3-bar { position: relative; flex: 1; min-width: 0; height: 3px; padding: 0; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .18); } .s3-bar i { position: absolute; inset: 0; display: block; border-radius: inherit; background: linear-gradient(90deg, var(--brand2), #3DDC84); transform: scaleX(0); transform-origin: left; } .s3-bar.done i { transform: scaleX(1); } .s3-bar.on i { animation: s3-fill 3400ms linear forwards; } .s3off .s3-bar.on i { animation-play-state: paused; } @keyframes s3-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .s3-track { display: grid; min-width: 0; margin: 0; padding: 0; list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* slide keluar dipudarkan CEPAT, slide masuk baru naik setelahnya (jeda .14s) — tanpa jeda ini dua teks sempat terbaca bertumpuk di tengah transisi (tertangkap owner di screenshot). */ .s3-slide { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; padding: 8px; border-radius: 12px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line); opacity: 0; transform: translateX(14px); transition: opacity .16s ease, transform .42s cubic-bezier(.2, .8, .2, 1); pointer-events: none; } .s3-slide.on { opacity: 1; transform: none; pointer-events: auto; transition: opacity .26s ease .14s, transform .42s cubic-bezier(.2, .8, .2, 1) .1s; } .s3-slide.off { transform: translateX(-14px); } .s3-head { display: flex; align-items: center; gap: 6px; min-width: 0; } .st-3s-n { flex: none; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: var(--surface-btn-primary); color: #0A1A4A; font: 800 10px/1 var(--font-data); } .s3-head b { min-width: 0; color: var(--txt); font: 700 11px/1.25 var(--font-ui); overflow-wrap: anywhere; } /* nominal jadi chip di atas art (bukan di baris judul) — judul tetap satu baris, tinggi slide tidak bertambah */ .st-3s-amt { position: absolute; top: 4px; right: 6px; z-index: 1; padding: 2px 6px; border-radius: 999px; background: rgba(3, 10, 32, .72); color: #3DDC84; font: 800 10px/1.2 var(--font-data); font-style: normal; white-space: nowrap; } .st-3s-art { position: relative; display: block; width: 100%; height: 48px; border-radius: 8px; background: rgba(var(--brand-rgb), .1); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .26); overflow: hidden; } .st-3s-art i { position: absolute; display: block; border-radius: 2px; background: rgba(255, 255, 255, .3); } /* ① (owner #155) etalase toko yang sedang DIRAKIT — bahasa visual yang sama dengan CSS_START_SHOP di etalase besar: tenda bergaris → badan → kaca → pintu muncul berurutan, tiga chip pengaturan menyala, centang hijau saat selesai. */ .a1 .s1-awn { top: 8px; left: 30px; width: 40px; height: 7px; border-radius: 4px 4px 2px 2px; background: repeating-linear-gradient(90deg, var(--brand) 0 4px, var(--brand2) 4px 8px); transform-origin: 50% 0; animation: s1-in 2400ms ease-out infinite; } .a1 .s1-body { top: 15px; left: 33px; width: 34px; height: 22px; border-radius: 2px 2px 4px 4px; background: var(--card2); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .5); transform-origin: 50% 100%; animation: s1-in 2400ms ease-out infinite 160ms; } .a1 .s1-win { top: 19px; width: 9px; height: 7px; border-radius: 1px; background: rgba(var(--brand2-rgb), .4); animation: s1-pop 2400ms ease-out infinite 320ms; } .a1 .s1-win.v1 { left: 36px; } .a1 .s1-win.v2 { left: 55px; } .a1 .s1-door { top: 27px; left: 45px; width: 10px; height: 10px; border-radius: 2px 2px 0 0; background: var(--surface-btn-primary); animation: s1-pop 2400ms ease-out infinite 480ms; } .a1 .s1-set { right: 14px; width: 26px; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, .22); animation: s1-set 2400ms steps(1) infinite; } .a1 .s1-set.g1 { top: 12px; animation-delay: 480ms; } .a1 .s1-set.g2 { top: 21px; animation-delay: 760ms; } .a1 .s1-set.g3 { top: 30px; animation-delay: 1040ms; } .a1 .s1-ok { top: 18px; right: 4px; width: 7px; height: 7px; border-radius: 50%; background: #3DDC84; box-shadow: 0 0 10px rgba(61, 220, 132, .6); opacity: 0; animation: s1-ok 2400ms ease-out infinite; } @keyframes s1-in { 0% { opacity: 0; transform: scaleY(.1); } 14%, 88% { opacity: 1; transform: scaleY(1); } 100% { opacity: 0; transform: scaleY(.1); } } @keyframes s1-pop { 0%, 6% { opacity: 0; transform: scale(.4); } 18%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.4); } } @keyframes s1-set { 0% { opacity: .22; background: rgba(255, 255, 255, .22); } 40%, 100% { opacity: 1; background: rgba(var(--brand2-rgb), .75); } } @keyframes s1-ok { 0%, 50% { opacity: 0; transform: scale(.5); } 60%, 88% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.6); } } /* ② adegan hidup (owner #154): 3 pelanggan di kiri → koin terbang → dompet di kanan berdenyut; meter 12 bulan terisi satu per satu */ .a2 .s3-av2 { left: 8px; width: 9px; height: 9px; border-radius: 50%; background: linear-gradient(140deg, #6FE3B0, #4D7EFF); animation: s3-cust 2160ms ease-in-out infinite; } .a2 .p1 { top: 4px; animation-delay: 0ms; } .a2 .p2 { top: 16px; animation-delay: 720ms; } .a2 .p3 { top: 28px; animation-delay: 1440ms; } .a2 .s3-fly { left: 20px; width: 7px; height: 7px; border-radius: 50%; background: radial-gradient(circle at 34% 30%, #B9FFD9, #3DDC84 65%); box-shadow: 0 0 8px rgba(61, 220, 132, .55); opacity: 0; animation: s3-fly 2160ms cubic-bezier(.45, .05, .3, 1) infinite; } .a2 .f1 { top: 5px; animation-delay: 0ms; } .a2 .f2 { top: 17px; animation-delay: 720ms; } .a2 .f3 { top: 29px; animation-delay: 1440ms; } .a2 .s3-wal { top: 11px; right: 10px; width: 22px; height: 16px; border-radius: 4px; background: linear-gradient(150deg, var(--brand2), var(--brand)); box-shadow: 0 0 12px rgba(var(--brand-rgb), .5); animation: s3-wal 2160ms ease-in-out infinite; } .a2 .s3-wal-hit { top: 16px; right: 15px; width: 12px; height: 5px; border-radius: 999px; background: rgba(61, 220, 132, .95); opacity: 0; animation: s3-hit 2160ms ease-out infinite; } .a2 .s3-mo { bottom: 5px; width: 5.5%; height: 3px; border-radius: 999px; background: rgba(255, 255, 255, .2); animation: s3-mo 2160ms steps(1) infinite; } .a2 .m1 { left: 6.0%; animation-delay: 0ms; } .a2 .m2 { left: 13.6%; animation-delay: 180ms; } .a2 .m3 { left: 21.2%; animation-delay: 360ms; } .a2 .m4 { left: 28.8%; animation-delay: 540ms; } .a2 .m5 { left: 36.4%; animation-delay: 720ms; } .a2 .m6 { left: 44.0%; animation-delay: 900ms; } .a2 .m7 { left: 51.6%; animation-delay: 1080ms; } .a2 .m8 { left: 59.2%; animation-delay: 1260ms; } .a2 .m9 { left: 66.8%; animation-delay: 1440ms; } .a2 .m10 { left: 74.4%; animation-delay: 1620ms; } .a2 .m11 { left: 82.0%; animation-delay: 1800ms; } .a2 .m12 { left: 89.6%; animation-delay: 1980ms; } /* ③ autopilot: cincin, satelit mengorbit, inti berdenyut, dua percik */ .a3 .s3-ring { top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: none; box-shadow: inset 0 0 0 2px rgba(var(--brand2-rgb), .38); } .a3 .s3-sat { top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 0; background: none; animation: s3-spin 3000ms linear infinite; } .a3 .s3-sat::after { content: ""; position: absolute; top: -3px; left: 50%; width: 6px; height: 6px; margin-left: -3px; border-radius: 50%; background: #3DDC84; } .a3 .s3-core { top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--surface-btn-primary); animation: s3-core 2160ms ease-in-out infinite; } .a3 .s3-spark { top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: none; box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .55); opacity: 0; animation: s3-spark 2160ms ease-out infinite; } .a3 .s3-spark.s2 { animation-delay: 1080ms; } .st-3s-tease { display: flex; align-items: flex-start; gap: 6px; color: var(--mut); font: 600 9px/1.35 var(--font-ui); } .st-3s-tease svg { flex: none; width: 10px; height: 10px; margin-top: 1px; color: var(--brand2); } .st-3s.s3off .st-3s-art i, .st-3s.s3off .st-3s-art i::after { animation-play-state: paused; } @keyframes s3-cust { 0%, 26%, 100% { transform: scale(1); opacity: .6; } 8% { transform: scale(1.3); opacity: 1; } } @keyframes s3-fly { 0% { opacity: 0; transform: translateX(0) scale(.6); } 8% { opacity: 1; transform: translateX(0) scale(1); } 30% { opacity: 1; transform: translateX(120px) scale(.8); } 36%, 100% { opacity: 0; transform: translateX(126px) scale(.5); } } @keyframes s3-wal { 0%, 28%, 100% { transform: scale(1); } 34% { transform: scale(1.14); } 46% { transform: scale(1); } } @keyframes s3-hit { 0%, 28% { opacity: 0; transform: translateY(4px) scale(.7); } 36% { opacity: 1; transform: none; } 60%, 100% { opacity: 0; transform: translateY(-5px) scale(.9); } } @keyframes s3-mo { 0% { opacity: 1; transform: scaleY(1.9); } 30%, 100% { opacity: .24; transform: scaleY(1); } } @keyframes s3-spin { to { transform: rotate(360deg); } } @keyframes s3-core { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } @keyframes s3-spark { 0% { opacity: .8; transform: scale(.55); } 60%, 100% { opacity: 0; transform: scale(1.5); } } @media (prefers-reduced-motion: reduce) { .st-3s-art i, .st-3s-art i::after { animation: none !important; } .a2 .s3-fly, .a2 .s3-wal-hit { opacity: 1; } .s3-slide { transition: none; } } /* AI-ANCHOR: CSS_START_SLIDER — TASK-063 (owner #88 #89): hero story 1 layar — slide ditumpuk dalam satu sel grid (tinggi tetap), bar progres bersegmen (scaleX), ketuk/tahan/swipe. Hanya transform/opacity. */ .st-hs { position: relative; display: flex; flex-direction: column; gap: 4px; min-width: 0; outline: 0; } .hs-nav { order: -1; display: flex; gap: 4px; } .hs-bar { position: relative; flex: 1; min-width: 0; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; } .hs-bar::before, .hs-bar i { content: ""; position: absolute; top: 20px; left: 0; right: 0; height: 4px; border-radius: 999px; } .hs-bar::before { background: rgba(255, 255, 255, .16); } .hs-bar i { display: block; background: linear-gradient(90deg, var(--brand2), #3DDC84); transform: scaleX(0); transform-origin: left; } .hs-bar.done i { transform: scaleX(1); } .hs-bar.on i { animation: hs-fill 6000ms linear forwards; } .hs-paused .hs-bar.on i { animation-play-state: paused; } @keyframes hs-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } } .hs-track { display: grid; min-width: 0; touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; } .hs-slide { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: center; gap: 12px; min-width: 0; opacity: 0; visibility: hidden; transform: translateX(24px) scale(.98); transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .55s; } .hs-slide.out { transform: translateX(-24px) scale(.98); } .hs-slide.on { opacity: 1; visibility: visible; transform: none; transition: opacity .45s ease, transform .55s cubic-bezier(.2, .8, .2, 1), visibility 0s; } .hs-slide > .st-kick-pill { align-self: flex-start; margin: 0; } .hs-slide h1 { margin: 0; } .hs-t { font-size: clamp(24px, 6.4vw, 40px); line-height: 1.15; letter-spacing: -.02em; } /* TASK-063 (owner #90): judul berangka — nominal besar bergradasi + label estimasi kecil; kicker di dalam kartu slide disembunyikan (padat) */ .hs-mt { display: block; } .hs-amt { display: inline-block; background: linear-gradient(90deg, #3DDC84, var(--brand2)); -webkit-background-clip: text; background-clip: text; color: transparent; font-family: var(--font-data); font-size: 1.25em; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; } .hs-slide.on .hs-amt { animation: hs-pop .6s cubic-bezier(.34, 1.56, .64, 1) both; } @keyframes hs-pop { from { opacity: 0; transform: translateY(8px) scale(.9); } to { opacity: 1; transform: none; } } .hs-est { display: inline-block; margin-left: 8px; padding: 4px 8px; border-radius: 999px; background: var(--card2); color: var(--mut); font: 700 10px/1.4 var(--font-data); font-style: normal; letter-spacing: .04em; text-transform: uppercase; vertical-align: middle; } .hs-slide .pf-img-s { color: var(--txt); font-size: 16px; font-weight: 700; line-height: 1.25; } .hs-slide .pf-few-row, .hs-slide .pf-few .st-note { display: none; } .hs-slide .pf-few-n strong { font-size: clamp(32px, 10vw, 48px); } @media (prefers-reduced-motion: reduce) { .hs-slide.on .hs-amt { animation: none; } } .hs-slide.pf-imagine { margin: 0; } .hs-img { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; gap: 16px; } .hs-img .pf-phone { height: 176px; } @media (min-width: 768px) { .hs-img { grid-template-columns: 184px minmax(0, 1fr); gap: 24px; } .hs-img .pf-phone { height: 224px; } } .hs-img-r { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .hs-slide .pf-few, .hs-slide .pf-flex { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .hs-slide .pf-few .st-note { margin: 0; } .hs-taps { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; } .hs-taps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); align-items: center; gap: 12px; } .hs-taps span { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-btn-primary); color: var(--on-brand); } .hs-taps svg { width: 16px; height: 16px; } .hs-taps b { font-size: 16px; line-height: 1.25; } .hs-auto { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; } .hs-auto li { display: flex; align-items: center; gap: 4px; min-width: 0; min-height: 32px; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); color: var(--mut); font-size: 10px; font-weight: 700; line-height: 1.2; transition: color .3s ease, box-shadow .3s ease; } .hs-auto svg { flex: none; width: 12px; height: 12px; } .hs-auto span { min-width: 0; overflow-wrap: anywhere; } .hs-easy.on .hs-auto li { animation: hs-auto .5s ease both; } .hs-easy.on .hs-auto li:nth-child(1) { animation-delay: .5s; } .hs-easy.on .hs-auto li:nth-child(2) { animation-delay: .8s; } .hs-easy.on .hs-auto li:nth-child(3) { animation-delay: 1.1s; } .hs-easy.on .hs-auto li:nth-child(4) { animation-delay: 1.4s; } .hs-easy.on .hs-auto li:nth-child(5) { animation-delay: 1.7s; } .hs-easy.on .hs-auto li:nth-child(6) { animation-delay: 2s; } @keyframes hs-auto { from { opacity: .35; transform: scale(.94); } to { opacity: 1; transform: none; color: #3DDC84; box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .5); } } .hs-easy.on .hs-auto li { color: #3DDC84; box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .5); } .hs-ok { display: flex; align-items: center; gap: 8px; margin: 0; color: #3DDC84; font-size: 16px; font-weight: 800; line-height: 1.25; } .hs-ok svg { flex: none; width: 20px; height: 20px; } .hs-easy.on .hs-ok { animation: hs-ok .5s ease 2.4s both; } @keyframes hs-ok { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } /* TASK-066 (owner #96): spesifisitas dinaikkan — ".pf-urg { margin: 0 }" di bawah sempat menimpa jarak ini → pil menempel ke tombol CTA (0 px) */ .pf-urg.hs-urg { align-self: flex-start; margin-top: 12px; } .pf-urg[hidden], .pf-how[hidden] { display: none; } @media (max-width: 767px) { .st-hero { padding-top: 16px; padding-bottom: 32px; } .st-hero .st-cta-row { margin-top: 16px; } .hs-slide .st-flow { display: none; } } @media (prefers-reduced-motion: reduce) { .hs-slide, .hs-slide.on { transition: none; } .hs-bar.on i { animation: none; transform: scaleX(1); } .hs-easy.on .hs-auto li, .hs-easy.on .hs-ok { animation: none; } } /* TASK-063 (owner #87): CTA penasaran + baris urgensi di bawah kartu konsep */ .pf-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 24px 0 8px; text-align: center; } .pf-cta-b { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; padding: 16px 32px; font-size: 16px; font-weight: 800; letter-spacing: .02em; text-transform: uppercase; box-shadow: var(--shadow-glow); } .pf-cta-b svg { flex: none; width: 20px; height: 20px; transition: transform .25s ease; } .pf-cta-b:hover svg { transform: translateX(4px); } @media (max-width: 479px) { .pf-cta-b { width: 100%; } } .pf-urg { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; margin: 0; padding: 8px 12px; border-radius: 999px; background: rgba(255, 184, 107, .1); box-shadow: inset 0 0 0 1px rgba(255, 184, 107, .35); color: #FFB86B; font-size: 14px; font-weight: 700; line-height: 1.25; text-align: left; } .pf-urg i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pf-urg 1.6s ease-in-out infinite; } .pf-urg.u-live { background: rgba(61, 220, 132, .08); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .35); color: #3DDC84; } @keyframes pf-urg { 50% { opacity: .3; transform: scale(.7); } } @media (prefers-reduced-motion: reduce) { .pf-urg i { animation: none; } .pf-cta-b svg { transition: none; } } .pf-era { margin-top: 16px; } .pf-era-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; } @media (min-width: 900px) { .pf-era-g { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .pf-era-g li { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 64px; padding: 12px; border-radius: var(--radius-lg); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); } .pf-era-g li.hot { background: rgba(61, 220, 132, .08); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .5); } .pf-era-ic { display: flex; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(var(--brand-rgb), .15); color: var(--brand2); } .pf-era-g li.hot .pf-era-ic { background: rgba(61, 220, 132, .18); color: #3DDC84; } .pf-era-ic svg { width: 20px; height: 20px; } .pf-era-g b { min-width: 0; font-size: 14px; line-height: 1.25; overflow-wrap: anywhere; } .pf-flow3 { grid-template-columns: minmax(0, 1fr); } @media (min-width: 640px) { .pf-flow3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 639px) { .pf-flow3 li { display: grid; grid-template-columns: 48px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px; row-gap: 4px; align-items: center; } .pf-flow3 .pf-ic { grid-row: 1 / 3; } } .pf-few-n { display: flex; align-items: baseline; gap: 8px; } .pf-few-n strong { font: 800 clamp(40px, 14vw, 64px)/1 var(--font-data); letter-spacing: -.03em; } .pf-few-n span { color: var(--mut); font-size: 20px; font-weight: 700; } .pf-avs { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 0; list-style: none; } .pf-avs li { aspect-ratio: 1; border-radius: 50%; background: linear-gradient(135deg, var(--brand), #3DDC84); opacity: 0; transform: scale(.4); transition: opacity .35s ease, transform .45s cubic-bezier(.34, 1.56, .64, 1); transition-delay: calc(var(--i) * 60ms); } .pf-few.in .pf-avs li { opacity: 1; transform: none; } .pf-few-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; margin: 0; font-family: var(--font-data); } .pf-few-row span { color: var(--mut); font-size: 16px; } .pf-few-row b { color: #3DDC84; font-size: 32px; font-weight: 800; line-height: 1.1; } .pf-few-row small { color: var(--mut); font-size: 14px; font-weight: 700; } .pf-reveal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 56px; padding: 8px 16px; border: 0; border-radius: var(--radius-lg); background: rgba(var(--brand-rgb), .12); box-shadow: inset 0 0 0 1px rgba(var(--brand-rgb), .5); color: var(--txt); font-family: inherit; text-align: left; cursor: pointer; } .pf-reveal-l { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; line-height: 1.25; } .pf-reveal-l svg { flex: none; width: 16px; height: 16px; color: var(--brand2); } .pf-reveal-v { font: 800 20px/1.2 var(--font-data); filter: blur(4px); transition: filter .4s ease; } .pf-few.open .pf-reveal { background: rgba(61, 220, 132, .1); box-shadow: inset 0 0 0 1px rgba(61, 220, 132, .6); cursor: default; } .pf-few.open .pf-reveal-v { color: #3DDC84; filter: none; } .pf-how { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: var(--brand2); font-size: 16px; font-weight: 800; text-decoration: none; } .pf-how svg { width: 16px; height: 16px; } .pf-seg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: var(--radius-lg); background: var(--card2); box-shadow: inset 0 0 0 1px var(--line); } .pf-seg button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--mut); font-family: inherit; font-size: 14px; font-weight: 700; line-height: 1.25; cursor: pointer; } .pf-seg button svg { flex: none; width: 16px; height: 16px; } .pf-seg button.on { background: var(--surface-btn-primary); color: var(--on-brand); } .pf-flex-v { display: flex; align-items: center; gap: 12px; } .pf-flex-v > i { color: var(--mut); font-style: normal; font-size: 20px; } .pf-flex-c { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .pf-flex-c b { font: 800 32px/1.1 var(--font-data); font-variant-numeric: tabular-nums; } .pf-flex-c.hot b { color: #3DDC84; } .pf-flex-c small { color: var(--mut); font-size: 12px; font-weight: 700; } .pf-bar { height: 8px; overflow: hidden; border-radius: 999px; background: var(--card2); } .pf-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--brand), #3DDC84); transform: scaleX(.1); transform-origin: left; transition: transform .6s cubic-bezier(.2, .8, .2, 1); } .pf-flex-t { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.45; } @media (prefers-reduced-motion: reduce) { .pf-notes li { animation: none; } .pf-avs li, .pf-bar i, .pf-months li, .pf-reveal-v { transition: none; } } @media (prefers-reduced-motion: reduce) { .pf-flow li { opacity: 1; transform: none; transition: none; } .pf-cal i.pop, .pf-full .pf-eq strong, .pf-badge i, .pf-lic { animation: none; } }