/* ========================================================================== SOP Feryshop — design system Mendukung tema terang & gelap melalui atribut data-theme pada . ========================================================================== */ :root { --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "Cascadia Code", "SFMono-Regular", Consolas, monospace; --radius-sm: 8px; --radius: 12px; --radius-lg: 18px; --radius-full: 999px; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.08); --shadow: 0 4px 12px rgba(15, 23, 42, 0.08), 0 2px 4px rgba(15, 23, 42, 0.04); --shadow-lg: 0 18px 40px rgba(15, 23, 42, 0.14), 0 4px 12px rgba(15, 23, 42, 0.06); --sidebar-w: 290px; --header-h: 68px; /* * Lorong kiri-kanan yang disisakan untuk tombol navigasi sub-page yang * melayang di tengah tinggi halaman. Dipakai bersama oleh `.content` * (padding kiri-kanan) dan `.subpager-btn` (lebar maksimum), sehingga * tombol yang kini selalu berlabel tidak pernah menimpa teks. * Nilainya dikecilkan bertahap di media query (lihat app.css). */ --pager-rail: 216px; --ease: cubic-bezier(0.22, 1, 0.36, 1); } /* ------------------------------------------------------------ light theme */ :root, html[data-theme="light"] { color-scheme: light; --bg: #f4f6fb; --bg-soft: #eaeef7; --surface: #ffffff; --surface-2: #f8fafc; --surface-3: #eef2f9; --border: #e2e8f0; --border-strong: #cbd5e1; --text: #0f172a; --text-soft: #475569; --text-muted: #7c8aa0; --accent: #4f46e5; --accent-hover: #4338ca; --accent-soft: #eef2ff; --accent-text: #ffffff; --success: #15803d; --success-soft: #dcfce7; --warning: #b45309; --warning-soft: #fef3c7; --danger: #b91c1c; --danger-soft: #fee2e2; --info: #1d4ed8; --info-soft: #dbeafe; --overlay: rgba(15, 23, 42, 0.45); --code-bg: #0f172a; --code-text: #e2e8f0; --ring: rgba(79, 70, 229, 0.35); } /* ------------------------------------------------------------- dark theme */ html[data-theme="dark"] { color-scheme: dark; --bg: #0b1020; --bg-soft: #0f172b; --surface: #141b30; --surface-2: #1a2338; --surface-3: #1f2a44; --border: #26314b; --border-strong: #3a4763; --text: #eef2ff; --text-soft: #b6c2dc; --text-muted: #8794b0; --accent: #7c7cf8; --accent-hover: #9494ff; --accent-soft: #1e2447; --accent-text: #0b1020; --success: #4ade80; --success-soft: #12301f; --warning: #fbbf24; --warning-soft: #3a2a08; --danger: #f87171; --danger-soft: #3a1516; --info: #60a5fa; --info-soft: #12233f; --overlay: rgba(3, 6, 15, 0.65); --code-bg: #080d1a; --code-text: #d7e0f5; --ring: rgba(124, 124, 248, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow: 0 4px 14px rgba(0, 0, 0, 0.45); --shadow-lg: 0 20px 45px rgba(0, 0, 0, 0.55); } /* ------------------------------------------------------------------- base */ * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; font-family: var(--font-sans); background: var(--bg); color: var(--text); -webkit-font-smoothing: antialiased; transition: background-color 0.25s var(--ease), color 0.25s var(--ease); } h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -0.02em; } p { margin: 0; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } ::selection { background: var(--accent); color: var(--accent-text); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* --------------------------------------------------------------- controls */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 14px; font-weight: 560; white-space: nowrap; transition: background 0.18s var(--ease), border-color 0.18s var(--ease), transform 0.12s var(--ease), opacity 0.18s; } /* * `display: inline-flex` di atas mengalahkan atribut `hidden` bawaan peramban, * jadi tombol yang seharusnya tersembunyi tetap tampil. Aturan ini * mengembalikan arti `hidden` untuk semua tombol. */ .btn[hidden] { display: none !important; } .btn:hover { background: var(--surface-3); border-color: var(--border-strong); } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; } .btn-primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); } .btn-danger { color: var(--danger); border-color: var(--border); background: var(--surface); } .btn-danger:hover { background: var(--danger-soft); border-color: var(--danger); } .btn-ghost { background: transparent; border-color: transparent; } .btn-ghost:hover { background: var(--surface-3); border-color: var(--border); } .btn-sm { padding: 7px 11px; font-size: 13px; border-radius: var(--radius-sm); } .btn-icon { padding: 9px; width: 38px; height: 38px; } .btn-block { width: 100%; } /* ----------------------------------------------------------------- brand */ /* * Petak lambang merek. * * Logo Feryshop dirancang untuk latar GELAP: salah satu lengkungnya putih dan * huruf namanya juga putih, sehingga keduanya hilang bila ditaruh langsung di * latar terang. Karena itu lambangnya selalu duduk di atas petak navy gelap — * di tema terang maupun gelap — supaya tampilannya konsisten dan tetap terbaca. * * Dipakai sebagai `` (lihat app.html / admin.html / index.html); ukuran * dasarnya boleh ditimpa per halaman, mis. `.sidebar-head .brand-mark`. */ .brand-mark { width: 34px; height: 34px; flex: 0 0 auto; border-radius: 9px; padding: 5px; display: grid; place-items: center; object-fit: contain; background: linear-gradient(150deg, #16294a, #060b16); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.09); } .input, .select, .textarea { width: 100%; padding: 11px 13px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); color: var(--text); transition: border-color 0.15s, box-shadow 0.15s, background 0.15s; } .input::placeholder, .textarea::placeholder { color: var(--text-muted); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--ring); } .textarea { min-height: 120px; resize: vertical; line-height: 1.65; } .select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: calc(100% - 18px) 50%, calc(100% - 13px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 34px; } .field { display: flex; flex-direction: column; gap: 7px; } .field label { font-size: 13px; font-weight: 560; color: var(--text-soft); } .field-hint { font-size: 12px; color: var(--text-muted); } /* ----------------------------------------------------------------- chips */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full); font-size: 12px; font-weight: 560; background: var(--surface-3); color: var(--text-soft); border: 1px solid var(--border); } .chip-accent { background: var(--accent-soft); color: var(--accent); border-color: transparent; } .chip-success { background: var(--success-soft); color: var(--success); border-color: transparent; } .chip-warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; } .chip-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; } /* ----------------------------------------------------------------- cards */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); } /* ------------------------------------------------------------- theme toggle */ .theme-toggle { position: relative; display: inline-flex; align-items: center; width: 62px; height: 32px; padding: 3px; border-radius: var(--radius-full); border: 1px solid var(--border); background: var(--surface-3); flex: 0 0 auto; } .theme-toggle .knob { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: var(--shadow-sm); display: grid; place-items: center; transition: transform 0.3s var(--ease); font-size: 13px; line-height: 1; } html[data-theme="dark"] .theme-toggle .knob { transform: translateX(30px); } .theme-toggle .knob .icon-sun, .theme-toggle .knob .icon-moon { transition: opacity 0.2s, transform 0.3s var(--ease); position: absolute; } html[data-theme="light"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(-90deg) scale(0.6); } html[data-theme="dark"] .theme-toggle .icon-sun { opacity: 0; transform: rotate(90deg) scale(0.6); } /* ------------------------------------------------------------------ toast */ .toast-stack { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 10px; z-index: 200; pointer-events: none; } .toast { pointer-events: auto; min-width: 250px; max-width: 380px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); box-shadow: var(--shadow-lg); font-size: 14px; color: var(--text); animation: toast-in 0.28s var(--ease); } .toast.success { border-left-color: var(--success); } .toast.error { border-left-color: var(--danger); } .toast.warn { border-left-color: var(--warning); } .toast.hide { animation: toast-out 0.22s var(--ease) forwards; } @keyframes toast-in { from { opacity: 0; transform: translateX(18px) scale(0.97); } to { opacity: 1; transform: none; } } @keyframes toast-out { to { opacity: 0; transform: translateX(18px) scale(0.97); } } /* ------------------------------------------------------------------ modal */ .modal-backdrop { position: fixed; inset: 0; background: var(--overlay); backdrop-filter: blur(3px); display: grid; place-items: center; padding: 24px; z-index: 150; animation: fade-in 0.18s var(--ease); } .modal { width: 100%; max-width: 520px; max-height: 88vh; overflow: auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); animation: modal-in 0.24s var(--ease); } .modal-wide { max-width: 860px; } .modal-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid var(--border); } .modal-body { padding: 20px; display: flex; flex-direction: column; gap: 16px; } .modal-foot { display: flex; justify-content: flex-end; gap: 10px; padding: 16px 20px; border-top: 1px solid var(--border); background: var(--surface-2); } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } } /* Penutupan yang halus: latar memudar, kartu menyusut sedikit ke atas. */ .modal-backdrop.closing { animation: fade-out 0.15s var(--ease) forwards; pointer-events: none; } .modal-backdrop.closing .modal { animation: modal-out 0.15s var(--ease) forwards; } @keyframes fade-out { to { opacity: 0; } } @keyframes modal-out { to { opacity: 0; transform: translateY(-6px) scale(0.985); } } /* * Dialog pilihan (mis. "perubahan belum disimpan"). Lebih ringkas dari modal * biasa dan diberi garis aksen di atas agar alasannya langsung terbaca. */ .modal-choice { max-width: 460px; } .modal-choice .modal-foot { flex-wrap: wrap; } .modal-choice.tone-warning { border-top: 3px solid var(--warning); } /* Input dengan tombol di dalamnya (mis. tampilkan/sembunyikan kata sandi). */ .input-affix { position: relative; display: flex; align-items: center; } .input-affix .input { padding-right: 42px; width: 100%; } .affix-btn { position: absolute; right: 6px; display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--text-muted); cursor: pointer; transition: background 0.15s, color 0.15s; } .affix-btn:hover { background: var(--surface-3); color: var(--text); } .affix-btn.is-on { color: var(--accent); } .affix-btn:focus-visible { outline: 2px solid var(--ring); outline-offset: 1px; } /* --------------------------------------------------------------- skeleton */ .skeleton { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 37%, var(--surface-3) 63%); background-size: 400% 100%; animation: shimmer 1.4s ease infinite; border-radius: var(--radius-sm); } @keyframes shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } /* ---------------------------------------------------------------- scrollbar */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: var(--radius-full); border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); background-clip: content-box; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }