/* ========================================================= DAILY EGG — DESIGN SYSTEM Dipakai bersama di semua halaman (admin/kurir/affiliator). Palet warna & tipografi mengikuti referensi UI dashboard kurir. ========================================================= */ :root{ --bg:#FFFFFF; --surface:#FFFFFF; --surface-alt:#E4EDEA; --border:#DAE5E1; --green-900:#0E3B2E; --green-700:#1B6F54; --green-100:#DCEDE5; /* Varian "dingin" khusus gradasi hero (.hero & .hero-native) - tetap berbasis HIJAU primary (bukan biru/teal dominan seperti percobaan sebelumnya), cuma undertone-nya digeser tipis ke arah dingin & jarak lightness kedua stop-nya sengaja dibikin lebih DEKAT dari --green-900/700 asli supaya gradasinya tidak terlalu kontras (lebih halus/menyatu). Dipisah dari --green-900/700 biasa karena keduanya masih dipakai di tempat lain (teks, badge, banner) yang tidak perlu ikut berubah. */ --green-cold-900:#0F332A; --green-cold-700:#1B5B4A; --orange-500:#E8871E; --orange-600:#BE650D; --orange-100:#FCEBD6; --blue-600:#356E88; --blue-100:#E1EEF2; --amber-600:#8C6A2A; --amber-100:#F2EEDD; --red-600:#B23A28; --red-100:#F8E2DC; --ink:#1C2A26; --ink-muted:#54655D; --ink-soft:#7A8B83; /* Alias teks/ikon dari --green-900 dipakai di elemen yang duduk DI ATAS --surface/--bg (bukan di atas warna solid hijau) - contoh: judul topbar, angka statistik, ikon tombol. Dipisah dari --green-900 "asli" (yang tetap dipakai sebagai BACKGROUND solid di hero/login/tombol, warnanya TIDAK perlu ikut berubah di dark mode) karena keduanya butuh arah override yang beda pas dark mode: --green-900 tetap gelap (background), --green-900-fg jadi terang (supaya kebaca di atas background gelap). */ --green-900-fg:var(--green-900); --shadow-sm:0 1px 2px rgba(14,59,46,.04); --shadow-md:0 4px 12px rgba(14,59,46,.06); --radius-sm:10px; --radius-md:10px; --radius-lg:22px; --radius-full:999px; --font-display:'Manrope',sans-serif; --font-body:'Inter',sans-serif; } /* ========================================================= MODE GELAP Diaktifkan lewat atribut data-theme="dark" di (dirender server-side dari kolom users.theme, lihat includes/layout-top.php & includes/auth.php - jadi sudah aktif SEBELUM CSS ini sempat kebaca, tidak ada kedipan mode terang sekejap). Ditoggle dari dropdown profil topbar (lihat .dropdown-toggle-row/.theme-switch di bawah & handler-nya di script.js), disimpan ke akun lewat actions/simpan-tema.php. Base warna sesuai request: hitam pekat (#000) buat --bg. --surface & --surface-alt SENGAJA dibuat SEDIKIT lebih terang dari #000 murni (bukan #000 juga) - kalau card/dropdown/bottom-nav dibuat PERSIS sama hitamnya dengan halaman di belakangnya, batas antar elemen jadi tidak kelihatan sama sekali (semua "menyatu" jadi satu bidang hitam polos), jadi tetap dikasih perbedaan gelap tipis supaya elemen² itu tetap kebaca sebagai lapisan terpisah (comfortable, bukan cuma "hitam semua"). Warna aksen (hijau/oranye/biru/amber/merah) yang tadinya dipakai sebagai TEKS/IKON (kombinasi *-600/700/900 di atas *-100 tint, atau di atas --surface) diterangkan supaya kontrasnya cukup di atas latar gelap - versi lama terlalu gelap (dirancang buat teks di atas putih) jadi nyaris tidak kebaca kalau dipertahankan apa adanya di atas hitam. --green-900 "asli" (dipakai background hero/login/tombol) SENGAJA TIDAK diubah - hijau tua itu sudah cukup kontras di atas hitam sebagai BLOK warna solid, dan tetap menjaga identitas hijau brand yang sama di kedua mode. REVISI: --green-900-fg (teks utama seperti judul, angka statistik, nilai) sebelumnya hijau terang (#5FE3AC) yang kerasa "ijo-ijo" dan norak dipakai di banyak tempat - sekarang diganti putih-lembut (#F2F2F0) senada dengan --ink, jadi teks utama netral kayak di mode terang (item hitam -> putih), warna hijau/oranye/dll disisakan cuma buat elemen aksen (badge, ikon, tombol) bukan teks utama. Semua warna aksen (green-700/orange-500-600/blue-600/amber-600/red-600) juga diturunkan sedikit saturasi & kecerahannya (tidak neon) supaya lebih nyaman dipandang lama-lama di atas latar gelap, termasuk tombol oranye (.btn-primary/.hero-btn) yang sebelumnya kelewat terang/menyilaukan di atas hitam. --bg/--surface/--surface-alt juga digeser dikit dari hitam pekat murni (#000) ke abu sangat gelap supaya kontras dengan teks putih tidak terlalu tajam. */ :root[data-theme="dark"]{ --bg:#0A0A0A; --surface:#151515; --surface-alt:#202020; --border:#2C2C2C; --green-900-fg:#F2F2F0; --green-700:#3FA980; --green-100:rgba(63,169,128,.16); --orange-500:#D9894A; --orange-600:#E3A462; --orange-100:rgba(217,137,74,.16); --blue-600:#6FA8C9; --blue-100:rgba(111,168,201,.16); --amber-600:#D1AD6B; --amber-100:rgba(209,173,107,.16); --red-600:#D97F6C; --red-100:rgba(217,127,108,.18); --ink:#EDEDED; --ink-muted:#A8A8A8; --ink-soft:#797979; --shadow-sm:0 1px 2px rgba(0,0,0,.5); --shadow-md:0 4px 14px rgba(0,0,0,.6); } *{ box-sizing:border-box; margin:0; padding:0; -webkit-user-select: none; /* Safari/Chrome lama */ -moz-user-select: none; /* Firefox lama */ -ms-user-select: none; /* IE/Edge lama */ user-select: none; -webkit-tap-highlight-color: transparent; } html{ -webkit-text-size-adjust:100%; overscroll-behavior:none; touch-action:manipulation; } /* Sembunyikan scrollbar di semua elemen yang bisa di-scroll (halaman utama, modal-box, bottom-sheet, dst) - app native gak ada garis/scrollbar abu-abu nempel di pinggir layar, ini salah satu tanda paling ketara "ini web" kalau masih kelihatan (apalagi di desktop/tablet). Scroll TETAP jalan normal, cuma indikator visualnya yang dibuang. */ *{ scrollbar-width:none; -ms-overflow-style:none; } /* Firefox & IE/Edge lama */ *::-webkit-scrollbar{ display:none; width:0; height:0; } /* Chrome/Safari/Edge modern */ body{ font-family:var(--font-body); background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; line-height:1.5; min-height:100vh; overscroll-behavior:none; /* no rubber-band bounce/pull-to-refresh browser - salah satu hal paling ketara "ini web" */ /* touch-action:manipulation mematikan double-tap-to-zoom (delay 300ms tap juga ikut hilang) - salah satu tanda paling ketara "ini web" kalau masih nyala. Pinch-zoom sendiri sudah dimatikan lewat "user-scalable=no" di meta viewport (lihat includes/layout-top.php), tapi iOS Safari sejak versi 10 SENGAJA tetap izinkan pinch-zoom demi aksesibilitas walau viewport bilang begitu - makanya masih dibantu script kecil di script.js yang cegah gesture pinch & double-tap. */ touch-action:manipulation; } a{ text-decoration:none; color:inherit; } button{ font:inherit; cursor:pointer; border:none; background:none; color:inherit; } ul{ list-style:none; } img{ max-width:100%; display:block; } .icon{ width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; } .icon-sm{ width:15px; height:15px; } .icon-xs{ width:11px; height:11px; } .icon-lg{ width:26px; height:26px; } .tier-badge svg{ fill:currentColor; stroke:none; } /* Ikon titik 3 (trigger dropdown profil di topbar) dibuat dari 3 , jadi perlu FILLED (bukan cuma outline stroke seperti ikon lain) supaya kelihatan sebagai titik padat, bukan lingkaran kosong. */ .icon-dots{ fill:currentColor; stroke:none; } a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:2px solid var(--orange-500); outline-offset:2px; border-radius:var(--radius-sm); } @media (prefers-reduced-motion: reduce){ *{ transition-duration:.01ms !important; animation-duration:.01ms !important; } } /* ============ LAYOUT ============ */ .app{ display:flex; min-height:100vh; position:relative; } /* .nav-item/.nav-count di bawah ini AWALNYA dibuat buat sidebar (sudah dihapus - lihat .bottom-nav di bawah, gantinya), tapi classnya masih dipakai di tempat lain sebagai daftar baris yang bisa diklik (dikombinasi dengan .list-row, lihat admin-panel.php, customer-detail.php dkk) - SENGAJA TIDAK dihapus. */ .nav-item{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--radius-sm); color:rgba(247,243,236,.68); font-size:.9rem; font-weight:500; transition:background .15s ease, color .15s ease; } .nav-item svg{ opacity:.85; } .nav-item:hover{ background:rgba(255,255,255,.06); color:#fff; } .nav-item.is-active{ background:rgba(255,255,255,.1); color:#fff; } .nav-count{ margin-left:auto; background:var(--orange-500); color:var(--green-900); font-size:.68rem; font-weight:700; padding:2px 7px; border-radius:var(--radius-full); } /* ============ MAIN ============ */ .main{ flex:1; min-width:0; display:flex; flex-direction:column; } /* ============ BOTTOM NAVBAR (v6 — adaptive-width soft pill) ============ Tab bar persistent ala app native, cuma buat admin & kurir (lihat $bottomNavItems di includes/layout-top.php). Affiliator tidak punya ini - menunya ada di dropdown-profile topbar. Semua tab (termasuk "Tambah") dirender SAMA - tidak ada lagi tab spesial berbentuk bulat/FAB. Konsep: bar NEMPEL rata ke tepi kiri/kanan/bawah layar, full width, garis tipis di atas. Icon-only secara default. Tab yang lagi aktif dapat "pill" background LEMBUT (bukan warna solid) yang muncul dengan SCALE IN dan hilang dengan SCALE OUT di tempatnya sendiri (bukan geser/translate pindah slot). Pill-nya (.bottom-nav-item-inner) inline-flex shrink-to-fit - lebarnya SELALU ngikutin isinya persis (icon-only pas nonaktif, icon+label pas aktif), TIDAK PERNAH dipatok ke angka tebakan. Label direveal lewat trik grid-template-columns 0fr -> 1fr (BUKAN max-width ke angka hardcode kayak versi sebelumnya) - teknik ini otomatis tahu lebar ASLI teksnya berapa pun panjangnya, jadi label PANJANG SEKALIPUN tidak akan pernah kepotong, sekaligus tetap bisa di-transition mulus. Label tab aktif muncul DI SAMPING icon (bukan di bawah). SLOT tiap tab (.bottom-nav-item) content-sized (flex:0 0 auto, BUKAN flex-grow) - lebarnya juga murni ngikutin pill di dalamnya. Jarak antar tab dibentuk justify-content:space-between di .bottom-nav-track: begitu 1 pill melebar (label panjang), sisa ruang gap otomatis berkurang -> tab lain ikut geser mendekat SEPERLUNYA SAJA sesuai panjang label yang aktif (label pendek = geser dikit, label panjang = geser lebih jauh) - efek "adaptif" ini murni hasil flexbox+grid biasa, TANPA JS ngukur/ngitung lebar teks apa pun. Trigger pill/label-nya cuma class .is-active yang ditoggle PHP (render awal) atau script.js (SPA - lihat applyPageContent() di script.js, itu HANYA toggle class, tidak pernah sentuh CSS ini). */ .bottom-nav{ position:fixed; left:0; right:0; bottom:0; z-index:45; display:flex; align-items:stretch; background:var(--surface); border-top:1px solid var(--border); /* Padding kiri-kanan SENGAJA 0 di sini (bukan angka tebakan seperti 8px sebelumnya) - "padding tepi" yang keliatan sekarang justru dihasilkan otomatis oleh justify-content:space-evenly di .bottom-nav-track di bawah, jadi jaraknya OTOMATIS SAMA PERSIS dengan gap antar icon (bukan dua angka beda yang harus disamakan manual tiap kali salah satunya diubah). */ padding:11px 0 calc(11px + env(safe-area-inset-bottom)); height:calc(68px + env(safe-area-inset-bottom)); transform:translateY(0); opacity:1; transition:transform .34s cubic-bezier(.34,1.56,.64,1), opacity .22s ease; } /* Easing masuknya .bottom-nav pakai "back" curve (cubic-bezier(.34,1.56,.64,1)) yang SENGAJA overshoot - nilai translateY sempat lewat 0 (dikit minus) sebelum settle balik, itu yang bikin efek "muncul lalu mantul". Karena navbar ini position:fixed & bottom:0, saat overshoot dia sempat kegeser ke ATAS melebihi posisi restnya sepersekian detik - dan karena bawahnya HANYA setinggi element ini (tidak lebih), momen itu bikin celah tipis nongol di tepi paling bawah layar yang nembus ke konten di baliknya (bocor). Fix: ::after nempel pas di bawah .bottom-nav, warna SAMA (surface), ikut translateY bareng induknya (inherit lewat parent transform, bukan dianimasikan sendiri) - jadi begitu navbar "mantul" naik dikit, sisa ruang di bawahnya tetap ketutup warna solid ini, BUKAN nembus. Tingginya digenerasikan lebih dari cukup (24px) karena overshoot bezier ini secara matematis maksimal cuma exceed ~15-20% dari total jarak translate, jauh di bawah itu. */ .bottom-nav::after{ content:''; position:absolute; left:0; right:0; top:100%; height:24px; background:var(--surface); } .bottom-nav.bottom-nav-hidden{ transform:translateY(100%); opacity:0; pointer-events:none; transition:transform .26s cubic-bezier(.4,0,.2,1), opacity .18s ease; } /* space-evenly (bukan space-between lagi) - flexbox otomatis kasih ruang yang SAMA BESAR di kedua tepi track DAN di antara tiap tab, jadi "padding" kiri-kanan yang kelihatan = gap antar icon, murni hasil flexbox (tidak perlu dihitung/disamakan manual). */ .bottom-nav-track{ position:relative; display:flex; flex:1; justify-content:space-evenly; } .bottom-nav-item{ position:relative; flex:0 0 auto; min-width:0; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); transition:color .22s ease; } /* Slot tiap tab CONTENT-SIZED (flex-basis:auto, grow/shrink 0) - lebarnya murni ngikutin isinya sendiri (icon-only pas nonaktif, icon+label pas aktif), BUKAN dipaksa rata pakai flex-grow. Jarak antar tab dibentuk justify-content:space-between di .bottom-nav-track: begitu satu pill melebar buat nampilin label panjang, sisa ruang buat gap otomatis berkurang -> tab-tab lain ikut geser mendekat SEPERLUNYA SAJA (gak lebih dari yang dibutuhkan). Label pendek -> pill dikit lebih lebar -> tab lain geser dikit doang. Semua ini murni hasil flexbox biasa, bukan angka lebar yang di-hardcode. */ .bottom-nav-item.is-active{ color:var(--green-900-fg); } /* Pembungkus icon+label - inline-flex shrink-to-fit, jadi acuan bentuk & ukuran pill (padding SIMETRIS di semua sisi). Lebarnya otomatis ngikutin .bottom-nav-label di bawah, yang di-reveal pakai trik grid (BUKAN max-width tebakan) - jadi pill SELALU pas dengan panjang teks apa pun, tidak pernah kepotong. */ .bottom-nav-item-inner{ position:relative; z-index:1; display:inline-flex; align-items:center; justify-content:center; padding:12px 20px; border-radius:var(--radius-full); font-family:var(--font-display); font-weight:700; font-size:.64rem; } /* Pill lembut - warna tint soft (bukan solid), MUNCUL/HILANG dengan scale di tempatnya sendiri (bukan geser pindah posisi). Di-inset 0 dari inner (bukan dari slot), jadi otomatis selalu SEPAS icon+label + padding di atas, konsisten di semua sisi. */ .bottom-nav-item-inner::before{ content:''; position:absolute; inset:0; z-index:-1; border-radius:inherit; background:var(--green-100); opacity:0; transform:scale(.6); transition:opacity .24s ease, transform .3s cubic-bezier(.34,1.56,.64,1); } .bottom-nav-item.is-active .bottom-nav-item-inner::before{ opacity:1; transform:scale(1); } .bottom-nav-item svg{ width:20px; height:20px; flex-shrink:0; transition:transform .3s cubic-bezier(.34,1.56,.64,1); } .bottom-nav-item.is-active svg{ transform:scale(1.05); } .bottom-nav-item:active svg{ transform:scale(.82); transition-duration:.12s; } /* Label di SAMPING kanan icon (bukan di bawah) - direveal lewat grid-template-columns 0fr -> 1fr (BEDA dari max-width ke angka tebakan seperti sebelumnya: teknik grid ini "tahu" persis lebar asli teksnya - berapa pun panjangnya - jadi labelnya SELALU tampil utuh, tidak pernah kepotong). PENTING (perf): grid-template-columns & margin-left itu LAYOUT properties - meng-animasikannya bikin browser reflow ULANG SELURUH .bottom-nav-track (semua tab lain ikut dihitung ulang posisinya) di SETIAP FRAME animasi. Ini SELALU terjadi bersamaan dengan momen paling berat di app (fetch + swap #page-content + re-exec script halaman baru saat pindah page - lihat navigateTo() di script.js), jadi di HP low-end numpuk jadi jank/lag kerasa banget. Makanya sengaja DIBIKIN INSTAN (tanpa transition) - cuma properti transform/ opacity di bawah (pill & icon) yang tetap dianimasikan karena itu compositor-only, murah, tidak memicu reflow. */ .bottom-nav-label{ display:grid; grid-template-columns:0fr; margin-left:0; overflow:hidden; } .bottom-nav-item.is-active .bottom-nav-label{ grid-template-columns:1fr; margin-left:6px; } .bottom-nav-label span{ min-width:0; overflow:hidden; white-space:nowrap; font-size:.68rem; opacity:0; transition:opacity .16s ease; } .bottom-nav-item.is-active .bottom-nav-label span{ opacity:1; } /* Ruang di bawah konten supaya baris terakhir tidak ketutupan bottom navbar fixed. */ body.has-bottom-nav .content{ padding-bottom:calc(88px + env(safe-area-inset-bottom)); } /* Halaman peta full-layar (mis. rute.php) sembunyikan topbar-nya sendiri demi tampilan penuh - bottom navbar ikut disembunyikan di sini juga. */ body.page-fullscreen-map .bottom-nav{ display:none; } .topbar{ position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px; padding:14px 18px; background:var(--bg); border-bottom:1px solid var(--border); } .icon-btn{ width:38px; height:38px; display:flex; align-items:center; justify-content:center; border-radius:var(--radius-full); color:var(--green-900-fg); position:relative; transition:background .15s ease; flex-shrink:0; } .icon-btn:hover{ background:var(--surface-alt); } .ping{ position:absolute; top:8px; right:9px; width:7px; height:7px; background:var(--orange-500); border-radius:50%; } /* Badge angka notif belum dibaca di atas icon lonceng topbar - beda dari .ping (cuma titik) karena sekarang ikon notif langsung ke notifikasi.php (bukan dropdown lagi), jadi jumlahnya perlu kelihatan tanpa harus diklik. */ .icon-btn-badge{ position:absolute; top:2px; right:2px; min-width:16px; height:16px; padding:0 4px; display:flex; align-items:center; justify-content:center; background:var(--orange-500); color:#fff; font-size:.62rem; font-weight:700; border-radius:var(--radius-full); line-height:1; border:2px solid var(--bg); } .topbar-logo{ width:32px; height:32px; border-radius:9px; flex-shrink:0; object-fit:cover; transition:transform .15s ease; } .topbar-logo-btn{ display:flex; padding:0; line-height:0; flex-shrink:0; border-radius:9px; } .topbar-logo-btn:active .topbar-logo{ transform:scale(.92); } .topbar-date{ display:flex; align-items:baseline; gap:6px; font-size:.84rem; color:var(--ink-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .topbar-day{ font-weight:700; color:var(--green-900-fg); font-family:var(--font-display); } .topbar-dot{ opacity:.5; } .topbar-title{ font-family:var(--font-display); font-weight:800; font-size:1rem; color:var(--green-900-fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; flex-shrink:0; } .dropdown-wrap{ position:relative; } .dropdown{ position:fixed; right:10px; top:75px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); min-width:230px; padding:8px; max-width: calc(100% - 20px); opacity:0; visibility:hidden; transform:translateY(-6px); transition:opacity .18s ease, transform .18s ease, visibility .18s; z-index:45; } .dropdown.is-open{ opacity:1; visibility:visible; transform:translateY(0); } .dropdown-head{ font-family:var(--font-display); font-weight:700; font-size:.84rem; padding:8px 10px 10px; color:var(--green-900-fg); } .notif-item{ display:flex; gap:10px; padding:9px 10px; border-radius:var(--radius-sm); align-items:flex-start; } .notif-item:hover{ background:var(--surface-alt); } .notif-item-icon{ width:32px; height:32px; border-radius:50%; background:var(--surface-alt); color:var(--ink-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .notif-dot{ width:7px; height:7px; margin-top:6px; margin-left:auto; border-radius:50%; background:var(--orange-500); flex-shrink:0; } .notif-body{ display:flex; flex-direction:column; gap:2px; min-width:0; } .notif-title{ font-size:.81rem; font-weight:600; color:var(--ink); } .notif-desc{ font-size:.77rem; color:var(--ink-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .notif-time{ font-size:.7rem; color:var(--ink-soft); margin-top:2px; } .notif-empty{ font-size:.8rem; color:var(--ink-muted); padding:14px 10px; text-align:center; } .dropdown-link{ display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:var(--radius-sm); font-size:.84rem; font-weight:500; color:var(--ink); } .dropdown-link svg{ color:var(--ink-muted); width:17px; height:17px; } .dropdown-link:hover{ background:var(--surface-alt); } .dropdown-link-danger{ color:var(--red-600); } .dropdown-link-danger svg{ color:var(--red-600); } .dropdown-sep{ height:1px; background:var(--border); margin:6px 4px; } /* Baris toggle "Mode Gelap" di dropdown profil - bentuknya sengaja disamakan persis dengan .dropdown-link (padding/radius/gap sama) supaya kelihatan seperti satu keluarga item menu, cuma di ujung kanan ada switch (bukan chevron/link biasa) karena ini aksi toggle instan, bukan navigasi ke halaman lain.