/*! * Mobile / touch polish for OPD themes. * Load AFTER idds-nav-place + portal-sync/future/console so Magz drawer stays readable. * * Root cause of "kotak putih di bar": .nav-list lives inside #menu-list → nav.menu, * and backdrop-filter/sticky on nav creates a containing block so position:fixed * is trapped in the teal bar. JS parks .nav-list on as .idds-mobile-drawer. */ @media (max-width: 991.98px) { /* Kill containing blocks that trap position:fixed inside the teal bar */ body.skin-magz header.primary, body.skin-magz nav.menu, body.skin-magz nav.menu > .container, body.skin-magz nav.menu > .container--wide, body.skin-magz nav.menu #menu-list { transform: none !important; filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; perspective: none !important; contain: none !important; will-change: auto !important; overflow: visible !important; border-radius: 0 !important; } body.skin-magz nav.menu .mobile-toggle { display: inline-block !important; position: relative; z-index: 2; margin-left: auto !important; float: none !important; } body.skin-magz nav.menu .mobile-toggle a[data-toggle="menu"] { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: #fff !important; } /* #menu-list only keeps float-end chrome — never wrap the drawer visually */ body.skin-magz[data-opd-theme] nav.menu #menu-list, body.skin-magz nav.menu #menu-list { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex: 1 1 auto !important; min-width: 0 !important; width: auto !important; overflow: visible !important; } /* * Drawer panel — both while still under nav.menu AND after JS parks on body. * Prefer translate over right:-110% so closed state never paints in the bar. */ body.skin-magz nav.menu ul.nav-list, body.skin-magz[data-opd-theme] nav.menu .nav-list, body.skin-magz[class*="opd-menu--"] nav.menu ul.nav-list, body.skin-magz[class*="hd-"] nav.menu ul.nav-list, body.skin-magz ul.nav-list.idds-mobile-drawer, body > ul.nav-list.idds-mobile-drawer { display: block !important; position: fixed !important; top: 0 !important; bottom: 0 !important; right: 0 !important; left: auto !important; width: min(320px, 88vw) !important; max-width: 88vw !important; height: 100vh !important; height: 100dvh !important; max-height: none !important; margin: 0 !important; padding: 0 0 env(safe-area-inset-bottom, 0) !important; float: none !important; flex: none !important; flex-wrap: nowrap !important; flex-direction: column !important; align-items: stretch !important; gap: 0 !important; min-width: 0 !important; background-color: #fff !important; background-image: none !important; z-index: 10050 !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; box-shadow: -12px 0 40px rgba(15, 23, 42, .22); transform: translate3d(105%, 0, 0) !important; visibility: hidden !important; pointer-events: none !important; transition: transform .35s ease, visibility 0s linear .35s !important; } body.skin-magz nav.menu ul.nav-list.active, body.skin-magz ul.nav-list.idds-mobile-drawer.active, body > ul.nav-list.idds-mobile-drawer.active, body.idds-nav-open ul.nav-list.idds-mobile-drawer { transform: translate3d(0, 0, 0) !important; visibility: visible !important; pointer-events: auto !important; transition: transform .35s ease, visibility 0s linear 0s !important; } body.skin-magz .backdrop { z-index: 10040 !important; } /* .nav-title must beat .skin-magz .for-tablet { display:none !important } */ body.skin-magz nav.menu ul.nav-list > li.nav-title, body.skin-magz nav.menu ul.nav-list > li.for-tablet.nav-title, body.skin-magz ul.nav-list.idds-mobile-drawer > li.nav-title, body.skin-magz ul.nav-list.idds-mobile-drawer > li.for-tablet.nav-title { display: block !important; float: none !important; width: 100% !important; height: auto !important; text-align: center !important; position: relative !important; margin: 0 !important; border-bottom: 1px solid #e2e8f0 !important; background: #f8fafc !important; } body.skin-magz ul.nav-list > li.nav-title > a, body.skin-magz ul.nav-list.idds-mobile-drawer > li.nav-title > a { justify-content: center !important; font-weight: 700 !important; min-height: 52px !important; color: #0f172a !important; } body.skin-magz ul.nav-list > li.nav-title .back, body.skin-magz ul.nav-list.idds-mobile-drawer > li.nav-title .back { z-index: 9; position: absolute; left: 0; top: 0; height: 100%; width: 52px; display: flex !important; align-items: center; justify-content: center; cursor: pointer; color: #0f172a !important; font-size: 1.25rem; } body.skin-magz nav.menu ul.nav-list > li, body.skin-magz ul.nav-list.idds-mobile-drawer > li { display: block !important; float: none !important; position: static !important; width: 100% !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } body.skin-magz[data-opd-theme] nav.menu .nav-list > li > a, body.skin-magz nav.menu ul.nav-list > li > a, body.skin-magz ul.nav-list.idds-mobile-drawer > li > a { display: flex !important; align-items: center !important; justify-content: flex-start !important; height: auto !important; min-height: 48px !important; white-space: normal !important; padding: .75rem 1rem !important; width: 100% !important; box-sizing: border-box !important; } body.skin-magz ul.nav-list > li > a .nav-label, body.skin-magz ul.nav-list.idds-mobile-drawer > li > a .nav-label { display: inline !important; white-space: normal !important; overflow: visible !important; clip: auto !important; width: auto !important; height: auto !important; position: static !important; max-width: none !important; } body.skin-magz nav.menu ul.nav-list > li > a, body.skin-magz nav.menu ul.nav-list > li > a i, body.skin-magz nav.menu ul.nav-list > li > a .nav-label, body.skin-magz nav.menu ul.nav-list > li > a .nav-ico, body.skin-magz nav.menu ul.nav-list > li > a .nav-caret, body.skin-magz[class*="opd-menu--"] nav.menu ul.nav-list > li > a, body.skin-magz[class*="opd-menu--"] nav.menu ul.nav-list > li > a i, body.skin-magz[class*="opd-menu--"] nav.menu ul.nav-list > li > a .nav-label, body.skin-magz[class*="opd-menu--"] nav.menu ul.nav-list > li > a .nav-ico, body.skin-magz[class*="hd-"] nav.menu ul.nav-list > li > a, body.skin-magz[class*="hd-"] nav.menu ul.nav-list > li > a i, body.skin-magz[data-opd-theme] nav.menu ul.nav-list > li > a, body.skin-magz[data-opd-theme] nav.menu ul.nav-list > li > a i, body.skin-magz ul.nav-list.idds-mobile-drawer > li > a, body.skin-magz ul.nav-list.idds-mobile-drawer > li > a i, body.skin-magz ul.nav-list.idds-mobile-drawer > li > a .nav-label, body.skin-magz ul.nav-list.idds-mobile-drawer > li > a .nav-ico, body.skin-magz ul.nav-list.idds-mobile-drawer > li > a .nav-caret { color: #0f172a !important; } body.skin-magz nav.menu ul.nav-list > li > a:hover, body.skin-magz nav.menu ul.nav-list > li.active > a, body.skin-magz[class*="opd-menu--"] nav.menu ul.nav-list > li > a:hover, body.skin-magz[class*="opd-menu--"] nav.menu ul.nav-list > li.active > a, body.skin-magz[data-opd-theme] nav.menu ul.nav-list > li > a:hover, body.skin-magz[data-opd-theme] nav.menu ul.nav-list > li.active > a, body.skin-magz ul.nav-list.idds-mobile-drawer > li > a:hover, body.skin-magz ul.nav-list.idds-mobile-drawer > li.active > a { color: #0f172a !important; background: #f1f5f9 !important; box-shadow: none !important; } /* Magz drill-down panels */ body.skin-magz ul.nav-list > li .dropdown-menu, body.skin-magz ul.nav-list .dropdown-menu, body.skin-magz ul.nav-list.idds-mobile-drawer .dropdown-menu { position: absolute !important; top: 52px !important; left: auto !important; right: 0 !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: calc(100% - 52px) !important; margin: 0 !important; padding: .35rem 0 !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; background: #fff !important; display: none; opacity: 1 !important; visibility: visible !important; transform: translate3d(100%, 0, 0) !important; pointer-events: auto !important; overflow-x: hidden !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; z-index: 2 !important; } body.skin-magz ul.nav-list > li .dropdown-menu.active, body.skin-magz ul.nav-list .dropdown-menu.active, body.skin-magz ul.nav-list.idds-mobile-drawer .dropdown-menu.active { display: block !important; opacity: 1 !important; visibility: visible !important; transform: translate3d(0, 0, 0) !important; } body.skin-magz ul.nav-list .dropdown-menu > li, body.skin-magz ul.nav-list.idds-mobile-drawer .dropdown-menu > li { display: block !important; float: none !important; width: 100% !important; height: auto !important; position: static !important; } body.skin-magz ul.nav-list .dropdown-menu > li > a, body.skin-magz ul.nav-list .dropdown-menu > li > a i, body.skin-magz ul.nav-list.idds-mobile-drawer .dropdown-menu > li > a, body.skin-magz ul.nav-list.idds-mobile-drawer .dropdown-menu > li > a i { display: flex !important; align-items: center !important; width: 100% !important; min-height: 48px !important; height: auto !important; padding: .7rem 1rem !important; color: #0f172a !important; background: transparent !important; white-space: normal !important; box-sizing: border-box !important; } body.skin-magz ul.nav-list .dropdown-menu > li > a:hover, body.skin-magz ul.nav-list.idds-mobile-drawer .dropdown-menu > li > a:hover { background: #f1f5f9 !important; color: #0f172a !important; } body.skin-magz ul.nav-list .dropdown-menu > li > a:after, body.skin-magz ul.nav-list.idds-mobile-drawer .dropdown-menu > li > a:after { display: none !important; } body.skin-magz ul.nav-list .dropdown-menu .dropdown-menu, body.skin-magz ul.nav-list.idds-mobile-drawer .dropdown-menu .dropdown-menu { top: 0 !important; height: 100% !important; } /* Clearance so FAB does not cover footer / last cards */ body.skin-magz[data-opd-theme] { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); } body.skin-magz .opd-float-cta, body.skin-magz .opd-fixed-cta, body.skin-magz[data-opd-theme] .opd-float-cta { right: max(.55rem, env(safe-area-inset-right, 0px)); bottom: max(.65rem, env(safe-area-inset-bottom, 0px)); gap: .55rem; } body.skin-magz .opd-float-cta__btn, body.skin-magz .opd-fixed-cta__btn, body.skin-magz[data-opd-theme] .opd-float-cta__btn { min-width: 48px; min-height: 48px; justify-content: center; padding: .7rem .85rem; } body.skin-magz[data-opd-theme] .opd-net__grid { grid-template-columns: 1fr; } body.skin-magz[data-opd-theme] .opd-net__card { min-height: 52px; } body.skin-magz[data-opd-theme] .opd-fold-cta__btn { min-height: 44px; padding: .7rem 1.1rem; } } @media (max-width: 900px) { body.skin-magz[data-opd-theme] .opd-net__tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding-bottom: .15rem; margin-inline: -.15rem; padding-inline: .15rem; } body.skin-magz[data-opd-theme] .opd-net__tab { flex: 0 0 auto; min-height: 44px; padding: .55rem 1rem; } } /* Focus rings for keyboard / a11y */ body.skin-magz[data-opd-theme] .opd-fold-cta__btn:focus-visible, body.skin-magz[data-opd-theme] .opd-fixed-cta__btn:focus-visible, body.skin-magz[data-opd-theme] .opd-float-cta__btn:focus-visible, body.skin-magz[data-opd-theme] .opd-net__tab:focus-visible, body.skin-magz[data-opd-theme] .opd-net__card:focus-visible, body.skin-magz[data-opd-theme] .opd-svc__card:focus-visible, body.skin-magz[data-opd-theme] nav.menu .nav-list > li > a:focus-visible { outline: 3px solid var(--color-secondary, #FCA416); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { body.skin-magz[data-opd-theme] .opd-float-cta__btn, body.skin-magz[data-opd-theme] .opd-fold-cta__btn, body.skin-magz[data-opd-theme] .opd-net__card { transition: none !important; transform: none !important; } } /* Desktop: Magz .nav-title is mobile-only chrome */ @media (min-width: 992px) { body.skin-magz nav.menu ul.nav-list > li.nav-title, body.skin-magz nav.menu ul.nav-list > li.for-tablet.nav-title { display: none !important; } } /* ── FAB WhatsApp / Pengaduan — bottom-right ── */ body.skin-magz .opd-float-cta, body.skin-magz .opd-fixed-cta, body > .opd-float-cta, body > .opd-fixed-cta { position: fixed !important; right: max(.85rem, env(safe-area-inset-right, 0px)) !important; bottom: max(.85rem, env(safe-area-inset-bottom, 0px)) !important; left: auto !important; top: auto !important; z-index: 9998 !important; display: flex !important; flex-direction: column !important; align-items: flex-end !important; gap: .45rem !important; margin: 0 !important; padding: 0 !important; border: 0 !important; background: transparent !important; pointer-events: none; width: auto !important; transform: none !important; } body.skin-magz .opd-float-cta > a, body.skin-magz .opd-fixed-cta > a, body > .opd-float-cta > a, body > .opd-fixed-cta > a { pointer-events: auto; } body.skin-magz .opd-float-cta__btn, body.skin-magz .opd-fixed-cta__btn { display: inline-flex !important; align-items: center; justify-content: center; gap: .4rem; padding: .7rem 1rem; min-height: 48px; min-width: 48px; border-radius: 999px; background: #0f172a; color: #fff !important; text-decoration: none !important; font-weight: 800; font-size: .78rem; box-shadow: 0 10px 28px rgba(15, 23, 42, .28) !important; line-height: 1; } body.skin-magz .opd-float-cta__btn--wa, body.skin-magz .opd-fixed-cta__btn--wa { background: #128c7e !important; } body.skin-magz .opd-float-cta__btn--complaint, body.skin-magz .opd-fixed-cta__btn--complaint { background: #900000 !important; } body.skin-magz .opd-float-cta__label, body.skin-magz .opd-fixed-cta__label { display: none; } @media (min-width: 901px) { body.skin-magz .opd-float-cta__label, body.skin-magz .opd-fixed-cta__label { display: inline; } }