/** * Navbar portal — panel, logo, menu identik Beranda di semua halaman .sg-portal-page * Palet warna master Beranda: --sg-portal-* / --sg-header-gradient / --sg-nav-panel-* * Muat paling akhir di (setelah enterprise.css / org-container-global) */ .sg-portal-page { /* —— Master palette Beranda (navy premium dark blue) —— */ --sg-portal-navy-900: #001428; --sg-portal-navy-800: #032244; --sg-portal-navy-700: #073d6b; --sg-portal-navy-600: #0a4d85; --sg-portal-hero-from: #0a3d6b; --sg-portal-hero-to: #0c4a7a; --sg-portal-surface: #f4f7fb; --sg-portal-hero-gradient: linear-gradient(180deg, var(--sg-portal-hero-from) 0%, var(--sg-portal-hero-to) 100%); --sg-portal-glass-bg: rgba(255, 255, 255, 0.1); --sg-portal-glass-border: rgba(255, 255, 255, 0.14); --sg-portal-glass-blur: none; --sg-header-gradient: linear-gradient( 90deg, #001428 0%, #032244 12%, #073d6b 30%, #0a4d85 50%, #073d6b 70%, #032244 88%, #001428 100% ); --sg-header-gradient-scrolled: linear-gradient(90deg, #001428 0%, #053057 50%, #001428 100%); /* Remap legacy site_styles / site-global agar tidak pakai slate #243f5f */ --header-gradient: var(--sg-header-gradient); --header-nav-surface: rgba(2, 22, 48, 0.94); --header-nav-border: rgba(147, 197, 253, 0.18); --header-nav-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 32px rgba(0, 10, 28, 0.42); --header-nav-shadow-elevated: var(--header-nav-shadow); --header-nav-glass-blur: 14px; --header-nav-glass-blur-scroll: 14px; --sg-nav-font: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif; --sg-nav-accent: #1d9bf0; --sg-nav-accent-soft: rgba(29, 155, 240, 0.2); --sg-nav-blur: 20px; --sg-nav-row-min-h: 56px; --sg-nav-shadow-scroll: 0 4px 24px rgba(15, 23, 42, 0.12); --sg-nav-border: rgba(255, 255, 255, 0.12); --sg-nav-tap: 40px; /* Panel navbar — token identik Beranda (semua halaman portal) */ --layout-max-width: 1320px; --portal-content-gutter: clamp(1rem, 2.5vw, 32px); --sg-nav-panel-min-h: 56px; --sg-nav-panel-radius: 20px; --sg-nav-panel-pad-block: 0.35rem; --sg-nav-panel-pad-inline: 0; --sg-nav-panel-blur: none; --sg-nav-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 32px rgba(0, 10, 28, 0.42); --sg-nav-panel-bg: rgba(2, 22, 48, 0.94); --sg-nav-panel-bg-scrolled: rgba(2, 22, 48, 0.97); --sg-nav-panel-border: rgba(147, 197, 253, 0.18); --sg-nav-wrapper-gap: clamp(0.5rem, 1.2vw, 1.125rem); } /* Header portal: fixed — menu tetap saat scroll (offset: smart-governance-portal.js) */ body.sg-portal-page .site-header--sg-portal { position: fixed !important; top: 0; left: 0; right: 0; width: auto; max-width: none; margin: 0; z-index: 1100; transition: box-shadow 0.35s ease; box-sizing: border-box; } .sg-portal-page .site-header--sg-portal.is-scrolled { box-shadow: var(--sg-nav-shadow-scroll); } .sg-portal-page .site-layout-main { padding-top: 0; } /* Subhalaman: jarak di bawah navbar fixed — badge Smart Governance Portal tidak menempel atas */ .sg-portal-page { --sg-subhero-gap-below-header: clamp(0.25rem, 0.65vw, 0.4rem); --sg-subhero-pad-top: calc(var(--sg-portal-header-offset, 5.5rem) + var(--sg-subhero-gap-below-header)); --sg-subhero-pad-bottom: clamp(0.5rem, 1.1vw, 0.75rem); } body.sg-portal-page:not(.sg-homepage) .site-layout-main > .sg-subhero, body.sg-portal-page:not(.sg-homepage) .site-layout-main > .org-hero.sg-subhero, body.sg-portal-page:not(.sg-homepage) .site-layout-main > .org-hero.org-hero--sub.sg-subhero:first-child { margin-top: 0; padding-top: var(--sg-subhero-pad-top); padding-bottom: var(--sg-subhero-pad-bottom); box-sizing: border-box; } body.sg-portal-page:not(.sg-homepage) .sg-subhero__copy { padding-top: 0; padding-bottom: 0; } body.sg-portal-page:not(.sg-homepage) .sg-subhero .org-eyebrow, body.sg-portal-page:not(.sg-homepage) .sg-subhero__eyebrow { margin-top: 0; margin-bottom: 0.45rem; } body.sg-homepage.sg-portal-page > #sg-hero, body.sg-homepage.sg-portal-page .site-layout-main > #sg-hero, .sg-portal-page.sg-homepage #sg-hero { display: block; width: 100%; max-width: none; margin-left: 0; margin-right: 0; margin-top: 0; padding-top: calc(var(--sg-portal-header-offset, 11rem) + 0.75rem); overflow-x: visible; overflow-y: visible; box-sizing: border-box; } /* Header shell — gradient + rail identik Beranda (semua halaman portal) */ .sg-portal-page .site-header--sg-portal .site-header__gradient { padding: 0 !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; transition: background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease; border-bottom: none; } .sg-portal-page .site-header--sg-portal.is-scrolled .site-header__gradient { box-shadow: var(--sg-nav-shadow-scroll) !important; } .sg-portal-page .site-header--sg-portal .site-header__rail.container-global, .sg-portal-page .site-header--sg-portal .header-inner.container-global, .sg-portal-page .site-header__inner.header-inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; flex-wrap: nowrap !important; width: 100% !important; max-width: var(--layout-max-width, 1320px) !important; margin-left: auto !important; margin-right: auto !important; padding-left: var(--portal-content-gutter) !important; padding-right: var(--portal-content-gutter) !important; padding-top: 0 !important; padding-bottom: 0 !important; box-sizing: border-box !important; } .sg-portal-page .site-header__rail .site-header__topbar, .sg-portal-page .header-inner .site-header__topbar { order: 1; width: 100%; max-width: 100%; flex: 0 0 auto; align-self: stretch; } .sg-portal-page .header-inner .site-header__brand-row, .sg-portal-page .header-inner .site-header__brand-row > a:first-child { margin-left: 0; padding-left: 0; } /* Topbar: spacing vertikal sama Beranda */ .sg-portal-page .site-header__topbar { align-items: center; gap: 0.5rem 1rem; padding: 0.2rem 0 0.15rem; } /* Branding — logo + teks (Profil & semua subhalaman portal) */ .sg-portal-page .site-header--sg-portal .site-header__brand-row, .sg-portal-page .site-header--sg-portal .org-navbar__brand.site-header__brand-row { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 0.65rem 0.85rem !important; flex: 1 1 auto; min-width: 0; max-width: none; } .sg-portal-page .site-header--sg-portal .site-header__brand-row > a:first-child { flex-shrink: 0 !important; align-self: center !important; display: inline-flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; } .sg-portal-page .site-header--sg-portal .site-header__brand-row .min-w-0 { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: 0.06rem; } /* Header portal: logo saja — teks branding dihapus */ .sg-portal-page .site-header__title, .sg-portal-page .site-header__subtitle, .sg-portal-page .org-navbar__title, .sg-portal-page .org-navbar__subtitle { display: none !important; } /* Header portal: logo saja — posisi & ukuran sama Beranda (semua halaman) */ .sg-portal-page .site-header__brand-row, .sg-portal-page .org-navbar__brand.site-header__brand-row { flex: 1 1 auto !important; gap: 0.65rem 0.85rem !important; } .sg-portal-page .site-header__logo, .sg-portal-page .org-navbar__logo { max-height: 48px !important; max-width: none !important; width: auto !important; height: auto !important; object-fit: contain !important; filter: none !important; flex-shrink: 0; vertical-align: middle; } @media (min-width: 992px) { .sg-portal-page .site-header__logo, .sg-portal-page .org-navbar__logo { max-height: 52px !important; } } @media (max-width: 991.98px) { .sg-portal-page .site-header__logo, .sg-portal-page .org-navbar__logo { max-height: 38px !important; max-width: 36vw !important; } } @media (max-width: 575.98px) { .sg-portal-page .site-header__logo, .sg-portal-page .org-navbar__logo { max-height: 48px !important; max-width: 36vw !important; } } /* Legacy title rules (hidden) — kept for cache safety */ .sg-portal-page .site-header__title { font-family: var(--sg-nav-font) !important; font-weight: 700 !important; letter-spacing: 0.02em !important; font-size: clamp(0.8125rem, 0.5vw + 0.68rem, 0.9375rem) !important; line-height: 1.12 !important; text-transform: uppercase !important; text-shadow: none !important; margin: 0 !important; } .sg-portal-page .site-header__subtitle { font-family: var(--sg-nav-font) !important; font-size: clamp(0.625rem, 0.35vw + 0.54rem, 0.6875rem) !important; font-weight: 700 !important; line-height: 1.25 !important; letter-spacing: 0.015em !important; opacity: 0.92 !important; margin: 0.06rem 0 0 !important; color: rgba(255, 255, 255, 0.9) !important; text-shadow: none !important; } /* Desktop — logo 52px → judul ~16px, subjudul ~11px */ @media (min-width: 992px) { .sg-portal-page .site-header__title { font-size: clamp(0.8125rem, 0.35vw + 0.72rem, 1rem) !important; line-height: 1.1 !important; letter-spacing: 0.02em !important; } .sg-portal-page .site-header__subtitle { font-size: clamp(0.6875rem, 0.2vw + 0.6rem, 0.75rem) !important; font-weight: 700 !important; line-height: 1.2 !important; margin: 0.06rem 0 0 !important; } } .sg-portal-page .site-header--sg-portal:not(.is-scrolled) .site-header__title, .sg-portal-page .site-header--sg-portal:not(.is-scrolled) .site-header__subtitle { color: #fff; text-shadow: none; } .sg-portal-page .site-header--sg-portal.is-scrolled .site-header__title, .sg-portal-page .site-header--sg-portal.is-scrolled .site-header__subtitle { color: #fff; text-shadow: none; } /* Panel navbar — identik Beranda (desktop ≥992px) */ @media (min-width: 992px) { .sg-portal-page .site-header__rail .navbar-wrapper, .sg-portal-page .site-header__rail .org-navbar__nav-shell, .sg-portal-page .navbar-wrapper { display: block !important; width: 100% !important; max-width: 100% !important; margin-top: var(--sg-nav-wrapper-gap) !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; flex: 0 0 auto; order: 2; align-self: stretch; box-sizing: border-box; } .sg-portal-page .navbar-panel, .sg-portal-page .site-header--sg-portal .site-header__nav-wrap, .sg-portal-page .site-header--sg-portal .site-header__nav-wrap.navbar-panel, .sg-portal-page .site-header__nav-wrap.navbar-panel { width: 100% !important; max-width: 100% !important; min-height: var(--sg-nav-panel-min-h) !important; height: auto !important; margin: 0 !important; padding: var(--sg-nav-panel-pad-block) var(--sg-nav-panel-pad-inline) !important; border-radius: var(--sg-nav-panel-radius) !important; background: var(--sg-nav-panel-bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; box-sizing: border-box !important; border: 1px solid var(--sg-nav-panel-border) !important; box-shadow: var(--sg-nav-panel-shadow) !important; position: static !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; opacity: 1 !important; animation: none !important; isolation: auto !important; } .sg-portal-page .site-header--sg-portal.is-scrolled .navbar-panel, .sg-portal-page .site-header--sg-portal.is-scrolled .site-header__nav-wrap.navbar-panel { background: var(--sg-nav-panel-bg-scrolled) !important; } .sg-portal-page .site-header__nav-wrap.is-nav-scrolled, .sg-portal-page .site-header__nav-wrap.is-nav-elevated, .sg-portal-page .site-header__nav-wrap.is-features-fixed, .sg-portal-page .navbar-panel.site-header__nav-wrap.is-features-fixed { position: static !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-top: var(--sg-nav-wrapper-gap) !important; padding: var(--sg-nav-panel-pad-block) var(--sg-nav-panel-pad-inline) !important; border-radius: var(--sg-nav-panel-radius) !important; background: var(--sg-nav-panel-bg) !important; border: 1px solid var(--sg-nav-panel-border) !important; box-shadow: var(--sg-nav-panel-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; animation: none !important; } .sg-portal-page .navbar-panel .site-header__nav-panel, .sg-portal-page .navbar-panel .site-header__nav-row, .sg-portal-page .site-header__nav-wrap .site-header__nav-panel, .sg-portal-page .site-header__nav-wrap .site-header__nav-row { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } .sg-portal-page .navbar-panel .site-header__nav-row, .sg-portal-page .site-header__nav-wrap .site-header__nav-row { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 0.45rem 0.75rem !important; min-height: var(--sg-nav-row-min-h) !important; padding: 0.12rem 0 !important; box-sizing: border-box !important; } .sg-portal-page .site-header--sg-portal .navbar-panel, .sg-portal-page .site-header--sg-portal .site-header__nav-wrap.navbar-panel { overflow: visible !important; height: auto !important; } .sg-portal-page .site-header__nav-panel { display: block !important; visibility: visible !important; overflow: visible !important; opacity: 1 !important; height: auto !important; max-height: none !important; } } /* * Panel navbar portal — Beranda & subhalaman (Profil, Layanan, …). * Menimpa org-container-global, Tailwind org-navbar, site_styles legacy. */ body.sg-portal-page { --layout-max-width: 1320px; --portal-content-gutter: clamp(1rem, 2.5vw, 32px); --sg-nav-panel-min-h: 56px; --sg-nav-panel-radius: 20px; --sg-nav-panel-pad-block: 0.35rem; --sg-nav-panel-pad-inline: 0; --sg-nav-panel-blur: none; --sg-nav-panel-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 32px rgba(0, 10, 28, 0.42); --sg-nav-panel-bg: rgba(2, 22, 48, 0.94); --sg-nav-panel-bg-scrolled: rgba(2, 22, 48, 0.97); --sg-nav-panel-border: rgba(147, 197, 253, 0.18); --sg-nav-wrapper-gap: clamp(0.5rem, 1.2vw, 1.125rem); --sg-nav-row-min-h: 56px; --sg-nav-tap: 40px; } @media (min-width: 992px) { body.sg-portal-page .site-header--sg-portal .site-header__rail .navbar-wrapper, body.sg-portal-page .site-header--sg-portal .site-header__rail .org-navbar__nav-shell, body.sg-portal-page .site-header__rail .navbar-wrapper { display: block !important; width: 100% !important; max-width: 100% !important; margin-top: var(--sg-nav-wrapper-gap) !important; margin-left: 0 !important; margin-right: 0 !important; padding: 0 !important; flex: 0 0 auto; order: 2; align-self: stretch; box-sizing: border-box; } body.sg-portal-page .navbar-panel, body.sg-portal-page .org-navbar__nav-wrap.navbar-panel, body.sg-portal-page .site-header--sg-portal .site-header__nav-wrap, body.sg-portal-page .site-header--sg-portal .site-header__nav-wrap.navbar-panel, body.sg-portal-page .site-header__nav-wrap.navbar-panel { width: 100% !important; max-width: 100% !important; min-height: var(--sg-nav-panel-min-h) !important; height: auto !important; margin: 0 !important; padding: var(--sg-nav-panel-pad-block) var(--sg-nav-panel-pad-inline) !important; border-radius: var(--sg-nav-panel-radius) !important; background: var(--sg-nav-panel-bg) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: center !important; box-sizing: border-box !important; border: 1px solid var(--sg-nav-panel-border) !important; box-shadow: var(--sg-nav-panel-shadow) !important; position: static !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; opacity: 1 !important; animation: none !important; isolation: auto !important; } body.sg-portal-page .site-header--sg-portal.is-scrolled .navbar-panel, body.sg-portal-page .site-header--sg-portal.is-scrolled .org-navbar__nav-wrap.navbar-panel, body.sg-portal-page .site-header--sg-portal.is-scrolled .site-header__nav-wrap.navbar-panel { background: var(--sg-nav-panel-bg-scrolled) !important; } body.sg-portal-page .site-header__nav-wrap.is-nav-scrolled, body.sg-portal-page .site-header__nav-wrap.is-nav-elevated, body.sg-portal-page .site-header__nav-wrap.is-features-fixed, body.sg-portal-page .navbar-panel.site-header__nav-wrap.is-features-fixed, body.sg-portal-page .org-navbar__nav-wrap.is-nav-scrolled, body.sg-portal-page .org-navbar__nav-wrap.is-nav-elevated, body.sg-portal-page .org-navbar__nav-wrap.is-features-fixed { position: static !important; top: auto !important; left: auto !important; right: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-top: var(--sg-nav-wrapper-gap) !important; padding: var(--sg-nav-panel-pad-block) var(--sg-nav-panel-pad-inline) !important; border-radius: var(--sg-nav-panel-radius) !important; background: var(--sg-nav-panel-bg) !important; border: 1px solid var(--sg-nav-panel-border) !important; box-shadow: var(--sg-nav-panel-shadow) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; opacity: 1 !important; animation: none !important; } body.sg-portal-page .navbar-panel .site-header__nav-panel, body.sg-portal-page .navbar-panel .site-header__nav-row, body.sg-portal-page .site-header__nav-wrap .site-header__nav-panel, body.sg-portal-page .site-header__nav-wrap .site-header__nav-row, body.sg-portal-page .org-navbar__nav-wrap .site-header__nav-panel, body.sg-portal-page .org-navbar__nav-wrap .site-header__nav-row { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } body.sg-portal-page .navbar-panel .site-header__nav-row, body.sg-portal-page .site-header__nav-wrap .site-header__nav-row, body.sg-portal-page .org-navbar__nav-wrap .site-header__nav-row { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: space-between !important; gap: 0.45rem 0.75rem !important; min-height: var(--sg-nav-row-min-h) !important; padding: 0.12rem 0 !important; box-sizing: border-box !important; } body.sg-portal-page .site-header__nav { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.15rem 0.35rem !important; margin: 0 !important; padding: 0 !important; } body.sg-portal-page .site-header__nav a { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-family: var(--sg-nav-font) !important; font-weight: 500 !important; font-size: clamp(0.8125rem, 0.25vw + 0.78rem, 0.9375rem) !important; letter-spacing: 0.01em !important; text-transform: none !important; line-height: 1.3 !important; padding: 0.45rem 0.75rem !important; min-height: var(--sg-nav-tap) !important; border-radius: 0.75rem !important; color: rgba(255, 255, 255, 0.88) !important; } body.sg-portal-page .site-header__actions-end .btn { min-height: var(--sg-nav-tap) !important; height: auto !important; padding: 0.45rem 0.75rem !important; font-size: clamp(0.8125rem, 0.25vw + 0.78rem, 0.875rem) !important; font-weight: 600 !important; border-radius: 0.75rem !important; } body.sg-portal-page .site-header--sg-portal .navbar-panel, body.sg-portal-page .site-header--sg-portal .org-navbar__nav-wrap.navbar-panel, body.sg-portal-page .site-header--sg-portal .site-header__nav-wrap.navbar-panel { overflow: visible !important; height: auto !important; min-height: var(--sg-nav-panel-min-h) !important; } body.sg-portal-page .site-header__nav-panel { display: block !important; visibility: visible !important; overflow: visible !important; opacity: 1 !important; height: auto !important; max-height: none !important; } body.sg-portal-page .site-header__nav { flex-wrap: nowrap; gap: 0.2rem 0.5rem; } } @media (min-width: 992px) and (max-width: 1399.98px) { body.sg-portal-page .site-header__nav a { padding: 0.55rem 0.75rem !important; font-size: 0.8125rem !important; } } /* Tema hari besar — override variabel portal */ body[class*='theme-'].sg-portal-page { --sg-header-gradient: var( --holiday-header-gradient, linear-gradient(90deg, #001428 0%, #073d6b 50%, #001428 100%) ); --sg-header-gradient-scrolled: var( --holiday-header-gradient-scrolled, var(--holiday-header-gradient, linear-gradient(90deg, #001428 0%, #053057 50%, #001428 100%)) ); --header-nav-surface: var(--holiday-nav-surface, rgba(2, 22, 48, 0.94)); --sg-nav-panel-bg: var(--holiday-nav-surface, rgba(2, 22, 48, 0.94)); --sg-nav-panel-bg-scrolled: rgba(2, 22, 48, 0.97); } /* Modul berita / e-org — panel nav sama Beranda saat masih .sg-portal-page */ body.mode-publikasi.sg-portal-page, body.mode-eorganisasi.sg-portal-page { --header-nav-surface: rgba(2, 22, 48, 0.94); --sg-nav-panel-bg: rgba(2, 22, 48, 0.94); --sg-nav-panel-bg-scrolled: rgba(2, 22, 48, 0.97); --sg-nav-panel-border: rgba(147, 197, 253, 0.18); } body[class*='theme-'].sg-portal-page .site-header--sg-portal.is-scrolled .site-header__gradient { opacity: 0.98; } body[class*='theme-'].sg-portal-page .site-header__holiday-ucapan--inline { background: var(--holiday-ucapan-bg, rgba(255, 255, 255, 0.1)) !important; border-color: rgba(255, 255, 255, 0.22) !important; } body[class*='theme-'].sg-portal-page .site-header__holiday-ucapan--inline .site-header__holiday-ucapan-title { color: var(--holiday-ucapan-text, #ffffff); } body[class*='theme-'].sg-portal-page .site-header__holiday-ucapan--inline .site-header__holiday-ucapan-sub { color: var(--holiday-ucapan-sub, rgba(255, 255, 255, 0.88)); } /* Baris menu — tinggi & alignment vertikal sama Beranda */ .sg-portal-page .site-header__nav-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.45rem 0.75rem; width: 100%; max-width: 100%; padding: 0.12rem 0; min-height: var(--sg-nav-row-min-h); box-sizing: border-box; } .sg-portal-page .site-header__nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.15rem 0.35rem; list-style: none; margin: 0; padding: 0; flex: 1 1 auto; min-width: 0; } .sg-portal-page .site-header__nav li { flex: 0 1 auto; max-width: 100%; } .sg-portal-page .site-header__nav a { display: inline-flex; align-items: center; justify-content: center; position: relative; font-family: var(--sg-nav-font); font-weight: 500; font-size: clamp(0.8125rem, 0.25vw + 0.78rem, 0.9375rem); letter-spacing: 0.01em; text-transform: none; line-height: 1.3; text-align: center; white-space: nowrap; padding: 0.45rem 0.75rem; min-height: var(--sg-nav-tap); border-radius: 0.75rem; color: rgba(255, 255, 255, 0.88) !important; text-decoration: none; transition: color 0.3s ease, background-color 0.3s ease, transform 0.3s ease; } .sg-portal-page .site-header__nav a::after { content: ''; position: absolute; left: 50%; bottom: 0.35rem; width: calc(100% - 1.25rem); max-width: 100%; height: 2px; border-radius: 2px; background: #fff; transform: translateX(-50%) scaleX(0); transform-origin: center; opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease; box-shadow: none; } .sg-portal-page .site-header__nav a:hover { color: #fff !important; background: rgba(255, 255, 255, 0.08); } .sg-portal-page .site-header__nav a:hover::after { transform: translateX(-50%) scaleX(1); opacity: 0.85; } .sg-portal-page .site-header__nav a.is-active { color: #fff !important; background: rgba(37, 99, 235, 0.4) !important; text-shadow: none !important; box-shadow: inset 0 -2px 0 0 #60a5fa !important; } .sg-portal-page .site-header__nav a.is-active::after { transform: translateX(-50%) scaleX(1) !important; opacity: 1 !important; background: #7dd3fc !important; box-shadow: none !important; } .sg-portal-page .site-header--sg-portal .btn-header-dashboard { color: #fff !important; background: linear-gradient(135deg, #1e40af 0%, #2563eb 45%, #38bdf8 100%) !important; border: 1px solid rgba(147, 197, 253, 0.35) !important; box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35) !important; } .sg-portal-page .site-header--sg-portal .btn-header-dashboard:hover { background: linear-gradient(135deg, #2563eb 0%, #3b82f6 50%, #7dd3fc 100%) !important; box-shadow: 0 6px 22px rgba(56, 189, 248, 0.4) !important; } .sg-portal-page .site-header--sg-portal .btn-header-login, .sg-portal-page .site-header--sg-portal .btn-header-logout { color: #0f4c81 !important; background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important; border: 1px solid rgba(255, 255, 255, 0.85) !important; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08) !important; } .sg-portal-page .site-header--sg-portal .btn-header-login:hover, .sg-portal-page .site-header--sg-portal .btn-header-logout:hover { background: #fff !important; } @media (min-width: 1400px) { .sg-portal-page .site-header__nav { flex-wrap: nowrap; gap: 0.2rem 0.5rem; } } @media (min-width: 992px) and (max-width: 1399.98px) { .sg-portal-page .site-header__nav a { padding: 0.55rem 0.75rem; font-size: 0.8125rem; } .sg-portal-page .site-header__actions-end .btn { padding: 0.45rem 0.85rem; font-size: 0.75rem; } } /* Pencarian — pill modern */ .sg-portal-page .site-header__search-wrap { flex: 1 1 220px; min-width: 0; max-width: min(100%, 22rem); } .sg-portal-page .site-header-doc-search--navbar .site-header-doc-search__field { display: flex; align-items: center; min-height: var(--sg-nav-tap); border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(255, 255, 255, 0.14); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06); padding: 0 0.35rem 0 1rem; transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease; } .sg-portal-page .site-header-doc-search--navbar .site-header-doc-search__field:focus-within { border-color: rgba(29, 155, 240, 0.65); background: rgba(255, 255, 255, 0.18); box-shadow: 0 0 0 3px rgba(29, 155, 240, 0.22); } .sg-portal-page .site-header-doc-search__input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; color: #fff !important; font-size: 0.875rem; padding: 0.5rem 0.5rem 0.5rem 0; box-shadow: none !important; } .sg-portal-page .site-header-doc-search__input::placeholder { color: rgba(248, 250, 252, 0.55); } .sg-portal-page .site-header-doc-search__submit { flex-shrink: 0; width: 38px; height: 38px; margin: 3px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: rgba(255, 255, 255, 0.18); color: #fff; transition: background-color 0.3s ease, transform 0.3s ease; } .sg-portal-page .site-header-doc-search__submit:hover { background: var(--sg-nav-accent); transform: scale(1.05); } /* Tombol hamburger — area sentuh modern */ .sg-portal-page .site-header__nav-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-width: var(--sg-nav-tap); min-height: var(--sg-nav-tap); padding: 0 0.85rem; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 0.75rem; background: rgba(255, 255, 255, 0.1); color: #fff; transition: background-color 0.3s ease, border-color 0.3s ease; } .sg-portal-page .site-header__nav-toggle:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); } .sg-portal-page .site-header__hamburger-line { transition: transform 0.3s ease, opacity 0.3s ease; } .sg-portal-page .site-header__nav-toggle[aria-expanded='true'] .site-header__hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); } .sg-portal-page .site-header__nav-toggle[aria-expanded='true'] .site-header__hamburger-line:nth-child(2) { opacity: 0; } .sg-portal-page .site-header__nav-toggle[aria-expanded='true'] .site-header__hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Aksi kanan — tema, login/dashboard */ .sg-portal-page .site-header__actions { flex: 0 0 auto; margin-left: auto; align-items: center; gap: 0.5rem; } .sg-portal-page .site-header__actions-end { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 0.5rem; } .sg-portal-page .site-header__actions-end .btn { font-family: var(--sg-nav-font); font-size: 0.8125rem; font-weight: 600; min-height: var(--sg-nav-tap); padding: 0.4rem 0.95rem; border-radius: 0.75rem; display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease; } .sg-portal-page .site-header__actions-end .btn:hover { transform: translateY(-1px); } .sg-portal-page .site-header__actions-end .btn, .sg-portal-page .site-header__actions-end .btn-header-dashboard, .sg-portal-page .site-header__actions-end .btn-header-login, .sg-portal-page .site-header__actions-end .btn-header-logout { min-height: var(--sg-nav-tap) !important; height: auto !important; padding: 0.45rem 0.75rem !important; font-size: clamp(0.8125rem, 0.25vw + 0.78rem, 0.875rem) !important; font-weight: 600 !important; border-radius: 0.75rem !important; } /* Tombol kanan — gradient identik Beranda (lihat blok di atas) */ /* Banner hari besar inline — selalu ikut blok nav saat scroll (tidak di-collapse) */ .sg-portal-page .site-header__holiday-ucapan--inline { width: 100%; flex-shrink: 0; margin: 0 0 0.22rem; border-radius: 10px; overflow: hidden; background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: none !important; max-height: none; opacity: 1; visibility: visible; pointer-events: auto; transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .sg-portal-page .site-header__holiday-ucapan--inline.is-nav-stuck { margin-bottom: 0.2rem; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12); } .sg-portal-page .site-header__holiday-ucapan--inline.is-collapsed { max-height: none !important; margin: 0 0 0.22rem !important; padding: inherit !important; border-width: 1px !important; opacity: 1 !important; pointer-events: auto !important; visibility: visible !important; } .sg-portal-page .site-header__holiday-ucapan--inline .site-header__holiday-ucapan-shimmer, .sg-portal-page .site-header__holiday-ucapan--inline .site-header__holiday-ucapan-border, .sg-portal-page .site-header__holiday-ucapan--inline::before { display: none !important; } .sg-portal-page .site-header__holiday-ucapan-inline { display: flex; align-items: center; gap: 0.45rem 0.65rem; padding: 0.2rem 0.5rem; text-align: left; } .sg-portal-page .site-header__holiday-ucapan--inline .site-header__holiday-ucapan-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.45rem; min-width: 0; flex: 1; } .sg-portal-page .site-header__holiday-ucapan--inline .site-header__holiday-ucapan-title { font-family: var(--sg-nav-font); font-size: clamp(0.68rem, 1.1vw, 0.8rem); font-weight: 600; letter-spacing: 0.02em; line-height: 1.25; background: none !important; -webkit-background-clip: unset !important; color: #f1f5f9 !important; } .sg-portal-page .site-header__holiday-ucapan--inline .site-header__holiday-ucapan-sub { font-size: 0.65rem; font-style: normal; margin: 0 !important; color: rgba(226, 232, 240, 0.78) !important; } .sg-portal-page .site-header__holiday-ucapan--inline .site-header__holiday-ucapan-badge { font-size: 0.54rem; padding: 0.1rem 0.45rem; letter-spacing: 0.08em; flex-shrink: 0; } /* Mobile: drawer + animasi halus */ @media (max-width: 991.98px) { .sg-portal-page .site-header--sg-portal .site-header__nav-wrap { padding-top: 0 !important; padding-bottom: 0 !important; } .sg-portal-page .site-header__nav-row { min-height: 0; flex-direction: column; align-items: stretch; gap: 0; } .sg-portal-page .site-header__nav-panel.is-open, .sg-portal-page .site-header__nav-collapse.collapsing { transition: height 0.38s cubic-bezier(0.22, 1, 0.36, 1); } .sg-portal-page .site-header__nav-panel .site-header__nav-row, .sg-portal-page .site-header__nav-collapse .site-header__nav-row { padding: 0.5rem 0.25rem 0.65rem; } .sg-portal-page .site-header__nav-panel.is-open .site-header__nav-row, .sg-portal-page .site-header__nav-collapse.show .site-header__nav-row { animation: sgNavMobileReveal 0.35s ease forwards; } @keyframes sgNavMobileReveal { from { opacity: 0.92; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } } .sg-portal-page .site-header__nav { flex-direction: column; align-items: stretch; gap: 0.25rem; width: 100%; } .sg-portal-page .site-header__nav li { width: 100%; max-width: none; } .sg-portal-page .site-header__nav a { justify-content: flex-start; width: 100%; white-space: normal; text-align: left; font-size: 0.9375rem; padding: 0.75rem 1rem; min-height: var(--sg-nav-tap); border-radius: 0.75rem; } .sg-portal-page .site-header__nav a::after { left: 1rem; right: auto; bottom: 0.55rem; width: 2.5rem; transform: scaleX(0); transform-origin: left; } .sg-portal-page .site-header__nav a:hover::after, .sg-portal-page .site-header__nav a.is-active::after { transform: scaleX(1); } .sg-portal-page .site-header__nav a.is-active { background: rgba(37, 99, 235, 0.4) !important; box-shadow: inset 0 -2px 0 0 #60a5fa !important; } .sg-portal-page .site-header__actions { width: 100%; margin-left: 0; padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 0.35rem; } .sg-portal-page .site-header__actions-end { width: 100%; flex-direction: column; align-items: stretch; } .sg-portal-page .site-header__actions-end .btn, .sg-portal-page .site-header__actions-end form { width: 100%; } .sg-portal-page .site-header__actions-end form .btn { width: 100%; } .sg-portal-page .site-header__search-wrap { display: none; } /* Topbar mobile: logo/judul kiri, tombol menu kanan */ .sg-portal-page .site-header__topbar { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 0.4rem 0.5rem; width: 100%; min-width: 0; box-sizing: border-box; } .sg-portal-page .site-header__brand-row { flex: 1 1 auto !important; min-width: 0; max-width: none; align-items: center !important; gap: 0.65rem 0.85rem !important; } .sg-portal-page .site-header__nav-toggle { flex: 0 0 auto; margin-left: auto; order: 10; align-self: center; } .sg-portal-page .site-header__nav-toggle-label { display: none; } } @media (max-width: 575.98px) { .sg-portal-page .site-header__holiday-ucapan--inline .site-header__holiday-ucapan-sub { display: none !important; } } @media (max-width: 991.98px) { .sg-portal-page .navbar-panel, .sg-portal-page .site-header__nav-wrap.navbar-panel, .sg-portal-page .navbar-wrapper:not(.is-navbar-menu-open) .site-header__nav-wrap, .sg-portal-page .site-header__nav-wrap:not(:has(.site-header__nav-panel.is-open)) { display: none !important; min-height: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: hidden !important; } .sg-portal-page .site-header__nav-panel:not(.is-open) { display: none !important; visibility: hidden !important; height: 0 !important; overflow: hidden !important; } .sg-portal-page .site-header__nav-panel.is-open { z-index: 1190 !important; pointer-events: auto !important; } } @media (prefers-reduced-motion: reduce) { .sg-portal-page .site-header__nav a, .sg-portal-page .site-header__nav a::after, .sg-portal-page .site-header-doc-search--navbar .site-header-doc-search__field, .sg-portal-page .site-header-doc-search__submit, .sg-portal-page .site-header__actions-end .btn, .sg-portal-page .site-header__nav-panel .site-header__nav-row, .sg-portal-page .site-header__nav-collapse .site-header__nav-row { transition: none; } .sg-portal-page .site-header__nav-panel.is-open .site-header__nav-row, .sg-portal-page .site-header__nav-collapse.show .site-header__nav-row { animation: none; } .sg-portal-page .site-header__hamburger-line { transition: none; } } /* * Identitas warna portal — header, navbar, hero/subhero (seluruh halaman selain tone slate legacy). * Beranda = master; subhalaman Profil/Layanan/Dokumen/Informasi/Galeri/E-Organisasi mengikuti. */ body.sg-portal-page .site-header--sg-portal .site-header__gradient, body.sg-portal-page .org-navbar__gradient.site-header__gradient { background: var(--sg-header-gradient) !important; border: none !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } body.sg-portal-page .site-header--sg-portal.is-scrolled .site-header__gradient { background: var(--sg-header-gradient-scrolled) !important; box-shadow: var(--sg-nav-shadow-scroll) !important; } /* Subhero / hero subhalaman — gradient identik Beranda */ body.sg-portal-page:not(.sg-homepage) .sg-subhero, body.sg-portal-page:not(.sg-homepage) .org-hero.sg-subhero, body.sg-portal-page:not(.sg-homepage) .org-hero.org-hero--sub.sg-subhero { background: transparent !important; color: #fff; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } body.sg-portal-page .org-hero.sg-subhero .org-hero__bg, body.sg-portal-page .org-hero.sg-subhero .sg-subhero__bg, body.sg-portal-page .sg-subhero .sg-subhero__bg, body.sg-portal-page .org-hero--sub .org-hero__bg { background: var(--sg-portal-hero-gradient) !important; opacity: 1 !important; visibility: visible !important; } /* Hero sub-halaman: tanpa shadow/gradient transisi di tepi bawah. (User meminta hilangkan shadow yang terlihat di sub halaman.) */ body.sg-portal-page:not(.sg-homepage) .sg-subhero::after, body.sg-portal-page:not(.sg-homepage) .org-hero.sg-subhero::after { content: none !important; display: none !important; background: none !important; } body.sg-portal-page:not(.sg-homepage) .sg-subhero, body.sg-portal-page:not(.sg-homepage) .org-hero.sg-subhero { box-shadow: none !important; filter: none !important; } /* Aksen warna untuk kata kunci di judul hero (mis. "Smart Governance" di Beranda) — terpicu hanya kalau markup judul mengandung . */ .sg-subhero__title .sg-subhero__title-accent, .org-hero__title .sg-subhero__title-accent { color: #7dd3fc !important; /* sky-300, biru cerah seperti referensi */ -webkit-text-fill-color: #7dd3fc !important; /* override layout-fix !important */ font-weight: inherit; } /* Beranda hero — tipografi judul mengikuti referensi gambar: - Font: Plus Jakarta Sans 800 (sudah dipreload di org_production_assets) - Tebal & line-height rapat, ukuran moderate (tidak terlalu besar) - HANYA Beranda (body.sg-homepage), sub-halaman lain TIDAK terpengaruh. */ body.sg-homepage .sg-subhero__title, body.sg-homepage .org-hero__title.sg-subhero__title { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif !important; font-weight: 800 !important; /* Desktop ~2.5rem (40px), mobile ~1.55rem (24.8px) */ font-size: clamp(1.55rem, 1.8vw + 0.85rem, 2.5rem) !important; line-height: 1.08 !important; letter-spacing: -0.025em !important; margin: 0 0 0.75rem !important; } /*
di dalam judul: jangan tambah tinggi ekstra */ body.sg-homepage .sg-subhero__title br { line-height: 0; content: ''; } body.sg-portal-page:not(.sg-homepage) .site-layout-main { background: var(--sg-portal-surface, #f4f7fb); } /* Kartu statistik glass — sama Beranda */ body.sg-portal-page .sg-subhero__stat, body.sg-portal-page .org-hero.sg-subhero .org-hero__stat { background: var(--sg-portal-glass-bg) !important; border: 1px solid var(--sg-portal-glass-border) !important; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none !important; } body.sg-portal-page .sg-subhero__stat-num, body.sg-portal-page .org-hero.sg-subhero .org-hero__stat-num { color: #fff !important; } body.sg-portal-page .sg-subhero__stat-label, body.sg-portal-page .org-hero.sg-subhero .org-hero__stat-label { color: rgba(255, 255, 255, 0.88) !important; } /* Banner hari besar inline — glass navy (bukan slate) */ body.sg-portal-page .site-header__holiday-ucapan--inline { background: rgba(255, 255, 255, 0.08) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; box-shadow: none !important; } /* Mobile drawer — timpa #243f5f dari site_styles */ @media (max-width: 991.98px) { body.sg-portal-page .site-header__nav-panel.is-open, body.sg-portal-page .site-header__nav-collapse.show { background: rgba(2, 22, 48, 0.96) !important; background-color: rgba(2, 22, 48, 0.96) !important; border-top: 1px solid var(--sg-nav-panel-border) !important; backdrop-filter: var(--sg-nav-panel-blur) !important; -webkit-backdrop-filter: var(--sg-nav-panel-blur) !important; box-shadow: 0 12px 32px rgba(0, 10, 28, 0.42) !important; } } @media (min-width: 992px) { body.sg-portal-page .site-header--sg-portal .site-header__nav { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 0.15rem 0.35rem !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } body.sg-portal-page .site-header--sg-portal .site-header__nav a { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; font-family: var(--sg-nav-font) !important; font-weight: 500 !important; font-size: clamp(0.8125rem, 0.25vw + 0.78rem, 0.9375rem) !important; letter-spacing: 0.01em !important; text-transform: none !important; line-height: 1.3 !important; text-align: center !important; white-space: nowrap !important; padding: 0.45rem 0.75rem !important; min-height: 40px !important; border-radius: 0.75rem !important; color: rgba(255, 255, 255, 0.88) !important; text-decoration: none !important; text-shadow: none !important; background: transparent !important; box-shadow: none !important; } body.sg-portal-page .site-header--sg-portal .site-header__nav a:hover { color: #fff !important; background: rgba(255, 255, 255, 0.08) !important; text-shadow: none !important; } body.sg-portal-page .site-header--sg-portal .site-header__nav a.is-active { color: #fff !important; background: rgba(37, 99, 235, 0.4) !important; text-shadow: none !important; box-shadow: inset 0 -2px 0 0 #60a5fa !important; } body.sg-portal-page .site-header--sg-portal .site-header__nav a.is-active::after { transform: translateX(-50%) scaleX(1) !important; opacity: 1 !important; background: #7dd3fc !important; box-shadow: none !important; } } body.sg-portal-page .site-header--sg-portal .site-header__actions-end .btn { min-height: 40px !important; height: auto !important; padding: 0.45rem 0.75rem !important; font-size: clamp(0.8125rem, 0.25vw + 0.78rem, 0.875rem) !important; font-weight: 600 !important; border-radius: 0.75rem !important; } body.sg-portal-page .site-header--sg-portal .btn-header-dashboard { color: #fff !important; background: linear-gradient(135deg, #1e40af 0%, #2563eb 45%, #38bdf8 100%) !important; border: 1px solid rgba(147, 197, 253, 0.35) !important; box-shadow: 0 4px 16px rgba(37, 99, 235, 0.35) !important; } body.sg-portal-page .site-header--sg-portal .btn-header-login, body.sg-portal-page .site-header--sg-portal .btn-header-logout { color: #0f4c81 !important; background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%) !important; border: 1px solid rgba(255, 255, 255, 0.85) !important; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.08) !important; } @media (min-width: 992px) { body.sg-portal-page .site-header--sg-portal .navbar-panel, body.sg-portal-page .site-header--sg-portal .site-header__nav-wrap.navbar-panel { overflow: visible !important; height: auto !important; } body.sg-portal-page .site-header--sg-portal .site-header__nav { flex-wrap: nowrap !important; gap: 0.2rem 0.5rem !important; } } @media (min-width: 992px) and (max-width: 1399.98px) { body.sg-portal-page .site-header--sg-portal .site-header__nav a { padding: 0.55rem 0.75rem !important; font-size: 0.8125rem !important; } } @media (max-width: 991.98px) { body.sg-portal-page .site-header--sg-portal .site-header__rail .navbar-wrapper:not(.is-navbar-menu-open) { display: none !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; height: 0 !important; overflow: hidden !important; } body.sg-portal-page .site-header--sg-portal .navbar-panel, body.sg-portal-page .site-header--sg-portal .site-header__nav-wrap.navbar-panel, body.sg-portal-page .site-header--sg-portal .navbar-wrapper:not(.is-navbar-menu-open) .site-header__nav-wrap, body.sg-portal-page .site-header--sg-portal .site-header__nav-wrap:not(:has(.site-header__nav-panel.is-open)) { display: none !important; min-height: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; overflow: hidden !important; } body.sg-portal-page .site-header--sg-portal .navbar-wrapper.is-navbar-menu-open .site-header__nav-wrap, body.sg-portal-page .site-header--sg-portal .navbar-wrapper:has(.site-header__nav-panel.is-open) .site-header__nav-wrap { display: block !important; height: 0 !important; min-height: 0 !important; overflow: visible !important; border: none !important; background: transparent !important; box-shadow: none !important; } body.sg-portal-page .site-header__nav-panel:not(.is-open) { display: none !important; visibility: hidden !important; height: 0 !important; max-height: 0 !important; overflow: hidden !important; pointer-events: none !important; } } /* Desktop: warna panel nav — identik Beranda (tanpa mengubah ukuran) */ @media (min-width: 992px) { body.sg-portal-page .site-header--sg-portal .navbar-panel, body.sg-portal-page .site-header--sg-portal .site-header__nav-wrap.navbar-panel, body.sg-portal-page .site-header--sg-portal .org-navbar__nav-wrap.navbar-panel { background: rgba(2, 22, 48, 0.94) !important; border-color: rgba(147, 197, 253, 0.18) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 10px 32px rgba(0, 10, 28, 0.42) !important; } body.sg-portal-page .site-header--sg-portal.is-scrolled .navbar-panel, body.sg-portal-page .site-header--sg-portal.is-scrolled .site-header__nav-wrap.navbar-panel, body.sg-portal-page .site-header--sg-portal.is-scrolled .org-navbar__nav-wrap.navbar-panel { background: rgba(2, 22, 48, 0.97) !important; } } @media (max-width: 991.98px) { .sg-portal-page .site-header__nav-panel.is-open { background: var(--sg-nav-panel-bg, rgba(2, 22, 48, 0.94)) !important; background-color: transparent !important; border-color: var(--sg-nav-panel-border, rgba(147, 197, 253, 0.18)) !important; } }