/* ========================================================================= YM NAVIGATION — sistem navigasi tunggal (desktop + mobile) Menggantikan MeanMenu sepenuhnya. Prinsip: - Satu breakpoint tunggal: 991.98px. - Desktop dan mobile TIDAK pernah aktif bersamaan. - Panel mobile adalah anak langsung (bukan di dalam wrapper), sehingga tidak pernah terpotong oleh overflow/transform induk. - Skala z-index terpusat, tidak ada nilai acak. - Tanpa hack CSS, tanpa !important kecuali untuk mematikan aturan tema lama yang tidak boleh diubah (style.css / bootstrap). ========================================================================= */ :root { --ym-z-header: 1000; --ym-z-nav-scrim: 1090; --ym-z-nav-panel: 1100; --ym-nav-gold: #fdc709; --ym-nav-ink: #0b1225; --ym-nav-ease: cubic-bezier(.22, 1, .36, 1); } /* --------------------------------------------------------------------- */ /* Header */ /* --------------------------------------------------------------------- */ .navbar-area { z-index: var(--ym-z-header); } .ym-navbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: nowrap; padding: 0; } .ym-navbar .navbar-brand { flex: 0 0 auto; margin-right: 0; } .ym-navbar .navbar-brand img { height: 62px; width: auto; } /* --------------------------------------------------------------------- */ /* Menu desktop */ /* --------------------------------------------------------------------- */ .ym-nav-desktop { flex: 1 1 auto; min-width: 0; display: flex; justify-content: flex-end; } .ym-nav-desktop > .navbar-nav { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; align-items: center; margin: 0; padding: 0; list-style: none; } /* --------------------------------------------------------------------- */ /* Tombol hamburger */ /* --------------------------------------------------------------------- */ .ym-nav-toggle { display: none; flex: 0 0 auto; width: 46px; height: 46px; padding: 0; border: 1px solid rgba(255, 255, 255, .35); border-radius: 12px; background: rgba(255, 255, 255, .08); cursor: pointer; position: relative; z-index: calc(var(--ym-z-nav-panel) + 1); transition: background .25s ease, border-color .25s ease; } .ym-nav-toggle:focus-visible { outline: 3px solid rgba(253, 199, 9, .6); outline-offset: 2px; } .navbar-area.is-sticky .ym-nav-toggle { border-color: rgba(11, 18, 37, .18); background: rgba(11, 18, 37, .05); } .ym-nav-toggle .ym-bar { position: absolute; left: 50%; width: 22px; height: 2px; margin-left: -11px; border-radius: 2px; background: #fff; transition: transform .3s var(--ym-nav-ease), opacity .2s linear, background .25s ease; } .navbar-area.is-sticky .ym-nav-toggle .ym-bar { background: var(--ym-nav-ink); } .ym-nav-toggle .ym-bar:nth-child(1) { top: 15px; } .ym-nav-toggle .ym-bar:nth-child(2) { top: 22px; } .ym-nav-toggle .ym-bar:nth-child(3) { top: 29px; } /* State terbuka: bar berubah jadi X. Sumber kebenaran = atribut aria-expanded, sehingga ikon TIDAK MUNGKIN desync dengan panel. */ .ym-nav-toggle[aria-expanded="true"] .ym-bar { background: #fff; } .ym-nav-toggle[aria-expanded="true"] .ym-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); } .ym-nav-toggle[aria-expanded="true"] .ym-bar:nth-child(2) { opacity: 0; } .ym-nav-toggle[aria-expanded="true"] .ym-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* --------------------------------------------------------------------- */ /* Panel mobile */ /* --------------------------------------------------------------------- */ .ym-nav-scrim { position: fixed; inset: 0; z-index: var(--ym-z-nav-scrim); background: rgba(6, 10, 22, .6); opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s ease; } .ym-nav-panel { position: fixed; inset: 0; z-index: var(--ym-z-nav-panel); display: flex; flex-direction: column; background: linear-gradient(165deg, #0b1225 0%, #131c36 60%, #0b1225 100%); color: #eaf0ff; transform: translateX(100%); transition: transform .38s var(--ym-nav-ease); /* Panel penuh layar: konten panjang tetap bisa digulir, namun scrollbar internal tidak pernah terlihat (bukan hack, ini API resmi). */ overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .ym-nav-panel::-webkit-scrollbar { width: 0; height: 0; } body.ym-nav-open .ym-nav-scrim { opacity: 1; visibility: visible; } body.ym-nav-open .ym-nav-panel { transform: translateX(0); } body.ym-nav-open { overflow: hidden; } .ym-nav-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; border-bottom: 1px solid rgba(255, 255, 255, .1); } .ym-nav-panel-title { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: rgba(234, 240, 255, .6); margin: 0; } .ym-nav-close { width: 42px; height: 42px; flex: 0 0 auto; border: 1px solid rgba(255, 255, 255, .2); border-radius: 12px; background: rgba(255, 255, 255, .06); color: #fff; font-size: 20px; line-height: 1; cursor: pointer; } .ym-nav-close:focus-visible { outline: 3px solid rgba(253, 199, 9, .6); outline-offset: 2px; } .ym-nav-panel-body { padding: 10px 12px 40px; } .ym-nav-list { list-style: none; margin: 0; padding: 0; } .ym-nav-list .ym-nav-list { padding-left: 14px; } .ym-nav-row { display: flex; align-items: stretch; border-bottom: 1px solid rgba(255, 255, 255, .07); } .ym-nav-link { flex: 1 1 auto; min-width: 0; display: block; padding: 15px 10px; color: #eaf0ff; font-size: 16px; font-weight: 600; text-decoration: none; transition: color .2s ease; } .ym-nav-link:hover, .ym-nav-link:focus { color: var(--ym-nav-gold); } .ym-nav-list .ym-nav-list .ym-nav-link { font-size: 14.5px; font-weight: 500; color: rgba(234, 240, 255, .82); } .ym-nav-caret { flex: 0 0 auto; width: 48px; border: 0; background: transparent; color: rgba(234, 240, 255, .75); font-size: 14px; cursor: pointer; transition: transform .3s var(--ym-nav-ease), color .2s ease; } .ym-nav-caret:focus-visible { outline: 3px solid rgba(253, 199, 9, .6); outline-offset: -3px; } .ym-nav-caret[aria-expanded="true"] { transform: rotate(180deg); color: var(--ym-nav-gold); } /* Submenu accordion: tinggi diatur JS lewat inline max-height (nilai terukur, bukan tebakan), sehingga animasi halus dan tidak pernah "terpotong". */ .ym-nav-sub { overflow: hidden; max-height: 0; transition: max-height .35s var(--ym-nav-ease); } /* --------------------------------------------------------------------- */ /* Breakpoint tunggal */ /* --------------------------------------------------------------------- */ @media (max-width: 991.98px) { .ym-nav-desktop { display: none !important; } .ym-nav-toggle { display: block; } .ym-navbar .navbar-brand img { height: 52px; } } @media (min-width: 992px) { .ym-nav-scrim, .ym-nav-panel { display: none; } } @media (max-width: 359px) { .ym-navbar .navbar-brand img { height: 44px; } .ym-nav-link { font-size: 15px; } } @media (prefers-reduced-motion: reduce) { .ym-nav-panel, .ym-nav-scrim, .ym-nav-sub, .ym-nav-toggle .ym-bar { transition: none; } } /* ------------------------------------------------------------------------- Override aturan warisan tema. assets/css/style.css baris ~1016 menyembunyikan .luvion-nav di bawah 992px (dulu wajar, karena mobile ditangani .luvion-responsive-nav + MeanMenu). Wrapper itu kini dihapus, jadi header harus tetap tampil dan hanya isi menunya yang berganti. ym-nav.css dimuat paling akhir sehingga menang berdasarkan urutan, bukan karena !important. ------------------------------------------------------------------------- */ @media (max-width: 991px) { .luvion-nav { display: block; } }