/* ══════════════════════════════════════════════════════════════ Zitec-Daz Theme — Korporat Maritim & Energi Diterapkan lewat [data-theme="zitec-daz"] pada Palet: Azure #007dc5 (primary) — warna brand Azure tua #005e94 / #1369ba Sky #4dbeee (secondary) · #94d8f5 (sky muda) Navy #0c2340 (permukaan gelap) · #004178 (navy biru) Emas #ecc971 (aksen hangat) · #ee8c10 (oranye) Abu #58595b / #97989b Kanvas #f4f7fa / #eaf1f7 Bahasa desain: putih lapang & editorial, tipografi Inter dengan tracking longgar, label eyebrow huruf besar bergaris azure, kartu radius 16px berbingkai rambut, tombol pil 999px, CTA panah, permukaan gelap navy pekat tanpa ornamen "grid cyber". ══════════════════════════════════════════════════════════════ */ /* ════════════════════════════════════════════════════════ DASHBOARD ════════════════════════════════════════════════════════ */ [data-theme="zitec-daz"] .dashboard-body { background: #f4f7fa; color: #1f2937; } [data-theme="zitec-daz"] .sidebar { width: 260px; background: linear-gradient(180deg, #0c2340 0%, #081a2f 100%); border-right: none; box-shadow: 4px 0 32px rgba(12,35,64,.16); } [data-theme="zitec-daz"] .sidebar-brand { padding: 1.15rem 1.25rem .95rem; border-bottom: 1px solid rgba(0,125,197,.28); } [data-theme="zitec-daz"] .sidebar-brand-icon { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #007dc5, #4dbeee); color: #fff; box-shadow: 0 4px 16px rgba(0,125,197,.4); } [data-theme="zitec-daz"] .sidebar-brand-text { color: #eef4f9; font-weight: 700; letter-spacing: .3px; } [data-theme="zitec-daz"] .sidebar-user-avatar { background: linear-gradient(135deg, #007dc5, #4dbeee); } [data-theme="zitec-daz"] .sidebar-nav-label { color: rgba(148,216,245,.55); letter-spacing: 1.6px; } [data-theme="zitec-daz"] .sidebar-nav-item { gap: .85rem; border-radius: 0; transition: background .2s, color .2s; } [data-theme="zitec-daz"] .sidebar-nav-item:hover { background: rgba(0,125,197,.16); color: #94d8f5; } [data-theme="zitec-daz"] .sidebar-nav-item.active { background: rgba(0,125,197,.24); color: #cfeafb; } [data-theme="zitec-daz"] .sidebar-nav-item.active::before { content: ''; position: absolute; left: 0; top: 20%; width: 3px; height: 60%; background: linear-gradient(180deg, #4dbeee, #007dc5); border-radius: 0 4px 4px 0; transform: none; } [data-theme="zitec-daz"] .sidebar-nav-item.text-danger { color: rgba(248,113,113,.75) !important; } [data-theme="zitec-daz"] .sidebar-nav-item.text-danger:hover { background: rgba(239,68,68,.12); color: #f87171 !important; } [data-theme="zitec-daz"] .sidebar-copyright { color: rgba(238,244,249,.35); border-top-color: rgba(0,125,197,.2); } [data-theme="zitec-daz"] .main-wrapper { margin-left: 260px; } [data-theme="zitec-daz"] .topbar { background: #fff; border-bottom: 1px solid #e2e9f1; box-shadow: 0 1px 12px rgba(12,35,64,.06); } [data-theme="zitec-daz"] .topbar-title { color: #0c2340; font-weight: 600; } [data-theme="zitec-daz"] .topbar-user-btn { border-color: #e2e9f1; color: #334155; } [data-theme="zitec-daz"] .topbar-user-btn:hover { background: #f4f7fa; border-color: #007dc5; } [data-theme="zitec-daz"] .topbar-avatar { background: linear-gradient(135deg, #007dc5, #4dbeee); } [data-theme="zitec-daz"] .sidebar-toggle { color: #64748b; } [data-theme="zitec-daz"] .dashboard-card { background: #fff; border-color: #e2e9f1; border-radius: 16px; box-shadow: 0 1px 12px rgba(12,35,64,.06); } [data-theme="zitec-daz"] .dashboard-card:hover { border-color: #9fd3ef; box-shadow: 0 6px 26px rgba(12,35,64,.1); } [data-theme="zitec-daz"] .dashboard-card-header { background: linear-gradient(135deg, #f4f7fa, #eaf1f7); border-color: #e2e9f1; } [data-theme="zitec-daz"] .stat-card { background: #fff; border-color: #e2e9f1; border-radius: 16px; box-shadow: 0 1px 12px rgba(12,35,64,.06); } [data-theme="zitec-daz"] .stat-value { color: #0c2340; } [data-theme="zitec-daz"] .stat-card-primary .stat-icon { background: rgba(0,125,197,.1); color: #007dc5; } [data-theme="zitec-daz"] .stat-card-primary::before { background: #007dc5; } [data-theme="zitec-daz"] .sidebar-widget { background: #fff; border-color: #e2e9f1; } [data-theme="zitec-daz"] .sidebar-widget-title { border-color: #e2e9f1; color: #64748b; } [data-theme="zitec-daz"] .form-control, [data-theme="zitec-daz"] .form-select { background-color: #fff; border-color: #d6e0ea; color: #1f2937; } [data-theme="zitec-daz"] .form-control:focus, [data-theme="zitec-daz"] .form-select:focus { border-color: #007dc5; box-shadow: 0 0 0 3px rgba(0,125,197,.16); } [data-theme="zitec-daz"] .input-group-text { background: #f4f7fa; border-color: #d6e0ea; color: #64748b; } [data-theme="zitec-daz"] .form-check-input:checked { background-color: #007dc5; border-color: #007dc5; } [data-theme="zitec-daz"] .table { color: #334155; } [data-theme="zitec-daz"] .table th { color: #64748b; } [data-theme="zitec-daz"] .table-hover > tbody > tr:hover > * { background-color: rgba(0,125,197,.05); } [data-theme="zitec-daz"] .dropdown-menu { background: #fff; border-color: #e2e9f1; box-shadow: 0 8px 32px rgba(12,35,64,.12); } [data-theme="zitec-daz"] .dropdown-item:hover { background: #f4f7fa; color: #007dc5; } [data-theme="zitec-daz"] .border { border-color: #e2e9f1 !important; } [data-theme="zitec-daz"] .bg-light { background-color: #f4f7fa !important; } [data-theme="zitec-daz"] .text-muted { color: #58595b !important; } [data-theme="zitec-daz"] .btn-primary { background: #007dc5; border: none; border-radius: 999px; box-shadow: 0 4px 16px rgba(0,125,197,.3); } [data-theme="zitec-daz"] .btn-primary:hover { background: #005e94; box-shadow: 0 6px 24px rgba(0,125,197,.4); transform: translateY(-1px); } [data-theme="zitec-daz"] .btn-outline-secondary { border-color: #d6e0ea; color: #58595b; border-radius: 999px; } [data-theme="zitec-daz"] .btn-outline-secondary:hover { background: #f4f7fa; border-color: #007dc5; color: #007dc5; } /* Dropdown di navbar publik tetap gelap */ [data-theme="zitec-daz"] .navbar .dropdown-menu { background: rgba(12,35,64,.97); border-color: rgba(0,125,197,.35); border-radius: 12px; } [data-theme="zitec-daz"] .navbar .dropdown-item { color: #d6e6f2; } [data-theme="zitec-daz"] .navbar .dropdown-item:hover, [data-theme="zitec-daz"] .navbar .dropdown-item:focus { background: rgba(0,125,197,.28); color: #fff; } @media (max-width: 991.98px) { [data-theme="zitec-daz"] .sidebar { transform: translateX(-100%); } [data-theme="zitec-daz"] .sidebar.show { transform: translateX(0); } [data-theme="zitec-daz"] .main-wrapper { margin-left: 0 !important; } } /* ════════════════════════════════════════════════════════ SITUS PUBLIK ════════════════════════════════════════════════════════ */ [data-theme="zitec-daz"] body { background: #fff; color: #3f4550; } /* ── Navbar: tinggi lapang, navy pekat saat scroll, garis azure ── */ [data-theme="zitec-daz"] #mainNav { padding: 1.35rem 0; } [data-theme="zitec-daz"] #mainNav.scrolled, [data-theme="zitec-daz"] #mainNav.nav-solid { background: rgba(12,35,64,.97) !important; backdrop-filter: blur(18px); box-shadow: 0 6px 30px rgba(12,35,64,.3); border-bottom: 1px solid rgba(0,125,197,.35); padding: .65rem 0; } [data-theme="zitec-daz"] .navbar-brand-text { font-weight: 700; letter-spacing: .3px; color: #fff; transition: color .4s ease; } [data-theme="zitec-daz"] .brand-icon { color: #4dbeee; transition: color .4s ease; } /* ══════════════════════════════════════════════════════════════ MENU NAVBAR Pola: teks Title Case 16px/400 (bukan huruf besar), jarak antar item 28px, garis bawah 1px yang melebar 0 → 100%, chevron 6×6px yang berputar 45° → -135° saat submenu terbuka, panel submenu putih radius 12px lebar 220px yang muncul saat hover. Header transparan di atas, lalu berubah putih saat di-scroll (link ikut berubah jadi azure) dengan animasi turun dari atas. ══════════════════════════════════════════════════════════════ */ /* ── Link menu ────────────────────────────────────────────── */ [data-theme="zitec-daz"] .navbar-nav .nav-link { position: relative; overflow: hidden; /* menyembunyikan garis bawah sebelum melebar */ padding: .45rem 0 !important; font-size: 1rem; font-weight: 400; line-height: 1.4; letter-spacing: 0; text-transform: none; border-radius: 0; background: none !important; color: #fff !important; transition: color .35s ease; } /* Garis bawah tipis: lebar 0 → 100% */ [data-theme="zitec-daz"] .navbar-nav .nav-link::before { content: ''; position: absolute; left: 0; bottom: 0; width: 0; height: 1px; background: currentColor; transition: width .35s ease; } [data-theme="zitec-daz"] .navbar-nav .nav-link:hover::before, [data-theme="zitec-daz"] .navbar-nav .nav-link.active::before, [data-theme="zitec-daz"] .navbar-nav .nav-item.dropdown:hover > .nav-link::before, [data-theme="zitec-daz"] .navbar-nav .nav-link.show::before { width: 100%; } [data-theme="zitec-daz"] .navbar-nav .nav-link:hover, [data-theme="zitec-daz"] .navbar-nav .nav-link:focus { color: #4dbeee !important; } [data-theme="zitec-daz"] .navbar-nav .nav-link.active { color: #4dbeee !important; font-weight: 600; } /* Jarak antar item — 28px seperti pola menu horizontal */ @media (min-width: 992px) { [data-theme="zitec-daz"] .navbar-nav { gap: 28px !important; align-items: center; } [data-theme="zitec-daz"] .navbar-nav .nav-item { display: flex; align-items: center; height: 34px; } } /* ── Chevron submenu (mengganti caret segitiga bawaan) ───── */ [data-theme="zitec-daz"] .navbar .nav-link.dropdown-toggle { padding-right: 22px !important; } [data-theme="zitec-daz"] .navbar .nav-link.dropdown-toggle::after { content: ''; position: absolute; right: 4px; top: 50%; width: 6px; height: 6px; margin: 0; border: solid currentColor; border-width: 0 2px 2px 0; border-top: 0; border-left: 0; transform: translateY(-70%) rotate(45deg); transition: transform .5s ease; vertical-align: initial; } [data-theme="zitec-daz"] .navbar .nav-item.dropdown:hover > .nav-link.dropdown-toggle::after, [data-theme="zitec-daz"] .navbar .nav-link.dropdown-toggle.show::after { transform: translateY(-25%) rotate(-135deg); } /* ── Panel submenu: putih, radius 12px, lebar 220px ──────── */ [data-theme="zitec-daz"] .navbar .dropdown-menu { background: #fff !important; border: none; border-radius: 12px; width: 220px; min-width: 220px; padding: 0; margin-top: 0; overflow: hidden; box-shadow: 0 6px 24px rgba(12,35,64,.14), 0 1px 3px rgba(12,35,64,.1); opacity: 0; transform: translateY(8px); transition: opacity .3s ease, transform .3s ease; } [data-theme="zitec-daz"] .navbar .dropdown-menu.show { opacity: 1; transform: translateY(0); } [data-theme="zitec-daz"] .navbar .dropdown-item { padding: 14px 20px; font-size: .95rem; font-weight: 400; color: #007dc5 !important; border-radius: 0; transition: background .25s ease, color .25s ease; } [data-theme="zitec-daz"] .navbar .dropdown-item:hover, [data-theme="zitec-daz"] .navbar .dropdown-item:focus { background: #007dc5 !important; color: #fff !important; } /* Buka submenu saat hover (desktop) — panel menempel langsung di bawah link */ @media (min-width: 992px) { [data-theme="zitec-daz"] .navbar .nav-item.dropdown:hover > .dropdown-menu { display: block; opacity: 1; transform: translateY(0); } /* Menu berada di sisi kanan navbar — panel dirapatkan ke kanan agar tidak terpotong tepi layar. */ [data-theme="zitec-daz"] .navbar .dropdown-menu { top: 100%; right: 0; left: auto; } } /* ── Hamburger: 3 garis → silang ─────────────────────────── */ [data-theme="zitec-daz"] .navbar-toggler { border: none; padding: .25rem; box-shadow: none !important; width: 34px; height: 34px; } [data-theme="zitec-daz"] .navbar-toggler-icon { width: 26px; height: 22px; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23ffffff' stroke-width='3' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e"); transition: background-image .4s ease; } [data-theme="zitec-daz"] .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%234dbeee' stroke-width='3' stroke-linecap='round' d='M7 7l16 16M23 7L7 23'/%3e%3c/svg%3e"); } /* Nama situs yang panjang tidak boleh mendorong tombol hamburger turun */ @media (max-width: 575.98px) { [data-theme="zitec-daz"] .navbar-brand { max-width: calc(100% - 52px); min-width: 0; } [data-theme="zitec-daz"] .navbar-brand-text { font-size: .95rem; line-height: 1.2; min-width: 0; white-space: normal; /* biarkan membungkus, bukan terpotong */ } } /* ── Header berubah putih saat di-scroll ─────────────────── */ @keyframes zdazNavDrop { from { opacity: 0; transform: translate3d(0, -100%, 0); } to { opacity: 1; transform: none; } } [data-theme="zitec-daz"] #mainNav.scrolled, [data-theme="zitec-daz"] #mainNav.nav-solid { background: #fff !important; backdrop-filter: none; box-shadow: 0 1px 0 rgba(12,35,64,.1), 0 4px 20px rgba(12,35,64,.08); border-bottom: none; padding: .55rem 0; animation: zdazNavDrop .8s cubic-bezier(.215,.61,.355,1); } [data-theme="zitec-daz"] #mainNav.scrolled .navbar-brand-text, [data-theme="zitec-daz"] #mainNav.nav-solid .navbar-brand-text { color: #0c2340; } [data-theme="zitec-daz"] #mainNav.scrolled .brand-icon, [data-theme="zitec-daz"] #mainNav.nav-solid .brand-icon { color: #007dc5; } [data-theme="zitec-daz"] #mainNav.scrolled .navbar-nav .nav-link, [data-theme="zitec-daz"] #mainNav.nav-solid .navbar-nav .nav-link { color: #007dc5 !important; } [data-theme="zitec-daz"] #mainNav.scrolled .navbar-nav .nav-link:hover, [data-theme="zitec-daz"] #mainNav.nav-solid .navbar-nav .nav-link:hover, [data-theme="zitec-daz"] #mainNav.scrolled .navbar-nav .nav-link.active, [data-theme="zitec-daz"] #mainNav.nav-solid .navbar-nav .nav-link.active { color: #4dbeee !important; } /* Logo: filter putih dilepas agar versi berwarna tampil di header putih */ [data-theme="zitec-daz"] #mainNav.scrolled .navbar-logo, [data-theme="zitec-daz"] #mainNav.nav-solid .navbar-logo { filter: none; } [data-theme="zitec-daz"] #mainNav.scrolled .navbar-toggler-icon, [data-theme="zitec-daz"] #mainNav.nav-solid .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23007dc5' stroke-width='3' stroke-linecap='round' d='M4 8h22M4 15h22M4 22h22'/%3e%3c/svg%3e"); } /* Ikon silang tetap menang saat menu terbuka di header putih */ [data-theme="zitec-daz"] #mainNav.scrolled .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon, [data-theme="zitec-daz"] #mainNav.nav-solid .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23007dc5' stroke-width='3' stroke-linecap='round' d='M7 7l16 16M23 7L7 23'/%3e%3c/svg%3e"); } /* ── Menu versi mobile ───────────────────────────────────── */ @media (max-width: 991.98px) { [data-theme="zitec-daz"] .navbar-collapse.show, [data-theme="zitec-daz"] .navbar-collapse.collapsing { background: #fff; border-radius: 12px; margin-top: .75rem; padding: .5rem 0; box-shadow: 0 10px 30px rgba(12,35,64,.18); } [data-theme="zitec-daz"] .navbar-nav .nav-link { padding: .85rem 1.25rem !important; color: #007dc5 !important; } [data-theme="zitec-daz"] .navbar-nav .nav-link::before { left: 1.25rem; } [data-theme="zitec-daz"] .navbar-nav .nav-link:hover::before, [data-theme="zitec-daz"] .navbar-nav .nav-link.active::before { width: calc(100% - 2.5rem); } [data-theme="zitec-daz"] .navbar .dropdown-menu { width: 100%; min-width: 0; box-shadow: none; opacity: 1; transform: none; background: #f4f7fa !important; border-radius: 0; } /* Tombol dropdown adalah