/* ========================================================================== Fansys — sistem desain Material (tema gelap + emas) -------------------------------------------------------------------------- Nada visualnya hitam pekat dengan aksen emas mengikuti identitas logo: permukaan gelap bertingkat, garis tipis, dan kedalaman yang dibentuk oleh bayangan berlapis (elevation) alih-alih garis tebal. Aksen warna hanya muncul pada elemen yang bisa ditindaklanjuti. Tiga hal yang perlu diketahui sebelum mengubah berkas ini: 1. Seluruh warna merek berasal dari variabel `--brand`, `--brand-dark`, dan `--accent` yang ditimpa saat proses berjalan oleh applyBranding() di app.js. Karena itu jangan pernah menulis nilai heksadesimal merek secara langsung — pakai variabelnya, atau perubahan warna dari Panel Branding tidak akan ikut terpakai. 2. Nama kelas lama (.card, .stat, .badge, .btn, .alert, .shell, .sidebar, dan seterusnya) sengaja dipertahankan. 28 halaman HTML memakainya, dan mengganti nama kelas berarti menyunting semuanya tanpa manfaat nyata. Yang berubah adalah tampilannya, bukan kontraknya. 3. Animasi apa pun di berkas ini harus mati saat pengguna meminta `prefers-reduced-motion`. Aturan itu ada satu blok di bagian paling bawah; tambahkan animasi baru ke dalamnya. 4. Etalase publik (halaman dengan atau class="auth-page"> — beranda, katalog, produk, keranjang, toko mitra, halaman informasi, masuk/daftar) memakai lapisan gaya "boutique" tersendiri di bagian ETALASE, di bawah selektor `.shop-body`/`.auth-page`. Panel admin & dashboard mitra TIDAK disentuh lapisan ini — keduanya tetap memakai bentuk pil/shadow Material di atas. Jangan pindahkan gaya boutique ke selektor global (mis. `button, .btn` polos) atau dashboard ikut berubah tanpa diminta. ========================================================================== */ @import url('/assets/vendor/roboto/roboto.css'); @import url('/assets/vendor/playfair-display/playfair-display.css'); @import url('/assets/vendor/fontawesome/css/fontawesome.min.css'); @import url('/assets/vendor/fontawesome/css/solid.min.css'); @import url('/assets/vendor/fontawesome/css/regular.min.css'); @import url('/assets/vendor/fontawesome/css/brands.min.css'); :root { /* -- warna merek (ditimpa applyBranding) -------------------------------- */ --brand: #cda86a; --brand-dark: #b3894a; --brand-light: #2b2314; --brand-ink: #241a08; /* teks gelap di atas permukaan/tombol berwarna emas */ --accent: #e8c07d; /* -- permukaan: hitam dengan tingkat keabuan bertahap -------------------- */ --bg: #0a0a0a; --surface: #141414; --surface-1: #181818; --surface-2: #1e1e1e; --surface-3: #262626; --border: #2a2a2a; --border-strong: #3a3a3a; /* -- teks --------------------------------------------------------------- */ --text: #f2ece0; --text-2: #c9bfa8; --muted: #8f8672; /* -- warna semantik ----------------------------------------------------- */ --ok: #4ade80; --ok-bg: #12291b; --warn: #fbbf24; --warn-bg: #33230a; --danger: #f87171; --danger-bg: #331414; --info: #60a5fa; --info-bg: #101f33; /* -- bentuk (shape scale Material) -------------------------------------- */ --r-xs: 6px; --r-sm: 10px; --r: 14px; --r-lg: 20px; --r-xl: 28px; --r-full: 999px; --radius: var(--r); /* alias lama */ /* -- elevation ---------------------------------------------------------- */ --e1: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .32); --e2: 0 2px 4px rgba(0, 0, 0, .32), 0 4px 10px rgba(0, 0, 0, .34); --e3: 0 4px 8px rgba(0, 0, 0, .34), 0 10px 24px rgba(0, 0, 0, .38); --e4: 0 8px 16px rgba(0, 0, 0, .40), 0 20px 44px rgba(0, 0, 0, .44); --e5: 0 12px 28px rgba(0, 0, 0, .44), 0 32px 72px rgba(0, 0, 0, .50); --shadow: var(--e1); /* alias lama */ /* -- motion (kurva easing standar Material) ----------------------------- */ --ease: cubic-bezier(.2, 0, 0, 1); --ease-emph: cubic-bezier(.2, 0, 0, 1); --ease-out: cubic-bezier(0, 0, 0, 1); --t-fast: 120ms; --t: 220ms; --t-slow: 400ms; --topbar-h: 60px; } * { box-sizing: border-box; } ::selection { background: color-mix(in srgb, var(--brand) 35%, transparent); color: var(--text); } html { scroll-behavior: smooth; } /* ------------------------------------------------------------ scrollbar Tipis dan bernada emas, bukan bawaan browser yang tebal & putih — berlaku di seluruh halaman (Firefox lewat scrollbar-color, Chrome/Edge/ Safari lewat ::-webkit-scrollbar). */ * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } *::-webkit-scrollbar { width: 10px; height: 10px; } *::-webkit-scrollbar-track { background: transparent; } *::-webkit-scrollbar-thumb { background-color: var(--border-strong); border-radius: var(--r-full); border: 2px solid var(--bg); background-clip: padding-box; } *::-webkit-scrollbar-thumb:hover { background-color: var(--brand); } body { margin: 0; background: var(--bg); color: var(--text); font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--brand); text-decoration: none; transition: color var(--t-fast) var(--ease); } a:hover { color: var(--brand-dark); text-decoration: none; } h1, h2, h3, h4 { margin: 0 0 .5rem; line-height: 1.22; font-weight: 500; letter-spacing: -.01em; } h1 { font-size: 1.65rem; font-weight: 500; } h2 { font-size: 1.2rem; } h3 { font-size: 1rem; } p { margin: 0 0 .75rem; color: var(--text-2); } small { color: var(--muted); } strong, b { font-weight: 500; color: var(--text); } /* Font Awesome: sedikit turun agar sejajar dengan garis dasar teks. */ .fa-solid, .fa-regular, .fa-brands { vertical-align: -.05em; } /* ------------------------------------------------------------------ fokus Cincin fokus dipisah dari :focus biasa supaya tidak muncul saat elemen diklik dengan tetikus — hanya saat navigasi papan ketik. */ :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: var(--r-xs); } :focus:not(:focus-visible) { outline: none; } /* ========================================================================== Tata letak aplikasi (topbar + sidebar + main) ========================================================================== */ .topbar { background: var(--surface); color: var(--text); padding: 0 1.1rem; height: var(--topbar-h); display: flex; align-items: center; gap: .9rem; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--border); box-shadow: var(--e1); } .topbar .brand { font-weight: 500; font-size: 1.08rem; letter-spacing: -.01em; color: var(--text); display: inline-flex; align-items: center; gap: .55rem; } .topbar .brand span { color: var(--text); } .topbar .spacer { flex: 1; } .topbar a { color: var(--text); } .topbar .who { font-size: .82rem; text-align: right; line-height: 1.35; color: var(--muted); } .topbar .who strong { color: var(--text); font-weight: 500; } .shell { display: flex; min-height: calc(100vh - var(--topbar-h)); align-items: flex-start; } .sidebar { width: 244px; flex: 0 0 244px; background: var(--surface); border-right: 1px solid var(--border); padding: .9rem .6rem 2rem; position: sticky; top: var(--topbar-h); max-height: calc(100vh - var(--topbar-h)); overflow-y: auto; scrollbar-width: thin; } /* Item nav memakai bentuk pil penuh — ciri khas navigation rail Material 3. */ .sidebar a { display: flex; align-items: center; gap: .7rem; padding: .58rem .9rem; border-radius: var(--r-full); color: var(--text-2); font-size: .9rem; font-weight: 400; margin-bottom: 2px; position: relative; overflow: hidden; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .sidebar a i { width: 1.15rem; text-align: center; font-size: .95rem; color: var(--muted); transition: color var(--t-fast) var(--ease); } .sidebar a:hover { background: var(--surface-2); color: var(--text); } .sidebar a:hover i { color: var(--text-2); } .sidebar a.active { background: var(--brand-light); color: var(--brand); font-weight: 500; } .sidebar a.active i { color: var(--brand); } .sidebar .group { font-size: .7rem; text-transform: uppercase; letter-spacing: .09em; color: var(--muted); margin: 1.1rem .95rem .35rem; font-weight: 500; } main { flex: 1; padding: 1.5rem 1.6rem 4rem; min-width: 0; } .page-head { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap; } .page-head .spacer { flex: 1; } .page-head h1 { display: flex; align-items: center; gap: .6rem; } .page-head h1 i { color: var(--brand); font-size: .9em; } /* ========================================================================== Kartu & petak ========================================================================== */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1.15rem 1.25rem; box-shadow: var(--e1); margin-bottom: 1.1rem; transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); } .card h2, .card h3 { margin-top: 0; } .card.flat { box-shadow: none; } .card.raised { box-shadow: var(--e3); border-color: transparent; } /* Dipakai pada daftar yang bisa diklik; jangan pasang ke kartu statis. */ .card.hoverable:hover { box-shadow: var(--e3); transform: translateY(-2px); } .grid { display: grid; gap: 1.1rem; } .grid.c2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } .grid.c3 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); } .grid.c4 { grid-template-columns: repeat(auto-fit, minmax(185px, 1fr)); } .stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r); padding: 1rem 1.1rem; box-shadow: var(--e1); min-width: 0; transition: box-shadow var(--t) var(--ease), transform var(--t) var(--ease); } .stat:hover { box-shadow: var(--e2); transform: translateY(-1px); } .stat .label { font-size: .74rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; font-weight: 500; display: flex; align-items: center; gap: .4rem; } .stat .value { font-size: 1.6rem; font-weight: 500; margin-top: .2rem; letter-spacing: -.025em; color: var(--text); font-variant-numeric: tabular-nums; overflow-wrap: break-word; } .stat .sub { font-size: .8rem; color: var(--muted); } .stat.brand { background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: var(--brand-ink); border-color: transparent; box-shadow: var(--e2); } .stat.brand .label, .stat.brand .sub { color: color-mix(in srgb, var(--brand-ink) 72%, transparent); } .stat.brand .value { color: var(--brand-ink); } /* ========================================================================== Tabel ========================================================================== */ table { width: 100%; border-collapse: collapse; font-size: .89rem; } th, td { padding: .68rem .6rem; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; } th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 500; background: transparent; white-space: nowrap; border-bottom: 1px solid var(--border-strong); } tbody tr { transition: background var(--t-fast) var(--ease); } tbody tr:hover { background: var(--surface-2); } tbody tr:last-child td { border-bottom: 0; } td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .table-wrap { overflow-x: auto; margin: 0 -.25rem; padding: 0 .25rem; } /* ========================================================================== Badge / chip ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: var(--r-full); font-size: .74rem; font-weight: 500; line-height: 1.5; background: var(--surface-3); color: var(--text-2); white-space: nowrap; } .badge.ok, .badge.active, .badge.delivered, .badge.paid, .badge.released, .badge.verified { background: var(--ok-bg); color: var(--ok); } .badge.warn, .badge.pending, .badge.pending_payment, .badge.submitted, .badge.requested, .badge.frozen, .badge.waiting_verification { background: var(--warn-bg); color: var(--warn); } .badge.danger, .badge.cancelled, .badge.rejected, .badge.terminated, .badge.reversed, .badge.returned { background: var(--danger-bg); color: var(--danger); } .badge.info, .badge.shipped, .badge.processing, .badge.packed, .badge.open { background: var(--info-bg); color: var(--info); } .badge.master { background: #332708; color: #f3ce85; } .badge.brand { background: var(--brand-light); color: var(--brand); } /* ========================================================================== Formulir ========================================================================== */ label { display: block; font-size: .82rem; font-weight: 500; margin-bottom: .3rem; color: var(--text-2); } input, select, textarea { width: 100%; padding: .62rem .8rem; border: 1px solid var(--border-strong); border-radius: var(--r-sm); font: inherit; font-size: .92rem; background: var(--surface); color: var(--text); transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } input::placeholder, textarea::placeholder { color: var(--muted); } input:hover, select:hover, textarea:hover { border-color: var(--muted); } /* Garis fokus dibuat dari box-shadow, bukan outline, supaya sudut membulatnya ikut dan tidak ada lompatan tata letak. */ input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); } select { appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238f8672'%3E%3Cpath d='M4.4 6.2 8 9.8l3.6-3.6 1.1 1.1L8 12 3.3 7.3z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .55rem center; background-size: 1.1rem; padding-right: 2.1rem; } input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--brand); } textarea { resize: vertical; min-height: 4.5rem; } .field { margin-bottom: .9rem; } .row { display: grid; gap: .8rem; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } /* -- toggle tampil/sembunyi kata sandi ------------------------------------ */ .pw-wrap { position: relative; } .pw-wrap input { padding-right: 2.6rem; } .pw-toggle { position: absolute; top: 0; right: 0; bottom: 0; width: 2.6rem; display: grid; place-items: center; font-size: .95rem; background: transparent; color: var(--muted); box-shadow: none; border: 0; padding: 0; border-radius: 0 var(--r-sm) var(--r-sm) 0; } .pw-toggle:hover { background: transparent; color: var(--text-2); box-shadow: none; } /* ========================================================================== Tombol — filled / tonal / outlined / text, plus efek riak ========================================================================== */ button, .btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .58rem 1.15rem; border: 1px solid transparent; background: var(--brand); color: var(--brand-ink); border-radius: var(--r-full); font: inherit; font-size: .89rem; font-weight: 500; letter-spacing: .01em; cursor: pointer; text-align: center; white-space: nowrap; box-shadow: var(--e1); transition: box-shadow var(--t) var(--ease), background var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } button:hover, .btn:hover { background: var(--brand-dark); color: var(--brand-ink); box-shadow: var(--e2); } button:active, .btn:active { transform: scale(.97); box-shadow: var(--e1); } button:disabled, .btn.disabled { opacity: .42; cursor: not-allowed; box-shadow: none; transform: none; } button:disabled:hover { background: var(--brand); } /* Tonal — latar merek yang sangat terang, untuk aksi sekunder yang sering dipakai. */ button.ghost, .btn.ghost { background: var(--brand-light); color: var(--brand); box-shadow: none; } button.ghost:hover, .btn.ghost:hover { background: color-mix(in srgb, var(--brand) 30%, black); color: var(--brand); box-shadow: var(--e1); } /* Outlined — aksi netral yang tetap terlihat sebagai tombol. */ button.neutral, .btn.neutral { background: var(--surface); color: var(--text-2); border-color: var(--border-strong); box-shadow: none; } button.neutral:hover, .btn.neutral:hover { background: var(--surface-2); color: var(--text); border-color: var(--muted); } /* Text — aksi tersier, tanpa latar sampai disentuh. */ button.text, .btn.text { background: transparent; color: var(--brand); box-shadow: none; } button.text:hover, .btn.text:hover { background: var(--brand-light); color: var(--brand); box-shadow: none; } button.danger, .btn.danger { background: var(--danger); color: var(--brand-ink); } button.danger:hover, .btn.danger:hover { background: color-mix(in srgb, var(--danger) 82%, black); color: #fff; } button.accent, .btn.accent { background: var(--accent); color: var(--brand-ink); } button.accent:hover, .btn.accent:hover { background: color-mix(in srgb, var(--accent) 85%, #000); color: var(--brand-ink); } button.sm, .btn.sm { padding: .34rem .8rem; font-size: .8rem; gap: .35rem; } button.lg, .btn.lg { padding: .78rem 1.7rem; font-size: .98rem; } button.block, .btn.block { width: 100%; } /* Tombol ikon bulat — dipakai di topbar dan kartu produk. */ button.icon, .btn.icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; background: transparent; color: var(--text-2); box-shadow: none; flex: 0 0 auto; } button.icon:hover, .btn.icon:hover { background: var(--surface-2); color: var(--text); box-shadow: none; } button.icon.sm, .btn.icon.sm { width: 32px; height: 32px; font-size: .82rem; } /* Tombol aksi mengambang (FAB) — hanya satu per layar. */ .fab { position: fixed; right: 1.5rem; bottom: 1.5rem; z-index: 90; width: 58px; height: 58px; padding: 0; border-radius: var(--r-lg); font-size: 1.15rem; box-shadow: var(--e4); } .fab:hover { box-shadow: var(--e5); } /* Riak. Elemen disuntikkan oleh app.js saat tombol ditekan, lalu dibuang sendiri setelah animasinya selesai. */ .ripple { position: absolute; border-radius: 50%; transform: scale(0); background: currentColor; opacity: .28; pointer-events: none; animation: ripple-out 560ms var(--ease-out) forwards; } @keyframes ripple-out { to { transform: scale(2.6); opacity: 0; } } /* ========================================================================== Alert ========================================================================== */ .alert { display: flex; gap: .7rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--r-sm); margin-bottom: .9rem; font-size: .89rem; border: 1px solid transparent; line-height: 1.5; } .alert > i:first-child { font-size: 1rem; margin-top: .12rem; flex: 0 0 auto; } .alert.info { background: var(--info-bg); border-color: color-mix(in srgb, var(--info) 35%, transparent); color: var(--info); } .alert.ok { background: var(--ok-bg); border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok); } .alert.warn { background: var(--warn-bg); border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn); } .alert.danger { background: var(--danger-bg); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); } /* ========================================================================== Bar kemajuan ========================================================================== */ .bar { height: 8px; border-radius: var(--r-full); background: var(--surface-3); overflow: hidden; margin: .4rem 0; } .bar > i { display: block; height: 100%; background: var(--brand); border-radius: var(--r-full); transition: width var(--t-slow) var(--ease); } .bar > i.warn { background: var(--warn); } .bar > i.ok { background: var(--ok); } /* Indikator memuat tak tentu — dipakai di kepala kartu saat menunggu data. */ .progress-line { height: 3px; background: var(--surface-3); overflow: hidden; border-radius: var(--r-full); } .progress-line::after { content: ''; display: block; height: 100%; width: 40%; background: var(--brand); border-radius: var(--r-full); animation: indeterminate 1.4s var(--ease) infinite; } @keyframes indeterminate { 0% { transform: translateX(-100%); } 100% { transform: translateX(300%); } } /* * Area unggah seret-lepas. * * Berupa