/** Public header shell — extracted from includes/header.php */ /* NOTE: Color tokens (primary/secondary/header/footer + text-on-*) are already injected by `assets/css/global-theme.php`. We intentionally DO NOT override them here, otherwise text contrast (e.g., footer links) can become unreadable when colors change. */ /* Hide page loader after load */ .page-loaded .page-loader { opacity: 0; visibility: hidden; pointer-events: none; } /* Dynamic --pfl-mobile-logo / --pfl-site-name set on (header.php) */ /* ── Mobile Header Responsive Fixes ── */ @media (max-width: 991px) { /* Top utility bar — hide most links on mobile to save space */ .pfl-top-bar .pfl-quick-links { display: none !important; } .pfl-top-bar .container { justify-content: flex-end; } .pfl-top-bar { padding: 5px 0; } .pfl-top-bar .container { min-height: 42px; } /* Brand area — compact on mobile */ .pfl-brand-area { padding: 8px 12px; flex: 1; min-width: 0; } .pfl-brand-content.has-logo .pfl-brand-logo { max-height: 44px !important; height: auto !important; width: auto !important; max-width: min(220px, calc(100vw - 120px)) !important; object-fit: contain !important; } .pfl-brand-content.no-logo .pfl-brand-logo { height: 42px !important; width: auto !important; } .pfl-brand-name-np { font-size: 1rem !important; } .pfl-brand-name-en, .pfl-brand-slogan { font-size: 0.72rem !important; } .pfl-since-badge { display: none !important; } /* Mobile toggle button — ensure visibility */ .pfl-mobile-toggle { display: flex !important; align-items: center; justify-content: center; width: 44px; height: 44px; min-width: 44px; min-height: 44px; background: var(--primary-color); color: var(--text-on-primary, #fff); border: none; border-radius: 8px; font-size: 1.05rem; cursor: pointer; flex-shrink: 0; margin-left: 6px; } /* Mobile drawer base — DARK admin-style */ .main-nav { position: fixed !important; top: 0; left: 0; right: auto; width: min(300px, 85vw); max-width: 300px; height: 100vh; height: 100dvh; z-index: 200010 !important; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); transform: translate3d(-110%, 0, 0); box-shadow: 4px 0 24px rgba(0,0,0,.25); padding: 0; } .main-nav.nav-open, .main-nav.open, .main-nav.active { transform: translate3d(0, 0, 0) !important; } .close-menu { display: flex !important; } /* ── Mobile drawer: nav items — white text on dark background ── */ .main-nav .nav-menu > li > a { color: rgba(255,255,255,.90) !important; font-weight: 500; } .main-nav .nav-menu > li > a:hover, .main-nav .nav-menu > li > a:active, .main-nav .nav-menu > li.active > a { background: rgba(255,255,255,.12) !important; color: #fff !important; } .main-nav .nav-menu > li { border-bottom-color: rgba(255,255,255,.10) !important; } .main-nav .dropdown li > a { color: #1f2937 !important; background: transparent !important; } .main-nav .dropdown li > a:hover { background: #eef6f1 !important; color: #14532d !important; } .main-nav .close-menu { background: rgba(255,255,255,.15) !important; color: #fff !important; } /* FIX: Dropdown inside drawer — no absolute, full width, no content leak */ .main-nav .dropdown, .main-nav .nav-menu .dropdown { position: static !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-shadow: none !important; border-radius: 0 !important; border: none !important; padding: 4px 0 !important; display: none; } .main-nav .has-dropdown.open > .dropdown, .main-nav .has-sub.open > .dropdown { display: block !important; } .main-nav .dropdown li > a { padding-left: 2.2rem !important; } /* Body scroll lock when drawer open */ body.mobile-nav-open { overflow: hidden !important; position: fixed; width: 100%; } /* Overlay backdrop — below main-nav; backdrop-filter removed (mobile rendering fix) */ .mobile-nav-backdrop { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 199998; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } #pflMobileBackdrop { z-index: 200000 !important; } .mobile-nav-backdrop.active { display: block; } /* Main header flex layout fix */ .pfl-main-header { display: flex !important; align-items: center !important; padding: 5px 10px !important; gap: 6px !important; } .pfl-nav-area { display: flex !important; align-items: center !important; justify-content: flex-end !important; gap: 6px !important; flex: 0 0 auto !important; } /* Mobile मा right utility icons neat/compact राख्ने */ .pfl-top-right { display: flex !important; align-items: center; gap: 6px; } .pfl-top-right > li > a, .pfl-top-right .pfl-bell-btn { min-width: 34px; height: 34px; padding: 0 9px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; } .pfl-top-right .pfl-lang-wrap { display: inline-flex !important; align-items: center; gap: 4px; background: transparent; border: 0; box-shadow: none; border-radius: 999px; padding: 0; } .pfl-top-right .pfl-lang-wrap a { width: auto !important; min-width: 36px !important; height: auto !important; min-height: 44px !important; text-align: center; padding: 0 8px !important; border-radius: 999px; font-size: 12px; line-height: 1; font-weight: 800; letter-spacing: .1px; color: rgba(255,255,255,.92) !important; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.10); transition: all .18s ease; display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 0 !important; } .pfl-top-right .pfl-lang-wrap .pfl-lang-link .pfl-lang-dot { display: none !important; } .pfl-top-right .pfl-lang-wrap a.active { background: #fff !important; color: #14532d !important; border-color: rgba(255,255,255,.72); box-shadow: 0 1px 2px rgba(0,0,0,.15); } .pfl-top-right .pfl-lang-wrap a:not(.active):hover { background: rgba(255,255,255,.22) !important; } .pfl-top-right .pfl-dark-wrap > a { min-width: 44px !important; width: 44px !important; min-height: 44px !important; height: 44px !important; padding: 0 !important; border-radius: 8px !important; } .pfl-top-right .pfl-dark-wrap > a i { font-size: 13px; } .pfl-login-drop-wrap { position: relative; z-index: 210000; } .pfl-login-menu { z-index: 210001; right: 0; left: auto; } .pfl-top-right a, .pfl-top-right button, .pfl-mobile-toggle { -webkit-tap-highlight-color: transparent; outline: none !important; box-shadow: none !important; } .pfl-top-right a:focus-visible, .pfl-top-right button:focus-visible, .pfl-mobile-toggle:focus-visible { outline: 2px solid rgba(255,255,255,.45) !important; outline-offset: 1px; } /* Fixed mobile order: EN/NP -> Dark -> Bell -> Login */ .pfl-top-right { display: flex !important; } .pfl-top-right .pfl-lang-wrap { order: 1; } .pfl-top-right .pfl-dark-wrap { order: 2; } .pfl-top-right .pfl-bell-wrap { order: 3; } .pfl-top-right .pfl-login-drop-wrap { order: 4; } /* ── Mobile drawer modernisation ────────────────────────── */ /* Drawer header (close button area) — brand strip */ .main-nav .close-menu { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; padding: 14px 16px !important; font-size: 0.95rem !important; font-weight: 700 !important; letter-spacing: .01em !important; color: #fff !important; background: rgba(0,0,0,.22) !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; border-radius: 0 !important; margin-bottom: 6px !important; width: 100% !important; cursor: pointer !important; } .main-nav .close-menu i { font-size: 1.1rem !important; opacity: .85; } /* Nav items — bigger touch targets, cleaner look */ .main-nav .nav-menu > li > a { padding: 12px 44px 12px 16px !important; font-size: 0.97rem !important; font-weight: 500 !important; line-height: 1.4 !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 8px !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; border-radius: 0 !important; transition: background .15s !important; text-align: left !important; white-space: normal !important; overflow-wrap: anywhere !important; position: relative !important; } .main-nav .nav-menu > li > a > .mnav-main-label { text-align: left !important; white-space: normal !important; overflow-wrap: anywhere !important; } .main-nav .nav-menu > li > a .mnav-main-icon, .main-nav .nav-menu > li > a > .lucide-icon:first-child, .main-nav .nav-menu > li > a > svg:first-child { width: 18px !important; min-width: 18px !important; height: 18px !important; } .main-nav .nav-menu > li.has-dropdown > a > .lucide-chevron-down, .main-nav .nav-menu > li.has-sub > a > .lucide-chevron-down, .main-nav .nav-menu > li.has-dropdown > a > .fa-chevron-down, .main-nav .nav-menu > li.has-sub > a > .fa-chevron-down, .main-nav .nav-menu > li.has-dropdown > a > i[data-lucide="chevron-down"], .main-nav .nav-menu > li.has-sub > a > i[data-lucide="chevron-down"] { position: absolute !important; right: 14px !important; top: 50% !important; transform: translateY(-50%) !important; margin: 0 !important; } .main-nav .nav-menu > li:last-child > a { border-bottom: none !important; } /* Dropdown sub-items */ .main-nav .dropdown li > a { min-height: 42px !important; padding: 9px 10px 9px 11px !important; font-size: 0.86rem !important; border: 1px solid #e2ece6 !important; border-radius: 10px !important; background: #ffffff !important; display: flex !important; align-items: center !important; gap: 9px !important; color: #1f2937 !important; font-weight: 640 !important; } .main-nav .dropdown li + li > a { margin-top: 6px !important; } .main-nav .dropdown li:last-child > a { border-bottom: 1px solid #e2ece6 !important; } /* Active item highlight */ .main-nav .nav-menu > li.active > a { background: rgba(255,255,255,.14) !important; color: #fff !important; } /* Dropdown container panel */ .main-nav .dropdown { background: #f2f7f4 !important; margin: 8px 2px 2px !important; padding: 7px !important; border: 1px solid #d9e7df !important; border-radius: 14px !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.75) !important; } /* ── dd-chevron-btn: disabled; parent row handles submenu toggle ── */ .main-nav .dd-chevron-btn { display: none !important; visibility: hidden !important; pointer-events: none !important; } .main-nav .dd-chevron-btn:hover, .main-nav .dd-chevron-btn:active { background: transparent !important; } .main-nav .has-dropdown.open > .dd-chevron-btn .fa-chevron-down, .main-nav .has-sub.open > .dd-chevron-btn .fa-chevron-down { transform: rotate(180deg) !important; } .main-nav .has-dropdown > a { padding-right: 16px !important; } /* Ensure li is relative for absolute chevron button */ .main-nav .has-dropdown, .main-nav .has-sub { position: relative !important; } /* Submenu open animation */ .main-nav .has-dropdown.open > .dropdown, .main-nav .has-sub.open > .dropdown { display: block !important; } } @media (max-width: 575px) { /* Very small screens — readable banner logo + compact utilities */ .pfl-brand-content.has-logo .pfl-brand-logo { max-height: 44px !important; height: 42px !important; width: auto !important; max-width: min(240px, calc(100vw - 88px)) !important; object-fit: contain !important; } .pfl-brand-content.no-logo .pfl-brand-logo { height: 32px !important; } .pfl-brand-name-np { font-size: 0.82rem !important; } .pfl-brand-area { padding-left: 2px !important; } .pfl-brand-content { gap: 6px !important; align-items: center !important; } .pfl-top-right { gap: 5px !important; align-items: center !important; } /* Language: compact segmented EN|NP pill (was two round 40px buttons) */ .pfl-top-right .pfl-lang-wrap { display: inline-flex !important; align-items: center !important; gap: 0 !important; padding: 2px !important; background: rgba(255,255,255,.14) !important; border: 1px solid rgba(255,255,255,.24) !important; border-radius: 999px !important; box-shadow: none !important; } .pfl-top-right .pfl-lang-wrap .pfl-lang-divider { display: none !important; } .pfl-top-right .pfl-lang-wrap .pfl-lang-dot { display: none !important; } .pfl-top-right .pfl-lang-wrap a, .pfl-top-right .pfl-lang-wrap .pfl-lang-link { min-width: 0 !important; min-height: 26px !important; width: auto !important; height: 26px !important; padding: 0 9px !important; font-size: 10.5px !important; font-weight: 800 !important; letter-spacing: .2px !important; border: 0 !important; border-radius: 999px !important; background: transparent !important; color: rgba(255,255,255,.9) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .pfl-top-right .pfl-lang-wrap a.active, .pfl-top-right .pfl-lang-wrap .pfl-lang-link.active { background: #fff !important; color: #14532d !important; box-shadow: 0 1px 2px rgba(0,0,0,.14) !important; } .pfl-top-right .pfl-lang-wrap .pfl-lang-link span:not(.pfl-lang-dot) { display: inline !important; font-size: 10.5px !important; line-height: 1 !important; color: inherit !important; opacity: 1 !important; } /* Dark + login: match the compact pill height, aligned on one row */ .pfl-top-right .pfl-dark-wrap > a { min-width: 32px !important; width: 32px !important; height: 30px !important; border-radius: 8px !important; } .pfl-top-right .pfl-login-toggle { padding: 0 11px; min-height: 32px; } .pfl-top-right .pfl-login-toggle .pfl-login-caret { display: none; } .pfl-top-right .pfl-login-toggle { font-size: 0; } .pfl-top-right .pfl-login-toggle i { font-size: 15px; margin: 0; } .pfl-top-right #topbarSearchBtn { display: none !important; } .pfl-mobile-toggle { width: 42px; height: 42px; min-width: 42px; min-height: 42px; } .pfl-main-header { padding: 5px 8px !important; align-items: center !important; } /* Login dropdown: mobile मा full visible panel (no awkward overlap/cutoff) */ .pfl-top-bar { z-index: 300000 !important; } .pfl-login-drop-wrap { position: static !important; } .pfl-login-menu { position: fixed !important; top: calc(env(safe-area-inset-top, 0px) + 52px) !important; left: 8px !important; right: 8px !important; width: auto !important; max-width: none !important; max-height: min(72vh, 520px) !important; overflow-y: auto !important; z-index: 300010 !important; } }