/** * Revesery UI - pustaka komponen web (Design System v2) * File: /assets/css/rv-ui.css * Version: 1.14 - Gradien hero foto di HP nutup sampai atas (teks atas kebaca) * Version: 1.13 - Hero foto + gradien (rv-herobox--photo) + deret kartu gradien * Version: 1.12 - HP mockup Safari, bar pilihan HP, ikon 3D besar, spark halus * Version: 1.11 - Warna sorotan lebih kontras, judul/sub baris gak nempel * Version: 1.10 - Hero selebar wadah, kartu numpuk warna, label hari kosong * Version: 1.9 - Hero, menu, accordion, indikator, donat/batang, 10 warna promo * Version: 1.8 - Grafik yang bisa dipencet + susunan ringkasan akun HP/komputer * Version: 1.7 - Baris angka gak nabrak (kolom otomatis, ukuran ikut layar) * Version: 1.6 - Judul warna/gradien, kartu sorotan, promo biru/pink/hijau * Version: 1.5 - Banner foto gaya Apple: lebar 1.9:1, judul 40px, tombol garis tipis * Version: 1.4 - Abu teks gelap #aeaeb2 (kontras di atas tombol gelap) * Version: 1.3 - rv-js reveal, kontras teks/badge, ikon 3D, chevron SVG * Version: 1.2 - Band, rel, promo, produk, bento, harga, angka besar, tab HP, chat, media, reveal Apple * Version: 1.1 - Token konteks --rv-fill: kontrol abu gak lebur di wadah abu * Version: 1.0 - Token terang/gelap + 20 komponen rv-*, dokumentasinya di /design/ * * CARA PAKAI DI HALAMAN BARU * * * Mode gelap ngikut kelas `dark` di (kunci localStorage 'darkMode' * yang sama dengan header.php situs). * * ATURAN * (a) Contoh di /design/ dirender PAKAI BERKAS INI. Kelas rv-* baru yang gak * dipakai contoh mana pun bikin strip kuning di /design/ - daftarin * contohnya di includes/design-docs/registry.php di commit yang sama. * (b) Warna HARAM diketik di komponen. Semua lewat token --rv-* di :root, dan * tiap token WAJIB punya pasangan di html.dark (halaman yang makai berkas * ini belum tentu muat dark-mode-gen.css). * (c) Easing numpang token --rv-ease dari includes/motion-css.php kalau ada; * angka cadangan di bawah WAJIB sama persis dengan berkas itu. * (e) Kontrol yang latarnya abu (tombol kedua, chip, segmented, stepper, cari) * WAJIB pakai var(--rv-fill), BUKAN --rv-surface langsung. Wadah abu * (kartu, grup daftar) nurunin --rv-fill satu tingkat; kalau ditulis * surface langsung, kontrolnya lebur ke wadah dan dasarnya ilang. * (d) Kartu di sistem ini RATA: latar abu, nol border, nol bayangan. Bayangan * cuma buat benda yang ngambang (jempol segmented, sheet, tooltip). */ /* ============================================================ 1. TOKEN ============================================================ */ :root { --rv-bg: #ffffff; --rv-surface: #f5f5f7; --rv-surface-2: #eaeaed; --rv-surface-3: #dcdce0; --rv-raised: #ffffff; --rv-sheet: #ffffff; --rv-line: #e5e5ea; --rv-ink: #171717; --rv-on-ink: #ffffff; --rv-text: #171717; --rv-text-2: #636366; --rv-text-3: #a1a1a6; --rv-accent: #6b63f0; --rv-accent-text: #4f46d6; --rv-accent-soft: #ecebfd; --rv-success: #1f9e49; --rv-success-text:#15703a; --rv-success-soft:#e3f3e8; --rv-warm: #f0892e; --rv-warm-soft: #fdeedf; --rv-info: #3c82f6; --rv-info-soft: #e5effe; --rv-danger: #e5484d; --rv-danger-text: #c4282e; --rv-danger-soft: #f5e4e6; --rv-link: #0a66d6; --rv-eyebrow: #b34400; --rv-black: #000000; --rv-device: #111114; --rv-on-media: #ffffff; /* Warna judul + frasa sorotan. Kontras >= 4.5:1 lawan kartu abu, jadi aman buat teks kecil juga. */ --rv-pink: #b8295a; --rv-teal: #1b7282; --rv-orange: #b04c17; /* Gradien judul: "merek" biru-ungu-pink, "senja" merah-oranye. */ --rv-grad-brand: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 50%, #db2777 100%); --rv-grad-sunset: linear-gradient(90deg, #d9465f 0%, #e8682e 100%); /* Latar kartu promo berwarna. Teks putih kecil di atasnya WAJIB >= 4.5:1, makanya oranye terang gak ada (cuma 3.9). Sama di mode gelap. */ --rv-promo-blue: radial-gradient(120% 90% at 28% 18%, #4f8ef7 0%, #2f63e0 58%, #2850c8 100%); --rv-promo-pink: linear-gradient(170deg, #c93468 0%, #9b47d1 100%); --rv-promo-green: linear-gradient(170deg, #127a4b 0%, #0b6b55 100%); --rv-promo-purple:linear-gradient(170deg, #4f46e5 0%, #7c3aed 100%); --rv-promo-rose: linear-gradient(170deg, #be123c 0%, #9d174d 100%); --rv-promo-sunset:linear-gradient(170deg, #c2410c 0%, #b91c1c 100%); --rv-promo-teal: linear-gradient(170deg, #0f766e 0%, #0e7490 100%); --rv-promo-sky: linear-gradient(170deg, #0369a1 0%, #075985 100%); --rv-promo-night: linear-gradient(170deg, #1e3a8a 0%, #312e81 100%); --rv-promo-yellow:linear-gradient(170deg, #fbbf24 0%, #f59e0b 100%); /* Teks + tombol di atas kartu warna. Kuning satu-satunya yang teksnya hitam. */ --rv-on-promo: #ffffff; --rv-on-promo-2: rgba(255,255,255,.9); --rv-on-yellow: #171717; --rv-on-yellow-2: rgba(23,23,23,.78); /* Warna grafik, urut seri. 8 = "Lainnya". Tiap warna >= 3:1 lawan kartu abu. */ --rv-chart-1: #3c82f6; --rv-chart-2: #6b63f0; --rv-chart-3: #d6457a; --rv-chart-4: #1a9481; --rv-chart-5: #c96a12; --rv-chart-6: #8b5cf6; --rv-chart-7: #0891b2; --rv-chart-8: #86868b; --rv-overlay: rgba(17,17,20,.32); --rv-shadow-float:0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.08); --rv-shadow-thumb:0 0 0 .5px rgba(0,0,0,.04), 0 2px 6px rgba(0,0,0,.08), 0 6px 18px rgba(0,0,0,.08); --rv-shadow-lift: 0 14px 34px rgba(0,0,0,.09); --rv-shadow-sheet:0 24px 64px rgba(0,0,0,.18); --rv-r-sheet: 28px; --rv-r-card: 24px; --rv-r-group: 20px; --rv-r-tile: 14px; --rv-r-pill: 999px; --rv-font: Inter, system-ui, -apple-system, 'Segoe UI', sans-serif; /* Latar kontrol abu, ikut wadahnya (aturan e). */ --rv-fill: var(--rv-surface); --rv-fill-hover: var(--rv-surface-2); /* Latar kartu. Di dalam .rv-band kartunya jadi putih. */ --rv-card-bg: var(--rv-surface); --rv-ui-ease: var(--rv-ease, cubic-bezier(0.16, 1, 0.3, 1)); --rv-ui-spring: var(--rv-ease-spring, cubic-bezier(0.34, 1.56, 0.64, 1)); --rv-ui-draw: var(--rv-ease-draw, cubic-bezier(0.65, 0, 0.35, 1)); --rv-d1: 150ms; --rv-d2: 250ms; --rv-d3: 350ms; --rv-d4: 800ms; } /* Tiga pemakai token gelap: mode gelap halaman, band gelap, kartu promo gelap. Variabel turunan (--rv-fill, --rv-card-bg) WAJIB ditulis ulang di sini: var() di :root udah kehitung jadi nilai terang, gak ikut berubah sendiri. */ html.dark, .rv-band--dark, .rv-promo--dark { --rv-bg: #0f0f10; --rv-surface: #1c1c1e; --rv-surface-2: #2c2c2e; --rv-surface-3: #3a3a3c; --rv-raised: #3a3a3c; --rv-sheet: #141416; --rv-line: #2e2e31; --rv-ink: #f5f5f7; --rv-on-ink: #171717; --rv-text: #f5f5f7; --rv-text-2: #aeaeb2; --rv-text-3: #6e6e73; --rv-accent: #8b85f5; --rv-accent-text: #b4b0ff; --rv-accent-soft: rgba(107,99,240,.20); --rv-success: #2fb85a; --rv-success-text:#5fd383; --rv-success-soft:rgba(31,158,73,.20); --rv-warm: #f5a05a; --rv-warm-soft: rgba(240,137,46,.20); --rv-info: #6aa4f8; --rv-info-soft: rgba(60,130,246,.20); --rv-danger: #ff6b6f; --rv-danger-text: #ff8a8d; --rv-danger-soft: rgba(229,72,77,.20); --rv-link: #6aa4f8; --rv-eyebrow: #ff9f5a; --rv-device: #2c2c2e; --rv-pink: #ff6b9a; --rv-teal: #4fc3d6; --rv-orange: #ff9a5c; --rv-grad-brand: linear-gradient(90deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%); --rv-grad-sunset: linear-gradient(90deg, #ff7088 0%, #ff9a5c 100%); --rv-promo-purple:linear-gradient(170deg, #4f46e5 0%, #7c3aed 100%); --rv-promo-rose: linear-gradient(170deg, #be123c 0%, #9d174d 100%); --rv-promo-sunset:linear-gradient(170deg, #c2410c 0%, #b91c1c 100%); --rv-promo-teal: linear-gradient(170deg, #0f766e 0%, #0e7490 100%); --rv-promo-sky: linear-gradient(170deg, #0369a1 0%, #075985 100%); --rv-promo-night: linear-gradient(170deg, #1e3a8a 0%, #312e81 100%); --rv-promo-yellow:linear-gradient(170deg, #fbbf24 0%, #f59e0b 100%); --rv-on-promo: #ffffff; --rv-on-promo-2: rgba(255,255,255,.9); --rv-on-yellow: #171717; --rv-on-yellow-2: rgba(23,23,23,.78); --rv-chart-1: #6aa4f8; --rv-chart-2: #8b85f5; --rv-chart-3: #f06a98; --rv-chart-4: #3cc4ad; --rv-chart-5: #f5a05a; --rv-chart-6: #a78bfa; --rv-chart-7: #38c3df; --rv-chart-8: #98989d; --rv-fill: var(--rv-surface); --rv-fill-hover: var(--rv-surface-2); --rv-card-bg: var(--rv-surface); --rv-overlay: rgba(0,0,0,.60); --rv-shadow-float:0 1px 2px rgba(0,0,0,.4), 0 4px 14px rgba(0,0,0,.4); --rv-shadow-thumb:0 0 0 .5px rgba(255,255,255,.06), 0 2px 6px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.4); --rv-shadow-lift: 0 14px 34px rgba(0,0,0,.5); --rv-shadow-sheet:0 24px 64px rgba(0,0,0,.6); } /* Wadah abu nurunin isi kontrolnya satu tingkat. */ .rv-card, .rv-list, .rv-stat, .rv-selbar, .rv-price, .rv-promo, .rv-product, .rv-bento__item, .rv-split { --rv-fill: var(--rv-surface-2); --rv-fill-hover: var(--rv-surface-3); } .rv-card__inset, .rv-drop { --rv-fill: var(--rv-raised); --rv-fill-hover: var(--rv-surface); } .rv-sheet__panel { --rv-fill: var(--rv-surface); --rv-fill-hover: var(--rv-surface-2); } /* ============================================================ 2. TIPOGRAFI ============================================================ */ .rv-ui, .rv-ui * { box-sizing: border-box; } .rv-ui { font-family: var(--rv-font); color: var(--rv-text); -webkit-font-smoothing: antialiased; } .rv-display { font-size: 34px; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; color: var(--rv-text); margin: 0; } .rv-title { font-size: 22px; line-height: 1.25; font-weight: 700; letter-spacing: -.01em; color: var(--rv-text); margin: 0; } .rv-h3 { font-size: 17px; line-height: 1.3; font-weight: 600; color: var(--rv-text); margin: 0; } .rv-body { font-size: 15px; line-height: 1.55; color: var(--rv-text-2); margin: 0; } .rv-meta { font-size: 13px; line-height: 1.45; color: var(--rv-text-2); margin: 0; } .rv-caption { font-size: 12px; line-height: 1.4; color: var(--rv-text-3); margin: 0; letter-spacing: .01em; } .rv-amount { font-size: 32px; line-height: 1.1; font-weight: 700; letter-spacing: -.02em; color: var(--rv-text); font-variant-numeric: tabular-nums; } .rv-num { font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .rv-display { font-size: 28px; } .rv-amount { font-size: 28px; } } /* ============================================================ 3. TOMBOL ============================================================ */ .rv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 0 22px; border-radius: var(--rv-r-pill); border: 0; font: 600 15px/1 var(--rv-font); white-space: nowrap; cursor: pointer; text-decoration: none; background: var(--rv-fill); color: var(--rv-text); transition: background var(--rv-d1) var(--rv-ui-ease), transform var(--rv-d1) var(--rv-ui-ease), opacity var(--rv-d1); -webkit-tap-highlight-color: transparent; flex-shrink: 0; } .rv-btn i { font-size: 17px; line-height: 1; } .rv-btn:hover { background: var(--rv-fill-hover); } .rv-btn:active { transform: scale(.97); } .rv-btn:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 2px; } .rv-btn--primary { background: var(--rv-ink); color: var(--rv-on-ink); } .rv-btn--primary:hover { background: var(--rv-ink); opacity: .86; } .rv-btn--ghost { background: transparent; } .rv-btn--ghost:hover { background: var(--rv-fill); } .rv-btn--danger { background: var(--rv-danger-soft); color: var(--rv-danger-text); } .rv-btn--danger:hover { background: var(--rv-danger-soft); opacity: .8; } .rv-btn--sm { height: 40px; padding: 0 16px; font-size: 14px; } .rv-btn--block { display: flex; width: 100%; } .rv-btn--icon { width: 44px; height: 44px; padding: 0; } .rv-btn--icon.rv-btn--sm { width: 40px; height: 40px; } .rv-btn[disabled], .rv-btn.is-disabled { background: var(--rv-fill); color: var(--rv-text-3); cursor: not-allowed; opacity: 1; transform: none; } .rv-btn.is-loading { pointer-events: none; } .rv-btn.is-loading::before { content: ''; width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: rv-spin .7s linear infinite; } .rv-btn.is-loading > i { display: none; } .rv-btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* ============================================================ 4. KARTU + UBIN IKON + HEADER HALAMAN ============================================================ */ .rv-card { background: var(--rv-card-bg); border-radius: var(--rv-r-card); padding: 22px; min-width: 0; } .rv-card--lg { padding: 28px; } .rv-card--link { display: block; color: inherit; text-decoration: none; transition: background var(--rv-d1) var(--rv-ui-ease), transform var(--rv-d1) var(--rv-ui-ease); } .rv-card--link:hover { background: var(--rv-surface-2); } .rv-card--link:active { transform: scale(.985); } .rv-card__head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; min-width: 0; } .rv-card__label { font-size: 15px; font-weight: 500; color: var(--rv-text-2); } .rv-card__inset { background: var(--rv-surface-2); border-radius: var(--rv-r-group); padding: 20px; } .rv-ico { width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--rv-raised); color: var(--rv-text); font-size: 20px; line-height: 1; } .rv-ico--sm { width: 36px; height: 36px; font-size: 16px; } .rv-ico--accent { background: var(--rv-accent-soft); color: var(--rv-accent); } .rv-ico--success { background: var(--rv-success-soft); color: var(--rv-success-text); } .rv-ico--warm { background: var(--rv-warm-soft); color: var(--rv-warm); } .rv-ico--info { background: var(--rv-info-soft); color: var(--rv-info); } .rv-ico--danger { background: var(--rv-danger-soft); color: var(--rv-danger-text); } .rv-pagehead { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; } .rv-pagehead__text { min-width: 0; } .rv-pagehead__text .rv-body { margin-top: 6px; } .rv-stat { background: var(--rv-card-bg); border-radius: var(--rv-r-group); padding: 16px 18px; min-width: 0; } .rv-stat__value { font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.15; color: var(--rv-text); font-variant-numeric: tabular-nums; } .rv-stat__label { font-size: 13px; color: var(--rv-text-2); margin-top: 4px; } .rv-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 12px; } /* Isian sebaris di wadah sempit bikin isinya kepotong (rule 29). --stack numpuk begitu tiap kolom gak dapet 220px - ikut lebar WADAH, bukan lebar layar. */ .rv-grid-2--stack { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); } /* ============================================================ 5. GRUP DAFTAR + BARIS + CENTANG BULAT + UBIN TANGGAL ============================================================ */ .rv-list { background: var(--rv-card-bg); border-radius: var(--rv-r-group); overflow: hidden; } .rv-list__head { font-size: 14px; font-weight: 600; color: var(--rv-text-2); padding: 18px 18px 4px; } .rv-row { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 18px; min-height: 64px; color: inherit; text-decoration: none; transition: background var(--rv-d1) var(--rv-ui-ease); } /* Pemisah menjorok: mulai sejajar teks, bukan dari tepi kartu. */ .rv-row + .rv-row::before { content: ''; position: absolute; top: 0; right: 0; left: var(--rv-row-inset, 18px); height: 1px; background: var(--rv-line); } .rv-row--lead { --rv-row-inset: 80px; } a.rv-row:hover, button.rv-row:hover { background: var(--rv-surface-2); } button.rv-row { width: 100%; border: 0; background: transparent; text-align: left; font: inherit; cursor: pointer; } .rv-row.is-selected { background: var(--rv-surface-2); } .rv-row__main { flex: 1; min-width: 0; } .rv-row__title, .rv-row__sub { display: block; } .rv-row__title { font-size: 16px; font-weight: 500; color: var(--rv-text); line-height: 1.3; } .rv-row__sub { font-size: 13px; color: var(--rv-text-2); margin-top: 3px; line-height: 1.35; } .rv-row__end { flex-shrink: 0; text-align: right; font-size: 16px; font-weight: 600; color: var(--rv-text); font-variant-numeric: tabular-nums; } .rv-row__chev { flex-shrink: 0; color: var(--rv-text-3); font-size: 16px; } .rv-row__bar { flex-shrink: 0; width: 6px; height: 26px; border-radius: 3px; background: var(--rv-accent); } .rv-amount--in { color: var(--rv-success-text); } .rv-check { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; padding: 0; cursor: pointer; border: 1.5px solid var(--rv-text-3); background: transparent; color: transparent; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; transition: background var(--rv-d1) var(--rv-ui-ease), border-color var(--rv-d1) var(--rv-ui-ease), transform var(--rv-d1) var(--rv-ui-spring); position: relative; } /* Area sentuh 44px, ukuran keliatan tetep 26px. */ .rv-check::after { content: ''; position: absolute; inset: -9px; } .rv-check[aria-checked="true"] { background: var(--rv-ink); border-color: var(--rv-ink); color: var(--rv-on-ink); transform: scale(1.04); } .rv-check:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 2px; } .rv-date { width: 52px; flex-shrink: 0; padding: 7px 0; border-radius: var(--rv-r-tile); background: var(--rv-raised); text-align: center; line-height: 1.1; } .rv-date b { display: block; font-size: 20px; font-weight: 700; color: var(--rv-text); font-variant-numeric: tabular-nums; } .rv-date span { display: block; font-size: 12px; color: var(--rv-text-2); margin-top: 2px; } /* ============================================================ 6. CHIP, SEGMENTED, STEPPER BULAN ============================================================ */ .rv-chips { display: flex; flex-wrap: wrap; gap: 8px; } .rv-chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .rv-chips--scroll::-webkit-scrollbar { display: none; } .rv-chip { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0 16px; flex-shrink: 0; border-radius: var(--rv-r-pill); border: 0; cursor: pointer; white-space: nowrap; text-decoration: none; background: var(--rv-fill); color: var(--rv-text); font: 500 14px/1 var(--rv-font); transition: background var(--rv-d1) var(--rv-ui-ease), color var(--rv-d1) var(--rv-ui-ease), transform var(--rv-d1) var(--rv-ui-ease); } .rv-chip i { font-size: 15px; color: var(--rv-text-2); } .rv-chip:hover { background: var(--rv-fill-hover); } .rv-chip:active { transform: scale(.96); } .rv-chip:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 2px; } .rv-chip.is-active, .rv-chip[aria-pressed="true"] { background: var(--rv-ink); color: var(--rv-on-ink); } .rv-chip.is-active i, .rv-chip[aria-pressed="true"] i { color: inherit; } .rv-chip--menu::after { content: ''; width: 7px; height: 7px; margin-left: 2px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); opacity: .7; } .rv-seg { --rv-seg-n: 2; --rv-seg-i: 0; position: relative; display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; padding: 4px; border-radius: var(--rv-r-pill); background: var(--rv-fill); min-width: 0; } .rv-seg--block { display: grid; width: 100%; } .rv-seg__thumb { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc((100% - 8px) / var(--rv-seg-n)); transform: translateX(calc(100% * var(--rv-seg-i))); border-radius: var(--rv-r-pill); background: var(--rv-raised); box-shadow: var(--rv-shadow-thumb); transition: transform var(--rv-d2) var(--rv-ui-ease); } .rv-seg__btn { position: relative; z-index: 1; height: 40px; padding: 0 22px; border: 0; background: transparent; cursor: pointer; border-radius: var(--rv-r-pill); font: 500 15px/1 var(--rv-font); color: var(--rv-text-2); white-space: nowrap; transition: color var(--rv-d2) var(--rv-ui-ease); } .rv-seg__btn[aria-selected="true"] { color: var(--rv-text); font-weight: 600; } .rv-seg__btn:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: -2px; } .rv-stepper { display: inline-flex; align-items: center; gap: 2px; height: 48px; padding: 0 4px; border-radius: var(--rv-r-pill); background: var(--rv-fill); } .rv-stepper button { width: 40px; height: 40px; border: 0; border-radius: 50%; background: transparent; color: var(--rv-text); cursor: pointer; font-size: 16px; } .rv-stepper button:hover { background: var(--rv-fill-hover); } .rv-stepper button[disabled] { color: var(--rv-text-3); cursor: default; background: transparent; } .rv-stepper__label { min-width: 92px; text-align: center; font-weight: 700; font-size: 16px; color: var(--rv-text); font-variant-numeric: tabular-nums; } /* ============================================================ 7. ISIAN: FIELD, INPUT, SELECT, CARI ============================================================ */ .rv-field { display: block; min-width: 0; } .rv-label { display: block; font-size: 14px; font-weight: 500; color: var(--rv-text-2); margin: 0 0 8px 4px; } .rv-input, .rv-select { display: flex; align-items: center; gap: 12px; width: 100%; height: 56px; padding: 0 18px; border: 0; border-radius: var(--rv-r-group); background: var(--rv-surface-2); color: var(--rv-text); font: 500 16px/1.2 var(--rv-font); outline: none; text-align: left; transition: box-shadow var(--rv-d1) var(--rv-ui-ease), background var(--rv-d1) var(--rv-ui-ease); } .rv-input::placeholder { color: var(--rv-text-3); font-weight: 400; } .rv-input:focus, .rv-select:focus-visible { box-shadow: 0 0 0 2px var(--rv-accent); } .rv-input.is-error { box-shadow: 0 0 0 2px var(--rv-danger); } .rv-help { font-size: 13px; color: var(--rv-text-2); margin: 8px 0 0 4px; } .rv-help.is-error { color: var(--rv-danger-text); } .rv-select { cursor: pointer; } .rv-select > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rv-select > img { width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0; object-fit: cover; } .rv-select::after { /* Chevron SVG, bukan glyph font: font ikon gak dimuat = kotak kosong. */ content: ''; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--rv-raised) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%238e8e93' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E") center / 12px 12px no-repeat; } .rv-search { display: flex; align-items: center; gap: 10px; height: 48px; padding: 0 18px; min-width: 0; border-radius: var(--rv-r-pill); background: var(--rv-fill); color: var(--rv-text-2); } .rv-search i { font-size: 17px; flex-shrink: 0; } .rv-search input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; color: var(--rv-text); font: 400 15px/1 var(--rv-font); } .rv-search input::placeholder { color: var(--rv-text-3); } .rv-search:focus-within { box-shadow: 0 0 0 2px var(--rv-accent); } /* ============================================================ 8. TOGGLE ============================================================ */ .rv-toggle { position: relative; width: 52px; height: 32px; flex-shrink: 0; padding: 0; border: 0; cursor: pointer; border-radius: var(--rv-r-pill); background: var(--rv-surface-3); transition: background var(--rv-d2) var(--rv-ui-ease); } .rv-toggle::after { content: ''; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: #ffffff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform var(--rv-d2) var(--rv-ui-ease); } .rv-toggle[aria-checked="true"] { background: var(--rv-success); } .rv-toggle[aria-checked="true"]::after { transform: translateX(20px); } .rv-toggle:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 2px; } .rv-toggle[disabled] { opacity: .45; cursor: not-allowed; } /* ============================================================ 9. BADGE, PIL PEMBANDING, TOOLTIP ============================================================ */ .rv-badge { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 10px; flex-shrink: 0; border-radius: var(--rv-r-pill); font: 600 12.5px/1 var(--rv-font); white-space: nowrap; background: var(--rv-surface-2); color: var(--rv-text-2); } .rv-badge--info { background: var(--rv-info-soft); color: var(--rv-link); } .rv-badge--accent { background: var(--rv-accent-soft); color: var(--rv-accent-text); } .rv-badge--success { background: var(--rv-success-soft); color: var(--rv-success-text); } .rv-badge--warm { background: var(--rv-warm-soft); color: var(--rv-eyebrow); } .rv-badge--danger { background: var(--rv-danger-soft); color: var(--rv-danger-text); } .rv-badge--value { height: 34px; padding: 0 14px; font-size: 14.5px; background: var(--rv-surface-2); color: var(--rv-text-2); font-variant-numeric: tabular-nums; } .rv-compare { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 20px; border-radius: var(--rv-r-pill); background: var(--rv-fill); font: 500 15px/1.3 var(--rv-font); color: var(--rv-text); } .rv-compare i { font-size: 15px; } /* Warna ikut BAIK/BURUK, bukan arah: omzet naik = good, pengeluaran naik = bad. */ .rv-compare--good i { color: var(--rv-success); } .rv-compare--bad i { color: var(--rv-danger); } .rv-tip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px; border-radius: var(--rv-r-pill); font: 500 14px/1 var(--rv-font); white-space: nowrap; background: var(--rv-ink); color: var(--rv-on-ink); box-shadow: var(--rv-shadow-float); font-variant-numeric: tabular-nums; } .rv-tip b { font-weight: 700; } .rv-tip--soft { background: var(--rv-fill); color: var(--rv-text-2); box-shadow: none; } .rv-tip--soft b { color: var(--rv-text); } .rv-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--rv-accent); flex-shrink: 0; } .rv-dot--muted { background: var(--rv-text-3); } /* ============================================================ 10. PROGRES: BAR, CINCIN, SINYAL ============================================================ */ .rv-progress { height: 12px; border-radius: var(--rv-r-pill); background: var(--rv-surface-2); overflow: hidden; } .rv-progress > span { display: block; height: 100%; width: var(--rv-p, 0%); border-radius: inherit; background: var(--rv-info); transform-origin: left center; animation: rv-grow 800ms var(--rv-ui-draw) both; } .rv-progress--thin { height: 6px; } .rv-progress--accent > span { background: var(--rv-accent); } .rv-progress--success > span { background: var(--rv-success); } .rv-ring { --rv-p: 50; position: relative; width: 76px; height: 76px; flex-shrink: 0; } .rv-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .rv-ring circle { fill: none; stroke-width: 5; } .rv-ring .rv-ring__track { stroke: var(--rv-surface-2); } .rv-ring .rv-ring__val { stroke: var(--rv-warm); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--rv-p)); animation: rv-ring 900ms var(--rv-ui-draw) both; } .rv-ring__label { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 600 15px/1 var(--rv-font); color: var(--rv-text); font-variant-numeric: tabular-nums; } .rv-signal { display: inline-flex; align-items: flex-end; gap: 5px; height: 56px; } .rv-signal span { width: 12px; border-radius: 3px; background: var(--rv-success); transform-origin: bottom; animation: rv-rise 600ms var(--rv-ui-ease) both; } .rv-signal span:nth-child(1) { height: 30%; opacity: .45; animation-delay: 0ms; } .rv-signal span:nth-child(2) { height: 45%; opacity: .55; animation-delay: 60ms; } .rv-signal span:nth-child(3) { height: 60%; opacity: .65; animation-delay: 120ms; } .rv-signal span:nth-child(4) { height: 75%; opacity: .75; animation-delay: 180ms; } .rv-signal span:nth-child(5) { height: 88%; opacity: .87; animation-delay: 240ms; } .rv-signal span:nth-child(6) { height: 100%; opacity: 1; animation-delay: 300ms; } /* ============================================================ 11. DROPZONE, TOOLBAR PILIHAN, KOSONG, SKELETON ============================================================ */ .rv-drop { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 36px 20px; border-radius: var(--rv-r-group); background: var(--rv-surface-2); transition: background var(--rv-d2) var(--rv-ui-ease), box-shadow var(--rv-d2) var(--rv-ui-ease); } .rv-drop.is-over { background: var(--rv-accent-soft); box-shadow: inset 0 0 0 2px var(--rv-accent); } .rv-drop__ico { width: 64px; height: 64px; border-radius: 18px; background: var(--rv-raised); display: inline-flex; align-items: center; justify-content: center; font-size: 26px; color: var(--rv-text); transition: transform var(--rv-d2) var(--rv-ui-spring); } .rv-drop.is-over .rv-drop__ico { transform: translateY(-4px) scale(1.06); } .rv-drop .rv-body { max-width: 420px; } .rv-drop .rv-btn-row { justify-content: center; margin-top: 6px; } .rv-selbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; min-height: 56px; padding: 6px 8px 6px 22px; border-radius: var(--rv-r-pill); background: var(--rv-surface); } .rv-selbar__count { flex: 1; min-width: 0; font-size: 16px; font-weight: 600; color: var(--rv-text); font-variant-numeric: tabular-nums; } .rv-selbar[hidden] { display: none; } .rv-selbar.is-in { animation: rv-drop-in var(--rv-d2) var(--rv-ui-ease) both; } /* HP: pil 999px yang kebungkus 3 baris jadi gumpalan. Jadi kotak, jumlahnya satu baris penuh. */ @media (max-width: 640px) { .rv-selbar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; border-radius: var(--rv-r-group); padding: 16px; } .rv-selbar__count { grid-column: 1 / -1; margin-bottom: 4px; } .rv-selbar .rv-btn { justify-content: center; width: 100%; padding-left: 8px; padding-right: 8px; gap: 6px; white-space: nowrap; } } .rv-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 20px; } .rv-empty .rv-ico { width: 56px; height: 56px; font-size: 24px; margin-bottom: 4px; } .rv-empty .rv-body { max-width: 340px; } .rv-empty .rv-btn { margin-top: 10px; } .rv-skel { display: block; border-radius: 10px; background: var(--rv-surface-2); position: relative; overflow: hidden; } .rv-skel::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent); animation: rv-shimmer 1.4s infinite; } html.dark .rv-skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent); } /* ============================================================ 12. SHEET / MODAL ============================================================ */ .rv-sheet { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 24px; } .rv-sheet[hidden] { display: none; } .rv-sheet__scrim { position: absolute; inset: 0; background: var(--rv-overlay); opacity: 0; -webkit-backdrop-filter: saturate(120%) blur(2px); backdrop-filter: saturate(120%) blur(2px); transition: opacity 200ms var(--rv-ui-ease); } .rv-sheet__panel { position: relative; width: 100%; max-width: 560px; max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--rv-r-sheet); background: var(--rv-sheet); box-shadow: var(--rv-shadow-sheet); padding: 20px 24px 28px; opacity: 0; transform: translateY(12px) scale(.96); transition: opacity 300ms var(--rv-ui-ease), transform 300ms var(--rv-ui-ease); } .rv-sheet.is-open .rv-sheet__scrim { opacity: 1; } .rv-sheet.is-open .rv-sheet__panel { opacity: 1; transform: none; } .rv-sheet.is-zoom .rv-sheet__panel { transform: scale(.62); } .rv-sheet.is-zoom.is-open .rv-sheet__panel { transform: none; } .rv-sheet.is-closing .rv-sheet__scrim { transition-duration: 200ms; } .rv-sheet.is-closing .rv-sheet__panel { transition-duration: 200ms; } .rv-sheet__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; min-height: 48px; } .rv-sheet__head .rv-title { flex: 1; min-width: 0; } .rv-sheet__body > * + * { margin-top: 14px; } .rv-sheet__foot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; } .rv-sheet__grip { display: none; } @media (max-width: 640px) { .rv-sheet { align-items: flex-end; padding: 0; } .rv-sheet__panel { max-width: none; max-height: 92vh; border-radius: var(--rv-r-sheet) var(--rv-r-sheet) 0 0; transform: translateY(100%); padding: 10px 18px calc(24px + env(safe-area-inset-bottom)); } .rv-sheet.is-open .rv-sheet__panel { transform: translateY(var(--rv-drag, 0px)); } .rv-sheet.is-dragging .rv-sheet__panel { transition: none; } .rv-sheet__grip { display: block; width: 40px; height: 5px; border-radius: 3px; background: var(--rv-surface-3); margin: 0 auto 10px; } .rv-sheet__foot { grid-template-columns: 1fr; } } html.rv-sheet-lock, html.rv-sheet-lock body { overflow: hidden; } /* ============================================================ 12b. BAND (seksi abu / gelap selebar layar) ============================================================ */ .rv-band { background: var(--rv-surface); padding: 56px 0; --rv-card-bg: var(--rv-raised); } .rv-band .rv-card, .rv-band .rv-list, .rv-band .rv-stat, .rv-band .rv-promo, .rv-band .rv-product, .rv-band .rv-price, .rv-band .rv-bento__item, .rv-band .rv-split { --rv-fill: var(--rv-surface); --rv-fill-hover: var(--rv-surface-2); } .rv-band.rv-band--dark { background: var(--rv-bg); color: var(--rv-text); --rv-card-bg: var(--rv-surface); } .rv-band.rv-band--dark .rv-card, .rv-band.rv-band--dark .rv-list, .rv-band.rv-band--dark .rv-promo, .rv-band.rv-band--dark .rv-price, .rv-band.rv-band--dark .rv-bento__item { --rv-fill: var(--rv-surface-2); --rv-fill-hover: var(--rv-surface-3); } .rv-band__inner { max-width: 1180px; margin: 0 auto; padding: 0 20px; } .rv-band__head { margin-bottom: 28px; } @media (max-width: 640px) { .rv-band { padding: 40px 0; } .rv-band__inner { padding: 0 16px; } } /* Kartu putih di band naik dikit waktu di-hover (rata di luar band). */ .rv-lift { transition: transform var(--rv-d2) var(--rv-ui-ease), box-shadow var(--rv-d2) var(--rv-ui-ease); } .rv-lift:hover { transform: translateY(-4px); box-shadow: var(--rv-shadow-lift); } /* ============================================================ 12c. JUDUL: label atas, judul dua nada, judul besar, tautan ============================================================ */ .rv-eyebrow { display: block; margin: 0 0 8px; font: 700 12.5px/1.3 var(--rv-font); letter-spacing: .06em; text-transform: uppercase; color: var(--rv-eyebrow); } .rv-eyebrow--accent { color: var(--rv-accent-text); } .rv-eyebrow--plain { color: var(--rv-text); text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; } .rv-headline { font: 700 32px/1.18 var(--rv-font); letter-spacing: -.02em; color: var(--rv-text); margin: 0; } /* Span polos = abu. Span berkelas (rv-hl, rv-grad) bawa warnanya sendiri. */ .rv-headline span:not([class]) { color: var(--rv-text-2); } .rv-hero { font: 800 56px/1.04 var(--rv-font); letter-spacing: -.035em; color: var(--rv-text); margin: 0; } @media (max-width: 640px) { .rv-headline { font-size: 24px; } .rv-hero { font-size: 36px; } } .rv-link { display: inline-flex; align-items: center; gap: 4px; font: 500 15px/1.4 var(--rv-font); color: var(--rv-link); text-decoration: none; } .rv-link:hover { text-decoration: underline; text-underline-offset: 3px; } .rv-link i { font-size: 12px; transition: transform var(--rv-d1) var(--rv-ui-ease); } .rv-link:hover i { transform: translateX(3px); } /* ============================================================ 12d. REL GESER + PANAH BULAT ============================================================ */ .rv-rail { position: relative; min-width: 0; } .rv-rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(260px, 340px); gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain; padding: 6px 4px 28px; margin: -6px -4px 0; scrollbar-width: none; } .rv-rail__track::-webkit-scrollbar { display: none; } .rv-rail__track > * { scroll-snap-align: start; } @media (max-width: 640px) { .rv-rail__track { grid-auto-columns: 82%; } } .rv-arrow { width: 48px; height: 48px; border: 0; border-radius: 50%; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; background: var(--rv-fill); color: var(--rv-text); transition: opacity var(--rv-d2) var(--rv-ui-ease), transform var(--rv-d1) var(--rv-ui-ease), background var(--rv-d1); } .rv-arrow:hover { background: var(--rv-fill-hover); } .rv-arrow:active { transform: scale(.94); } .rv-arrow[disabled] { opacity: .35; cursor: default; transform: none; } .rv-arrow:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 2px; } .rv-arrow--sm { width: 40px; height: 40px; font-size: 15px; } .rv-arrow--float { position: absolute; top: calc(50% - 38px); z-index: 2; background: var(--rv-surface-3); background: color-mix(in srgb, var(--rv-surface-3) 82%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .rv-arrow--float[data-rv-rail-prev] { left: 8px; } .rv-arrow--float[data-rv-rail-next] { right: 8px; } @media (max-width: 767px) { .rv-arrow--float { display: none; } } /* ============================================================ 12e. KARTU PROMO + KARTU PRODUK + KARTU DENGAN TOMBOL + ============================================================ */ .rv-promo { position: relative; display: flex; flex-direction: column; min-height: 440px; padding: 28px 28px 0; border-radius: var(--rv-r-card); background: var(--rv-card-bg); color: var(--rv-text); text-decoration: none; overflow: hidden; } .rv-promo--dark { --rv-card-bg: var(--rv-black); } /* Promo berwarna: teks putih, ikon 3D dikasih bayangan biar gak tenggelam. */ /* Kelas warna berdiri sendiri: boleh nempel di elemen selain .rv-promo (hero berwarna, kartu numpuk). Kuning teksnya hitam (putih cuma 1.7:1). */ .rv-promo--blue, .rv-promo--pink, .rv-promo--green, .rv-promo--purple, .rv-promo--rose, .rv-promo--sunset, .rv-promo--teal, .rv-promo--sky, .rv-promo--night { --rv-text: var(--rv-on-promo); --rv-text-2: var(--rv-on-promo-2); --rv-eyebrow: var(--rv-on-promo); --rv-link: var(--rv-on-promo); color: var(--rv-on-promo); } .rv-promo--yellow { --rv-text: var(--rv-on-yellow); --rv-text-2: var(--rv-on-yellow-2); --rv-eyebrow: var(--rv-on-yellow); --rv-link: var(--rv-on-yellow); color: var(--rv-on-yellow); } .rv-promo--blue { background: var(--rv-promo-blue); } .rv-promo--pink { background: var(--rv-promo-pink); } .rv-promo--green { background: var(--rv-promo-green); } .rv-promo--purple { background: var(--rv-promo-purple); } .rv-promo--rose { background: var(--rv-promo-rose); } .rv-promo--sunset { background: var(--rv-promo-sunset); } .rv-promo--teal { background: var(--rv-promo-teal); } .rv-promo--sky { background: var(--rv-promo-sky); } .rv-promo--night { background: var(--rv-promo-night); } .rv-promo--yellow { background: var(--rv-promo-yellow); } .rv-promo--blue .rv-3d, .rv-promo--pink .rv-3d, .rv-promo--green .rv-3d, .rv-promo--dark .rv-3d, .rv-promo--purple .rv-3d, .rv-promo--rose .rv-3d, .rv-promo--sunset .rv-3d, .rv-promo--teal .rv-3d, .rv-promo--sky .rv-3d, .rv-promo--night .rv-3d { filter: drop-shadow(0 14px 22px rgba(0,0,0,.30)); } .rv-promo--yellow .rv-3d { filter: drop-shadow(0 14px 22px rgba(120,60,0,.28)); } .rv-promo__title { font: 700 26px/1.15 var(--rv-font); letter-spacing: -.015em; margin: 0; color: var(--rv-text); } .rv-promo__lead { font: 600 15px/1.4 var(--rv-font); margin: 10px 0 0; color: var(--rv-text); } .rv-promo__meta { font: 400 15px/1.45 var(--rv-font); margin: 4px 0 0; color: var(--rv-text-2); } .rv-promo__media { margin-top: auto; padding: 24px 0 28px; min-height: 200px; display: flex; align-items: flex-end; justify-content: center; } .rv-promo__media img { max-width: 70%; max-height: 190px; object-fit: contain; transition: transform 500ms var(--rv-ui-ease); } .rv-promo:hover .rv-promo__media img { transform: scale(1.05); } .rv-product { display: flex; flex-direction: column; min-height: 340px; padding: 24px 26px; border-radius: var(--rv-r-card); background: var(--rv-card-bg); color: var(--rv-text); text-decoration: none; } .rv-product__media { flex: 1; min-height: 170px; display: flex; align-items: center; justify-content: center; } .rv-product__media img { width: 112px; height: 112px; object-fit: contain; border-radius: 26px; transition: transform 500ms var(--rv-ui-ease); } .rv-product:hover .rv-product__media img { transform: scale(1.05); } .rv-product__name { font: 500 17px/1.35 var(--rv-font); margin: 18px 0 0; color: var(--rv-text); } .rv-product__price { font: 400 15px/1.4 var(--rv-font); margin: 14px 0 0; color: var(--rv-text-2); font-variant-numeric: tabular-nums; } button.rv-card { display: block; width: 100%; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; } .rv-card--more { position: relative; padding-bottom: 76px; } .rv-plus { position: absolute; right: 18px; bottom: 18px; width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 17px; background: var(--rv-ink); color: var(--rv-on-ink); transition: transform var(--rv-d3) var(--rv-ui-spring); } .rv-card--more:hover .rv-plus { transform: scale(1.08); } .rv-card--more[aria-expanded="true"] .rv-plus { transform: rotate(45deg); } /* ============================================================ 12f. BENTO + FRASA BERWARNA ============================================================ */ .rv-bento { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; } .rv-bento__item { display: flex; flex-direction: column; gap: 18px; min-height: 230px; padding: 28px; border-radius: var(--rv-r-card); background: var(--rv-card-bg); min-width: 0; } .rv-bento__item--tall { grid-row: span 2; } .rv-bento__item > i { font-size: 34px; line-height: 1; color: var(--rv-text); } .rv-bento__text { font: 600 20px/1.32 var(--rv-font); letter-spacing: -.01em; color: var(--rv-text); margin: 0; } .rv-bento__media { margin-top: auto; display: flex; justify-content: center; } .rv-bento__media img { max-width: 80%; max-height: 220px; object-fit: contain; } @media (max-width: 1023px) { .rv-bento { grid-template-columns: repeat(2, minmax(0,1fr)); } .rv-bento__item--tall { grid-column: span 2; grid-row: auto; } } @media (max-width: 560px) { .rv-bento { grid-template-columns: 1fr; } .rv-bento__item--tall { grid-column: auto; } .rv-bento__item { min-height: 0; } } .rv-hl { color: var(--rv-accent-text); } .rv-hl--success { color: var(--rv-success-text); } .rv-hl--danger { color: var(--rv-danger-text); } .rv-hl--info { color: var(--rv-link); } .rv-hl--warm { color: var(--rv-eyebrow); } .rv-hl--pink { color: var(--rv-pink); } .rv-hl--teal { color: var(--rv-teal); } .rv-hl--orange { color: var(--rv-orange); } /* ============================================================ 12g. ANGKA BESAR, BARIS STATISTIK, GRAFIK BATANG ============================================================ */ .rv-bignum { display: inline-flex; align-items: flex-start; gap: 10px; line-height: 1; color: var(--rv-text); font-variant-numeric: tabular-nums; } .rv-bignum__cur { font: 600 26px/1 var(--rv-font); color: var(--rv-text-2); margin-top: 10px; } .rv-bignum__val { font: 800 72px/1 var(--rv-font); letter-spacing: -.035em; } @media (max-width: 640px) { .rv-bignum__val { font-size: 48px; } .rv-bignum__cur { font-size: 20px; margin-top: 6px; } } .rv-statrow { container-type: inline-size; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 28px 20px; padding-top: 28px; border-top: 1px solid var(--rv-line); } /* 4 sejajar kalau muat, 2x2 di HP. Ukuran angka ikut lebar BARISNYA (cqi), jadi "12.400+" selalu muat di kolomnya - gak nabrak, gak patah 3+1. */ .rv-statrow__num { font: 700 clamp(28px, 3.4vw, 48px)/1 var(--rv-font); font-size: clamp(28px, 5.2cqi, 48px); letter-spacing: -.03em; color: var(--rv-text); font-variant-numeric: tabular-nums; white-space: nowrap; } .rv-statrow__label { font: 400 14px/1.4 var(--rv-font); color: var(--rv-text-2); margin-top: 8px; } @media (max-width: 760px) { .rv-statrow { grid-template-columns: repeat(2, minmax(0,1fr)); } } .rv-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 8px; align-items: end; height: 170px; } .rv-bars > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 8px; height: 100%; min-width: 0; } .rv-bars span { width: 100%; max-width: 28px; min-height: 4px; height: var(--h, 10%); border-radius: 8px; background: var(--rv-surface-3); transform-origin: bottom; animation: rv-rise 600ms var(--rv-ui-ease) both; animation-delay: calc(var(--i, 0) * 40ms); } .rv-bars i { font: 400 12px/1 var(--rv-font); font-style: normal; color: var(--rv-text-2); font-variant-numeric: tabular-nums; } .rv-bars .is-today span { background: var(--rv-ink); } .rv-bars .is-today i { color: var(--rv-text); font-weight: 700; } /* ============================================================ 12h. KARTU HARGA + DAFTAR CENTANG ============================================================ */ .rv-price { display: flex; flex-direction: column; padding: 30px 28px; border-radius: var(--rv-r-card); background: var(--rv-card-bg); min-width: 0; } .rv-price.is-featured { box-shadow: inset 0 0 0 2px var(--rv-ink); } .rv-price__name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font: 700 24px/1.2 var(--rv-font); color: var(--rv-text); margin: 0; } .rv-price__sub { font: 400 15px/1.45 var(--rv-font); color: var(--rv-text-2); margin: 6px 0 0; min-height: 2.9em; } .rv-price__amt { display: flex; align-items: flex-start; gap: 6px; margin: 22px 0 24px; color: var(--rv-text); font-variant-numeric: tabular-nums; } .rv-price__amt small { font: 600 15px/1 var(--rv-font); color: var(--rv-text-2); margin-top: 8px; } .rv-price__amt b { font: 800 44px/1 var(--rv-font); letter-spacing: -.03em; } .rv-price__amt em { font: 400 15px/1 var(--rv-font); font-style: normal; color: var(--rv-text-2); align-self: flex-end; margin-bottom: 5px; } .rv-price__inc { font: 600 14px/1.4 var(--rv-font); color: var(--rv-text); margin: 24px 0 14px; padding-top: 22px; border-top: 1px solid var(--rv-line); } .rv-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .rv-checks li { display: flex; gap: 10px; font: 400 15px/1.45 var(--rv-font); color: var(--rv-text); } .rv-checks li > i { flex-shrink: 0; font-size: 17px; margin-top: 1px; color: var(--rv-text); } /* ============================================================ 12i. KARTU SPLIT + KARTU MEDIA PENUH + KARUSEL ============================================================ */ .rv-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 380px; border-radius: var(--rv-r-card); overflow: hidden; background: var(--rv-card-bg); } .rv-split__text { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 10px; padding: 44px 32px; } .rv-split__text .rv-body { max-width: 380px; } .rv-split__media { position: relative; min-height: 260px; overflow: hidden; } .rv-split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--rv-ui-ease); } .rv-split:hover .rv-split__media img { transform: scale(1.03); } .rv-split--rev .rv-split__media { order: -1; } @media (max-width: 760px) { .rv-split { grid-template-columns: 1fr; } .rv-split__media { order: -1; min-height: 220px; } } .rv-media { position: relative; isolation: isolate; display: flex; align-items: flex-end; aspect-ratio: 1.9 / 1; min-height: 420px; border-radius: var(--rv-r-sheet); overflow: hidden; color: var(--rv-on-media); } .rv-media > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .rv-media::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top right, rgba(0,0,0,.62) 0%, rgba(0,0,0,.28) 38%, rgba(0,0,0,0) 70%); } .rv-media__body { padding: 0 60px 60px; max-width: 640px; } .rv-media__label { font: 600 19px/1.3 var(--rv-font); margin: 0 0 14px; letter-spacing: .005em; } .rv-media__title { font: 700 40px/1.12 var(--rv-font); letter-spacing: -.022em; margin: 0 0 26px; } @media (max-width: 640px) { .rv-media { aspect-ratio: auto; min-height: 420px; border-radius: var(--rv-r-card); } .rv-media__body { padding: 0 24px 28px; } .rv-media__label { font-size: 15px; } .rv-media__title { font-size: 27px; margin-bottom: 20px; } } /* Tombol garis putih di atas foto: tipis, latar nyaris bening. */ .rv-btn--glass { height: 50px; padding: 0 24px; font-weight: 500; font-size: 17px; background: rgba(0,0,0,.08); color: var(--rv-on-media); box-shadow: inset 0 0 0 1px rgba(255,255,255,.9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .rv-btn--glass:hover { background: rgba(255,255,255,.16); opacity: 1; } .rv-carousel { position: relative; min-width: 0; } .rv-carousel__stage { display: grid; } .rv-carousel__slide { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity 700ms var(--rv-ui-ease), visibility 0s linear 700ms; } .rv-carousel__slide.is-active { opacity: 1; visibility: visible; transition: opacity 700ms var(--rv-ui-ease), visibility 0s; } .rv-carousel__slide.is-active > img { animation: rv-settle 1400ms var(--rv-ui-ease) both; } .rv-carousel__controls { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 36px; } .rv-carousel__controls > div { display: flex; gap: 22px; } .rv-carousel__controls .rv-arrow { width: 54px; height: 54px; font-size: 21px; } @media (max-width: 640px) { .rv-carousel__controls { margin-top: 20px; } .rv-carousel__controls > div { gap: 12px; } .rv-carousel__controls .rv-arrow { width: 44px; height: 44px; font-size: 17px; } } /* ============================================================ 12j. TAB PIL + BINGKAI HP ============================================================ */ .rv-showcase { display: grid; grid-template-columns: auto minmax(0, 320px) minmax(0, 1fr); gap: 48px; align-items: center; } @media (max-width: 960px) { .rv-showcase { grid-template-columns: 1fr; gap: 28px; justify-items: center; text-align: center; } } .rv-vtabs { display: flex; flex-direction: column; gap: 12px; } @media (max-width: 960px) { .rv-vtabs { flex-direction: row; overflow-x: auto; max-width: 100%; scrollbar-width: none; padding: 2px; } } .rv-vtab { display: inline-flex; align-items: center; gap: 12px; height: 60px; padding: 0 26px; flex-shrink: 0; border: 0; border-radius: var(--rv-r-pill); cursor: pointer; white-space: nowrap; background: var(--rv-fill); color: var(--rv-text-2); font: 600 17px/1 var(--rv-font); transition: background var(--rv-d2) var(--rv-ui-ease), color var(--rv-d2) var(--rv-ui-ease), box-shadow var(--rv-d2), transform var(--rv-d1); } .rv-vtab i { font-size: 20px; } .rv-vtab:active { transform: scale(.97); } .rv-vtab[aria-selected="true"] { background: var(--rv-raised); color: var(--rv-text); box-shadow: var(--rv-shadow-thumb); } .rv-vtab:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 2px; } @media (max-width: 960px) { .rv-vtab { height: 48px; padding: 0 18px; font-size: 15px; } } .rv-device { width: 100%; max-width: 300px; padding: 10px; border-radius: 46px; background: var(--rv-device); box-shadow: var(--rv-shadow-lift); } @media (max-width: 960px) { .rv-device { max-width: 240px; } } @media (max-width: 640px) { .rv-device { max-width: 220px; } .rv-device__screen { aspect-ratio: 9 / 16; } } .rv-device__screen { position: relative; aspect-ratio: 9 / 18.4; overflow: hidden; border-radius: 37px; background: var(--rv-bg); padding: 52px 18px 18px; text-align: left; } .rv-device__screen::before { content: ''; position: absolute; top: 12px; left: 50%; width: 92px; height: 26px; margin-left: -46px; border-radius: 13px; background: var(--rv-device); } [data-rv-panel][hidden] { display: none; } [data-rv-panel].is-in { animation: rv-tab-in 320ms var(--rv-ui-ease) both; } /* ============================================================ 12k. CHAT, LANGKAH, STATUS, CORETAN, AVATAR ============================================================ */ .rv-chat { display: flex; flex-direction: column; gap: 12px; } .rv-chat__time { align-self: center; font: 400 12px/1 var(--rv-font); color: var(--rv-text-3); } .rv-bubble { align-self: flex-start; max-width: 86%; padding: 12px 16px; border-radius: 20px 20px 20px 6px; background: var(--rv-fill); color: var(--rv-text); font: 400 15px/1.45 var(--rv-font); } .rv-bubble--me { align-self: flex-end; border-radius: 20px 20px 6px 20px; background: var(--rv-ink); color: var(--rv-on-ink); } .rv-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; } .rv-steps li { display: flex; align-items: center; gap: 10px; font: 400 15px/1.4 var(--rv-font); color: var(--rv-text); animation: rv-pop 420ms var(--rv-ui-spring) both; animation-delay: calc(var(--i, 0) * 350ms); } .rv-steps__dot { width: 22px; height: 22px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; background: var(--rv-success); color: var(--rv-on-media); } .rv-steps li.is-doing .rv-steps__dot { background: transparent; border: 2px solid var(--rv-surface-3); border-top-color: var(--rv-accent); animation: rv-spin .8s linear infinite; } .rv-steps li.is-doing { color: var(--rv-text-2); } .rv-status { display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; font: 600 13px/1 var(--rv-font); color: var(--rv-text-3); } .rv-status--ok { color: var(--rv-success-text); } .rv-row.is-muted .rv-row__title, .rv-row.is-muted .rv-row__sub { opacity: .5; } .rv-strike { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .rv-strike li { justify-self: start; font: 700 24px/1.3 var(--rv-font); letter-spacing: -.01em; color: var(--rv-text-2); background: linear-gradient(currentColor, currentColor) left 56% / 0% 2px no-repeat; transition: background-size 600ms var(--rv-ui-ease); transition-delay: calc(var(--i, 0) * 200ms + 200ms); } .rv-strike.is-in li { background-size: 100% 2px; } .rv-avatar { width: 36px; height: 36px; flex-shrink: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 700 14px/1 var(--rv-font); background: var(--rv-accent-soft); color: var(--rv-accent); } .rv-avatar--success { background: var(--rv-success-soft); color: var(--rv-success-text); } .rv-avatar--warm { background: var(--rv-warm-soft); color: var(--rv-eyebrow); } .rv-chip--outline { height: 44px; padding: 0 20px; font-size: 15px; background: transparent; box-shadow: inset 0 0 0 1px var(--rv-text-2); } .rv-chip--outline:hover { background: transparent; box-shadow: inset 0 0 0 1.5px var(--rv-text); } /* ============================================================ 12l. IKON 3D (gambar /photos/3d/) ============================================================ */ .rv-3d { display: block; width: 72px; height: 72px; object-fit: contain; flex-shrink: 0; transition: transform var(--rv-d3) var(--rv-ui-spring); } .rv-3d--sm { width: 48px; height: 48px; } .rv-3d--lg { width: 140px; height: 140px; } /* Di media promo: lepas dari max-width 70% punya img promo. */ .rv-promo__media .rv-3d { width: 184px; height: 184px; max-width: none; max-height: none; transition: transform var(--rv-d3) var(--rv-ui-spring); } .rv-card--link:hover .rv-3d, .rv-promo:hover .rv-3d, .rv-bento__item:hover .rv-3d, .rv-promo:hover .rv-promo__media .rv-3d { transform: translateY(-3px) rotate(-4deg); } /* ============================================================ 12m. TEKS GRADIEN + KARTU SOROTAN ============================================================ */ /* Gradien cuma buat teks GEDE (judul / satu kata di judul) - di teks kecil warnanya jadi keruh (design.md 4d). Browser yang gak dukung clip ke teks tetep dapet warna polos. */ .rv-grad { color: var(--rv-accent); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .rv-grad { background-image: var(--rv-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; } .rv-grad--sunset { background-image: var(--rv-grad-sunset); } } .rv-grad--sunset { color: var(--rv-orange); } .rv-headline--xl { font-size: 48px; line-height: 1.08; letter-spacing: -.03em; } @media (max-width: 640px) { .rv-headline--xl { font-size: 32px; } } /* Kartu sorotan: ikon garis berwarna + kalimat besar dengan frasa sewarna. */ .rv-feature { display: flex; flex-direction: column; gap: 22px; min-height: 260px; padding: 32px 30px 76px; } .rv-feature__ico { font-size: 40px; line-height: 1; } .rv-feature__text { font: 600 24px/1.25 var(--rv-font); letter-spacing: -.015em; color: var(--rv-text); margin: 0; } @media (max-width: 640px) { .rv-feature { min-height: 0; padding: 24px 22px 72px; } .rv-feature__text { font-size: 21px; } } /* ============================================================ 12n. GRAFIK YANG BISA DIPENCET (rv-chart, digambar rv-ui.js) ============================================================ */ .rv-chart { position: relative; outline: none; } .rv-chart:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 8px; border-radius: 12px; } .rv-chart__plot { position: relative; height: 220px; margin-top: 72px; cursor: crosshair; touch-action: pan-y; -webkit-user-select: none; user-select: none; } .rv-chart__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .rv-chart__area { fill: var(--rv-accent-soft); } .rv-chart__cur { fill: none; stroke: var(--rv-accent); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .rv-chart__prev { fill: none; stroke: var(--rv-text-3); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; } .rv-chart__guide { position: absolute; top: -10px; bottom: 0; width: 0; border-left: 1.5px dashed var(--rv-text-3); pointer-events: none; transition: left 120ms var(--rv-ui-ease); } .rv-chart.is-locked .rv-chart__guide { border-left-style: solid; border-left-color: var(--rv-text-2); } .rv-chart__dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: var(--rv-accent); box-shadow: 0 0 0 3px var(--rv-bg); pointer-events: none; transition: left 120ms var(--rv-ui-ease), top 120ms var(--rv-ui-ease); } .rv-chart__dot--prev { width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--rv-bg); box-shadow: inset 0 0 0 2.5px var(--rv-text-3); } .rv-chart__dot[hidden] { display: none; } .rv-chart__tips { position: absolute; top: -62px; display: flex; gap: 6px; white-space: nowrap; transform: translateX(-50%); pointer-events: none; transition: left 120ms var(--rv-ui-ease); } .rv-chart__tips.is-start { transform: none; } .rv-chart__tips.is-end { transform: translateX(-100%); } .rv-chart__axis { display: flex; justify-content: space-between; margin-top: 10px; font: 400 12.5px/1 var(--rv-font); color: var(--rv-text-2); } .rv-chart__sum { margin-top: 18px; min-height: 44px; text-align: center; } @media (max-width: 640px) { .rv-chart__plot { height: 180px; margin-top: 96px; } .rv-chart__tips { top: -92px; flex-direction: column; align-items: flex-start; } .rv-chart__tips.is-end { align-items: flex-end; } } /* ============================================================ 12o. SUSUNAN RINGKASAN AKUN (HP numpuk, komputer kotak-kotak) Susunannya ikut lebar WADAH (container query), bukan lebar layar, biar bener juga kalau ditaruh di kolom sempit. ============================================================ */ .rv-dash-wrap { container-type: inline-size; } .rv-dash { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0,1fr)); } .rv-dash__hero, .rv-dash__full { grid-column: span 2; } .rv-dash__hero { display: flex; flex-direction: column; } @container (min-width: 640px) { .rv-dash { grid-template-columns: 1.25fr 1fr 1fr; gap: 16px; } .rv-dash__hero { grid-column: 1; grid-row: span 2; } .rv-dash__full { grid-column: auto; } .rv-dash__wide { grid-column: span 2; } } /* ============================================================ 12p. WARNA GRAFIK + LEGENDA ============================================================ */ .rv-c1 { --rv-c: var(--rv-chart-1); } .rv-c2 { --rv-c: var(--rv-chart-2); } .rv-c3 { --rv-c: var(--rv-chart-3); } .rv-c4 { --rv-c: var(--rv-chart-4); } .rv-c5 { --rv-c: var(--rv-chart-5); } .rv-c6 { --rv-c: var(--rv-chart-6); } .rv-c7 { --rv-c: var(--rv-chart-7); } .rv-c8 { --rv-c: var(--rv-chart-8); } .rv-legend { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; font: 400 13px/1.4 var(--rv-font); color: var(--rv-text-2); } .rv-legend:empty { display: none; } .rv-legend > span { display: inline-flex; align-items: center; gap: 8px; } .rv-legend i { display: inline-block; width: 10px; height: 10px; flex-shrink: 0; border-radius: 3px; background: var(--rv-c, var(--rv-chart-1)); } .rv-legend b { font-weight: 600; color: var(--rv-text); font-variant-numeric: tabular-nums; } /* ============================================================ 12q. HERO (bagian paling atas halaman) ============================================================ */ .rv-herobox { display: block; width: 100%; max-width: 1080px; margin: 0 auto; padding: 72px 20px; min-width: 0; } .rv-herobox__text { min-width: 0; } .rv-herobox__lead { max-width: 560px; margin: 18px 0 0; font: 400 19px/1.5 var(--rv-font); color: var(--rv-text-2); } .rv-herobox__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 28px; } .rv-herobox__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 20px; font: 400 14px/1.4 var(--rv-font); color: var(--rv-text-2); } .rv-herobox__proof i { color: var(--rv-warm); font-size: 14px; } .rv-herobox__proof b { color: var(--rv-text); font-weight: 600; } .rv-herobox__media { display: flex; align-items: center; justify-content: flex-start; margin-top: 40px; min-width: 0; } .rv-herobox__media > img:not(.rv-3d) { max-width: 100%; height: auto; border-radius: var(--rv-r-card); } /* Isian + tombol sebaris. Tombol kebagian lebar sisa cuma waktu dia turun baris sendirian (flex-grow 1 lawan 999 punya isian). */ .rv-herobox__form { display: flex; flex-wrap: wrap; gap: 10px; max-width: 520px; margin-top: 28px; } .rv-herobox__form .rv-input { flex: 999 1 220px; min-width: 0; width: auto; } .rv-herobox__form .rv-btn { flex: 1 0 auto; height: 56px; padding: 0 28px; } .rv-herobox__hint { margin: 10px 0 0 4px; font: 400 13px/1.45 var(--rv-font); color: var(--rv-text-2); } .rv-herobox .rv-headline + .rv-herobox__form, .rv-herobox .rv-hero + .rv-herobox__actions { margin-top: 32px; } .rv-herobox--center { text-align: center; } .rv-herobox--center .rv-herobox__lead, .rv-herobox--center .rv-herobox__form { margin-left: auto; margin-right: auto; } .rv-herobox--center .rv-herobox__actions, .rv-herobox--center .rv-herobox__proof, .rv-herobox--center .rv-herobox__media { justify-content: center; } .rv-herobox--split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); column-gap: 56px; row-gap: 0; align-items: center; } .rv-herobox--split > * { grid-column: 1; } .rv-herobox--split > .rv-herobox__media, .rv-herobox--split > .rv-cardstack { grid-column: 2; grid-row: 1 / span 2; margin-top: 0; justify-content: center; } .rv-herobox--split > .rv-herobox__proof { align-self: start; } .rv-herobox--color { max-width: 1080px; padding: 48px; border-radius: var(--rv-r-sheet); color: var(--rv-text); overflow: hidden; } .rv-herobox--color .rv-btn { background: var(--rv-on-promo); color: var(--rv-on-yellow); } .rv-herobox--color .rv-btn:hover { background: var(--rv-on-promo); opacity: .9; } .rv-herobox--color.rv-promo--yellow .rv-btn { background: var(--rv-on-yellow); color: var(--rv-on-promo); } .rv-herobox--color .rv-link { text-decoration: underline; text-underline-offset: 3px; } /* Hero FOTO + gradien (13 Okt 2026, permintaan owner). Foto penuh, gradien warna lini dari kiri (HP: dari bawah) biar tulisan putih tetep kebaca >= 4.5:1. Warna gradien = --rv-hero-tint (tiga angka RGB), pilih lewat kelas --tint-*. Fotonya biar bisa srcset + fetchpriority. */ .rv-herobox--photo { --rv-hero-tint: 15 18 35; --rv-hero-pos: 70% center; position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; max-width: 1180px; min-height: 440px; padding: 56px; border-radius: var(--rv-r-sheet); overflow: hidden; background: var(--rv-black); color: var(--rv-on-promo); --rv-text: var(--rv-on-promo); --rv-text-2: var(--rv-on-promo-2); --rv-eyebrow: var(--rv-on-promo); --rv-link: var(--rv-on-promo); } .rv-herobox--photo > .rv-herobox__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: var(--rv-hero-pos); } .rv-herobox--photo::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgb(var(--rv-hero-tint) / .94) 0%, rgb(var(--rv-hero-tint) / .82) 36%, rgb(var(--rv-hero-tint) / .28) 68%, rgb(var(--rv-hero-tint) / 0) 100%); } .rv-herobox--photo .rv-herobox__text { max-width: 560px; } .rv-herobox--photo .rv-herobox__lead { color: var(--rv-on-promo-2); } .rv-herobox--photo .rv-herobox__proof { color: var(--rv-on-promo-2); } .rv-herobox--photo .rv-herobox__proof b, .rv-herobox--photo .rv-herobox__proof i { color: var(--rv-on-promo); } .rv-herobox--photo .rv-btn--primary { background: var(--rv-on-promo); color: var(--rv-on-yellow); } .rv-herobox--photo .rv-btn--primary:hover { background: var(--rv-on-promo); opacity: .9; } .rv-herobox--photo .rv-search, .rv-herobox--photo .rv-input { background: var(--rv-on-promo); color: var(--rv-on-yellow); } .rv-herobox--tint-green { --rv-hero-tint: 8 66 42; } .rv-herobox--tint-pink { --rv-hero-tint: 112 18 66; } .rv-herobox--tint-blue { --rv-hero-tint: 18 44 140; } .rv-herobox--tint-purple { --rv-hero-tint: 58 28 118; } .rv-herobox--tint-teal { --rv-hero-tint: 8 66 76; } .rv-herobox--tint-sky { --rv-hero-tint: 8 74 122; } .rv-herobox--tint-rose { --rv-hero-tint: 122 22 56; } .rv-herobox--tint-night { --rv-hero-tint: 15 18 35; } @media (max-width: 640px) { .rv-herobox--photo { min-height: 460px; padding: 24px 20px; border-radius: var(--rv-r-card); --rv-hero-pos: center top; } .rv-herobox--photo::before { /* v1.14: di HP teksnya bisa ngisi hampir seluruh tinggi kotak (judul 3-4 baris + 2 tombol), jadi bagian atas wajib tetep ketutup gradien. Stop lama (.2 di 76%, 0 di 100%) bikin eyebrow + judul di atas foto terang cuma ~1.7:1. */ background: linear-gradient(0deg, rgb(var(--rv-hero-tint) / .96) 0%, rgb(var(--rv-hero-tint) / .9) 50%, rgb(var(--rv-hero-tint) / .74) 78%, rgb(var(--rv-hero-tint) / .55) 100%); } } /* Deret kartu gradien di bawah hero foto: 3 sebaris, HP 1 lebar + 2 sebaris. */ .rv-herocards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 1180px; margin: 16px auto 0; } .rv-herocards > .rv-promo { min-height: 220px; padding: 24px 24px 0; } .rv-herocards .rv-promo__title { font-size: 22px; } .rv-herocards .rv-promo__media { min-height: 0; padding: 12px 0 18px; justify-content: flex-end; } .rv-herocards .rv-promo__media .rv-3d { width: 96px; height: 96px; } @media (max-width: 640px) { .rv-herocards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .rv-herocards > .rv-promo:first-child { grid-column: 1 / -1; } .rv-herocards > .rv-promo { min-height: 180px; padding: 18px 18px 0; } .rv-herocards .rv-promo__title { font-size: 18px; } .rv-herocards .rv-promo__media .rv-3d { width: 72px; height: 72px; } } @media (max-width: 768px) { .rv-herobox--split { grid-template-columns: minmax(0, 1fr); } .rv-herobox--split > .rv-herobox__media, .rv-herobox--split > .rv-cardstack { grid-column: 1; grid-row: auto; order: -1; margin-bottom: 28px; } } @media (max-width: 640px) { .rv-herobox { padding: 44px 16px; } .rv-herobox__lead { font-size: 16px; } .rv-herobox--color { padding: 24px; border-radius: var(--rv-r-card); } .rv-herobox__media { margin-top: 28px; } } /* Pil pengumuman (tautan). */ .rv-announce { display: inline-flex; align-items: center; gap: 10px; max-width: 100%; min-height: 44px; padding: 5px 16px 5px 5px; margin-bottom: 22px; border-radius: var(--rv-r-pill); background: var(--rv-fill); color: var(--rv-text); text-decoration: none; text-align: left; font: 500 14px/1.3 var(--rv-font); transition: background var(--rv-d1) var(--rv-ui-ease); } .rv-announce:hover { background: var(--rv-fill-hover); } .rv-announce:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 2px; } .rv-announce__tag { display: inline-flex; align-items: center; flex-shrink: 0; height: 32px; padding: 0 12px; border-radius: var(--rv-r-pill); background: var(--rv-ink); color: var(--rv-on-ink); font: 700 12.5px/1 var(--rv-font); } .rv-announce i { flex-shrink: 0; font-size: 13px; color: var(--rv-text-2); transition: transform var(--rv-d1) var(--rv-ui-ease); } .rv-announce:hover i { transform: translateX(3px); } /* Tumpukan 3 kartu miring; diarahin / difokus = mekar dikit. */ .rv-cardstack { display: grid; place-items: center; padding: 24px 32px; min-width: 0; } .rv-cardstack__item { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 8px; width: min(100%, 260px); min-height: 300px; padding: 24px; border-radius: var(--rv-r-card); color: var(--rv-text); box-shadow: var(--rv-shadow-lift); transition: transform 450ms var(--rv-ui-ease); } /* Latar abu cuma kalau gak dikasih kelas warna (kelas warna ditulis lebih atas). */ .rv-cardstack__item:not([class*="rv-promo--"]) { background: var(--rv-card-bg); } .rv-cardstack__item .rv-3d { margin-top: auto; align-self: center; width: 128px; height: 128px; } .rv-cardstack__item:nth-child(1) { transform: translate(-30px, 10px) rotate(-6deg); } .rv-cardstack__item:nth-child(2) { z-index: 2; } .rv-cardstack__item:nth-child(3) { z-index: 1; transform: translate(30px, 10px) rotate(6deg); } .rv-cardstack:hover .rv-cardstack__item:nth-child(1), .rv-cardstack:focus-within .rv-cardstack__item:nth-child(1) { transform: translate(-64px, 14px) rotate(-10deg); } .rv-cardstack:hover .rv-cardstack__item:nth-child(2), .rv-cardstack:focus-within .rv-cardstack__item:nth-child(2) { transform: translateY(-8px); } .rv-cardstack:hover .rv-cardstack__item:nth-child(3), .rv-cardstack:focus-within .rv-cardstack__item:nth-child(3) { transform: translate(64px, 14px) rotate(10deg); } @media (max-width: 640px) { .rv-cardstack__item { width: min(100%, 220px); min-height: 250px; padding: 20px; } .rv-cardstack__item .rv-3d { width: 112px; height: 112px; } .rv-cardstack__item:nth-child(1) { transform: translate(-22px, 8px) rotate(-6deg); } .rv-cardstack__item:nth-child(3) { transform: translate(22px, 8px) rotate(6deg); } .rv-cardstack:hover .rv-cardstack__item:nth-child(1), .rv-cardstack:focus-within .rv-cardstack__item:nth-child(1) { transform: translate(-36px, 10px) rotate(-8deg); } .rv-cardstack:hover .rv-cardstack__item:nth-child(3), .rv-cardstack:focus-within .rv-cardstack__item:nth-child(3) { transform: translate(36px, 10px) rotate(8deg); } } /* ============================================================ 12r. INDIKATOR: bertahap, numpuk, target, meter, titik, hitung mundur ============================================================ */ .rv-segbar { display: flex; gap: 6px; } .rv-segbar > span { flex: 1; height: 8px; border-radius: var(--rv-r-pill); background: var(--rv-surface-2); overflow: hidden; position: relative; } .rv-segbar > span.is-on::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: var(--rv-ink); transform-origin: left center; animation: rv-grow 500ms var(--rv-ui-draw) both; } .rv-segbar > span:nth-child(2)::before { animation-delay: 120ms; } .rv-segbar > span:nth-child(3)::before { animation-delay: 240ms; } .rv-segbar > span:nth-child(4)::before { animation-delay: 360ms; } .rv-segbar > span:nth-child(5)::before { animation-delay: 480ms; } .rv-segbar > span:nth-child(n+6)::before { animation-delay: 600ms; } .rv-segbar + .rv-meta { margin-top: 10px; } .rv-stackbar { display: flex; gap: 3px; height: 12px; border-radius: var(--rv-r-pill); overflow: hidden; animation: rv-wipe 900ms var(--rv-ui-draw) both; } .rv-stackbar > span { flex: 0 1 var(--rv-w, 0%); min-width: 3px; background: var(--rv-c, var(--rv-chart-1)); } .rv-goal { position: relative; padding-top: 30px; } .rv-goal__bar { height: 12px; border-radius: var(--rv-r-pill); background: var(--rv-surface-2); overflow: hidden; } .rv-goal__bar > span { display: block; height: 100%; width: calc(var(--rv-p, 0) * 1%); border-radius: inherit; background: var(--rv-success); transform-origin: left center; animation: rv-grow 800ms var(--rv-ui-draw) both; } .rv-goal__mark { position: absolute; top: 0; left: calc(var(--rv-t, 100) * 1%); transform: translateX(-50%); font: 600 12px/1 var(--rv-font); color: var(--rv-text); white-space: nowrap; } .rv-goal__mark::after { content: ''; position: absolute; left: 50%; top: 18px; width: 2px; height: 24px; margin-left: -1px; border-radius: 1px; background: var(--rv-text); } .rv-goal__meta { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font: 400 13px/1.4 var(--rv-font); color: var(--rv-text-2); font-variant-numeric: tabular-nums; } .rv-goal__meta > span:first-child { font-weight: 600; color: var(--rv-text); } .rv-gauge { --rv-p: 50; position: relative; width: 220px; max-width: 100%; } .rv-gauge svg { display: block; width: 100%; height: auto; overflow: visible; } .rv-gauge path { fill: none; stroke-width: 10; stroke-linecap: round; } .rv-gauge .rv-gauge__track { stroke: var(--rv-surface-2); } .rv-gauge .rv-gauge__val { stroke: var(--rv-accent); stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--rv-p)); animation: rv-ring 1000ms var(--rv-ui-draw) both; } .rv-gauge__label { position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; } .rv-gauge__label b { font: 700 30px/1 var(--rv-font); letter-spacing: -.02em; color: var(--rv-text); font-variant-numeric: tabular-nums; } .rv-gauge__label span { font: 400 13px/1.3 var(--rv-font); color: var(--rv-text-2); } .rv-dots { display: flex; flex-wrap: wrap; gap: 8px; } .rv-dots > span { width: 14px; height: 14px; border-radius: 50%; background: var(--rv-surface-3); } .rv-dots > span.is-on { background: var(--rv-ink); animation: rv-pop 380ms var(--rv-ui-spring) both; } .rv-dots > span:nth-child(2) { animation-delay: 80ms; } .rv-dots > span:nth-child(3) { animation-delay: 160ms; } .rv-dots > span:nth-child(4) { animation-delay: 240ms; } .rv-dots > span:nth-child(n+5) { animation-delay: 320ms; } .rv-dots + .rv-meta { margin-top: 10px; } .rv-countdown { --rv-p: 100; position: relative; display: inline-flex; align-items: center; justify-content: center; width: 72px; height: 72px; flex-shrink: 0; } .rv-countdown svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); } .rv-countdown circle { fill: none; stroke-width: 3; } .rv-countdown .rv-countdown__track { stroke: var(--rv-surface-2); } .rv-countdown .rv-countdown__val { stroke: var(--rv-success); stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--rv-p)); transition: stroke-dashoffset 1s linear, stroke var(--rv-d2) var(--rv-ui-ease); } .rv-countdown__time { position: relative; font: 700 15px/1 var(--rv-font); color: var(--rv-text); font-variant-numeric: tabular-nums; } .rv-countdown.is-warn .rv-countdown__val { stroke: var(--rv-warm); } .rv-countdown.is-warn .rv-countdown__time { color: var(--rv-eyebrow); } .rv-countdown.is-danger .rv-countdown__val { stroke: var(--rv-danger); } .rv-countdown.is-danger .rv-countdown__time { color: var(--rv-danger-text); } .rv-countdown.is-danger { animation: rv-beat 1.6s var(--rv-ui-ease) infinite; } .rv-countdown.is-done { animation: none; } .rv-countdown.is-done .rv-countdown__time { font-size: 13px; color: var(--rv-danger-text); } .rv-countdown.is-reset .rv-countdown__val { transition: none; } /* ============================================================ 12s. MENU TARIK-TURUN, PILIH BERGAMBAR, CARI + SARAN, RADIO ============================================================ */ .rv-menu { position: relative; display: inline-block; max-width: 100%; vertical-align: top; } .rv-combo { display: block; } .rv-menu__pop { --rv-fill: var(--rv-surface); --rv-fill-hover: var(--rv-surface-2); position: absolute; z-index: 60; top: calc(100% + 8px); left: 0; min-width: 232px; max-width: min(360px, calc(100vw - 24px)); max-height: 340px; overflow-y: auto; overscroll-behavior: contain; padding: 6px; border-radius: var(--rv-r-group); background: var(--rv-sheet); box-shadow: var(--rv-shadow-sheet), 0 0 0 1px var(--rv-line); transform-origin: top left; } .rv-menu__pop[hidden] { display: none; } .rv-menu.is-open .rv-menu__pop { animation: rv-menu-in 200ms var(--rv-ui-ease) both; } .rv-menu.is-up .rv-menu__pop { top: auto; bottom: calc(100% + 8px); transform-origin: bottom left; } .rv-menu.is-end .rv-menu__pop { left: auto; right: 0; transform-origin: top right; } .rv-menu.is-up.is-end .rv-menu__pop { transform-origin: bottom right; } .rv-combo .rv-menu__pop { right: 0; max-width: none; } .rv-menu__pop--list { padding: 0; min-width: 300px; } .rv-menu__pop--list .rv-list { background: transparent; border-radius: 0; } .rv-menu__pop .rv-ico { background: var(--rv-surface); } .rv-menu__item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 14px; border: 0; border-radius: 12px; background: transparent; color: var(--rv-text); text-align: left; font: 500 15px/1.3 var(--rv-font); cursor: pointer; transition: background var(--rv-d1) var(--rv-ui-ease); } .rv-menu__item[hidden] { display: none; } .rv-menu__item i { font-size: 16px; color: var(--rv-text-2); } .rv-menu__item:hover, .rv-menu__item.is-active { background: var(--rv-fill); } .rv-menu__item:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: -2px; } .rv-menu__item[aria-checked="true"] { font-weight: 600; } .rv-menu__item[role="menuitemradio"]::after { content: ''; flex-shrink: 0; width: 6px; height: 11px; margin: -3px 4px 0 auto; border-right: 2px solid var(--rv-ink); border-bottom: 2px solid var(--rv-ink); transform: rotate(45deg); opacity: 0; } .rv-menu__item[aria-checked="true"]::after { opacity: 1; } .rv-menu__item--danger, .rv-menu__item--danger i { color: var(--rv-danger-text); } .rv-menu__sep { height: 1px; margin: 6px 10px; background: var(--rv-line); } .rv-menu__empty { margin: 0; padding: 12px 14px; font: 400 14px/1.4 var(--rv-font); color: var(--rv-text-2); } .rv-menu__empty[hidden] { display: none; } .rv-menu__pop .rv-row.is-active { background: var(--rv-fill); } .rv-menu__pop .rv-row:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: -2px; } .rv-menu__add, .rv-menu__add .rv-row__title { color: var(--rv-link); } .rv-menu__add { min-height: 56px; } .rv-menu__add > i { width: 36px; flex-shrink: 0; text-align: center; font-size: 18px; } .rv-menu__scrim { position: fixed; inset: 0; z-index: 1000; background: var(--rv-overlay); animation: rv-fade-in 200ms var(--rv-ui-ease) both; } .rv-picker { display: flex; align-items: center; gap: 12px; width: 340px; max-width: 100%; min-height: 64px; padding: 10px 16px 10px 12px; border: 0; border-radius: var(--rv-r-group); background: var(--rv-fill); color: var(--rv-text); text-align: left; font: inherit; cursor: pointer; transition: background var(--rv-d1) var(--rv-ui-ease); } .rv-picker:hover { background: var(--rv-fill-hover); } .rv-picker:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 2px; } .rv-picker .rv-ico { background: var(--rv-raised); } .rv-picker__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .rv-picker__title { font: 600 15px/1.3 var(--rv-font); color: var(--rv-text); } .rv-picker__sub { font: 400 13px/1.3 var(--rv-font); color: var(--rv-text-2); } .rv-picker__chev { flex-shrink: 0; font-size: 14px; color: var(--rv-text-2); transition: transform var(--rv-d2) var(--rv-ui-ease); } .rv-picker[aria-expanded="true"] .rv-picker__chev { transform: rotate(180deg); } .rv-chip--menu[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); } .rv-radio { position: relative; display: inline-block; width: 22px; height: 22px; flex-shrink: 0; padding: 0; border-radius: 50%; border: 1.5px solid var(--rv-text-3); background: transparent; transition: border-color var(--rv-d1) var(--rv-ui-ease), border-width var(--rv-d1) var(--rv-ui-ease); } .rv-radio::after { content: ''; position: absolute; inset: 3px; border-radius: 50%; background: var(--rv-ink); transform: scale(0); transition: transform var(--rv-d2) var(--rv-ui-spring); } [aria-selected="true"] > .rv-radio, [aria-checked="true"] > .rv-radio, .rv-radio[aria-checked="true"] { border: 2px solid var(--rv-ink); } [aria-selected="true"] > .rv-radio::after, [aria-checked="true"] > .rv-radio::after, .rv-radio[aria-checked="true"]::after { transform: scale(1); } /* Radio yang jadi tombol sendiri: area sentuh 44px. */ button.rv-radio { cursor: pointer; } button.rv-radio::before { content: ''; position: absolute; inset: -12px; } button.rv-radio:focus-visible, [role="radio"]:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 2px; } @media (max-width: 640px) { /* Lembar bawah. Cari + saran sengaja tetep melayang di bawah isian: lembar + layar gelap bakal nutup isian yang lagi diketik. */ .rv-menu:not(.rv-combo) .rv-menu__pop { position: fixed; z-index: 1001; top: auto; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); min-width: 0; max-width: none; max-height: 72vh; padding: 10px; border-radius: var(--rv-r-sheet); transform-origin: bottom center; } .rv-menu:not(.rv-combo) .rv-menu__pop--list { padding: 6px 0; } .rv-menu:not(.rv-combo).is-open .rv-menu__pop { animation-name: rv-sheet-up; animation-duration: 260ms; } .rv-menu__item { min-height: 52px; font-size: 16px; } } /* ============================================================ 12t. BUKA-TUTUP (accordion) ============================================================ */ .rv-acc { display: grid; gap: 12px; } .rv-acc__item { border: 1px solid var(--rv-line); border-radius: var(--rv-r-group); background: var(--rv-bg); } .rv-acc__q { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 6px 20px; list-style: none; cursor: pointer; font: 600 15px/1.4 var(--rv-font); color: var(--rv-text); border-radius: inherit; -webkit-tap-highlight-color: transparent; } .rv-acc__q::-webkit-details-marker { display: none; } .rv-acc__q::marker { content: ''; } .rv-acc__q:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: -2px; } .rv-acc__q i { flex-shrink: 0; font-size: 15px; color: var(--rv-text-3); transition: transform 300ms var(--rv-ui-ease); } .rv-acc__item[open]:not(.is-closing) > .rv-acc__q i { transform: rotate(180deg); } .rv-acc__a { padding: 0 20px 18px; font: 400 14px/1.65 var(--rv-font); color: var(--rv-text-2); } .rv-acc__a.is-anim { overflow: hidden; } .rv-acc__a > :first-child { margin-top: 0; } .rv-acc__a > :last-child { margin-bottom: 0; } .rv-acc__a p { margin: 0; } .rv-acc__a p + p { margin-top: 10px; } .rv-acc--group { gap: 0; border-radius: var(--rv-r-group); background: var(--rv-card-bg); overflow: hidden; } .rv-acc--group .rv-acc__item { border: 0; border-radius: 0; background: transparent; position: relative; } .rv-acc--group .rv-acc__item + .rv-acc__item::before { content: ''; position: absolute; top: 0; left: 20px; right: 0; height: 1px; background: var(--rv-line); } /* ============================================================ 12u. GRAFIK TAMBAHAN: DONAT, BATANG, BATANG MENDATAR, GARIS KECIL ============================================================ */ .rv-donut { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 24px 32px; outline: none; } .rv-donut:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 8px; border-radius: 12px; } .rv-donut__ring { position: relative; flex: 0 0 auto; width: 220px; height: 220px; max-width: 100%; } .rv-donut__ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; } .rv-donut__seg { fill: none; stroke: var(--rv-c, var(--rv-chart-8)); stroke-width: 13; cursor: pointer; stroke-dasharray: var(--rv-len, 0) 360; animation: rv-donut-draw 900ms var(--rv-ui-draw) both; animation-delay: calc(var(--rv-i, 0) * 70ms); transition: stroke-width var(--rv-d2) var(--rv-ui-ease), opacity var(--rv-d2) var(--rv-ui-ease); } .rv-donut.has-sel .rv-donut__seg { opacity: .28; } .rv-donut.has-sel .rv-donut__seg.is-sel { opacity: 1; stroke-width: 17; } .rv-donut__center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 0 44px; text-align: center; pointer-events: none; } .rv-donut__k { font: 500 13px/1.3 var(--rv-font); color: var(--rv-text-2); } .rv-donut__v { font: 700 22px/1.1 var(--rv-font); letter-spacing: -.01em; color: var(--rv-text); font-variant-numeric: tabular-nums; white-space: nowrap; } .rv-donut__s { font: 400 12.5px/1.3 var(--rv-font); color: var(--rv-text-2); font-variant-numeric: tabular-nums; } .rv-donut__legend { flex: 1 1 240px; display: grid; gap: 2px; margin: 0; max-width: 360px; } .rv-legend__btn { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--rv-text); text-align: left; font: 400 14px/1.3 var(--rv-font); cursor: pointer; transition: background var(--rv-d1) var(--rv-ui-ease), opacity var(--rv-d2) var(--rv-ui-ease); } .rv-legend__btn:hover { background: var(--rv-fill); } .rv-legend__btn:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: -2px; } .rv-legend__btn > span { flex: 1; min-width: 0; } .rv-legend__btn em { font-style: normal; color: var(--rv-text-2); font-variant-numeric: tabular-nums; } .rv-legend__btn b { min-width: 3.4em; text-align: right; } .rv-donut.has-sel .rv-legend__btn:not([aria-pressed="true"]) { opacity: .5; } .rv-legend__btn[aria-pressed="true"] { background: var(--rv-fill); } .rv-barchart { position: relative; outline: none; } .rv-barchart:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 8px; border-radius: 12px; } .rv-barchart__tip { position: relative; height: 64px; margin-bottom: 10px; } .rv-barchart__card { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 4px; padding: 8px 14px; border-radius: 14px; background: var(--rv-ink); color: var(--rv-on-ink); box-shadow: var(--rv-shadow-float); font: 400 13px/1.3 var(--rv-font); white-space: nowrap; font-variant-numeric: tabular-nums; pointer-events: none; transition: left 140ms var(--rv-ui-ease); } .rv-barchart__card.is-start { transform: none; } .rv-barchart__card.is-end { transform: translateX(-100%); } .rv-barchart__card b { font-weight: 700; } .rv-barchart__card > span { display: flex; flex-wrap: wrap; gap: 2px 12px; opacity: .9; } .rv-barchart__card i { display: inline-block; width: 8px; height: 8px; margin-right: 6px; border-radius: 2px; background: var(--rv-c); } .rv-barchart__plot { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 8px; height: 200px; cursor: pointer; touch-action: pan-y; -webkit-user-select: none; user-select: none; } .rv-barchart__col { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; } .rv-barchart__slot { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; } .rv-barchart__bar { display: flex; flex-direction: column-reverse; gap: 2px; width: 100%; max-width: 36px; height: var(--rv-h, 0%); min-height: 4px; border-radius: 9px 9px 5px 5px; overflow: hidden; transform-origin: bottom; animation: rv-rise 600ms var(--rv-ui-ease) both; animation-delay: calc(var(--rv-i, 0) * 45ms); transition: opacity var(--rv-d2) var(--rv-ui-ease); } .rv-barchart__bar > span { flex: 0 0 var(--rv-w, 100%); min-height: 2px; background: var(--rv-c, var(--rv-chart-1)); } .rv-barchart__col:not(.is-active) .rv-barchart__bar { opacity: .42; } .rv-barchart__col.is-future .rv-barchart__bar { opacity: 1; height: 26%; background: transparent; border: 1.5px dashed var(--rv-text-3); border-radius: 9px; } .rv-barchart__col.is-future.is-active .rv-barchart__bar { border-color: var(--rv-text-2); } .rv-barchart__lab { font: 400 12px/1 var(--rv-font); color: var(--rv-text-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .rv-barchart__col.is-today .rv-barchart__lab { color: var(--rv-text); font-weight: 700; } .rv-barchart__col.is-future .rv-barchart__lab { color: var(--rv-text-2); } .rv-barchart.is-locked .rv-barchart__col.is-active .rv-barchart__bar { box-shadow: 0 0 0 2px var(--rv-bg), 0 0 0 3.5px var(--rv-text-2); } .rv-hbars { display: grid; gap: 12px; } .rv-hbars__row { display: grid; grid-template-columns: minmax(84px, 140px) minmax(0, 1fr) auto; align-items: center; gap: 12px; } .rv-hbars__name { min-width: 0; font: 500 14px/1.3 var(--rv-font); color: var(--rv-text); overflow-wrap: anywhere; } .rv-hbars__bar { display: block; height: 10px; border-radius: var(--rv-r-pill); background: var(--rv-surface-2); overflow: hidden; } .rv-hbars__bar > i { display: block; height: 100%; width: var(--rv-w, 0%); border-radius: inherit; background: var(--rv-c, var(--rv-chart-1)); transform-origin: left center; animation: rv-grow 800ms var(--rv-ui-draw) both; } .rv-hbars__row:nth-child(2) .rv-hbars__bar > i { animation-delay: 60ms; } .rv-hbars__row:nth-child(3) .rv-hbars__bar > i { animation-delay: 120ms; } .rv-hbars__row:nth-child(4) .rv-hbars__bar > i { animation-delay: 180ms; } .rv-hbars__row:nth-child(n+5) .rv-hbars__bar > i { animation-delay: 240ms; } .rv-hbars__val { min-width: 3ch; text-align: right; font: 600 14px/1 var(--rv-font); color: var(--rv-text); font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .rv-hbars__row { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name val" "bar bar"; row-gap: 6px; } .rv-hbars__name { grid-area: name; } .rv-hbars__val { grid-area: val; } .rv-hbars__bar { grid-area: bar; } } .rv-spark { --rv-spark-c: var(--rv-accent); position: relative; display: block; width: 100%; min-width: 80px; height: 32px; margin-top: 12px; } .rv-spark--good { --rv-spark-c: var(--rv-success); } .rv-spark--bad { --rv-spark-c: var(--rv-danger); } .rv-spark svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } /* Muncul kiri ke kanan: tirai warna kartu ditarik ke kanan (transform = mulus di HP; clip-path patah-patah di Safari). */ .rv-spark::after { content: ''; position: absolute; inset: -6px -8px -6px 0; background: var(--rv-spark-bg, var(--rv-card-bg)); transform-origin: right center; animation: rv-unveil 1100ms cubic-bezier(0.22, 0.61, 0.36, 1) both; will-change: transform; pointer-events: none; } .rv-spark__line { fill: none; stroke: var(--rv-spark-c); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; } .rv-spark__area { fill: var(--rv-spark-c); opacity: .12; } .rv-spark__end { position: absolute; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: var(--rv-spark-c); box-shadow: 0 0 0 2px var(--rv-card-bg); animation: rv-fade-in 300ms var(--rv-ui-ease) 950ms both; } /* ============================================================ 13. MASUK BERJENJANG Keadaan awal cuma di bawah html.rv-js: JS gagal = isi tetep keliatan. Ditulis [class~="rv-js"] biar pemindai kelas /design/ gak nganggepnya komponen tanpa contoh (spesifisitasnya sama dengan .rv-js). ============================================================ */ html[class~="rv-js"] .rv-reveal:not(.is-in) { opacity: 0; transform: translateY(24px) scale(.98); } .rv-reveal.is-in { opacity: 1; transform: none; transition: opacity var(--rv-d4) var(--rv-ui-ease), transform var(--rv-d4) var(--rv-ui-ease); transition-delay: calc(var(--rv-i, 0) * 80ms); } /* Gambar unggulan: mengecil dikit + buram, lalu tajem. */ html[class~="rv-js"] .rv-reveal--media:not(.is-in) { opacity: 0; transform: scale(.97); filter: blur(4px); } .rv-reveal--media.is-in { opacity: 1; transform: none; filter: none; transition: opacity var(--rv-d4) var(--rv-ui-ease), transform var(--rv-d4) var(--rv-ui-ease), filter var(--rv-d4) var(--rv-ui-ease); transition-delay: calc(var(--rv-i, 0) * 80ms); } /* Animasi isi (bar, cincin, batang, langkah) nunggu wadahnya keliatan. */ html[class~="rv-js"] .rv-reveal:not(.is-in) .rv-progress > span, html[class~="rv-js"] .rv-reveal:not(.is-in) .rv-ring__val, html[class~="rv-js"] .rv-reveal:not(.is-in) .rv-signal span, html[class~="rv-js"] .rv-reveal:not(.is-in) .rv-bars span, html[class~="rv-js"] .rv-reveal:not(.is-in) .rv-steps li, html[class~="rv-js"] .rv-reveal:not(.is-in) .rv-segbar > span::before, html[class~="rv-js"] .rv-reveal:not(.is-in) .rv-stackbar, html[class~="rv-js"] .rv-reveal:not(.is-in) .rv-goal__bar > span, html[class~="rv-js"] .rv-reveal:not(.is-in) .rv-gauge__val, html[class~="rv-js"] .rv-reveal:not(.is-in) .rv-dots > span, html[class~="rv-js"] .rv-reveal:not(.is-in) .rv-hbars__bar > i { animation-play-state: paused; } /* Grafik yang digambar JS nunggu dirinya sendiri keliatan (JS nambah is-in). */ html[class~="rv-js"] .rv-donut:not(.is-in) .rv-donut__seg, html[class~="rv-js"] .rv-barchart:not(.is-in) .rv-barchart__bar, html[class~="rv-js"] .rv-spark:not(.is-in)::after, html[class~="rv-js"] .rv-spark:not(.is-in) .rv-spark__end { animation-play-state: paused; } /* ============================================================ 14. KEYFRAMES ============================================================ */ @keyframes rv-spin { to { transform: rotate(360deg); } } @keyframes rv-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes rv-unveil { from { transform: scaleX(1); } to { transform: scaleX(0); } } @keyframes rv-ring { from { stroke-dashoffset: 100; } } @keyframes rv-rise { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes rv-shimmer { to { transform: translateX(100%); } } @keyframes rv-drop-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } } @keyframes rv-tab-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes rv-settle { from { transform: scale(1.05); } to { transform: scale(1); } } @keyframes rv-pop { from { opacity: 0; transform: translateY(6px) scale(.96); } to { opacity: 1; transform: none; } } @keyframes rv-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } } @keyframes rv-donut-draw { from { stroke-dasharray: 0 360; } } @keyframes rv-menu-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } } @keyframes rv-sheet-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } @keyframes rv-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes rv-beat { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } } /* ============================================================ 15. REDUCED MOTION - cabut geraknya, kunci KEADAAN AKHIR (rule 62e) ============================================================ */ @media (prefers-reduced-motion: reduce) { .rv-btn, .rv-chip, .rv-card--link, .rv-row, .rv-check, .rv-toggle, .rv-toggle::after, .rv-seg__thumb, .rv-seg__btn, .rv-input, .rv-select, .rv-drop, .rv-drop__ico, .rv-sheet__scrim, .rv-sheet__panel { transition: none !important; } .rv-btn:active, .rv-chip:active, .rv-card--link:active { transform: none; } .rv-progress > span, .rv-ring .rv-ring__val, .rv-signal span, .rv-selbar.is-in { animation: none !important; transform: none; } .rv-reveal, .rv-reveal.is-in, .rv-reveal--media, .rv-reveal--media.is-in { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; } .rv-bars span, .rv-steps li, [data-rv-panel].is-in, .rv-carousel__slide.is-active > img { animation: none !important; transform: none; opacity: 1; } .rv-steps li.is-doing .rv-steps__dot { animation-duration: 1.6s !important; } .rv-strike li { transition: none !important; background-size: 100% 2px; } .rv-lift, .rv-lift:hover, .rv-promo__media img, .rv-product__media img, .rv-split__media img, .rv-plus, .rv-vtab, .rv-arrow, .rv-carousel__slide, .rv-3d { transition: none !important; transform: none !important; } .rv-rail__track { scroll-behavior: auto; } .rv-chart__guide, .rv-chart__dot, .rv-chart__tips { transition: none !important; } .rv-skel::after { animation: none; display: none; } .rv-spark::after { display: none; } .rv-btn.is-loading::before { animation-duration: 1.6s; } .rv-segbar > span::before, .rv-stackbar, .rv-goal__bar > span, .rv-gauge .rv-gauge__val, .rv-dots > span, .rv-hbars__bar > i, .rv-donut__seg, .rv-barchart__bar, .rv-spark svg, .rv-spark__end, .rv-spark::after, .rv-menu.is-open .rv-menu__pop, .rv-menu__scrim, .rv-countdown.is-danger { animation: none !important; } .rv-cardstack__item, .rv-announce, .rv-announce i, .rv-acc__q i, .rv-picker, .rv-picker__chev, .rv-radio, .rv-radio::after, .rv-menu__item, .rv-legend__btn, .rv-donut__seg, .rv-barchart__bar, .rv-barchart__card, .rv-countdown .rv-countdown__val { transition: none !important; } .rv-cardstack:hover .rv-cardstack__item:nth-child(1), .rv-cardstack:focus-within .rv-cardstack__item:nth-child(1) { transform: translate(-30px, 10px) rotate(-6deg); } .rv-cardstack:hover .rv-cardstack__item:nth-child(2), .rv-cardstack:focus-within .rv-cardstack__item:nth-child(2) { transform: none; } .rv-cardstack:hover .rv-cardstack__item:nth-child(3), .rv-cardstack:focus-within .rv-cardstack__item:nth-child(3) { transform: translate(30px, 10px) rotate(6deg); } .rv-announce:hover i { transform: none; } @media (max-width: 640px) { .rv-cardstack:hover .rv-cardstack__item:nth-child(1), .rv-cardstack:focus-within .rv-cardstack__item:nth-child(1) { transform: translate(-22px, 8px) rotate(-6deg); } .rv-cardstack:hover .rv-cardstack__item:nth-child(3), .rv-cardstack:focus-within .rv-cardstack__item:nth-child(3) { transform: translate(22px, 8px) rotate(6deg); } } }