/* ========================================================= JRAIE — CLEANED & DEDUPLICATED STYLESHEET This file removes old duplicate/conflicting versions of the header, navbar, and Register/Login rules that had piled up across earlier edits. Only the final, working version of each section is kept. File size was also reduced well below common database TEXT-field limits (this file is well under 65KB, vs ~66KB before) so that OJS doesn't silently cut off the end when you paste it into Setup -> Appearance -> Custom CSS. ========================================================= */ /* ====================================================== MAIN CONTENT CARD ====================================================== */ .pkp_structure_main { background: #ffffff !important; border-top: 5px solid #1e73be !important; border-left: 1px solid #e2e8f0 !important; border-right: 1px solid #e2e8f0 !important; border-bottom: 1px solid #e2e8f0 !important; border-radius: 20px !important; padding: 35px !important; margin-top: 25px !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08) !important; } /* ====================================================== HEADINGS ====================================================== */ .pkp_structure_main h1, .pkp_structure_main h2 { color: #0f172a !important; font-weight: 700 !important; padding-bottom: 10px; margin-bottom: 20px; } /* Remove OJS default divider */ .page hr { display: none !important; } /* ====================================================== ARTICLE LIST ====================================================== */ /* ====================================================== ARTICLE LIST (ENHANCED ANIMATION - SINGLE COLUMN) ====================================================== */ .cmp_article_list { background: transparent !important; border: none !important; padding: 0 !important; margin-top: 20px; display: block; /* Single column layout preserved */ } .obj_article_summary { background: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 18px !important; padding: 22px !important; margin-bottom: 25px !important; /* Space between cards */ transition: all .35s ease; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05); position: relative; overflow: hidden; } /* Yaha wahi professional animation hai jo aapne manga tha */ .obj_article_summary:hover { transform: translateY(-8px) scale(1.02); /* Upar uthega aur thoda bada hoga */ border-color: #38bdf8 !important; box-shadow: 0 20px 30px rgba(0, 0, 0, 0.12), 0 8px 12px rgba(0, 0, 0, 0.08); } .obj_article_summary .title a { color: #0f172a !important; font-weight: 700; font-size: 18px; text-decoration: none; transition: color 0.3s ease; } /* Hover par title ka color change (Optional but looks premium) */ .obj_article_summary:hover .title a { color: #097996 !important; } /* PDF Button transition match karne ke liye */ .obj_article_summary .galleys_links a { transition: all 0.3s ease; } /* ========================= FOOTER ========================= */ .pkp_structure_footer { /* Image matching solid color */ background-color: #1F618D; color: #ffffff; /* Height kam karne ke liye padding ko 40px se 20px kar diya */ padding: 20px 30px; border-radius: 0; width: 100%; box-sizing: border-box; display: block; clear: both; } /* Footer Heading Styles */ .pkp_structure_footer h1, .pkp_structure_footer h2, .pkp_structure_footer h3, .pkp_structure_footer .footer-column-title { color: #ffffff; font-weight: 700; margin-bottom: 8px; /* Space kam karne ke liye margin kam kiya */ text-transform: uppercase; font-size: 1em; } /* Hyperlink Styles - New Color for better visibility */ .pkp_structure_footer a { color: #a3e7fc; /* Soft Cyan/Blue color jo dark background par chamkega */ font-weight: 400; text-decoration: none; transition: all 0.3s ease; } /* Hover effect */ .pkp_structure_footer a:hover { color: #ffffff; /* Hover par pure white */ text-decoration: underline; } /* Normal Text (Email, ISSN etc.) */ .pkp_structure_footer p, .pkp_structure_footer span { color: #ffffff; line-height: 1.4; /* Line height kam ki taaki gap kam ho jaye */ margin-bottom: 5px; } /* OJS branding hatane ke liye */ .pkp_brand_footer, .pkp_footer_content .pkp_branding, #pkp_branding, .pkp_branding { display: none !important; } /* Mobile Responsiveness */ @media (max-width: 767px) { .pkp_structure_footer { padding: 15px; /* Mobile par aur bhi compact */ } } /* Login button color matching */ .pkp_form_login .pkp_button_primary { background: #006b99 !important; color: #ffffff !important; border: none !important; } .pkp_form_login .pkp_button_primary:hover { background: #008cc9 !important; } /* ====================================================== ONLY FOR THE LINKS/POLICIES CARD - UPDATED (V2) ====================================================== */ /* Is block ke andar ke sabhi links ko BLUE karne ke liye */ .pkp_block.block_custom ul li a { color: #007bff !important; /* Bright Professional Blue */ font-weight: 600 !important; font-size: 14px !important; text-decoration: none !important; display: inline-block !important; } /* Dots ko SMALL karne ke liye */ .pkp_block.block_custom ul li::before { content: '' !important; position: absolute !important; left: 0 !important; top: 8px !important; width: 5px !important; /* Bilkul chota size */ height: 5px !important; background-color: #38bdf8 !important; border-radius: 50% !important; display: block !important; } /* List item ki spacing */ .pkp_block.block_custom ul li { position: relative !important; padding-left: 18px !important; list-style: none !important; /* Default dots hatane ke liye */ border-bottom: 1px solid #f1f5f9 !important; margin-bottom: 10px !important; padding-bottom: 5px !important; } /* Hover effect */ .pkp_block.block_custom ul li a:hover { color: #0056b3 !important; text-decoration: underline !important; } /* ========================================================= JRAIE - RESPONSIVE FULL WIDTH NAVBAR LOGO + MENU + SEARCH Add this section at the VERY BOTTOM of styleSheet.css ========================================================= */ /* ========================================================= 1. FULL WIDTH NAVBAR ========================================================= */ .pkp_navigation_primary_row { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #04072A !important; box-sizing: border-box !important; } /* ========================================================= 2. NAVBAR WRAPPER ========================================================= */ .pkp_navigation_primary_wrapper { width: 100% !important; max-width: 1500px !important; margin: 0 auto !important; padding: 0 25px !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; gap: 20px !important; } /* ========================================================= 3. JRAIE LOGO ========================================================= */ /* CHANGE ONLY THIS URL. Put your actual JRAIE logo URL here. */ .pkp_navigation_primary_wrapper::before { content: "" !important; width: 78px !important; height: 78px !important; min-width: 78px !important; background-image: url("https://galaxiauniverse.com/public/site/images/admin/1.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; display: block !important; flex-shrink: 0 !important; } /* ========================================================= 4. MAIN NAVIGATION ========================================================= */ .pkp_navigation_primary { flex: 1 1 auto !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; background: transparent !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 2px !important; } /* ========================================================= 5. MAIN MENU ITEMS ========================================================= */ .pkp_navigation_primary>li { margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } /* ========================================================= 6. MAIN MENU LINKS ========================================================= */ .pkp_navigation_primary>li>a { color: #ffffff !important; padding: 25px 12px !important; margin: 0 !important; border-radius: 6px !important; background: transparent !important; font-size: 14px !important; font-weight: 600 !important; transition: all 0.3s ease !important; } /* ========================================================= 7. MENU HOVER ========================================================= */ .pkp_navigation_primary>li>a:hover { background: rgba(56, 189, 248, 0.18) !important; color: #38bdf8 !important; } /* ========================================================= 8. SEARCH ========================================================= */ .pkp_navigation_search { flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; } /* ========================================================= 9. SEARCH BUTTON ========================================================= */ .pkp_navigation_search a.pkp_search { background: transparent !important; color: #ffffff !important; padding: 10px 16px !important; margin: 0 !important; border: 1px solid rgba(56, 189, 248, 0.45) !important; border-radius: 30px !important; font-size: 14px !important; font-weight: 600 !important; transition: all 0.3s ease !important; } /* ========================================================= 10. SEARCH HOVER ========================================================= */ .pkp_navigation_search a.pkp_search:hover { background: #38bdf8 !important; color: #04072A !important; border-color: #38bdf8 !important; box-shadow: 0 0 18px rgba(56, 189, 248, 0.35) !important; } /* ========================================================= 11. DROPDOWN ========================================================= */ .pkp_navigation_primary ul, .pkp_navigation_user ul { background: #0a0f2d !important; border: 1px solid rgba(56, 189, 248, 0.45) !important; border-radius: 10px !important; min-width: 220px !important; padding: 8px 0 !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45) !important; z-index: 9999 !important; } /* ========================================================= 12. DROPDOWN LINKS ========================================================= */ .pkp_navigation_primary ul li a, .pkp_navigation_user ul li a { color: #ffffff !important; padding: 11px 20px !important; font-size: 14px !important; transition: all 0.25s ease !important; } /* ========================================================= 13. DROPDOWN HOVER ========================================================= */ .pkp_navigation_primary ul li a:hover, .pkp_navigation_user ul li a:hover { background: rgba(56, 189, 248, 0.18) !important; color: #38bdf8 !important; } /* ========================================================= 14. LARGE LAPTOP / SMALL DESKTOP 1200px ========================================================= */ @media (max-width: 1200px) { .pkp_navigation_primary_wrapper { padding-left: 15px !important; padding-right: 15px !important; gap: 12px !important; } .pkp_navigation_primary_wrapper::before { width: 68px !important; height: 68px !important; min-width: 68px !important; } .pkp_navigation_primary>li>a { padding: 22px 8px !important; font-size: 13px !important; } .pkp_navigation_search a.pkp_search { padding: 9px 12px !important; font-size: 13px !important; } } /* ========================================================= 15. TABLET 992px ========================================================= */ @media (max-width: 992px) { .pkp_navigation_primary_wrapper { padding: 10px 15px !important; gap: 10px !important; } .pkp_navigation_primary_wrapper::before { width: 60px !important; height: 60px !important; min-width: 60px !important; } .pkp_navigation_primary>li>a { padding: 18px 7px !important; font-size: 12px !important; } } /* ========================================================= 16. MOBILE 767px ========================================================= */ @media (max-width: 767px) { .pkp_navigation_primary_row { width: 100% !important; overflow: visible !important; } .pkp_navigation_primary_wrapper { width: 100% !important; padding: 10px 15px !important; display: flex !important; flex-wrap: wrap !important; justify-content: space-between !important; gap: 10px !important; } /* LOGO */ .pkp_navigation_primary_wrapper::before { width: 58px !important; height: 58px !important; min-width: 58px !important; margin: 0 !important; } /* SEARCH */ .pkp_navigation_search { margin-left: auto !important; } .pkp_navigation_search a.pkp_search { padding: 8px 12px !important; font-size: 13px !important; } /* IMPORTANT: Don't force the desktop flex menu on mobile. OJS mobile menu will handle the navigation. */ .pkp_navigation_primary { width: 100% !important; margin-top: 5px !important; display: block !important; } .pkp_navigation_primary>li { width: 100% !important; white-space: normal !important; } .pkp_navigation_primary>li>a { width: 100% !important; box-sizing: border-box !important; padding: 13px 15px !important; font-size: 14px !important; text-align: left !important; } /* MOBILE DROPDOWNS */ .pkp_navigation_primary ul { position: static !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; box-shadow: none !important; border-radius: 0 !important; border-left: 2px solid #38bdf8 !important; } } /* ========================================================= 17. VERY SMALL MOBILE 480px ========================================================= */ @media (max-width: 480px) { .pkp_navigation_primary_wrapper { padding: 8px 10px !important; } .pkp_navigation_primary_wrapper::before { width: 52px !important; height: 52px !important; min-width: 52px !important; } .pkp_navigation_search a.pkp_search { padding: 7px 10px !important; font-size: 12px !important; } .pkp_navigation_primary>li>a { padding: 12px !important; font-size: 13px !important; } } /* ========================================================= 18. PREVENT HORIZONTAL SCROLLING ========================================================= */ html, body { max-width: 100% !important; overflow-x: hidden !important; } /* ========================================================= 19. MOBILE IMAGE SAFETY ========================================================= */ img { max-width: 100% !important; height: auto !important; } /* ========================================================= 20. OPTIONAL - REMOVE JOURNAL TITLE ABOVE NAVBAR ========================================================= */ /* UNCOMMENT ONLY IF YOU WANT TO REMOVE: "Journal of responsible AI & ethics" from above the navbar. */ /* .pkp_structure_head .pkp_site_name { display: none !important; } */ /* ========================================================= FIX: KEEP ALL NAVIGATION ITEMS ON ONE ROW ========================================================= */ .pkp_navigation_primary { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: center !important; width: auto !important; flex: 1 1 auto !important; gap: 0 !important; } .pkp_navigation_primary>li { flex: 0 0 auto !important; white-space: nowrap !important; } .pkp_navigation_primary>li>a { white-space: nowrap !important; } /* Search stays on the right */ .pkp_navigation_search { flex: 0 0 auto !important; margin-left: 10px !important; } /* ========================================================= FIX DROPDOWN TEXT OVERFLOW ========================================================= */ /* Dropdown box */ .pkp_navigation_primary ul, .pkp_navigation_user ul { width: 320px !important; min-width: 320px !important; max-width: 320px !important; box-sizing: border-box !important; padding: 8px 0 !important; overflow: hidden !important; } /* Dropdown menu items */ .pkp_navigation_primary ul li, .pkp_navigation_user ul li { width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; } /* Dropdown links */ .pkp_navigation_primary ul li a, .pkp_navigation_user ul li a { width: 100% !important; box-sizing: border-box !important; display: block !important; padding: 12px 20px !important; color: #ffffff !important; font-size: 14px !important; font-weight: 500 !important; line-height: 1.5 !important; white-space: normal !important; overflow-wrap: break-word !important; word-wrap: break-word !important; word-break: normal !important; text-decoration: none !important; transition: all 0.25s ease !important; } /* Dropdown hover */ .pkp_navigation_primary ul li a:hover, .pkp_navigation_user ul li a:hover { background: rgba(56, 189, 248, 0.18) !important; color: #38bdf8 !important; padding-left: 25px !important; } /* ========================================================= MOBILE DROPDOWN ========================================================= */ @media (max-width: 767px) { .pkp_navigation_primary ul, .pkp_navigation_user ul { width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; } .pkp_navigation_primary ul li a, .pkp_navigation_user ul li a { width: 100% !important; box-sizing: border-box !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; padding: 12px 15px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .pkp_navigation_primary ul, .pkp_navigation_user ul { width: 100% !important; min-width: 0 !important; max-width: 100% !important; } .pkp_navigation_primary ul li a, .pkp_navigation_user ul li a { font-size: 13px !important; line-height: 1.45 !important; padding: 10px 12px !important; } } /* another 2 navbar updated code */ /* ========================================================= FINAL FIX Header + Navbar + Register/Login DO NOT CHANGE NAVBAR MENU DESIGN ========================================================= */ /* ========================================================= 1. HEADER HEIGHT ========================================================= */ .pkp_structure_head { background-image: none !important; background-color: #ffffff !important; width: 100% !important; min-height: 150px !important; height: auto !important; position: relative !important; display: block !important; overflow: visible !important; box-sizing: border-box !important; } /* ========================================================= 2. JOURNAL HEADER AREA ========================================================= */ .pkp_structure_head .pkp_site_name { position: relative !important; width: 100% !important; min-height: 150px !important; height: 150px !important; margin: 0 !important; padding: 28px 30px 20px 175px !important; box-sizing: border-box !important; display: block !important; background: #ffffff !important; z-index: 5 !important; } /* ========================================================= 3. LOGO - TOP LEFT ========================================================= */ .pkp_structure_head .pkp_site_name::before { content: "" !important; position: absolute !important; left: 25px !important; top: 10px !important; width: 135px !important; height: 135px !important; background-image: url("https://galaxiauniverse.com/public/site/images/admin/1.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; display: block !important; z-index: 10 !important; } /* ========================================================= 4. JOURNAL TITLE ========================================================= */ .pkp_structure_head .pkp_site_name a { color: #111111 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(32px, 3.2vw, 50px) !important; font-weight: 700 !important; line-height: 1.1 !important; text-decoration: none !important; display: block !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; } /* ========================================================= 5. ISSN ========================================================= */ .pkp_structure_head .pkp_site_name::after { content: "ISSN (Online): 3117-6402 | ISSN (Print): 3117-6410" !important; display: block !important; margin-top: 12px !important; color: #222222 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 19px !important; font-weight: 500 !important; line-height: 1.3 !important; white-space: nowrap !important; } /* ========================================================= 6. REMOVE LOGO FROM NAVBAR ========================================================= */ .pkp_navigation_primary_wrapper::before { content: none !important; display: none !important; width: 0 !important; height: 0 !important; background-image: none !important; } /* ========================================================= 7. BRING NAVBAR BACK ========================================================= */ .pkp_navigation_primary_row { display: block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; width: 100% !important; max-width: 100% !important; min-height: 65px !important; background: #04072A !important; z-index: 9998 !important; overflow: visible !important; box-sizing: border-box !important; } /* Navbar wrapper */ .pkp_navigation_primary_wrapper { display: flex !important; visibility: visible !important; opacity: 1 !important; width: 100% !important; max-width: 1500px !important; min-height: 65px !important; margin: 0 auto !important; padding: 0 25px !important; align-items: center !important; box-sizing: border-box !important; position: relative !important; z-index: 9999 !important; } /* ========================================================= 8. EXISTING NAVIGATION ========================================================= */ .pkp_navigation_primary { display: flex !important; visibility: visible !important; opacity: 1 !important; flex: 1 1 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 0 !important; } .pkp_navigation_primary>li { display: block !important; visibility: visible !important; opacity: 1 !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } .pkp_navigation_primary>li>a { display: flex !important; visibility: visible !important; opacity: 1 !important; align-items: center !important; justify-content: center !important; color: #ffffff !important; background: transparent !important; padding: 22px 12px !important; margin: 0 !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; } .pkp_navigation_primary>li>a:hover { background: rgba(56, 189, 248, 0.18) !important; color: #38bdf8 !important; } /* ========================================================= 9. SEARCH ========================================================= */ .pkp_navigation_search { display: flex !important; visibility: visible !important; opacity: 1 !important; flex: 0 0 auto !important; margin-left: 10px !important; position: relative !important; z-index: 10000 !important; } .pkp_navigation_search a.pkp_search { display: inline-flex !important; visibility: visible !important; opacity: 1 !important; align-items: center !important; justify-content: center !important; color: #ffffff !important; background: transparent !important; padding: 10px 16px !important; border: 1px solid rgba(56, 189, 248, 0.45) !important; border-radius: 30px !important; font-size: 14px !important; text-decoration: none !important; } .pkp_navigation_search a.pkp_search:hover { background: #38bdf8 !important; color: #04072A !important; border-color: #38bdf8 !important; } /* ========================================================= REGISTER + LOGIN - RIGHT SIDE OF HEADER ========================================================= */ .pkp_structure_head { position: relative !important; } #navigationUserWrapper { position: absolute !important; top: 18px !important; right: 5px !important; left: auto !important; bottom: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; z-index: 999999 !important; display: block !important; } /* Register + Login list */ #navigationUserWrapper #navigationUser { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; width: auto !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* Each item */ #navigationUserWrapper #navigationUser>li { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; } /* Register + Login buttons */ #navigationUserWrapper #navigationUser>li>a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 95px !important; padding: 10px 18px !important; background: #24729c !important; color: #ffffff !important; border: 1px solid #38bdf8 !important; border-radius: 30px !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.2 !important; white-space: nowrap !important; text-decoration: none !important; box-sizing: border-box !important; transition: all 0.3s ease !important; } /* Hover */ #navigationUserWrapper #navigationUser>li>a:hover { background: #38bdf8 !important; color: #04072A !important; transform: translateY(-1px) !important; } /* ========================================================= 11. DROPDOWNS ========================================================= */ .pkp_navigation_primary ul, .pkp_navigation_user ul { z-index: 10005 !important; background: #0a0f2d !important; border: 1px solid rgba(56, 189, 248, 0.45) !important; border-radius: 10px !important; min-width: 230px !important; padding: 8px 0 !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45) !important; } .pkp_navigation_primary ul li a, .pkp_navigation_user ul li a { color: #ffffff !important; display: block !important; padding: 12px 20px !important; font-size: 14px !important; line-height: 1.5 !important; white-space: normal !important; overflow-wrap: break-word !important; } .pkp_navigation_primary ul li a:hover, .pkp_navigation_user ul li a:hover { background: rgba(56, 189, 248, 0.18) !important; color: #38bdf8 !important; } /* ========================================================= 12. TABLET ========================================================= */ @media (max-width: 992px) { .pkp_structure_head .pkp_site_name { min-height: 130px !important; height: 130px !important; padding-left: 120px !important; padding-top: 20px !important; } .pkp_structure_head .pkp_site_name::before { left: 15px !important; top: 12px !important; width: 90px !important; height: 90px !important; } .pkp_structure_head .pkp_site_name a { font-size: 28px !important; } .pkp_structure_head .pkp_site_name::after { font-size: 14px !important; white-space: normal !important; } .pkp_navigation_primary>li>a { padding: 18px 7px !important; font-size: 12px !important; } .pkp_navigation_user:not(#___a):not(#___b):not(#___c) { top: 15px !important; right: 20px !important; } .pkp_navigation_user:not(#___a):not(#___b):not(#___c)>li>a { min-width: 75px !important; padding: 8px 12px !important; font-size: 12px !important; } } /* ========================================================= 13. MOBILE ========================================================= */ @media (max-width: 767px) { .pkp_structure_head { min-height: 115px !important; height: auto !important; } .pkp_structure_head .pkp_site_name { min-height: 115px !important; height: 115px !important; padding: 15px 10px 10px 80px !important; /* MOBILE ONLY - MOVE HEADER 40px LEFT */ transform: translateX(-40px) !important; } .pkp_structure_head .pkp_site_name::before { left: 10px !important; top: 15px !important; width: 60px !important; height: 60px !important; } .pkp_structure_head .pkp_site_name a { font-size: 22px !important; line-height: 1.15 !important; white-space: normal !important; } .pkp_structure_head .pkp_site_name::after { font-size: 10px !important; line-height: 1.4 !important; white-space: normal !important; margin-top: 6px !important; } /* Register/Login */ .pkp_navigation_user:not(#___a):not(#___b):not(#___c) { top: 8px !important; right: 10px !important; gap: 5px !important; } .pkp_navigation_user:not(#___a):not(#___b):not(#___c)>li>a { min-width: 65px !important; padding: 6px 9px !important; font-size: 10px !important; } /* Navbar */ .pkp_navigation_primary_row { min-height: 55px !important; height: auto !important; } .pkp_navigation_primary_wrapper { min-height: 55px !important; padding: 8px 10px !important; display: block !important; } .pkp_navigation_primary { display: block !important; width: 100% !important; } .pkp_navigation_primary>li { width: 100% !important; } .pkp_navigation_primary>li>a { width: 100% !important; justify-content: flex-start !important; padding: 12px 15px !important; font-size: 13px !important; white-space: normal !important; } .pkp_navigation_search { margin: 5px 0 !important; justify-content: flex-end !important; } } /* ========================================================= 14. SMALL PHONE ========================================================= */ @media (max-width: 480px) { .pkp_structure_head .pkp_site_name { min-height: 105px !important; height: 105px !important; padding-left: 68px !important; } .pkp_structure_head .pkp_site_name::before { left: 8px !important; top: 12px !important; width: 52px !important; height: 52px !important; } .pkp_structure_head .pkp_site_name a { font-size: 17px !important; } .pkp_structure_head .pkp_site_name::after { font-size: 9px !important; } } /* reduces extra margin both left and right side add css code */ /* ========================================================= JRAIE - REDUCE LEFT & RIGHT PAGE MARGINS ========================================================= */ /* Main page content container */ .pkp_structure_content { width: calc(100% - 40px) !important; max-width: 1400px !important; margin-left: auto !important; margin-right: auto !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; display: flex !important; gap: 30px !important; } /* Main content area */ .pkp_structure_main { flex: 1 1 auto !important; min-width: 0 !important; } /* Sidebar */ .pkp_structure_sidebar { flex: 0 0 300px !important; width: 300px !important; max-width: 300px !important; } /* ========================================================= LARGE DESKTOP ========================================================= */ @media (min-width: 1600px) { .pkp_structure_content { width: calc(100% - 50px) !important; max-width: 1700px !important; gap: 30px !important; } .pkp_structure_sidebar { flex-basis: 300px !important; width: 300px !important; max-width: 300px !important; } } /* ========================================================= LAPTOP ========================================================= */ @media (max-width: 1200px) { .pkp_structure_content { width: calc(100% - 30px) !important; gap: 25px !important; } .pkp_structure_sidebar { flex-basis: 280px !important; width: 280px !important; max-width: 280px !important; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 991px) { .pkp_structure_content { width: calc(100% - 24px) !important; gap: 20px !important; } .pkp_structure_sidebar { flex-basis: 250px !important; width: 250px !important; max-width: 250px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .pkp_structure_content { width: calc(100% - 20px) !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; display: block !important; padding: 0 !important; } .pkp_structure_main { width: 100% !important; margin: 0 !important; } .pkp_structure_sidebar { width: 100% !important; max-width: 100% !important; margin-top: 20px !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .pkp_structure_content { width: calc(100% - 12px) !important; } } /* removed both side line code */ /* ========================================================= REMOVE OJS FULL-HEIGHT VERTICAL LAYOUT LINES ========================================================= */ /* Main OJS content vertical lines */ .pkp_structure_main::before, .pkp_structure_main::after { display: none !important; content: none !important; border: none !important; box-shadow: none !important; } /* Content wrapper vertical lines */ .pkp_structure_content::before, .pkp_structure_content::after { display: none !important; content: none !important; border: none !important; box-shadow: none !important; } /* Main content borders */ .pkp_structure_main { border-left: none !important; border-right: none !important; } /* Content wrapper borders */ .pkp_structure_content { border-left: none !important; border-right: none !important; } /* Sidebar borders */ .pkp_structure_sidebar { border-left: none !important; border-right: none !important; } /* OJS page wrapper pseudo-elements */ .pkp_page_index::before, .pkp_page_index::after { border: none !important; box-shadow: none !important; } /* Header title - First Letter Capital */ .pkp_structure_head .pkp_site_name a { text-transform: capitalize !important; } /*-------------------------------------------------------------- 11 august navbar responsive updated code */ /* ========================================================= FINAL RESPONSIVE NAVBAR FIX (11 Aug) — ONLY NAVBAR Is block ko file ke sabse end me rakha gaya hai taaki ye purane conflicting navbar rules ko override kar de. ========================================================= */ /* ---- Toggle button hidden on desktop by default ---- */ .pkp_site_nav_toggle { display: none !important; } /* ========================================================= DESKTOP / LARGE SCREENS (default, no media query needed) already handled by existing rules above — untouched ========================================================= */ /* ========================================================= TABLET (max-width: 1024px) ========================================================= */ @media (max-width: 1024px) { .pkp_navigation_primary_wrapper { flex-wrap: wrap !important; padding: 10px 15px !important; row-gap: 8px !important; } .pkp_navigation_primary { flex-wrap: wrap !important; justify-content: center !important; row-gap: 4px !important; } .pkp_navigation_primary>li>a { padding: 14px 10px !important; font-size: 13px !important; } .pkp_navigation_search { margin-left: 0 !important; } } /* ========================================================= MOBILE / TABLET PORTRAIT (max-width: 900px) Hamburger menu kicks in yaha se ========================================================= */ @media (max-width: 900px) { /* Show hamburger button */ .pkp_site_nav_toggle { display: flex !important; align-items: center !important; justify-content: center !important; width: 44px !important; height: 44px !important; margin: 10px !important; background: #24729c !important; border: none !important; border-radius: 8px !important; color: #ffffff !important; font-size: 0 !important; /* text ko chupa kar sirf icon jaisa dikhana */ cursor: pointer !important; position: relative !important; } /* Hamburger icon banaya CSS se */ .pkp_site_nav_toggle::before { content: "\2261" !important; /* ≡ symbol as hamburger icon */ font-size: 22px !important; line-height: 1 !important; color: #ffffff !important; } .pkp_site_name_wrapper { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; } /* Nav row hidden by default, JS toggle 'expanded'/'is-open' class laga kar dikhayega */ .pkp_navigation_primary_row { display: block !important; width: 100% !important; } .pkp_navigation_primary_wrapper { flex-direction: column !important; align-items: stretch !important; padding: 0 !important; } .pkp_navigation_primary { flex-direction: column !important; width: 100% !important; align-items: stretch !important; } .pkp_navigation_primary>li { width: 100% !important; } .pkp_navigation_primary>li>a { width: 100% !important; justify-content: flex-start !important; padding: 14px 18px !important; font-size: 14px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; } .pkp_navigation_primary li a[data-toggle="dropdown"] { position: relative !important; padding-right: 40px !important; } /* Arrow icon (CSS se banaya, koi image nahi) */ .pkp_navigation_primary li a[data-toggle="dropdown"]::after { content: "" !important; position: absolute !important; right: 18px !important; top: 50% !important; width: 8px !important; height: 8px !important; border-right: 2px solid #38bdf8 !important; border-bottom: 2px solid #38bdf8 !important; transform: translateY(-65%) rotate(45deg) !important; transition: transform 0.25s ease !important; pointer-events: none !important; } /* Jab dropdown khula ho (show/open class laga ho), arrow upar ki taraf ghoom jaye */ .pkp_navigation_primary li.show>a[data-toggle="dropdown"]::after, .pkp_navigation_primary li.open>a[data-toggle="dropdown"]::after, .pkp_navigation_primary li.dropdown.open>a[data-toggle="dropdown"]::after { transform: translateY(-35%) rotate(-135deg) !important; } .pkp_navigation_search { width: 100% !important; justify-content: flex-start !important; padding: 12px 18px !important; margin: 0 !important; } .pkp_navigation_search a.pkp_search { width: 100% !important; justify-content: center !important; } /* Dropdowns as normal stacked block, not floating */ .pkp_navigation_primary ul, .pkp_navigation_user ul { display: none !important; position: static !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; border-radius: 0 !important; box-shadow: none !important; } /* Register / Login stack cleanly */ #navigationUserWrapper { position: static !important; width: 100% !important; padding: 10px !important; } #navigationUserWrapper #navigationUser { justify-content: center !important; flex-wrap: wrap !important; } } /* ========================================================= SMALL MOBILE (max-width: 480px) ========================================================= */ @media (max-width: 480px) { .pkp_structure_head .pkp_site_name::before { width: 45px !important; height: 45px !important; left: 8px !important; top: 10px !important; } .pkp_structure_head .pkp_site_name { padding-left: 60px !important; } .pkp_structure_head .pkp_site_name a { font-size: 15px !important; } .pkp_structure_head .pkp_site_name::after { font-size: 8px !important; } .pkp_site_nav_toggle { width: 38px !important; height: 38px !important; } #navigationUserWrapper #navigationUser>li>a { min-width: 0 !important; padding: 8px 14px !important; font-size: 11px !important; } } /* ========================================================= VERY SMALL MOBILE (max-width: 360px) ========================================================= */ @media (max-width: 360px) { .pkp_navigation_primary>li>a { font-size: 13px !important; padding: 12px 14px !important; } .pkp_structure_head .pkp_site_name a { font-size: 13px !important; } } /* FINAL DHTA POSITION */ @media (min-width: 901px) { /* MOVE EXISTING LOGO 25px TO THE RIGHT */ .pkp_structure_head .pkp_site_name::before { left: 5px !important; top: 20px !important; transform: translateX(25px) !important; } /* TEXT - KEEP EXACTLY AS IT IS */ .pkp_structure_head .pkp_site_name::after { left: 50px !important; top: 45px !important; } } /* Mobile */ @media (max-width: 900px) { /* Logo: 25px from left */ .pkp_structure_head .pkp_site_name::before { left: 25px !important; } /* Text: 25px from top */ .pkp_structure_head .pkp_site_name::after { top: 25px !important; } } /*------------------------------------------------------------ 12 august 2026 --------------------------------------------------------- */ /* ========================================================= DHTA - FINAL HEADER / NAVBAR OVERRIDE 12 AUGUST 2026 Logo: https://galaxiauniverse.com/public/site/images/admin/ whatsapp-image-2026-04-01-at-12.35.52-pm-removebg-preview-9f4eabffd45f52ed6f336d6b50a60a00.png Desktop: - Header logo + journal title - Navbar stays in one single row - Register/Login on right side - Sticky header Mobile: - Responsive hamburger navigation - Logo remains visible - Register/Login remain visible - Submenus work as stacked dropdowns ========================================================= */ /* ========================================================= 1. STICKY HEADER ========================================================= */ #headerNavigationContainer, .pkp_structure_head { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; position: sticky !important; top: 0 !important; z-index: 99999 !important; background: #ffffff !important; box-sizing: border-box !important; } /* ========================================================= 2. HEADER TOP / JOURNAL BRANDING ========================================================= */ .pkp_head_wrapper { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; box-sizing: border-box !important; } /* Keep site name area visible */ .pkp_site_name_wrapper { width: 100% !important; min-height: 125px !important; margin: 0 !important; padding: 0 !important; background: #ffffff !important; display: flex !important; align-items: center !important; position: relative !important; box-sizing: border-box !important; } /* ========================================================= 3. DHTA LOGO ========================================================= */ .pkp_site_name { width: 100% !important; min-height: 125px !important; margin: 0 !important; padding: 25px 250px 20px 150px !important; background: #ffffff !important; display: flex !important; flex-direction: column !important; justify-content: center !important; position: relative !important; box-sizing: border-box !important; } /* Logo */ .pkp_site_name::before { content: "" !important; position: absolute !important; left: 25px !important; top: 12px !important; width: 105px !important; height: 105px !important; background-image: url("https://galaxiauniverse.com/public/site/images/admin/whatsapp-image-2026-04-01-at-12.35.52-pm-removebg-preview-9f4eabffd45f52ed6f336d6b50a60a00.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; display: block !important; z-index: 20 !important; } /* Journal title */ .pkp_site_name a { display: block !important; margin: 0 !important; padding: 0 !important; color: #111827 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(28px, 3vw, 46px) !important; font-weight: 700 !important; line-height: 1.15 !important; text-decoration: none !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; background: transparent !important; border: none !important; } /* ========================================================= 4. REGISTER / LOGIN - RIGHT SIDE ========================================================= */ #navigationUserWrapper { position: absolute !important; top: 20px !important; right: 25px !important; left: auto !important; bottom: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; display: block !important; z-index: 999999 !important; } #navigationUserWrapper #navigationUser { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 8px !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } #navigationUserWrapper #navigationUser>li { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; float: none !important; } #navigationUserWrapper #navigationUser>li>a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-width: 90px !important; padding: 9px 17px !important; background: #24729c !important; color: #ffffff !important; border: 1px solid #38bdf8 !important; border-radius: 30px !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.2 !important; white-space: nowrap !important; text-decoration: none !important; box-sizing: border-box !important; transition: all 0.25s ease !important; } #navigationUserWrapper #navigationUser>li>a:hover { background: #38bdf8 !important; color: #04072a !important; transform: translateY(-1px) !important; } /* ========================================================= 5. NAVBAR - SINGLE LINE DESKTOP ========================================================= */ .pkp_site_nav_menu { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #04072a !important; box-sizing: border-box !important; } .pkp_navigation_primary_row { width: 100% !important; max-width: 100% !important; min-height: 58px !important; margin: 0 !important; padding: 0 !important; background: #04072a !important; display: block !important; box-sizing: border-box !important; overflow: visible !important; } .pkp_navigation_primary_wrapper { width: 100% !important; max-width: 1600px !important; min-height: 58px !important; margin: 0 auto !important; padding: 0 15px !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; overflow: visible !important; } /* Main menu */ .pkp_navigation_primary { width: auto !important; flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; list-style: none !important; } .pkp_navigation_primary>li { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; list-style: none !important; } .pkp_navigation_primary>li>a { display: flex !important; align-items: center !important; justify-content: center !important; padding: 19px 10px !important; margin: 0 !important; color: #ffffff !important; background: transparent !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.2 !important; white-space: nowrap !important; text-decoration: none !important; border-radius: 5px !important; transition: all 0.25s ease !important; } .pkp_navigation_primary>li>a:hover { color: #38bdf8 !important; background: rgba(56, 189, 248, 0.16) !important; } /* ========================================================= 6. SEARCH ========================================================= */ .pkp_navigation_search_wrapper, .pkp_navigation_search { flex: 0 0 auto !important; margin: 0 0 0 8px !important; padding: 0 !important; display: flex !important; align-items: center !important; } .pkp_navigation_search a.pkp_search, .pkp_navigation_search_wrapper a.pkp_search { display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 8px 13px !important; color: #ffffff !important; background: transparent !important; border: 1px solid rgba(56, 189, 248, 0.5) !important; border-radius: 25px !important; font-size: 13px !important; font-weight: 600 !important; white-space: nowrap !important; text-decoration: none !important; } .pkp_navigation_search a.pkp_search:hover, .pkp_navigation_search_wrapper a.pkp_search:hover { background: #38bdf8 !important; color: #04072a !important; } /* ========================================================= 7. DROPDOWNS ========================================================= */ .pkp_navigation_primary ul { position: absolute !important; z-index: 100000 !important; min-width: 230px !important; margin: 0 !important; padding: 7px 0 !important; background: #0a0f2d !important; border: 1px solid rgba(56, 189, 248, 0.45) !important; border-radius: 8px !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.45) !important; box-sizing: border-box !important; } .pkp_navigation_primary ul li { width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .pkp_navigation_primary ul li a { display: block !important; width: 100% !important; padding: 10px 17px !important; color: #ffffff !important; font-size: 13px !important; line-height: 1.45 !important; white-space: normal !important; overflow-wrap: break-word !important; text-decoration: none !important; box-sizing: border-box !important; } .pkp_navigation_primary ul li a:hover { background: rgba(56, 189, 248, 0.18) !important; color: #38bdf8 !important; } /* ========================================================= 8. HIDE MOBILE TOGGLE ON DESKTOP ========================================================= */ .pkp_site_nav_toggle { display: none !important; } /* ========================================================= 9. TABLET - KEEP NAVBAR COMPACT ========================================================= */ @media (max-width: 1200px) { .pkp_site_name { padding-left: 125px !important; padding-right: 210px !important; } .pkp_site_name::before { left: 20px !important; width: 90px !important; height: 90px !important; } .pkp_navigation_primary_wrapper { padding-left: 8px !important; padding-right: 8px !important; } .pkp_navigation_primary>li>a { padding-left: 7px !important; padding-right: 7px !important; font-size: 12px !important; } #navigationUserWrapper { right: 15px !important; } #navigationUserWrapper #navigationUser>li>a { min-width: 75px !important; padding: 8px 11px !important; font-size: 12px !important; } } /* ========================================================= 10. MOBILE - HAMBURGER ========================================================= */ @media (max-width: 900px) { #headerNavigationContainer, .pkp_structure_head { position: sticky !important; top: 0 !important; } .pkp_site_name_wrapper { min-height: 90px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; } .pkp_site_name { min-height: 90px !important; height: 90px !important; padding: 14px 105px 12px 75px !important; justify-content: center !important; } .pkp_site_name::before { left: 10px !important; top: 12px !important; width: 62px !important; height: 62px !important; } .pkp_site_name a { font-size: 21px !important; line-height: 1.15 !important; white-space: normal !important; } /* Mobile menu button */ .pkp_site_nav_toggle { display: flex !important; align-items: center !important; justify-content: center !important; position: absolute !important; left: 10px !important; bottom: 8px !important; width: 42px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; background: #24729c !important; border: none !important; border-radius: 7px !important; color: #ffffff !important; font-size: 0 !important; cursor: pointer !important; z-index: 100001 !important; } .pkp_site_nav_toggle::before { content: "\2261" !important; color: #ffffff !important; font-size: 23px !important; line-height: 1 !important; } /* Mobile navigation hidden until OJS opens it */ .pkp_site_nav_menu { display: none !important; width: 100% !important; } .pkp_site_nav_menu.is_open, .pkp_site_nav_menu.is-open, .pkp_site_nav_menu.open, .pkp_site_nav_menu.expanded, .pkp_site_nav_menu.active { display: block !important; } .pkp_site_nav_menu.is_open .pkp_navigation_primary_row, .pkp_site_nav_menu.is-open .pkp_navigation_primary_row, .pkp_site_nav_menu.open .pkp_navigation_primary_row, .pkp_site_nav_menu.expanded .pkp_navigation_primary_row, .pkp_site_nav_menu.active .pkp_navigation_primary_row { display: block !important; } .pkp_navigation_primary_row { min-height: 0 !important; height: auto !important; background: #04072a !important; } .pkp_navigation_primary_wrapper { min-height: 0 !important; display: block !important; padding: 0 !important; } .pkp_navigation_primary { width: 100% !important; display: block !important; margin: 0 !important; padding: 0 !important; } .pkp_navigation_primary>li { width: 100% !important; display: block !important; white-space: normal !important; } .pkp_navigation_primary>li>a { width: 100% !important; display: flex !important; justify-content: flex-start !important; padding: 12px 17px !important; font-size: 14px !important; text-align: left !important; white-space: normal !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-sizing: border-box !important; } /* Mobile dropdowns */ .pkp_navigation_primary ul { position: static !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border: none !important; border-left: 3px solid #38bdf8 !important; border-radius: 0 !important; box-shadow: none !important; background: #0a0f2d !important; box-sizing: border-box !important; } .pkp_navigation_primary ul li a { padding: 11px 20px !important; font-size: 13px !important; white-space: normal !important; } /* Search */ .pkp_navigation_search_wrapper, .pkp_navigation_search { width: 100% !important; margin: 0 !important; padding: 10px 15px !important; box-sizing: border-box !important; } .pkp_navigation_search a.pkp_search, .pkp_navigation_search_wrapper a.pkp_search { width: 100% !important; justify-content: center !important; } /* Register/Login */ #navigationUserWrapper { position: absolute !important; top: 8px !important; right: 8px !important; width: auto !important; padding: 0 !important; z-index: 100002 !important; } #navigationUserWrapper #navigationUser { gap: 4px !important; } #navigationUserWrapper #navigationUser>li>a { min-width: 62px !important; padding: 6px 8px !important; font-size: 10px !important; } } /* ========================================================= 11. SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .pkp_site_name_wrapper { min-height: 82px !important; } .pkp_site_name { min-height: 82px !important; height: 82px !important; padding: 12px 92px 10px 68px !important; } .pkp_site_name::before { left: 8px !important; top: 10px !important; width: 52px !important; height: 52px !important; } .pkp_site_name a { font-size: 17px !important; line-height: 1.12 !important; } .pkp_site_nav_toggle { left: 8px !important; bottom: 7px !important; width: 38px !important; height: 34px !important; } .pkp_site_nav_toggle::before { font-size: 20px !important; } #navigationUserWrapper { top: 6px !important; right: 6px !important; } #navigationUserWrapper #navigationUser { gap: 3px !important; } #navigationUserWrapper #navigationUser>li>a { min-width: 55px !important; padding: 5px 7px !important; font-size: 9px !important; } } /* ========================================================= 12. VERY SMALL PHONES ========================================================= */ @media (max-width: 360px) { .pkp_site_name { padding-left: 62px !important; padding-right: 82px !important; } .pkp_site_name::before { width: 46px !important; height: 46px !important; } .pkp_site_name a { font-size: 15px !important; } #navigationUserWrapper #navigationUser>li>a { min-width: 50px !important; padding: 5px 5px !important; font-size: 8px !important; } } /* ========================================================= 13. PREVENT HORIZONTAL SCROLLING ========================================================= */ html, body { max-width: 100% !important; overflow-x: hidden !important; } /* ========================================================= END DHTA HEADER OVERRIDE ========================================================= */ /* ========================================================= DHTA - REMOVE OLD JRAIE LOGO + ISSN TEXT ========================================================= */ /* Remove any old JRAIE logo pseudo-element */ .pkp_structure_head .pkp_site_name::before { content: none !important; display: none !important; background-image: none !important; } /* Remove old ISSN Online / Print generated text */ .pkp_structure_head .pkp_site_name::after { content: none !important; display: none !important; } /* Remove any previously generated logo from navigation */ .pkp_navigation_primary_wrapper::before { content: none !important; display: none !important; background-image: none !important; width: 0 !important; height: 0 !important; } /* ========================================================= DHTA FINAL HEADER BRANDING Logo + "Digital Health & Telemonitoring Advances" Fully responsive ========================================================= */ /* Header branding area */ @media (min-width: 901px) { .pkp_site_name { padding: 25px 250px 20px 150px !important; } /* DHTA logo */ /* .pkp_structure_head .pkp_site_name::before { content: "" !important; display: block !important; position: absolute !important; left: 25px !important; top: 12px !important; width: 105px !important; height: 105px !important; background-image: url("https://galaxiauniverse.com/public/site/images/admin/whatsapp-image-2026-04-01-at-12.35.52-pm-removebg-preview-9f4eabffd45f52ed6f336d6b50a60a00.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; z-index: 20 !important; } */ /* DHTA LOGO - MOVE 20px RIGHT */ .pkp_structure_head .pkp_site_name::before { content: "" !important; position: absolute !important; left: 45px !important; /* 25px + 20px = 45px */ top: 12px !important; width: 105px !important; height: 105px !important; background-image: url("https://galaxiauniverse.com/public/site/images/admin/whatsapp-image-2026-04-01-at-12.35.52-pm-removebg-preview-9f4eabffd45f52ed6f336d6b50a60a00.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; display: block !important; z-index: 20 !important; } /* Journal name - first letter of each word capitalized */ .pkp_structure_head .pkp_site_name>a { display: block !important; color: #111827 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(28px, 3vw, 46px) !important; font-weight: 700 !important; line-height: 1.15 !important; text-transform: capitalize !important; white-space: nowrap !important; text-decoration: none !important; } /* Never show ISSN as generated text */ .pkp_structure_head .pkp_site_name::after { content: none !important; display: none !important; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1200px) and (min-width: 901px) { .pkp_site_name { padding-left: 125px !important; padding-right: 210px !important; } .pkp_structure_head .pkp_site_name::before { left: 20px !important; width: 90px !important; height: 90px !important; } .pkp_structure_head .pkp_site_name>a { font-size: 30px !important; } } /* ========================================================= MOBILE HEADER ========================================================= */ @media (max-width: 900px) { .pkp_site_name_wrapper { width: 100% !important; min-height: 90px !important; height: 90px !important; position: relative !important; display: flex !important; align-items: center !important; overflow: visible !important; } .pkp_site_name { width: 100% !important; min-height: 90px !important; height: 90px !important; padding: 12px 105px 12px 82px !important; display: flex !important; justify-content: center !important; flex-direction: column !important; box-sizing: border-box !important; } /* DHTA logo on mobile */ .pkp_structure_head .pkp_site_name::before { content: "" !important; display: block !important; position: absolute !important; left: 10px !important; top: 13px !important; width: 62px !important; height: 62px !important; background-image: url("https://galaxiauniverse.com/public/site/images/admin/whatsapp-image-2026-04-01-at-12.35.52-pm-removebg-preview-9f4eabffd45f52ed6f336d6b50a60a00.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; z-index: 20 !important; } /* Digital Health & Telemonitoring Advances */ .pkp_structure_head .pkp_site_name>a { display: block !important; max-width: 100% !important; color: #111827 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 21px !important; font-weight: 700 !important; line-height: 1.15 !important; text-transform: capitalize !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; text-decoration: none !important; } /* No ISSN text */ .pkp_structure_head .pkp_site_name::after { content: none !important; display: none !important; } /* ===================================================== MOBILE NAVBAR ===================================================== */ .pkp_site_nav_menu { width: 100% !important; display: none !important; background: #04072a !important; } .pkp_site_nav_menu.is_open, .pkp_site_nav_menu.is-open, .pkp_site_nav_menu.open, .pkp_site_nav_menu.expanded, .pkp_site_nav_menu.active { display: block !important; } .pkp_navigation_primary_row { width: 100% !important; min-height: 0 !important; height: auto !important; display: block !important; } .pkp_navigation_primary_wrapper { width: 100% !important; min-height: 0 !important; display: block !important; padding: 0 !important; } .pkp_navigation_primary { width: 100% !important; display: block !important; margin: 0 !important; padding: 0 !important; } .pkp_navigation_primary>li { width: 100% !important; display: block !important; white-space: normal !important; } .pkp_navigation_primary>li>a { width: 100% !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; padding: 12px 17px !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.4 !important; white-space: normal !important; border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; box-sizing: border-box !important; } /* ===================================================== MOBILE SUBMENUS ===================================================== */ .pkp_navigation_primary>li>ul { position: static !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: #0a0f2d !important; border: none !important; border-left: 3px solid #38bdf8 !important; border-radius: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } .pkp_navigation_primary>li>ul li { width: 100% !important; display: block !important; } .pkp_navigation_primary>li>ul li a { display: block !important; width: 100% !important; padding: 10px 20px !important; color: #ffffff !important; font-size: 13px !important; line-height: 1.45 !important; white-space: normal !important; box-sizing: border-box !important; } /* ===================================================== MOBILE REGISTER / LOGIN ===================================================== */ #navigationUserWrapper { position: absolute !important; top: 8px !important; right: 8px !important; left: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; z-index: 100002 !important; } #navigationUserWrapper #navigationUser { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; } #navigationUserWrapper #navigationUser>li { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; } #navigationUserWrapper #navigationUser>li>a { min-width: 62px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; padding: 6px 8px !important; color: #ffffff !important; background: #24729c !important; border: 1px solid #38bdf8 !important; border-radius: 30px !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1.2 !important; white-space: nowrap !important; text-decoration: none !important; box-sizing: border-box !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .pkp_site_name_wrapper { min-height: 82px !important; height: 82px !important; } .pkp_site_name { min-height: 82px !important; height: 82px !important; padding: 10px 90px 10px 68px !important; } .pkp_structure_head .pkp_site_name::before { left: 8px !important; top: 10px !important; width: 52px !important; height: 52px !important; } .pkp_structure_head .pkp_site_name>a { font-size: 17px !important; line-height: 1.12 !important; text-transform: capitalize !important; } #navigationUserWrapper { top: 6px !important; right: 6px !important; } #navigationUserWrapper #navigationUser { gap: 3px !important; } #navigationUserWrapper #navigationUser>li>a { min-width: 55px !important; padding: 5px 7px !important; font-size: 9px !important; } } /* ========================================================= VERY SMALL PHONES ========================================================= */ @media (max-width: 360px) { .pkp_site_name { padding-left: 62px !important; padding-right: 82px !important; } .pkp_structure_head .pkp_site_name::before { width: 46px !important; height: 46px !important; } .pkp_structure_head .pkp_site_name>a { font-size: 15px !important; } #navigationUserWrapper #navigationUser>li>a { min-width: 50px !important; padding: 5px !important; font-size: 8px !important; } } /* ========================================================= DHTA HEADER - FINAL LOGO + TITLE FIX Fixes duplicate logo and missing journal title ========================================================= */ /* Remove the original OJS logo image inside the site-name link. We use one controlled logo with ::before instead. */ .pkp_structure_head .pkp_site_name>a img, .pkp_structure_head .pkp_site_name img { display: none !important; } /* Remove background/pseudo rules from older conflicting CSS */ .pkp_structure_head .pkp_site_name { background-image: none !important; } /* ========================================================= DESKTOP HEADER ========================================================= */ @media (min-width: 901px) { .pkp_structure_head .pkp_site_name { position: relative !important; width: 100% !important; min-height: 125px !important; padding: 20px 260px 20px 150px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; box-sizing: border-box !important; } /* SINGLE DHTA LOGO */ .pkp_structure_head .pkp_site_name::before { content: "" !important; display: block !important; position: absolute !important; left: 25px !important; top: 10px !important; width: 105px !important; height: 105px !important; background-image: url("https://galaxiauniverse.com/public/site/images/admin/whatsapp-image-2026-04-01-at-12.35.52-pm-removebg-preview-9f4eabffd45f52ed6f336d6b50a60a00.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; z-index: 20 !important; } /* JOURNAL TITLE */ .pkp_structure_head .pkp_site_name::after { content: "Digital Health & Telemonitoring Advances" !important; display: block !important; position: relative !important; margin: 0 !important; padding: 0 !important; color: #111827 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(28px, 3vw, 46px) !important; font-weight: 700 !important; line-height: 1.15 !important; text-transform: capitalize !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; background: transparent !important; z-index: 21 !important; } /* Hide the original anchor content if it contains an image */ .pkp_structure_head .pkp_site_name>a { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1200px) and (min-width: 901px) { .pkp_structure_head .pkp_site_name { min-height: 110px !important; padding-left: 125px !important; padding-right: 220px !important; } .pkp_structure_head .pkp_site_name::before { left: 18px !important; top: 10px !important; width: 90px !important; height: 90px !important; } .pkp_structure_head .pkp_site_name::after { font-size: 30px !important; line-height: 1.15 !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 900px) { .pkp_structure_head .pkp_site_name_wrapper { width: 100% !important; min-height: 90px !important; height: 90px !important; position: relative !important; display: flex !important; align-items: center !important; overflow: visible !important; } .pkp_structure_head .pkp_site_name { position: relative !important; width: 100% !important; min-height: 90px !important; height: 90px !important; padding: 10px 100px 10px 80px !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; box-sizing: border-box !important; } /* SINGLE MOBILE DHTA LOGO */ .pkp_structure_head .pkp_site_name::before { content: "" !important; display: block !important; position: absolute !important; left: 10px !important; top: 12px !important; width: 62px !important; height: 62px !important; background-image: url("https://galaxiauniverse.com/public/site/images/admin/whatsapp-image-2026-04-01-at-12.35.52-pm-removebg-preview-9f4eabffd45f52ed6f336d6b50a60a00.png") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; z-index: 20 !important; } /* MOBILE JOURNAL TITLE */ .pkp_structure_head .pkp_site_name::after { content: "Digital Health & Telemonitoring Advances" !important; display: block !important; position: relative !important; width: 100% !important; margin: 0 !important; padding: 0 !important; color: #111827 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 21px !important; font-weight: 700 !important; line-height: 1.15 !important; text-transform: capitalize !important; white-space: normal !important; overflow: visible !important; text-overflow: clip !important; background: transparent !important; z-index: 21 !important; } /* Hide original logo/image and original site-name link */ .pkp_structure_head .pkp_site_name>a { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* ===================================================== MOBILE NAVBAR ===================================================== */ .pkp_structure_head .pkp_site_nav_menu { width: 100% !important; display: none !important; background: #04072a !important; } .pkp_structure_head .pkp_site_nav_menu.is_open, .pkp_structure_head .pkp_site_nav_menu.is-open, .pkp_structure_head .pkp_site_nav_menu.open, .pkp_structure_head .pkp_site_nav_menu.expanded, .pkp_structure_head .pkp_site_nav_menu.active { display: block !important; } .pkp_structure_head .pkp_navigation_primary { width: 100% !important; display: block !important; margin: 0 !important; padding: 0 !important; } .pkp_structure_head .pkp_navigation_primary>li { width: 100% !important; display: block !important; white-space: normal !important; } .pkp_structure_head .pkp_navigation_primary>li>a { width: 100% !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; padding: 12px 17px !important; color: #ffffff !important; font-size: 14px !important; line-height: 1.4 !important; white-space: normal !important; box-sizing: border-box !important; } /* MOBILE SUBMENUS */ .pkp_structure_head .pkp_navigation_primary>li>ul { position: static !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: #0a0f2d !important; border: none !important; border-left: 3px solid #38bdf8 !important; box-shadow: none !important; border-radius: 0 !important; } .pkp_structure_head .pkp_navigation_primary>li>ul a { display: block !important; width: 100% !important; padding: 10px 20px !important; color: #ffffff !important; font-size: 13px !important; white-space: normal !important; box-sizing: border-box !important; } /* REGISTER / LOGIN */ .pkp_structure_head #navigationUserWrapper { position: absolute !important; top: 8px !important; right: 8px !important; left: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; z-index: 100002 !important; } .pkp_structure_head #navigationUserWrapper #navigationUser { display: flex !important; flex-direction: row !important; align-items: center !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; } .pkp_structure_head #navigationUserWrapper #navigationUser>li { width: auto !important; display: block !important; margin: 0 !important; padding: 0 !important; } .pkp_structure_head #navigationUserWrapper #navigationUser>li>a { min-width: 62px !important; padding: 6px 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #ffffff !important; background: #24729c !important; border: 1px solid #38bdf8 !important; border-radius: 30px !important; font-size: 10px !important; font-weight: 700 !important; white-space: nowrap !important; text-decoration: none !important; box-sizing: border-box !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .pkp_structure_head .pkp_site_name_wrapper { min-height: 82px !important; height: 82px !important; } .pkp_structure_head .pkp_site_name { min-height: 82px !important; height: 82px !important; padding: 8px 88px 8px 68px !important; } .pkp_structure_head .pkp_site_name::before { left: 8px !important; top: 10px !important; width: 52px !important; height: 52px !important; } .pkp_structure_head .pkp_site_name::after { font-size: 17px !important; line-height: 1.1 !important; } .pkp_structure_head #navigationUserWrapper { top: 6px !important; right: 6px !important; } .pkp_structure_head #navigationUserWrapper #navigationUser { gap: 3px !important; } .pkp_structure_head #navigationUserWrapper #navigationUser>li>a { min-width: 55px !important; padding: 5px 7px !important; font-size: 9px !important; } } /* ========================================================= VERY SMALL PHONES ========================================================= */ @media (max-width: 360px) { .pkp_structure_head .pkp_site_name { padding-left: 62px !important; padding-right: 82px !important; } .pkp_structure_head .pkp_site_name::before { width: 46px !important; height: 46px !important; } .pkp_structure_head .pkp_site_name::after { font-size: 15px !important; } } /* Prevent horizontal overflow */ html, body { max-width: 100% !important; overflow-x: hidden !important; } /* ========================================================= DHTA HEADER - FINAL POSITION ADJUSTMENT Text: 20px from top Logo: 20px from left ========================================================= */ @media (min-width: 901px) { .pkp_structure_head .pkp_site_name { padding-top: 20px !important; } .pkp_structure_head .pkp_site_name::before { left: 20px !important; } } @media (max-width: 900px) { .pkp_structure_head .pkp_site_name { padding-top: 20px !important; } .pkp_structure_head .pkp_site_name::before { left: 20px !important; } } @media (max-width: 480px) { .pkp_structure_head .pkp_site_name { padding-top: 20px !important; } .pkp_structure_head .pkp_site_name::before { left: 20px !important; } } @media (max-width: 360px) { .pkp_structure_head .pkp_site_name { padding-top: 20px !important; } .pkp_structure_head .pkp_site_name::before { left: 20px !important; } } /* ========================================================= DHTA - FORCE HEADER POSITION Use top/left positioning instead of padding because .pkp_site_name is a flex container. ========================================================= */ /* DESKTOP */ @media (min-width: 901px) { .pkp_structure_head .pkp_site_name { padding-top: 0 !important; padding-bottom: 0 !important; position: relative !important; } /* Logo = exactly 20px from LEFT and TOP */ .pkp_structure_head .pkp_site_name::before { left: 110px !important; top: 30px !important; transform: translateX(20px) !important; } /* Title = 20px down from its previous position */ .pkp_structure_head .pkp_site_name::after { transform: translateY(20px) !important; } } /* TABLET + MOBILE */ @media (max-width: 900px) { .pkp_structure_head .pkp_site_name { padding-top: 0 !important; padding-bottom: 0 !important; position: relative !important; } /* Logo = exactly 20px from LEFT and TOP */ .pkp_structure_head .pkp_site_name::before { left: 20px !important; top: 20px !important; transform: none !important; } /* Title = 20px down */ .pkp_structure_head .pkp_site_name::after { transform: translateY(20px) !important; } } /* SMALL MOBILE */ @media (max-width: 480px) { .pkp_structure_head .pkp_site_name::before { left: 20px !important; top: 20px !important; } .pkp_structure_head .pkp_site_name::after { transform: translateY(20px) !important; } } /* VERY SMALL MOBILE */ @media (max-width: 360px) { .pkp_structure_head .pkp_site_name::before { left: 20px !important; top: 20px !important; } .pkp_structure_head .pkp_site_name::after { transform: translateY(20px) !important; } } /*---------------------------------------------------------- MOBILE PHONE RESPONSIVE CODE 12 AUGUST 2026 */ /* ========================================================= DHTA - FINAL RESPONSIVE NAVBAR SAME RESPONSIVE BEHAVIOUR AS JRAIE Desktop unchanged Mobile = hamburger menu ========================================================= */ /* --------------------------------------------------------- DESKTOP --------------------------------------------------------- */ @media (min-width: 901px) { /* Hide hamburger */ .pkp_structure_head .pkp_site_nav_toggle { display: none !important; } /* Normal desktop navbar */ .pkp_structure_head .pkp_site_nav_menu { display: block !important; width: 100% !important; background: #04072a !important; } .pkp_structure_head .pkp_navigation_primary_row { display: block !important; width: 100% !important; min-height: 65px !important; background: #04072a !important; } .pkp_structure_head .pkp_navigation_primary_wrapper { width: 100% !important; display: flex !important; align-items: center !important; box-sizing: border-box !important; } .pkp_structure_head .pkp_navigation_primary { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; width: auto !important; } .pkp_structure_head .pkp_navigation_primary > li { width: auto !important; display: block !important; white-space: nowrap !important; } } /* --------------------------------------------------------- MOBILE / TABLET --------------------------------------------------------- */ @media (max-width: 900px) { /* ========================= HAMBURGER BUTTON ========================= */ .pkp_structure_head .pkp_site_nav_toggle { display: flex !important; align-items: center !important; justify-content: center !important; position: absolute !important; left: 10px !important; bottom: 8px !important; width: 42px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; background: #24729c !important; border: none !important; border-radius: 7px !important; color: #ffffff !important; font-size: 0 !important; cursor: pointer !important; z-index: 100001 !important; } /* Hamburger icon */ .pkp_structure_head .pkp_site_nav_toggle::before { content: "\2261" !important; display: block !important; color: #ffffff !important; font-size: 23px !important; line-height: 1 !important; } /* ========================= NAVIGATION CLOSED ========================= */ .pkp_structure_head .pkp_site_nav_menu { display: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #04072a !important; box-sizing: border-box !important; } /* ========================= NAVIGATION OPEN ========================= */ .pkp_structure_head .pkp_site_nav_menu.is_open, .pkp_structure_head .pkp_site_nav_menu.is-open, .pkp_structure_head .pkp_site_nav_menu.open, .pkp_structure_head .pkp_site_nav_menu.expanded, .pkp_structure_head .pkp_site_nav_menu.active { display: block !important; width: 100% !important; } /* ========================= NAVIGATION ROW ========================= */ .pkp_structure_head .pkp_navigation_primary_row { display: block !important; width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: #04072a !important; box-sizing: border-box !important; } /* ========================= NAVIGATION WRAPPER ========================= */ .pkp_structure_head .pkp_navigation_primary_wrapper { display: block !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================= MAIN MENU ========================= */ .pkp_structure_head .pkp_navigation_primary { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* ========================= MENU ITEMS ========================= */ .pkp_structure_head .pkp_navigation_primary > li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; white-space: normal !important; box-sizing: border-box !important; } /* ========================= MENU LINKS ========================= */ .pkp_structure_head .pkp_navigation_primary > li > a { display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; min-height: 48px !important; margin: 0 !important; padding: 12px 17px !important; color: #ffffff !important; background: transparent !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; text-align: left !important; white-space: normal !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; box-sizing: border-box !important; } /* Hover */ .pkp_structure_head .pkp_navigation_primary > li > a:hover { background: rgba(56,189,248,0.18) !important; color: #38bdf8 !important; } /* ========================= MOBILE DROPDOWN ========================= */ .pkp_structure_head .pkp_navigation_primary > li > ul { position: static !important; display: block !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #0a0f2d !important; border: none !important; border-left: 3px solid #38bdf8 !important; border-radius: 0 !important; box-shadow: none !important; box-sizing: border-box !important; } /* Dropdown items */ .pkp_structure_head .pkp_navigation_primary > li > ul > li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* Dropdown links */ .pkp_structure_head .pkp_navigation_primary > li > ul > li > a { display: block !important; width: 100% !important; padding: 10px 20px !important; color: #ffffff !important; font-size: 13px !important; line-height: 1.45 !important; white-space: normal !important; overflow-wrap: break-word !important; box-sizing: border-box !important; } .pkp_structure_head .pkp_navigation_primary > li > ul > li > a:hover { background: rgba(56,189,248,0.18) !important; color: #38bdf8 !important; } /* ========================= SEARCH ========================= */ .pkp_structure_head .pkp_navigation_search_wrapper, .pkp_structure_head .pkp_navigation_search { display: block !important; width: 100% !important; margin: 0 !important; padding: 10px 15px !important; box-sizing: border-box !important; } .pkp_structure_head .pkp_navigation_search a.pkp_search { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; box-sizing: border-box !important; } } /* --------------------------------------------------------- SMALL MOBILE --------------------------------------------------------- */ @media (max-width: 480px) { .pkp_structure_head .pkp_site_nav_toggle { left: 8px !important; bottom: 6px !important; width: 40px !important; height: 36px !important; } .pkp_structure_head .pkp_site_nav_toggle::before { font-size: 21px !important; } .pkp_structure_head .pkp_navigation_primary > li > a { padding: 11px 15px !important; font-size: 13px !important; } .pkp_structure_head .pkp_navigation_primary > li > ul > li > a { padding: 9px 17px !important; font-size: 12px !important; } } /* --------------------------------------------------------- VERY SMALL MOBILE --------------------------------------------------------- */ @media (max-width: 360px) { .pkp_structure_head .pkp_navigation_primary > li > a { padding: 10px 14px !important; font-size: 13px !important; } } /* ========================================================= DHTA FINAL MOBILE HAMBURGER FIX 13------------------------------------- AUGUST 2026------------------------------------------------------------------------------------------------------------- ========================================================= */ @media (max-width: 900px) { /* ===================================================== 1. HAMBURGER - RIGHT SIDE ===================================================== */ .pkp_structure_head .pkp_site_nav_toggle { display: flex !important; position: absolute !important; left: auto !important; right: 10px !important; top: 10px !important; bottom: auto !important; width: 42px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; align-items: center !important; justify-content: center !important; background: #24729c !important; border: none !important; border-radius: 7px !important; color: #ffffff !important; font-size: 0 !important; cursor: pointer !important; z-index: 100001 !important; } /* Hamburger icon */ .pkp_structure_head .pkp_site_nav_toggle::before { content: "\2261" !important; display: block !important; color: #ffffff !important; font-size: 23px !important; line-height: 1 !important; } /* ===================================================== 2. MENU CLOSED ===================================================== */ .pkp_structure_head .pkp_site_nav_menu { display: none !important; width: 100% !important; margin: 0 !important; padding: 0 !important; background: #04072a !important; } /* ===================================================== 3. OJS ACTUAL OPEN CLASS THIS IS THE IMPORTANT FIX ===================================================== */ .pkp_structure_head .pkp_site_nav_menu--isOpen { display: block !important; width: 100% !important; visibility: visible !important; opacity: 1 !important; } /* Also support the other possible classes */ .pkp_structure_head .pkp_site_nav_menu.is_open, .pkp_structure_head .pkp_site_nav_menu.is-open, .pkp_structure_head .pkp_site_nav_menu.open, .pkp_structure_head .pkp_site_nav_menu.expanded, .pkp_structure_head .pkp_site_nav_menu.active { display: block !important; width: 100% !important; visibility: visible !important; opacity: 1 !important; } /* ===================================================== 4. NAVIGATION ROW ===================================================== */ .pkp_structure_head .pkp_navigation_primary_row { display: block !important; width: 100% !important; min-height: 0 !important; height: auto !important; margin: 0 !important; padding: 0 !important; background: #04072a !important; } /* ===================================================== 5. NAVIGATION WRAPPER ===================================================== */ .pkp_structure_head .pkp_navigation_primary_wrapper { display: block !important; width: 100% !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; } /* ===================================================== 6. MAIN MENU ===================================================== */ .pkp_structure_head .pkp_navigation_primary { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .pkp_structure_head .pkp_navigation_primary > li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; white-space: normal !important; } /* ===================================================== 7. MENU LINKS ===================================================== */ .pkp_structure_head .pkp_navigation_primary > li > a { display: flex !important; width: 100% !important; min-height: 48px !important; align-items: center !important; justify-content: flex-start !important; box-sizing: border-box !important; margin: 0 !important; padding: 12px 17px !important; color: #ffffff !important; background: transparent !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; text-align: left !important; white-space: normal !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; } /* ===================================================== 8. SUBMENU - CLOSED ===================================================== */ .pkp_structure_head .pkp_navigation_primary > li > ul { display: none !important; position: static !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #0a0f2d !important; border: none !important; border-left: 3px solid #38bdf8 !important; border-radius: 0 !important; box-shadow: none !important; } /* ===================================================== 9. SUBMENU - OPEN WHEN OJS OPENS PARENT ===================================================== */ .pkp_structure_head .pkp_navigation_primary > li.show > ul, .pkp_structure_head .pkp_navigation_primary > li.open > ul, .pkp_structure_head .pkp_navigation_primary > li.dropdown.open > ul { display: block !important; } /* ===================================================== 10. REGISTER / LOGIN Leave space for hamburger on right ===================================================== */ .pkp_structure_head #navigationUserWrapper { position: absolute !important; top: 8px !important; right: 62px !important; left: auto !important; bottom: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; z-index: 100002 !important; } .pkp_structure_head #navigationUserWrapper #navigationUser { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; } .pkp_structure_head #navigationUserWrapper #navigationUser > li { width: auto !important; margin: 0 !important; padding: 0 !important; } .pkp_structure_head #navigationUserWrapper #navigationUser > li > a { min-width: 62px !important; padding: 6px 8px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 10px !important; white-space: nowrap !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .pkp_structure_head .pkp_site_nav_toggle { right: 8px !important; top: 8px !important; width: 40px !important; height: 36px !important; } .pkp_structure_head .pkp_site_nav_toggle::before { font-size: 21px !important; } .pkp_structure_head #navigationUserWrapper { right: 55px !important; top: 6px !important; } } /* ========================================================= MOBILE SUBMENU ARROW + CLICK OPEN ========================================================= */ @media (max-width: 900px) { /* Parent menu item containing submenu */ .pkp_structure_head .pkp_navigation_primary > li:has(> ul) { position: relative !important; } /* Arrow */ .pkp_structure_head .pkp_navigation_primary > li:has(> ul) > a::after { content: "▼" !important; display: inline-block !important; margin-left: auto !important; padding-left: 10px !important; color: #38bdf8 !important; font-size: 11px !important; line-height: 1 !important; transition: transform 0.25s ease !important; } /* Arrow when submenu is open */ .pkp_structure_head .pkp_navigation_primary > li.submenu-open:has(> ul) > a::after { transform: rotate(180deg) !important; } /* Submenu CLOSED */ .pkp_structure_head .pkp_navigation_primary > li > ul { display: none !important; } /* Submenu OPEN */ .pkp_structure_head .pkp_navigation_primary > li.submenu-open > ul { display: block !important; } /* Submenu links */ .pkp_structure_head .pkp_navigation_primary > li.submenu-open > ul > li > a { display: block !important; width: 100% !important; padding: 10px 20px !important; color: #ffffff !important; font-size: 13px !important; line-height: 1.45 !important; text-decoration: none !important; box-sizing: border-box !important; } /* Submenu hover */ .pkp_structure_head .pkp_navigation_primary > li.submenu-open > ul > li > a:hover { background: rgba(56, 189, 248, 0.18) !important; color: #38bdf8 !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .pkp_structure_head .pkp_navigation_primary > li:has(> ul) > a::after { font-size: 10px !important; padding-left: 8px !important; } } /* ========================================================= DHTA MOBILE SUBMENU - FINAL FIX Based on working JRAIE navigation ========================================================= */ @media (max-width: 900px) { /* Parent menu item */ .pkp_navigation_primary > li { position: relative !important; } /* Parent link */ .pkp_navigation_primary > li > a[href="#"] { position: relative !important; display: flex !important; align-items: center !important; justify-content: flex-start !important; width: 100% !important; padding-right: 50px !important; cursor: pointer !important; } /* ------------------------------- ARROW ------------------------------- */ .pkp_navigation_primary > li > a[href="#"]::after { content: "" !important; position: absolute !important; right: 18px !important; top: 50% !important; width: 7px !important; height: 7px !important; border-right: 2px solid #38bdf8 !important; border-bottom: 2px solid #38bdf8 !important; transform: translateY(-70%) rotate(45deg) !important; transition: transform 0.25s ease !important; pointer-events: none !important; } /* Arrow UP when opened */ .pkp_navigation_primary > li:focus-within > a[href="#"]::after { transform: translateY(-30%) rotate(-135deg) !important; } /* ------------------------------- SUBMENU CLOSED ------------------------------- */ .pkp_navigation_primary > li > ul { display: none !important; position: static !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #0a0f2d !important; border: 0 !important; border-left: 3px solid #38bdf8 !important; border-radius: 0 !important; box-shadow: none !important; overflow: hidden !important; } /* ------------------------------- SUBMENU OPEN ON TAP ------------------------------- */ .pkp_navigation_primary > li:focus-within > ul { display: block !important; visibility: visible !important; opacity: 1 !important; height: auto !important; max-height: 1000px !important; overflow: visible !important; } /* ------------------------------- SUBMENU ITEMS ------------------------------- */ .pkp_navigation_primary > li > ul > li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } /* ------------------------------- SUBMENU LINKS ------------------------------- */ .pkp_navigation_primary > li > ul > li > a { display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 12px 18px 12px 32px !important; color: #ffffff !important; background: transparent !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.5 !important; text-align: left !important; white-space: normal !important; overflow-wrap: break-word !important; word-break: normal !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; text-decoration: none !important; } /* Submenu hover */ .pkp_navigation_primary > li > ul > li > a:hover { background: rgba(56,189,248,0.18) !important; color: #38bdf8 !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .pkp_navigation_primary > li > a[href="#"] { padding-right: 45px !important; } .pkp_navigation_primary > li > ul > li > a { padding: 11px 14px 11px 28px !important; font-size: 12px !important; } } /* ========================================================= DHTA - FINAL MOBILE SUBMENU ARROW ONLY ONE ARROW ========================================================= */ @media (max-width: 900px) { /* Parent item */ .pkp_structure_head .pkp_navigation_primary > li:has(> ul) { position: relative !important; } /* ===================================================== REMOVE ALL OLD ARROWS ===================================================== */ .pkp_structure_head .pkp_navigation_primary > li:has(> ul) > a::before, .pkp_structure_head .pkp_navigation_primary > li:has(> ul) > a::after { content: none !important; display: none !important; } /* ===================================================== CREATE ONLY ONE ARROW ===================================================== */ .pkp_structure_head .pkp_navigation_primary > li:has(> ul) > a::before { content: "▼" !important; display: block !important; position: absolute !important; right: 18px !important; top: 50% !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; border: none !important; color: #38bdf8 !important; font-size: 10px !important; line-height: 1 !important; transform: translateY(-50%) !important; pointer-events: none !important; } /* ===================================================== SUBMENU CLOSED ===================================================== */ .pkp_structure_head .pkp_navigation_primary > li:has(> ul) > ul { display: none !important; position: static !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; background: #0a0f2d !important; border: none !important; border-left: 3px solid #38bdf8 !important; border-radius: 0 !important; box-shadow: none !important; } /* ===================================================== SUBMENU OPEN ===================================================== */ .pkp_structure_head .pkp_navigation_primary > li:has(> ul):focus-within > ul { display: block !important; } /* ===================================================== ARROW UP WHEN OPEN ===================================================== */ .pkp_structure_head .pkp_navigation_primary > li:has(> ul):focus-within > a::before { transform: translateY(-50%) rotate(180deg) !important; } /* ===================================================== SUBMENU LINKS ===================================================== */ .pkp_structure_head .pkp_navigation_primary > li:has(> ul) > ul > li { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .pkp_structure_head .pkp_navigation_primary > li:has(> ul) > ul > li > a { display: block !important; width: 100% !important; padding: 11px 20px 11px 32px !important; color: #ffffff !important; background: transparent !important; font-size: 13px !important; line-height: 1.45 !important; text-decoration: none !important; box-sizing: border-box !important; } .pkp_structure_head .pkp_navigation_primary > li:has(> ul) > ul > li > a:hover { background: rgba(56, 189, 248, 0.18) !important; color: #38bdf8 !important; } } /* ========================================================= DHTA MOBILE HEADER - FINAL ========================================================= */ @media (max-width: 900px) { /* JOURNAL TITLE */ #headerNavigationContainer .pkp_site_name::after { content: "Digital Health & Telemonitoring Advances" !important; display: block !important; position: absolute !important; left: 62px !important; top: 25px !important; width: 245px !important; font-size: 16px !important; line-height: 18px !important; font-weight: 700 !important; white-space: normal !important; visibility: visible !important; opacity: 1 !important; transform: none !important; z-index: 9999 !important; } /* E/P TEXT */ #headerNavigationContainer .pkp_site_name_wrapper::after { content: "E: 3117-6461 | P: 3117-647X" !important; display: block !important; position: absolute !important; left: 62px !important; top: 68px !important; font-size: 10px !important; line-height: 12px !important; font-weight: 400 !important; white-space: nowrap !important; visibility: visible !important; opacity: 1 !important; transform: none !important; z-index: 9999 !important; } } @media (max-width: 900px) { /* JOURNAL TITLE - 10px RIGHT */ #headerNavigationContainer .pkp_site_name::after { left: 100px !important; } /* E/P TEXT - 10px RIGHT */ #headerNavigationContainer .pkp_site_name_wrapper::after { left: 100px !important; } } /* MOBILE ONLY - MOVE LOGO */ @media (max-width: 900px) { #headerNavigationContainer .pkp_site_name::before { left: 30px !important; top: 25px !important; } } /*------------------------------------------ add tittle text 13 aug 2026 --------------------------------------*/ /* ========================================================= DHTA HEADER - SAME LAYOUT AS JRAIE Logo | Journal Title | ISSN ========================================================= */ /* ---------------- DESKTOP ---------------- */ @media (min-width: 901px) { /* Header height */ .pkp_structure_head .pkp_site_name_wrapper { min-height: 185px !important; height: 185px !important; position: relative !important; display: block !important; overflow: hidden !important; } /* Header content area */ .pkp_structure_head .pkp_site_name { width: 100% !important; height: 185px !important; min-height: 185px !important; padding: 0 !important; position: relative !important; display: block !important; } /* ----------------------------------------- LOGO ----------------------------------------- */ .pkp_structure_head .pkp_site_name::before { left: 40px !important; top: 35px !important; width: 135px !important; height: 135px !important; transform: none !important; background-size: contain !important; background-position: center !important; background-repeat: no-repeat !important; } /* ----------------------------------------- JOURNAL TITLE ----------------------------------------- */ .pkp_structure_head .pkp_site_name::after { content: "Digital Health & Telemonitoring Advances" !important; position: absolute !important; left: 194px !important; top: 45px !important; width: calc(100% - 215px) !important; margin: 0 !important; padding: 0 !important; color: #111827 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 44px !important; font-weight: 700 !important; line-height: 1.15 !important; text-transform: none !important; white-space: nowrap !important; overflow: visible !important; transform: none !important; background: transparent !important; z-index: 21 !important; } /* ----------------------------------------- ISSN ----------------------------------------- */ .pkp_structure_head .pkp_site_name_wrapper::after { content: "E: 3117-6461 | P: 3117-647X" !important; position: absolute !important; left: 194px !important; top: 120px !important; margin: 0 !important; padding: 0 !important; color: #111827 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 21px !important; font-weight: 400 !important; line-height: 1.2 !important; white-space: nowrap !important; z-index: 30 !important; pointer-events: none !important; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1200px) and (min-width: 901px) { .pkp_structure_head .pkp_site_name::before { left: 30px !important; top: 35px !important; width: 115px !important; height: 115px !important; } .pkp_structure_head .pkp_site_name::after { left: 165px !important; top: 48px !important; font-size: 34px !important; width: calc(100% - 185px) !important; } .pkp_structure_head .pkp_site_name_wrapper::after { left: 165px !important; top: 105px !important; font-size: 17px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 900px) { .pkp_structure_head .pkp_site_name_wrapper { min-height: 100px !important; height: 100px !important; position: relative !important; overflow: visible !important; } .pkp_structure_head .pkp_site_name { min-height: 100px !important; height: 100px !important; padding: 0 !important; position: relative !important; } /* LOGO */ .pkp_structure_head .pkp_site_name::before { left: 10px !important; top: 15px !important; width: 65px !important; height: 65px !important; transform: none !important; } /* TITLE */ .pkp_structure_head .pkp_site_name::after { content: "Digital Health & Telemonitoring Advances" !important; left: 82px !important; top: 20px !important; width: calc(100% - 92px) !important; font-size: 20px !important; line-height: 1.1 !important; white-space: normal !important; overflow: visible !important; transform: none !important; } /* ISSN */ .pkp_structure_head .pkp_site_name_wrapper::after { left: 82px !important; top: 68px !important; font-size: 10px !important; line-height: 1.2 !important; white-space: nowrap !important; } } /* ========================================================= SMALL MOBILE ========================================================= */ @media (max-width: 480px) { .pkp_structure_head .pkp_site_name_wrapper { min-height: 90px !important; height: 90px !important; } .pkp_structure_head .pkp_site_name { min-height: 90px !important; height: 90px !important; } .pkp_structure_head .pkp_site_name::before { left: 8px !important; top: 12px !important; width: 58px !important; height: 58px !important; } .pkp_structure_head .pkp_site_name::after { left: 72px !important; top: 16px !important; width: calc(100% - 78px) !important; font-size: 17px !important; line-height: 1.1 !important; } .pkp_structure_head .pkp_site_name_wrapper::after { left: 72px !important; top: 62px !important; font-size: 9px !important; } } /* ========================================================= DHTA DESKTOP HEADER MOVE LOGO + TITLE + ISSN 15px TO RIGHT ========================================================= */ /* @media (min-width: 901px) { */ /* LOGO */ /* #headerNavigationContainer .pkp_site_name::before { left: 100px !important; } */ /* JOURNAL TITLE */ /* #headerNavigationContainer .pkp_site_name::after { left: 260px !important; } */ /* E/P ISSN */ /* #headerNavigationContainer .pkp_site_name_wrapper::after { left: 260px !important; } } */ /* ========================================================= DHTA DESKTOP HEADER LOGO + TITLE + ISSN POSITION ========================================================= */ @media (min-width: 901px) { /* LOGO - keep same position */ #headerNavigationContainer .pkp_site_name::before { left: 100px !important; } /* JOURNAL TITLE - move 10px DOWN */ #headerNavigationContainer .pkp_site_name::after { left: 260px !important; top: 60px !important; } /* E/P ISSN - move 10px DOWN */ #headerNavigationContainer .pkp_site_name_wrapper::after { left: 260px !important; top: 120px !important; } } /* ========================================================= DESKTOP ONLY - INCREASE NAVBAR TEXT SIZE ========================================================= */ @media (min-width: 901px) { .pkp_navigation_primary > li > a { font-size: 14px !important; } } /*--------------------------------------------------- footer css updated code 13 august 2026 ------------------------------------------------------------------------*/ /* ========================================================= DHTA FOOTER SAME DESIGN AS FINAL JRAIE FOOTER FULL WIDTH + COMPACT + RESPONSIVE ========================================================= */ /* REMOVE OUTER OJS FOOTER SPACING */ .pkp_structure_footer, .pkp_structure_footer_wrapper, .pkp_footer, .pkp_footer_wrapper { width: 100% !important; margin: 0 !important; padding: 0 !important; background: #070b2d !important; box-sizing: border-box !important; } /* MAIN FOOTER */ .dhta-footer { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 25px 0 0 0 !important; background: #070b2d !important; color: #ffffff !important; box-sizing: border-box !important; overflow: hidden !important; } /* FOOTER CONTAINER */ .dhta-footer-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 60px 20px 60px !important; box-sizing: border-box !important; display: grid !important; grid-template-columns: minmax(280px, 1.45fr) minmax(180px, 1fr) minmax(200px, 1fr) minmax(220px, 1fr) !important; gap: 35px !important; background: #070b2d !important; } /* BRAND */ .dhta-footer-brand { min-width: 0 !important; width: 100% !important; color: #ffffff !important; } /* BRAND HEADER */ .dhta-brand-header { width: 100% !important; display: flex !important; align-items: center !important; gap: 15px !important; margin: 0 0 12px 0 !important; padding: 0 !important; box-sizing: border-box !important; } /* LOGO */ .dhta-footer-logo { flex: 0 0 90px !important; width: 90px !important; height: 90px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: #ffffff !important; border-radius: 8px !important; padding: 7px !important; margin: 0 !important; box-sizing: border-box !important; } .dhta-footer-logo a { display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; } .dhta-footer-logo img { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: contain !important; margin: 0 !important; padding: 0 !important; } /* JOURNAL TITLE */ .dhta-footer-title { min-width: 0 !important; flex: 1 1 auto !important; } .dhta-footer-title h3 { margin: 0 0 5px 0 !important; padding: 0 !important; color: #ffffff !important; font-size: 19px !important; font-weight: 700 !important; line-height: 1.25 !important; word-wrap: break-word !important; overflow-wrap: break-word !important; } .dhta-issn { margin: 0 !important; padding: 0 !important; color: #93c5fd !important; font-size: 11px !important; line-height: 1.4 !important; } /* DESCRIPTION */ .dhta-footer-current { width: 100% !important; margin: 0 !important; padding: 0 !important; color: #cbd5e1 !important; font-size: 13px !important; line-height: 1.55 !important; overflow-wrap: anywhere !important; } .dhta-footer-current p { margin: 0 0 8px 0 !important; padding: 0 !important; } /* FOOTER COLUMNS */ .dhta-footer-column { min-width: 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } /* HEADINGS */ .dhta-footer-column h3, .dhta-publisher h3 { margin: 0 0 10px 0 !important; padding: 0 !important; color: #ffffff !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: 0.3px !important; } /* LIST */ .dhta-footer-column ul { margin: 0 !important; padding: 0 !important; list-style: none !important; } .dhta-footer-column ul li { margin: 0 !important; padding: 0 !important; list-style: none !important; } .dhta-footer-column ul li a { display: block !important; width: 100% !important; padding: 3px 0 !important; margin: 0 !important; color: #aeb9cf !important; font-size: 13px !important; line-height: 1.35 !important; text-decoration: none !important; overflow-wrap: anywhere !important; transition: color 0.2s ease, padding-left 0.2s ease !important; } .dhta-footer-column ul li a:hover { color: #60a5fa !important; padding-left: 5px !important; } /* PUBLISHER */ .dhta-publisher { min-width: 0 !important; width: 100% !important; color: #cbd5e1 !important; } .dhta-publisher p { margin: 0 0 6px 0 !important; padding: 0 !important; color: #aeb9cf !important; font-size: 12px !important; line-height: 1.5 !important; overflow-wrap: anywhere !important; } .dhta-publisher p strong { color: #ffffff !important; } .dhta-publisher p a { color: #60a5fa !important; text-decoration: none !important; overflow-wrap: anywhere !important; } .dhta-publisher p a:hover { color: #ffffff !important; text-decoration: underline !important; } /* COPYRIGHT */ .dhta-footer-bottom { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 10px 60px !important; box-sizing: border-box !important; border-top: 1px solid rgba(255,255,255,0.10) !important; background: #070b2d !important; text-align: center !important; } .dhta-footer-bottom p { margin: 0 !important; padding: 0 !important; color: #94a3b8 !important; font-size: 12px !important; line-height: 1.4 !important; overflow-wrap: anywhere !important; } .dhta-footer-bottom strong { color: #ffffff !important; } .dhta-footer-bottom a { color: #60a5fa !important; text-decoration: none !important; } .dhta-footer-bottom a:hover { color: #ffffff !important; text-decoration: underline !important; } /* ========================================================= DESKTOP ========================================================= */ @media (min-width: 1201px) { .dhta-footer-container { grid-template-columns: minmax(280px, 1.45fr) minmax(180px, 1fr) minmax(200px, 1fr) minmax(220px, 1fr) !important; gap: 35px !important; padding-left: 60px !important; padding-right: 60px !important; } } /* ========================================================= TABLET ========================================================= */ @media (max-width: 1200px) { .dhta-footer-container { grid-template-columns: 1.4fr 1fr 1fr !important; gap: 28px !important; padding-left: 45px !important; padding-right: 45px !important; } .dhta-publisher { grid-column: 1 / -1 !important; } .dhta-footer-bottom { padding-left: 45px !important; padding-right: 45px !important; } } /* ========================================================= TABLET / SMALL LAPTOP ========================================================= */ @media (max-width: 900px) { .dhta-footer-container { grid-template-columns: 1fr 1fr !important; gap: 25px 25px !important; padding-left: 30px !important; padding-right: 30px !important; } .dhta-footer-brand { grid-column: 1 / -1 !important; } .dhta-publisher { grid-column: auto !important; } .dhta-footer-bottom { padding-left: 30px !important; padding-right: 30px !important; } } /* ========================================================= MOBILE ========================================================= */ @media (max-width: 767px) { .pkp_structure_footer, .pkp_structure_footer_wrapper, .pkp_footer, .pkp_footer_wrapper { width: 100% !important; margin: 0 !important; padding: 0 !important; background: #070b2d !important; } .dhta-footer { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 22px 0 0 0 !important; overflow: hidden !important; } .dhta-footer-container { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 20px 18px 20px !important; grid-template-columns: 1fr !important; gap: 22px !important; } .dhta-footer-brand, .dhta-footer-column, .dhta-publisher { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; } /* MOBILE BRAND */ .dhta-brand-header { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; margin-bottom: 12px !important; } .dhta-footer-logo { flex: 0 0 65px !important; width: 65px !important; height: 65px !important; padding: 5px !important; } .dhta-footer-title { flex: 1 1 auto !important; min-width: 0 !important; } .dhta-footer-title h3 { font-size: 15px !important; line-height: 1.25 !important; margin-bottom: 4px !important; } .dhta-issn { font-size: 9px !important; line-height: 1.35 !important; } .dhta-footer-current { font-size: 12px !important; line-height: 1.5 !important; } /* MOBILE COLUMNS */ .dhta-footer-column h3, .dhta-publisher h3 { font-size: 14px !important; margin-bottom: 8px !important; } .dhta-footer-column ul li a { padding: 3px 0 !important; font-size: 12px !important; line-height: 1.35 !important; } /* MOBILE PUBLISHER */ .dhta-publisher p { font-size: 11px !important; line-height: 1.5 !important; margin-bottom: 5px !important; } /* MOBILE COPYRIGHT */ .dhta-footer-bottom { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 10px 15px !important; box-sizing: border-box !important; } .dhta-footer-bottom p { font-size: 10px !important; line-height: 1.4 !important; } } /* ========================================================= SMALL PHONES ========================================================= */ @media (max-width: 480px) { .dhta-footer { padding-top: 18px !important; } .dhta-footer-container { width: 100% !important; padding-left: 15px !important; padding-right: 15px !important; padding-bottom: 15px !important; gap: 20px !important; } .dhta-brand-header { gap: 9px !important; margin-bottom: 10px !important; } .dhta-footer-logo { flex: 0 0 58px !important; width: 58px !important; height: 58px !important; padding: 4px !important; } .dhta-footer-title h3 { font-size: 14px !important; line-height: 1.2 !important; } .dhta-issn { font-size: 8px !important; line-height: 1.3 !important; } .dhta-footer-current { font-size: 11px !important; line-height: 1.45 !important; } .dhta-footer-column h3, .dhta-publisher h3 { font-size: 13px !important; margin-bottom: 7px !important; } .dhta-footer-column ul li a { font-size: 11px !important; padding: 3px 0 !important; } .dhta-publisher p { font-size: 10px !important; line-height: 1.45 !important; } .dhta-footer-bottom { padding: 8px 12px !important; } .dhta-footer-bottom p { font-size: 9px !important; line-height: 1.35 !important; } } /* REDUCE DHTA FOOTER HEIGHT ONLY */ .dhta-footer { padding-top: 15px !important; } .dhta-footer-container { padding-bottom: 10px !important; gap: 20px !important; } .dhta-brand-header { margin-bottom: 6px !important; } .dhta-footer-logo { width: 75px !important; height: 75px !important; } .dhta-footer-title h3 { margin-bottom: 3px !important; } .dhta-footer-column h3, .dhta-publisher h3 { margin-bottom: 6px !important; } .dhta-footer-column ul li a { padding: 2px 0 !important; } .dhta-publisher p { margin-bottom: 4px !important; } .dhta-footer-bottom { padding-top: 7px !important; padding-bottom: 7px !important; } /* REDUCE DHTA FOOTER HEIGHT ONLY in mobile phone */ @media (max-width: 767px) { .dhta-footer { padding-top: 14px !important; } .dhta-footer-container { padding-bottom: 12px !important; gap: 15px !important; } .dhta-brand-header { margin-bottom: 7px !important; } .dhta-footer-logo { width: 58px !important; height: 58px !important; } .dhta-footer-column h3, .dhta-publisher h3 { margin-bottom: 5px !important; } .dhta-footer-column ul li a { padding: 2px 0 !important; } .dhta-publisher p { margin-bottom: 3px !important; } .dhta-footer-bottom { padding-top: 6px !important; padding-bottom: 6px !important; } }