/* ========================================================= 5M BIOTECH INDIA SITEWIDE HEADER V1 Mobile-first Senior-professional readability Clean B2B pharmaceutical navigation ========================================================= */ /* --------------------------------------------------------- HEADER FOUNDATION --------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: 9999; background: rgba( 255, 255, 255, .98 ); box-shadow: 0 1px 0 rgba( 7, 47, 61, .09 ); } .site-main-header-wrap, .site-main-header-wrap .site-header-row-container-inner, .site-header-row-container-inner { background: #ffffff !important; } .site-main-header-wrap .site-header-row-container-inner { border-bottom: 1px solid #dce8e4 !important; } /* --------------------------------------------------------- HEADER WIDTH --------------------------------------------------------- */ .site-main-header-inner-wrap { width: min( 1240px, calc(100% - 42px) ) !important; max-width: 1240px !important; margin: 0 auto !important; padding: 0 !important; } /* --------------------------------------------------------- LOGO --------------------------------------------------------- */ .site-header .custom-logo { width: auto !important; max-width: 184px !important; max-height: 47px !important; object-fit: contain; } /* --------------------------------------------------------- PRIMARY NAVIGATION --------------------------------------------------------- */ .main-navigation .primary-menu-container > ul { align-items: center; } .main-navigation .primary-menu-container > ul > li > a { min-height: 70px; display: flex; align-items: center; padding: 21px 11px !important; color: #28383d !important; font-size: 15px !important; font-weight: 620 !important; line-height: 1.2; letter-spacing: .002em; white-space: nowrap; transition: color .18s ease, background .18s ease; } .main-navigation .primary-menu-container > ul > li > a:hover, .main-navigation .primary-menu-container > ul > li.current-menu-item > a, .main-navigation .primary-menu-container > ul > li.current-menu-ancestor > a { color: #08715c !important; } /* --------------------------------------------------------- DROPDOWNS --------------------------------------------------------- */ .main-navigation .sub-menu { min-width: 285px !important; padding: 8px !important; background: #ffffff !important; border: 1px solid #dce8e4 !important; border-radius: 10px; box-shadow: 0 18px 48px rgba( 7, 47, 61, .11 ) !important; } .main-navigation .sub-menu li a { display: block; padding: 12px 14px !important; border-radius: 7px; color: #405156 !important; font-size: 14px !important; font-weight: 530 !important; line-height: 1.4; transition: color .16s ease, background .16s ease; } .main-navigation .sub-menu li a:hover { background: #f1f7f5 !important; color: #08715c !important; } /* --------------------------------------------------------- PRODUCT ENQUIRY CTA --------------------------------------------------------- */ .main-navigation .m5-header-enquiry-cta > a { min-height: auto !important; margin-left: 8px; padding: 11px 16px !important; border: 1px solid #08715c; border-radius: 8px; background: #08715c; color: #ffffff !important; font-weight: 700 !important; box-shadow: 0 4px 14px rgba( 8, 113, 92, .14 ); } .main-navigation .m5-header-enquiry-cta > a:hover, .main-navigation .m5-header-enquiry-cta.current-menu-item > a { background: #065e4e !important; border-color: #065e4e; color: #ffffff !important; } /* --------------------------------------------------------- KEYBOARD ACCESSIBILITY --------------------------------------------------------- */ .main-navigation a:focus-visible, .site-branding a:focus-visible { outline: 3px solid rgba( 8, 113, 92, .55 ); outline-offset: 3px; border-radius: 5px; } /* --------------------------------------------------------- WORDPRESS ADMIN BAR --------------------------------------------------------- */ body.admin-bar .site-header { top: 32px; } /* --------------------------------------------------------- TABLET --------------------------------------------------------- */ @media (max-width: 1100px) and (min-width: 769px) { .site-main-header-inner-wrap { width: calc(100% - 30px) !important; } .main-navigation .primary-menu-container > ul > li > a { padding: 20px 8px !important; font-size: 14px !important; } .site-header .custom-logo { max-width: 160px !important; max-height: 43px !important; } } /* --------------------------------------------------------- MOBILE DRAWER --------------------------------------------------------- */ @media (max-width: 768px) { .site-header { position: sticky; top: 0; } body.admin-bar .site-header { top: 46px; } .site-main-header-inner-wrap { width: calc(100% - 28px) !important; } .site-header .custom-logo { max-width: 158px !important; max-height: 42px !important; } .mobile-navigation ul { padding: 6px 0; } .mobile-navigation li { border-bottom: 1px solid #e5eeeb; } .mobile-navigation li:last-child { border-bottom: 0; } .mobile-navigation a { min-height: 52px; display: flex; align-items: center; padding: 13px 6px !important; color: #24373d !important; font-size: 17px !important; font-weight: 600 !important; line-height: 1.35; } .mobile-navigation .sub-menu { padding: 2px 0 10px 14px; } .mobile-navigation .sub-menu a { min-height: 48px; color: #52666b !important; font-size: 16px !important; font-weight: 500 !important; } .mobile-navigation .m5-header-enquiry-cta { margin-top: 13px; border-bottom: 0; } .mobile-navigation .m5-header-enquiry-cta a { min-height: 50px; justify-content: center; padding: 13px 16px !important; border-radius: 8px; background: #08715c !important; color: #ffffff !important; font-weight: 700 !important; } .drawer-nav-drop-wrap .drawer-sub-toggle { min-width: 48px; min-height: 48px; } .popup-drawer .drawer-inner { max-width: 390px; background: #ffffff; } } /* --------------------------------------------------------- VERY SMALL MOBILE --------------------------------------------------------- */ @media (max-width: 390px) { .site-header .custom-logo { max-width: 145px !important; } .mobile-navigation a { font-size: 17px !important; } } /* ========================================================= 5M MOBILE HEADER TAP AREA REFINEMENT V1 ========================================================= */ @media (max-width:767px) { /* * Increase clickable areas without visually enlarging * the logo artwork or menu icon. */ a.brand.has-logo-image { display:inline-flex !important; align-items:center !important; min-height:48px !important; } #mobile-toggle { width:48px !important; min-width:48px !important; height:48px !important; min-height:48px !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } }