body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://jlic.uinkhas.ac.id/public/site/batik.png'); background-size: auto; background-position: top left; background-repeat: repeat; background-attachment: fixed; z-index: -2; } body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0); z-index: -1; } /* Ensure body background doesn't interfere with background image */ body { background: transparent !important; } /* Mobile fix for background attachment */ @media (max-width: 768px) { body::before { background-attachment: scroll; } } /* Content frame styling */ /* .pkp_structure_content, */ /* .pkp_structure_main, */ /* .obj_article_summary,*/ .editorial-list, .article-summary, .article-details, .issue_toc, .publication_abstract, .bingkai, /* .cmp_announcements, */ /* Removed to prevent double boxes */ .item_abstract { border: 1px solid #00000024 !important; box-shadow: 0 6px 0 rgba(0, 53, 155, 0.99) !important; border-radius: 10px !important; padding: 15px !important; } .pkp_structure_content{ border: 6px solid #00000024 !important; box-shadow: 0 0 0 rgba(0, 53, 155, 0.99) !important; padding: 15px !important; } .border-primary-bottom { border-bottom-color: rgba(0, 53, 155, 0.99) !important; } /* Specific announcement styling with bingkai */ /* .cmp_announcements .obj_announcement_summary { background: #ffffff !important; border: 1px solid #00000024 !important; box-shadow: 0 6px 0 rgba(22, 130, 89, 0.99) !important; border-radius: 10px !important; margin-bottom: 30px !important; padding: 20px !important; overflow: hidden !important; position: relative !important; width: 100% !important; display: block !important; box-sizing: border-box !important; }*/ /* Ensure announcement content stays within container */ .cmp_announcements .obj_announcement_summary * { max-width: 100% !important; box-sizing: border-box !important; } /* Specific containment for announcement text and links */ .cmp_announcements .obj_announcement_summary, .cmp_announcements .obj_announcement_summary * { width: 100% !important; /*display: block !important;*/ overflow-wrap: break-word !important; word-wrap: break-word !important; position: relative !important; z-index: 1 !important; } /* Ensure announcement title stays within container */ .cmp_announcements .obj_announcement_summary h3, .cmp_announcements .obj_announcement_summary h4, .cmp_announcements .obj_announcement_summary .title { margin: 0 0 10px 0 !important; padding: 0 !important; width: 100% !important; display: block !important; font-size: 1.1em !important; line-height: 1.3 !important; color: #333 !important; } /* Ensure announcement date stays within container */ .cmp_announcements .obj_announcement_summary .date { margin: 0 0 10px 0 !important; padding: 0 !important; width: 100% !important; display: block !important; font-size: 0.9em !important; color: #666 !important; font-style: italic !important; } /* Ensure announcement content/description stays within container */ .cmp_announcements .obj_announcement_summary .summary, .cmp_announcements .obj_announcement_summary .description, .cmp_announcements .obj_announcement_summary p { /*margin: 0 0 15px 0 !important;*/ padding: 0 !important; width: 100% !important; display: block !important; font-size: 0.95em !important; line-height: 1.6 !important; color: #444 !important; word-wrap: break-word !important; overflow-wrap: normal !important; hyphens: auto !important; text-align: justify !important; } /* Ensure Read More link stays within container */ .cmp_announcements .obj_announcement_summary .read_more, .cmp_announcements .obj_announcement_summary .read-more { margin: 0 !important; padding: 0 !important; width: 100% !important; display: block !important; text-align: left !important; font-size: 0.9em !important; color: #0066cc !important; text-decoration: none !important; font-weight: 500 !important; } .cmp_announcements .obj_announcement_summary .read_more:hover, .cmp_announcements .obj_announcement_summary .read-more:hover { color: #004499 !important; text-decoration: underline !important; } /* Ensure Announcements heading is visible */ /*.cmp_announcements h2, .cmp_announcements .highlight_first h2 { display: block !important; visibility: visible !important; opacity: 1 !important; font-size: 1.5em !important; font-weight: bold !important; color: #333 !important; margin: 0 0 20px 0 !important; padding: 0 !important; }*/ /* Add spacing between announcement elements */ .cmp_announcements li + li, ul.cmp_announcements li + li { margin-top: 25px !important; } /* Mobile responsive adjustments for announcements */ @media (max-width: 768px) { .cmp_announcements .obj_announcement_summary { padding: 15px !important; margin-bottom: 20px !important; } .cmp_announcements .obj_announcement_summary h3, .cmp_announcements .obj_announcement_summary h4, .cmp_announcements .obj_announcement_summary .title { font-size: 1.0em !important; } .cmp_announcements .obj_announcement_summary .summary, .cmp_announcements .obj_announcement_summary .description, .cmp_announcements .obj_announcement_summary p { font-size: 0.9em !important; } } /* Tab active styling */ .pkp_tab.active > a, .pkp_tab.active > a span, .pkp_structure_content > a, .pkp_structure_main > a, .article-details > a, .obj_article_summary > a, .article-summary > a, .pkp_navigation_primary > a, .tabs .active > a, .tabs .active > a span, .nav-tabs .active > a, .nav-tabs .active > a span, .nav-tabs .active > a:hover, .nav-tabs .active > a:hover span, .ui-tabs-active > a, .ui-tabs-active > a span, .ui-state-active > a, .ui-state-active > a span, .ui-tabs-active > a:hover, .ui-tabs-active > a:hover span, .ui-state-active > a:hover, .ui-state-active > a:hover span, /* Custom theme tab buttons - override template CSS */ .tab-btn.active, .tab-btn.active:hover, .tab-btn.active:focus, button.tab-btn.active, button.tab-btn.active:hover, button.tab-btn.active:focus { background: #00A3E4 !important; background-color: #00A3E4 !important; color: #000000 !important; border-bottom-color: #00A3E4 !important; } /* Target actual homepage tab implementation */ #tabs-id a.text-white.bg-base, #tabs-id a.text-white, #tabs-id a.bg-base { background: #00A3E4 !important; background-color: #00A3E4 !important; color: #000000 !important; } /* Ensure inactive tab buttons have default styling */ .tab-btn:not(.active), button.tab-btn:not(.active), #tabs-id a.announcement-noble { background: transparent !important; background-color: transparent !important; color: inherit !important; } /* Define CSS Variables with high specificity */ :root, :root[data-theme], html, html[data-theme] { --primary-color: #BAFDFD !important; --bg-base: #1E6292 !important; --tab-active-background-color: #00A3E4 !important; --tab-active-font-color: #000000 !important; --tab-inactive-font-color: #00FF0D !important; } /* Ensure hover effect uses the correct color with !important */ .hvr-sweep-to-right:before { background: var(--bg-base) !important; background-color: var(--bg-base) !important; } /* Override any existing hover.min.css variables */ [class*='hvr-'] { --bg-base: #1E6292 !important; } /* Direct color override as fallback */ .hvr-sweep-to-right:before { background: #1E6292 !important; background-color: #1E6292 !important; } /* Targeted hover font color - Only apply when directly hovering over interactive elements */ a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):hover, a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):focus, a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):hover *, a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):focus *, .pkp_structure_content a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):hover, .pkp_structure_content a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):focus, .pkp_structure_content a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):hover *, .pkp_structure_content a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):focus *, .pkp_structure_main a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):hover, .pkp_structure_main a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):focus, .pkp_structure_main a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):hover *, .pkp_structure_main a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):focus *, .pkp_navigation_primary a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):hover, .pkp_navigation_primary a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):focus, .pkp_navigation_primary a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):hover *, .pkp_navigation_primary a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):focus *, /* Override dropdown menu hover effects */ /* Simplified dropdown menu hover effects */ .dropdown-menu a:focus, .dropdown-menu a:hover, .dropdown-menu a:focus *, .dropdown-menu a:hover * { color: #00FF0D !important; text-decoration: none !important; /* background: transparent !important; */ } /* Remove border-radius for dropdown menus */ .dropdown-menu { border-radius: 0 !important; } /* .pkp_navigation_primary_row a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):hover, .pkp_navigation_primary_row a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):focus, .pkp_navigation_primary_row a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):hover *, .pkp_navigation_primary_row a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):focus *, */ .main-navigation a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):hover, .main-navigation a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):focus, .main-navigation a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):hover *, .main-navigation a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):focus *, .navbar-nav a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):hover, .navbar-nav a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):focus, .navbar-nav a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):hover *, .navbar-nav a:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):focus *, .nav-link:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):hover, .nav-link:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):focus, .nav-link:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):hover *, .nav-link:not(.dropdown-menu *):not(.sub-menu *):not(ul ul *):focus *, .btn:hover, .btn:focus, .btn:hover *, .btn:focus *, button:hover, button:focus, button:hover *, button:focus *, input:hover[type='submit'], input:focus[type='submit'], input:hover[type='submit'] *, input:focus[type='submit'] *, input:hover[type='button'], input:focus[type='button'], input:hover[type='button'] *, input:focus[type='button'] *, .pkp_button:hover, .pkp_button:focus, .pkp_button:hover *, .pkp_button:focus *, .article-details a:hover, .article-details a:focus, .article-details a:hover *, .article-details a:focus *, .article-summary a:hover, .article-summary a:focus, .article-summary a:hover *, .article-summary a:focus *, .obj_article_summary a:hover, .obj_article_summary a:focus, .obj_article_summary a:hover *, .obj_article_summary a:focus *, .editorial-list a:hover, .editorial-list a:focus, .editorial-list a:hover *, .editorial-list a:focus *, .cmp_breadcrumbs a:hover, .cmp_breadcrumbs a:focus, .cmp_breadcrumbs a:hover *, .cmp_breadcrumbs a:focus *, .breadcrumb a:hover, .breadcrumb a:focus, .breadcrumb a:hover *, .breadcrumb a:focus *, .pkp_breadcrumb a:hover, .pkp_breadcrumb a:focus, .pkp_breadcrumb a:hover *, .pkp_breadcrumb a:focus * { color: #00FF0D !important; text-decoration: none !important; transition: color 0.3s ease !important; } /* Target semua elemen link secara langsung saat di-hover */ a:hover, a:focus, a:hover *, a:focus *, .pkp_structure_content a:hover, .pkp_structure_content a:focus, .pkp_structure_content a:hover *, .pkp_structure_content a:focus *, .pkp_structure_main a:hover, .pkp_structure_main a:focus, .pkp_structure_main a:hover *, .pkp_structure_main a:focus *, .pkp_navigation_primary a:hover, .pkp_navigation_primary a:focus, .pkp_navigation_primary a:hover *, .pkp_navigation_primary a:focus *, /*.pkp_navigation_primary_row a:hover, .pkp_navigation_primary_row a:focus, .pkp_navigation_primary_row a:hover *, .pkp_navigation_primary_row a:focus *, */ .main-navigation a:hover, .main-navigation a:focus, .main-navigation a:hover *, .main-navigation a:focus *, .navbar-nav a:hover, .navbar-nav a:focus, .navbar-nav a:hover *, .navbar-nav a:focus *, .nav-link:hover, .nav-link:focus, .nav-link:hover *, .nav-link:focus *, .btn:hover, .btn:focus, .btn:hover *, .btn:focus *, button:hover, button:focus, button:hover *, button:focus *, input:hover[type='submit'], input:focus[type='submit'], input:hover[type='submit'] *, input:focus[type='submit'] *, input:hover[type='button'], input:focus[type='button'], input:hover[type='button'] *, input:focus[type='button'] *, .pkp_button:hover, .pkp_button:focus, .pkp_button:hover *, .pkp_button:focus *, .article-details a:hover, .article-details a:focus, .article-details a:hover *, .article-details a:focus *, .article-summary a:hover, .article-summary a:focus, .article-summary a:hover *, .article-summary a:focus *, .obj_article_summary a:hover, .obj_article_summary a:focus, .obj_article_summary a:hover *, .obj_article_summary a:focus *, .editorial-list a:hover, .editorial-list a:focus, .editorial-list a:hover *, .editorial-list a:focus *, .cmp_breadcrumbs a:hover, .cmp_breadcrumbs a:focus, .cmp_breadcrumbs a:hover *, .cmp_breadcrumbs a:focus *, .breadcrumb a:hover, .breadcrumb a:focus, .breadcrumb a:hover *, .breadcrumb a:focus *, .pkp_breadcrumb a:hover, .pkp_breadcrumb a:focus, .pkp_breadcrumb a:hover *, .pkp_breadcrumb a:focus * { color: #00FF0D !important; text-decoration: none !important; transition: color 0.3s ease !important; } /* Target khusus untuk navigasi dan menu */ .pkp_navigation_primary li:hover > a, .pkp_navigation_primary li:hover > a *, .pkp_navigation_primary li:focus > a, .pkp_navigation_primary li:focus > a *, /*.pkp_navigation_primary_row li:hover > a, .pkp_navigation_primary_row li:hover > a *, .pkp_navigation_primary_row li:focus > a, .pkp_navigation_primary_row li:focus > a *, */ .main-navigation li:hover > a, .main-navigation li:hover > a *, .main-navigation li:focus > a, .main-navigation li:focus > a *, .navbar-nav li:hover > a, .navbar-nav li:hover > a *, .navbar-nav li:focus > a, .navbar-nav li:focus > a * { color: #00FF0D !important; } /* Override inline styles dan stylesheets tema */ body a:hover, body a:focus, body a:hover *, body a:focus *, html a:hover, html a:focus, html a:hover *, html a:focus *, .pkp_structure_head a:hover, .pkp_structure_head a:focus, .pkp_structure_head a:hover *, .pkp_structure_head a:focus *, .pkp_navigation_primary a:hover, .pkp_navigation_primary a:focus, .pkp_navigation_primary a:hover *, .pkp_navigation_primary a:focus *, .pkp_structure_content a:hover, .pkp_structure_content a:focus, .pkp_structure_content a:hover *, .pkp_structure_content a:focus * { color: #00FF0D !important; } /* Header & Navigation */ .pkp_structure_head, .pkp_navigation_primary, .pkp_navigation_primary_row, .pkp_site_name, .pkp_head_wrapper, .header_warna { background-color: #BAFDFD !important; background: #BAFDFD !important; } /* Buttons */ .pkp_button_primary, .btn-primary, button.pkp_button, .button.primary, input[type='submit'].primary { background-color: #BAFDFD !important; border-color: #BAFDFD !important; } /* Links & Navigation Items */ .pkp_navigation_primary a, /*.pkp_navigation_primary_row a,*/ .main-navigation a { color: white !important; } /* Active states */ .pkp_navigation_primary a:hover { /*.pkp_navigation_primary_row a:hover {*/ background-color: #9ed7d7 !important; } /* Base background color for active tabs */ .pkp_tab.active > a, .pkp_tab.active > a span, .tabs .active > a, .tabs .active > a span, .nav-tabs .active > a, .nav-tabs .active > a span, .nav-tabs .active > a:hover, .nav-tabs .active > a:hover span, .ui-tabs-active > a, .ui-tabs-active > a span, .ui-state-active > a, .ui-state-active > a span, .ui-tabs-active > a:hover, .ui-tabs-active > a:hover span, .ui-state-active > a:hover, .ui-state-active > a:hover span { background-color: #00A3E4 !important; color: #000000 !important; } /* Site logo/title */ .pkp_site_name a { color: white !important; } /* Breadcrumbs & pagination */ .current_issue .current, .pagination .current, .pkp_pagination .current { background-color: #BAFDFD !important; border-color: #BAFDFD !important; } body, .pkp_structure_main, .pkp_structure_content, .pkp_structure_content p, .pkp_structure_content div, .pkp_structure_content span, .article-details, .article-summary, .obj_article_summary, .editorial-list, .article-full-text { color: #000000; } a { color: #000000; text-decoration: none; transition: color 0.3s ease; } /* Headings */ h1, h2, h3, h4, h5, h6, .pkp_structure_content h1, .pkp_structure_content h2, .pkp_structure_content h3, .pkp_structure_content h4, .pkp_structure_content h5, .pkp_structure_content h6 { color: #000000 !important;; } a, a:link, a:visited, .pkp_structure_content a, .pkp_structure_main a, .article-details a, .obj_article_summary a, .editorial-list a, .article-summary a, .pkp_navigation_primary a { text-decoration: none !important; transition: all 0.3s ease !important; } a:hover, .pkp_structure_content a:hover, .pkp_structure_main a:hover { color: #0051a3 !important; } body, .pkp_structure_content, .pkp_structure_main, .article-details, .article-summary, .obj_article_summary { font-size: 14px !important; line-height: 1.6 !important; } /* Responsive headings */ /* h1, .pkp_structure_content h1 { font-size: calc(14px * 2.5) !important; line-height: 1.2 !important; } h2, .pkp_structure_content h2 { font-size: calc(14px * 2) !important; line-height: 1.3 !important; } h3, .pkp_structure_content h3 { font-size: calc(14px * 1.75) !important; line-height: 0.8 !important; } h4, .pkp_structure_content h4 { font-size: calc(14px * 1.5) !important; line-height: 0.8 !important; } h5, .pkp_structure_content h5 { font-size: calc(14px * 1.25) !important; line-height: 1.5 !important; } h6, .pkp_structure_content h6 { font-size: calc(14px * 1.1) !important; line-height: 1.5 !important; } */ /* Mobile adjustments */ @media (max-width: 768px) { body, .pkp_structure_content { font-size: calc(14px * 0.9) !important; } h1 { font-size: calc(14px * 2) !important; } h2 { font-size: calc(14px * 1.8) !important; } h3 { font-size: calc(14px * 1.6) !important; } } .pkp_structure_head, .pkp_site_name, .header_warna, .pkp_head_wrapper { background-color: rgba(255,255,255,0.1) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border-bottom: 1px solid rgba(255,255,255,0.2) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; } .pkp_navigation_primary { /*.pkp_navigation_primary_row {*/ background-color: transparent !important; background: transparent !important; } .pkp_site_name a { color: white !important; text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important; } /* Navigation menu bar background color */ .pkp_navigation_primary, .pkp_navigation_primary_row, .main-navigation, .navbar, /* Submenu/Dropdown background color */ .pkp_navigation_primary ul, .pkp_navigation_primary ul ul, .pkp_navigation_primary .dropdown-menu, .pkp_navigation_primary_row ul, .pkp_navigation_primary_row ul ul, .main-navigation ul, .main-navigation ul ul, .navbar .dropdown-menu, ul.dropdown-menu, .nav .dropdown-menu { background-color: #BAFDFD !important; background: #BAFDFD !important; } .pkp_structure_page { max-width: 1200px !important; margin: 10px auto !important; box-shadow: 0 0 6px rgba(0, 0, 0, 0.3) !important; background: rgba(255,255,255,0.95) !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important; border-radius: 15px !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,0.3) !important; } .pkp_structure_head { border-radius: 15px 15px 0 0 !important; } .pkp_structure_head, .pkp_head_wrapper, .pkp_site_name_wrapper, .header_warna { background-color: #BAFDFD !important; background: #BAFDFD !important; } .pkp_structure_content { padding: 15px !important; background: rgba(255,255,255,0.8) !important; } .obj_issue_toc .cover { float: left; width: 19% !important; height: auto; max-height: none; margin-right: 20px; } /* Ensure articles section appears below the cover */ .obj_issue_toc .sections { clear: both; display: block; width: 100%; } /* Ensure articles section has proper spacing from cover */ .obj_issue_toc .sections .section { margin-top: 20px; clear: both; } /* Additional layout fixes for current issue page */ .current_issue .obj_issue_toc .cover { float: left !important; width: 19% !important; margin-right: 20px !important; clear: none !important; } .current_issue .obj_issue_toc .sections { clear: both !important; width: 100% !important; display: block !important; } .current_issue .obj_issue_toc .sections .section { margin-top: 20px !important; clear: both !important; } /* Ensure proper spacing and layout for issue table of contents */ .issue_toc .cover { float: left !important; width: 19% !important; margin-right: 20px !important; } .issue_toc .sections { clear: both !important; width: 100% !important; display: block !important; } .issue_toc .sections .section { margin-top: 20px !important; clear: both !important; } /* Announcements spacing for better visual separation - MORE SPECIFIC */ .cmp_announcements li, ul.cmp_announcements li, .pkp_structure_content .cmp_announcements li, .pkp_structure_main .cmp_announcements li, .pkp_structure_sidebar .cmp_announcements li { margin-bottom: 30px !important; padding-bottom: 20px !important; border-bottom: 2px solid #e0e0e0 !important; } .cmp_announcements li:last-child, ul.cmp_announcements li:last-child, .pkp_structure_content .cmp_announcements li:last-child, .pkp_structure_main .cmp_announcements li:last-child, .pkp_structure_sidebar .cmp_announcements li:last-child { margin-bottom: 0 !important; padding-bottom: 0 !important; border-bottom: none !important; } /* Additional spacing for announcement content */ /* // .cmp_announcements li .obj_announcement_summary, // .cmp_announcements li .announcement-summary { // padding: 15px 0 !important; // } */ /* Comprehensive announcement content containment - target article elements ONLY */ /* // .cmp_announcements .obj_announcement_summary, // .cmp_announcements article, // .pkp_structure_content .cmp_announcements .obj_announcement_summary, // .pkp_structure_main .cmp_announcements .obj_announcement_summary, // .pkp_structure_sidebar .cmp_announcements .obj_announcement_summary { // background: #ffffff !important; // border: 1px solid #e0e0e0 !important; // border-radius: 8px !important; // margin-bottom: 30px !important; // padding: 20px !important; // box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; // overflow: hidden !important; // position: relative !important; // width: 100% !important; // display: block !important; // box-sizing: border-box !important; // } */ /* Add extra spacing for the last announcement */ /* // .cmp_announcements .obj_announcement_summary:last-child, // .cmp_announcements article:last-child { // margin-bottom: 40px !important; // } */ /* Override content frame styling for announcements to prevent double boxes */ /* // .cmp_announcements.cmp_announcements, // .cmp_announcements.obj_announcement_summary, // .cmp_announcements article { // border: none !important; // box-shadow: none !important; // background: transparent !important; // padding: 0 !important; // margin: 0 !important; // } */ /* Ensure all announcement content stays within the container */ /* // .cmp_announcements .obj_announcement_summary *, // .cmp_announcements article *, // .pkp_structure_content .cmp_announcements .obj_announcement_summary *, // .pkp_structure_main .cmp_announcements .obj_announcement_summary *, // .pkp_structure_sidebar .cmp_announcements .obj_announcement_summary * { // max-width: 100% !important; // box-sizing: border-box !important; // } */ /* Specific containment for announcement text and links */ /* // .cmp_announcements .obj_announcement_summary, // .cmp_announcements .obj_announcement_summary *, // .cmp_announcements article, // .cmp_announcements article * { // width: 100% !important; // display: block !important; // overflow-wrap: break-word !important; // word-wrap: break-word !important; // position: relative !important; // z-index: 1 !important; // } */ /* Ensure announcement title stays within container */ /* // .cmp_announcements .obj_announcement_summary h3, // .cmp_announcements .obj_announcement_summary h4, // .cmp_announcements .obj_announcement_summary .title, // .cmp_announcements article h3, // .cmp_announcements article h4, // .cmp_announcements article .title { // margin: 0 0 10px 0 !important; // padding: 0 !important; // width: 100% !important; // display: block !important; // font-size: 1.1em !important; // line-height: 1.3 !important; // color: #333 !important; // } */ /* Ensure announcement date stays within container */ /* // .cmp_announcements .obj_announcement_summary .date, // .cmp_announcements article .date { // margin: 0 0 10px 0 !important; // padding: 0 !important; // width: 100% !important; // display: block !important; // font-size: 0.9em !important; // color: #666 !important; // font-style: italic !important; // } */ /* Ensure announcement content/description stays within container */ /* .cmp_announcements .obj_announcement_summary .summary, // .cmp_announcements .obj_announcement_summary .description, // .cmp_announcements .obj_announcement_summary p, // .cmp_announcements article .summary, // .cmp_announcements article .description, // .cmp_announcements article p { // margin: 0 0 15px 0 !important; // padding: 0 !important; // width: 100% !important; // display: block !important; // font-size: 0.95em !important; // line-height: 1.6 !important; // color: #444 !important; // word-wrap: break-word !important; // overflow-wrap: normal !important; // hyphens: auto !important; // text-align: justify !important; // } */ /* Ensure Read More link stays within container */ /* // .cmp_announcements .obj_announcement_summary .read_more, // .cmp_announcements .obj_announcement_summary .read-more, // .cmp_announcements article .read_more, // .cmp_announcements article .read-more { // margin: 0 !important; // padding: 0 !important; // width: 100% !important; // display: block !important; // text-align: left !important; // font-size: 0.9em !important; // color: #0066cc !important; // text-decoration: none !important; // font-weight: 500 !important; // } */ .cmp_announcements .obj_announcement_summary .read_more:hover, .cmp_announcements .obj_announcement_summary .read-more:hover, .cmp_announcements article .read_more:hover, .cmp_announcements article .read-more:hover { color: #004499 !important; text-decoration: underline !important; } /* Ensure Announcements heading is visible */ /* // .cmp_announcements h2, // .cmp_announcements .highlight_first h2 { // display: block !important; // visibility: visible !important; // opacity: 1 !important; // font-size: 1.5em !important; // font-weight: bold !important; // color: #333 !important; // margin: 0 0 20px 0 !important; // padding: 0 !important; // } */ /* Ensure announcements container has proper spacing */ /* // .cmp_announcements, // ul.cmp_announcements { // margin: 20px 0px !important; // padding: 20px !important; // } */ /* Add spacing between announcement elements */ .cmp_announcements li + li, ul.cmp_announcements li + li { margin-top: 25px !important; } .pkp_structure_footer { background: rgba(255,255,255,0.1) !important; border-radius: 0 0 15px 15px !important; } /* Mobile adjustments */ @media (max-width: 768px) { .pkp_structure_page { margin: 5px !important; border-radius: 10px !important; background: rgba(255,255,255,0.98) !important; } .pkp_structure_content { padding: 15px !important; } } /* FORCE BREADCRUMB VISIBILITY AND STYLING - CRITICAL */ .cmp_pagination { text-align: right; } .cmp_pagination:before, .cmp_pagination:after { content: ' '; display: table; } .cmp_pagination:after { clear: both; } .cmp_pagination .prev { float: left; margin-right: 0.5em; text-decoration: none; } .cmp_pagination .prev:before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); line-height: unset; content: ' 177'; margin-right: 0.5em; } .cmp_pagination .next { margin-left: 0.5em; text-decoration: none; } .cmp_pagination .next:after { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); line-height: unset; content: ' 178'; margin-left: 0.5em; } .cmp_edit_link { display: inline-block; margin-left: 1em; font-size: 13px; font-weight: 400; line-height: 1; vertical-align: middle; text-decoration: none; } .cmp_edit_link:before { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; text-rendering: auto; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; transform: translate(0, 0); line-height: unset; content: ' 040'; } .cmp_search_filter { margin-bottom: 10px; font-size: 13px; } .cmp_search_filter:last-child { margin-bottom: 0; } .cmp_search_filter label { font-style: italic; } .cmp_search_filter .delete { color: #ff4040; } .cmp_notification { display: block; width: 100%; padding: 20px; margin-bottom: 40px; background: #ddd; border-left: 5px solid #18495b; font-size: 14px; line-height: 20px; } .cmp_notification .success { border-color: #00b24e; } .cmp_notification .no { border-color: #ff4040; } .cmp_breadcrumbs { padding-top: 0.75rem; padding-bottom: 0.75rem; margin-bottom: 1rem; color: #fff !important; } .cmp_breadcrumbs ol { list-style: none; display: inline-table; } .cmp_breadcrumbs ol li { display: inline-flex; background: #f3f5fa; padding: 10px 10px 10px 23px; position: relative; margin: 0 10px 10px 0; } .cmp_breadcrumbs ol li:first-child { padding: 10px 10px 10px 15px; } .cmp_breadcrumbs ol li:hover { cursor: pointer !important; background: #00A3E4 !important; color: #000000 !important; } .cmp_breadcrumbs ol li:hover a, .cmp_breadcrumbs ol li:hover span { color: #000000 !important; } .cmp_breadcrumbs ol li:hover a:after, .cmp_breadcrumbs ol li:hover span:after { border-left-color: #00A3E4 !important; color: #000000 !important; } .cmp_breadcrumbs ol li:first-child a:before, .cmp_breadcrumbs ol li:first-child span:before { display: none; } .cmp_breadcrumbs ol li:last-child a:after, .cmp_breadcrumbs ol li:last-child span:after { display: none; } .cmp_breadcrumbs ol li a, .cmp_breadcrumbs ol li span { font-size: 14px; text-decoration: none; color: rgba(0, 0, 0, 0.87); } .cmp_breadcrumbs ol li a:after, .cmp_breadcrumbs ol li span:after { content: ''; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 18px solid #f3f5fa; position: absolute; right: -18px; top: 0; z-index: 1; } .cmp_breadcrumbs ol li a:before, .cmp_breadcrumbs ol li span:before { content: ''; border-top: 20px solid transparent; border-bottom: 20px solid transparent; border-left: 18px solid #fff; position: absolute; left: 0; top: 0; } .cmp_breadcrumbs ol li span.separator { display: none; } .cmp_breadcrumbs ol li.current { background: #00A3E4; color: #000000 !important; } .cmp_breadcrumbs ol li.current a, .cmp_breadcrumbs ol li.current span { color: #fff; font-weight: bold; } .cmp_breadcrumbs ol li.current a:after, .cmp_breadcrumbs ol li.current span:after { border-left-color: #00A3E4; color: #000000;; } .cmp_breadcrumbs_backup { display: inline-block; } .cmp_breadcrumbs_backup ol { margin-bottom: 30px; padding: 5px 0; line-height: 20px; font-size: 13px; } .cmp_breadcrumbs_backup li { display: inline-block; } .cmp_breadcrumbs_backup a { display: inline-block; text-decoration: none; } .cmp_breadcrumbs_backup .separator { color: #fff; padding: 0 0.5em; } .cmp_breadcrumbs_backup .current { color: #fff; } .cmp_breadcrumbs_backup .current h1 { margin: 0; font-family: 'Karla', sans-serif; font-size: 13px; font-weight: 400; } .cmp_back_link { margin-top: 20px; } .cmp_skip_to_content a { display: block; padding: 1em; z-index: 99999; background: #fff; transform: translateX(-50%); } .cmp_skip_to_content a:focus { clip: auto; top: 0; left: 50%; } .cmp_table { width: 100%; border: 1px solid #e5e7eb; border-bottom: none; border-collapse: collapse; } .cmp_table th, .cmp_table td { padding: 0.5em; text-align: left; border-bottom: 1px solid #e5e7eb; } .cmp_table th { font-weight: 700; } /* Reset semua style footer terlebih dahulu */ .pkp_structure_footer_wrapper, .pkp_structure_footer, .footer, .pkp_footer, footer { background: none !important; background-color: transparent !important; background-image: none !important; } /* Terapkan background image dengan mode yang dipilih */ .pkp_structure_footer_wrapper { position: relative !important; background-image: url('https://jlic.uinkhas.ac.id/public/site/footer-bg.jpg') !important; background-size: auto !important; background-position: top left !important; background-repeat: repeat !important; } /* Style untuk overlay */ .pkp_structure_footer_wrapper::before { content: '' !important; display: block !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background-color: rgba(0, 0, 0, 0.5) !important; z-index: 1 !important; } /* Pastikan konten footer di atas overlay */ .pkp_structure_footer { position: relative !important; z-index: 2 !important; background: transparent !important; } /* Hapus background color dari semua elemen footer */ .pkp_structure_footer, .footer, .pkp_footer, footer { background: transparent !important; background-color: transparent !important; } /* Specific styling for homepage announcements */ .homepage-announcements { background: #ffffff !important; border: 1px solid #e0e0e0 !important; border-radius: 8px !important; margin: 20px 0 !important; padding: 20px !important; box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; } /* Hide empty announcement sections - but not too aggressively */ .cmp_announcements:empty { display: none !important; } /* Only hide if truly empty (no list items) */ .cmp_announcements:not(.homepage-announcements):not(:has(li)) { display: none !important; } /* SUPER AGGRESSIVE - Override ALL hover effects for logo */ a.logo-no-hover, a.logo-no-hover:hover, a.logo-no-hover:focus, a.logo-no-hover:active, .pkp_structure_content a.logo-no-hover:hover, .pkp_structure_main a.logo-no-hover:hover { transition: none !important; transform: none !important; opacity: 1 !important; text-decoration: none !important; background: none !important; color: inherit !important; animation: none !important; } a.logo-no-hover img, a.logo-no-hover img:hover { transition: none !important; transform: none !important; opacity: 1 !important; animation: none !important; } /* Fix announcement read more icon - use FontAwesome */ .obj_announcement_summary .read_more { display: inline-block !important; position: relative !important; padding-right: 2.143rem !important; font-size: 0.93rem !important; font-weight: 700 !important; line-height: 2.143rem !important; color: #000000ff !important; text-decoration: none !important; } .obj_announcement_summary .read_more:after { display: inline-block !important; font: normal normal normal 14px / 1 FontAwesome !important; font-size: inherit !important; text-rendering: auto !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; transform: translate(0, 0) !important; line-height: unset !important; content: '\f054' !important; position: absolute !important; top: 3px !important; right: 5px !important; width: 30px !important; height: 30px !important; line-height: 30px !important; text-align: center !important; } .obj_announcement_summary .read_more:hover:after, .obj_announcement_summary .read_more:focus:after { transform: translateX(3px) !important; transition: all 0.3s ease !important; } .obj_announcement_summary .read_more:hover, .obj_announcement_summary .read_more:focus { color: #008acb !important; } /* Fix announcement date calendar icon - use FontAwesome */ .obj_announcement_summary .date:before { display: inline-block !important; font: normal normal normal 14px / 1 FontAwesome !important; font-size: inherit !important; text-rendering: auto !important; -webkit-font-smoothing: antialiased !important; -moz-osx-font-smoothing: grayscale !important; transform: translate(0, 0) !important; line-height: unset !important; content: '\f073' !important; margin-right: 0.5em !important; font-size: 14px !important; color: #000000; } /* Force DOI container to align right */ .doi_container { display: flex !important; justify-content: flex-end !important; align-items: center !important; width: 100% !important; } .doi_container .ai-doi, .doi_container .doi_link { flex-shrink: 0 !important; } /* Grid container adjustment for DOI */ .sm\:grid-cols-12 .doi_container { justify-content: flex-end !important; } /* Mobile responsive */ @media (min-width: 640px) { .doi_container.sm\:flex { display: flex !important; justify-content: flex-end !important; } } .obj_article_summary, .editorial-list, .obj_issue_summary, .article-summary, .article-details, .issue_toc, .cmp_announcements, .bingkai { background-image: url('https://jlic.uinkhas.ac.id/public/site/batik.png') !important; background-size: auto !important; background-repeat: repeat !important; background-position: top left !important; background-attachment: local !important; /* Add overlay for better text readability */ position: relative !important; border: 1px solid #00000024 !important; box-shadow: 0 6px 0 rgba(0, 53, 155, 0.99) !important; border-radius: 10px !important; padding: 15px !important; } .obj_article_summary::before, .editorial-list::before, .obj_issue_summary::before, .article-summary::before, .article-details::before, .cmp_announcements::before, .issue_toc::before, .bingkai::before { content: '' !important; position: absolute !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; background: rgba(255, 255, 255, 0.3) !important; border-radius: 10px !important; z-index: 1 !important; } .obj_article_summary > *, .editorial-list > *, .obj_issue_summary > *, .article-summary > *, .article-details > *, .cmp_announcements > *, .issue_toc > *, .bingkai > * { position: relative !important; z-index: 2 !important; } /* Content non-link font size */ .obj_article_summary, .editorial-list, .article-summary, .article-details, .cmp_announcements, .issue_toc, .pkp_article_body, .article_body, .publication_abstract, .item_abstract, .obj_article_summary *, .editorial-list *, .article-summary *, .article-details *, .cmp_announcements *, .issue_toc *, .pkp_article_body *, .article_body *, .publication_abstract *, .item_abstract * { font-size: 13px !important; line-height: 1.6 !important; } /* Transparent tables inside bingkai to show background image/pattern */ .bingkai table, .bingkai td, .bingkai th { background: transparent !important; box-shadow: none !important; } /* Content link font size */ .obj_article_summary a, .editorial-list a, .article-summary a, .article-details a, .cmp_announcements a, .issue_toc a, .pkp_article_body a, .article_body a, .publication_abstract a, .item_abstract a { font-size: 16px !important; line-height: 1.3 !important; transition: all 0.3s ease !important; } /* Content link colors */ .obj_article_summary a, .editorial-list a, .article-summary a, .article-details a, .cmp_announcements a, .issue_toc a, .pkp_article_body a, .article_body a, .publication_abstract a, .item_abstract a { color: #0066CC !important; text-decoration: none !important; line-height: 1.4 !important; padding: 2px !important; border-radius: 6px !important; } /* Sidebar block titles follow content link color with fallback */ .pkp_structure_sidebar .pkp_block h2, .pkp_structure_sidebar h2, .pkp_structure_sidebar h3, .sidebar_block .title, .sidebar_section h2, .block_title { color: #0066CC !important; } /* Border primary follows Tab Active Background Color */ .border-primary, .border-primary:hover, .border-2.border-primary { border-color: #00A3E4 !important; } /* Content link hover background colors */ .obj_article_summary a:hover, .editorial-list a:hover, .article-summary a:hover, .article-details a:hover, .cmp_announcements a:hover, .issue_toc a:hover, .pkp_article_body a:hover, .article_body a:hover, .publication_abstract a:hover, .item_abstract a:hover { background-color: #1E6292 !important; color: #00A3E4 !important; /* padding: 4px 4px !important; */ border-radius: 6px !important; text-decoration: none !important; /* border-bottom: none !important; */ } .obj_galley_link { border-radius: 6px !important; display: inline-block; padding: 0 1em; border: 1px solid #1E6292 !important; font-size: 13px; line-height: 28px; color: #1E6292 !important; text-decoration: none !important; } .obj_galley_link:hover, .obj_galley_link:focus { background: #1E6292 !important; color: #00A3E4 !important; } .doi_container { border: 1px solid #1E6292 !important; color: #00A3E4 !important; text-decoration: none !important; line-height: 1.4 !important; padding: 2px !important; border-radius: 6px !important; } /* Content link hover font colors */ .obj_article_summary a:hover, .editorial-list a:hover, .article-summary a:hover, .article-details a:hover, .cmp_announcements a:hover, .issue_toc a:hover, .pkp_article_body a:hover, .article_body a:hover, .publication_abstract a:hover, .item_abstract a:hover { color: #00A3E4 !important; transition: color 0.3s ease !important; } .pkp_structure_footer, .pkp_structure_footer p, .pkp_structure_footer div, .pkp_structure_footer span, .pkp_structure_footer a, .pkp_structure_footer li, .pkp_structure_footer td, .footer, .footer p, .footer div, .footer span { color: #ecf0f1 !important; } /* Footer headings */ .pkp_structure_footer h1, .pkp_structure_footer h2, .pkp_structure_footer h3, .pkp_structure_footer h4, .pkp_structure_footer h5, .pkp_structure_footer h6, .footer h1, .footer h2, .footer h3, .footer h4, .footer h5, .footer h6 { color: #ecf0f1 !important; } .pkp_structure_footer a, .pkp_structure_footer a:link, .pkp_structure_footer a:visited, .footer a, .footer a:link, .footer a:visited { color: #3498db !important; text-decoration: none !important; transition: all 0.3s ease !important; } .pkp_structure_footer a:hover, .pkp_structure_footer a:focus, .footer a:hover, .footer a:focus { color: #2980b9 !important; transform: translateY(-1px) !important; opacity: 0.9 !important; } /* Footer navigation links with subtle background hover */ .pkp_structure_footer .pkp_navigation a, .footer .navigation a { padding: 5px 10px !important; border-radius: 3px !important; margin: 0 5px !important; } .pkp_structure_footer .pkp_navigation a:hover, .footer .navigation a:hover { background-color: rgba(255,255,255,0.1) !important; transform: translateY(-2px) !important; } .pkp_structure_footer, .pkp_structure_footer p, .pkp_structure_footer div, .pkp_structure_footer span, .pkp_structure_footer li, .pkp_structure_footer td, .footer, .footer p, .footer div, .footer span { font-size: 12px !important; line-height: 2 !important; } /* Footer headings scaling */ .pkp_structure_footer h1, .footer h1 { font-size: calc(12px * 2) !important; } .pkp_structure_footer h2, .footer h2 { font-size: calc(12px * 1.7) !important; } .pkp_structure_footer h3, .footer h3 { font-size: calc(12px * 1.5) !important; } .pkp_structure_footer h4, .footer h4 { font-size: calc(12px * 1.3) !important; } .pkp_structure_footer h5, .footer h5 { font-size: calc(12px * 1.2) !important; } .pkp_structure_footer h6, .footer h6 { font-size: calc(12px * 1.1) !important; } /* Footer links */ .pkp_structure_footer a, .footer a { font-size: 12px !important; } /* Mobile responsive for footer */ @media (max-width: 768px) { .pkp_structure_footer, .footer { font-size: calc(12px * 0.9) !important; padding: 20px 0 !important; } } /* FOOTER H4 STYLING - BALANCED TIGHT SPACING */ /* Target the specific h4 in footer with ultra-high specificity */ .footer h4.font-bold.text-lg, .footer .grid h4.font-bold.text-lg, .footer .grid > div h4.font-bold.text-lg, div.footer h4.font-bold.text-lg, div[class*='footer'] h4.font-bold.text-lg { font-size: 1.125rem !important; line-height: 1.15 !important; /* Balanced tight line-height for wrapped text */ margin-bottom: 0.25rem !important; /* Balanced minimal bottom margin */ margin-top: 0.25rem !important; padding: 0.02rem 0 !important; /* Extreme minimal padding */ white-space: normal !important; word-wrap: break-word !important; overflow-wrap: break-word !important; word-break: break-word !important; hyphens: auto !important; letter-spacing: 0.01em !important; /* Set minimum height to accommodate 2-3 lines of wrapped text comfortably */ min-height: 1.5rem !important; /* Extreme compact minimum height */ max-width: 100% !important; box-sizing: border-box !important; /* Better text flow */ text-rendering: optimizeLegibility !important; -webkit-font-smoothing: antialiased !important; /* Force display as block to ensure proper height calculation */ display: block !important; width: 100% !important; /* Remove extra space after h4 for tight spacing with list */ position: relative !important; } /* Remove pseudo-element spacing for tighter h4-list connection */ .footer h4.font-bold.text-lg:after { display: none !important; /* Remove spacing pseudo-element */ } /* Grid layout improvements for footer */ .footer { display: grid !important; grid-template-columns: 1fr !important; gap: 0.2rem !important; /* Extreme reduced gap */ } .footer > div { display: flex !important; flex-direction: column !important; min-height: 55px !important; /* Extreme compact minimum height for consistency */ } .footer > div:first-child { min-height: 70px !important; /* First column has more content */ } /* Responsive design for footer */ @media (min-width: 992px) { .footer { grid-template-columns: 1fr 1fr 1fr !important; gap: 0.3rem !important; /* Extreme reduced gap */ } } /* Mobile responsive adjustments */ @media (max-width: 767px) { .footer { gap: 0.2rem !important; } .footer > div { min-height: auto !important; } .footer h4.font-bold.text-lg { font-size: 1rem !important; line-height: 1.0 !important; /* Extreme tight line-height */ min-height: auto !important; margin-bottom: 0.02rem !important; /* Extreme minimal margin */ padding: 0.02rem 0 !important; /* Extreme minimal padding */ } } /* Extreme minimal spacing for list items in footer - TIGHT spacing with h4 */ .footer ul { flex: 1 !important; margin-top: 0.01rem !important; /* Extreme minimal top margin */ padding-left: 0 !important; } .footer ul li { margin-bottom: 0.02rem !important; /* Extreme minimal spacing between list items */ line-height: 1.5 !important; /* Tighter line-height */ } .footer ul li:last-child { margin-bottom: 0 !important; } .footer ul li a { display: inline-block !important; line-height: 1.5 !important; /* Tighter line-height */ word-wrap: break-word !important; } /* Logo column specific styling */ .footer .logo { display: flex !important; align-items: flex-start !important; justify-content: flex-end !important; } .footer .logo img { max-width: 100% !important; height: auto !important; } /* Mobile logo adjustments */ @media (max-width: 767px) { .footer .logo { justify-content: center !important; margin-top: 0.02rem !important; /* Extreme reduced margin */ } } /* Ensure text elements within h4 have proper line height */ .footer h4.font-bold.text-lg span, .footer h4.font-bold.text-lg strong, .footer h4.font-bold.text-lg em, .footer h4.font-bold.text-lg b, .footer h4.font-bold.text-lg i { line-height: 1.0 !important; display: inline !important; } /* Header background with higher specificity */ .pkp_structure_head, .pkp_site_name, .header_warna, .pkp_head_wrapper, .pkp_navigation_primary { /*.pkp_navigation_primary_row {*/ background-color: #BAFDFD !important; background: #BAFDFD !important; } /* Override gradient and transparent styles if header background is set */ .pkp_structure_head { background-image: none !important; text-shadow: none !important; } /* Header description/tagline */ .pkp_site_name .description, .site-description, .journal-description { color: #ffffff !important; opacity: 0.9 !important; } /* Header text sizing */ .pkp_structure_head, .pkp_structure_head *, .header_warna, .header_warna * { font-size: 14px !important; } /* Site title scaling */ .pkp_site_name h1, .pkp_site_name .site-title, .journal-title { font-size: calc(14px * 1.8) !important; line-height: 1.2 !important; } /* Site description scaling */ .pkp_site_name .description, .site-description, .journal-description { font-size: calc(14px * 0.85) !important; line-height: 1.4 !important; } /* Navigation menu font size */ .pkp_navigation_primary, .pkp_navigation_primary *, .pkp_navigation_primary_row, /* .pkp_navigation_primary_row *, */ .main-navigation, .main-navigation *, #navigationUserWrapper, #navigationUserWrapper *, #navigationUser, #navigationUser *, .user-nav, .user-nav * { font-size: 14px !important; } /* Mobile adjustments */ @media (max-width: 768px) { .pkp_site_name h1, .journal-title { font-size: calc(14px * 1.5) !important; } .pkp_structure_head, .pkp_navigation_primary, #navigationUserWrapper, #navigationUser { font-size: calc(14px * 0.9) !important; } } /* Navigation menu links */ .pkp_navigation_primary a, /*.pkp_navigation_primary_row a, */ .main-navigation a, .navbar-nav a, #navigationUserWrapper a, #navigationUser a, .user-nav a, .nav-link { color: #000000 !important; text-decoration: none !important; transition: all 0.3s ease !important; } /* Navigation menu items */ .pkp_navigation_primary li, /*.pkp_navigation_primary_row li, */ .main-navigation li, #navigationUserWrapper li, #navigationUser li, .user-nav li { color: #000000 !important; } /* Dropdown/Sub menu styling - SUPER AGGRESSIVE OVERRIDE for all possible OJS structures */ /* Standard dropdown classes */ .dropdown-menu, .sub-menu, .dropdown, /* OJS specific navigation dropdowns */ .pkp_navigation_primary .dropdown-menu, /*.pkp_navigation_primary_row .dropdown-menu,*/ .pkp_navigation_primary .sub-menu, /*.pkp_navigation_primary_row .sub-menu, */ .main-navigation .dropdown-menu, .main-navigation .sub-menu, .pkp_navigation_primary ul ul, /*.pkp_navigation_primary_row ul ul,*/ .main-navigation ul ul, .navbar-nav .dropdown-menu, #navigationUserWrapper .dropdown-menu, #navigationUser .dropdown-menu, .user-nav .dropdown-menu, .nav .dropdown-menu, .navigation .dropdown-menu, .pkp_navigation_primary li ul, /*.pkp_navigation_primary_row li ul,*/ .main-navigation li ul, #navigationUserWrapper li ul, #navigationUser li ul, .user-nav li ul, /* Header wrapper dropdowns */ .pkp_structure_head .dropdown-menu, .header_warga .dropdown-menu, .header_warna .dropdown-menu, .pkp_head_wrapper .dropdown-menu, .pkp_structure_head ul ul, .header_warga ul ul, .header_warna ul ul, .pkp_head_wrapper ul ul, /* Additional OJS structures */ .pkp_site_nav_menu .dropdown-menu, .pkp_site_nav_menu ul ul, .site-nav .dropdown-menu, .site-nav ul ul, /* Bootstrap and generic */ nav .dropdown-menu, nav ul ul, ul.dropdown-menu, ul.sub-menu, li ul.dropdown-menu, li ul.sub-menu, /* Nested structures */ .pkp_structure_head .pkp_navigation_primary ul ul, /*.pkp_structure_head .pkp_navigation_primary_row ul ul,*/ .header_warna .pkp_navigation_primary ul ul { /*.header_warna .pkp_navigation_primary_row ul ul {*/ background-color: #a7e3e3 !important; background: #a7e3e3 !important; border: 1px solid rgba(255,255,255,0.1) !important; box-shadow: 0 5px 15px rgba(0,0,0,0.2) !important; border-radius: 0px !important; z-index: 9999 !important; } /* Dropdown menu links - SUPER AGGRESSIVE OVERRIDE for all possible OJS structures */ /* Standard dropdown link classes */ .dropdown-menu a, .sub-menu a, .dropdown a, /* OJS specific navigation dropdown links */ .pkp_navigation_primary .dropdown-menu a, /*.pkp_navigation_primary_row .dropdown-menu a,*/ .pkp_navigation_primary .sub-menu a, /*.pkp_navigation_primary_row .sub-menu a,*/ .main-navigation .dropdown-menu a, .main-navigation .sub-menu a, .pkp_navigation_primary ul ul a, /*.pkp_navigation_primary_row ul ul a,*/ .main-navigation ul ul a, .navbar-nav .dropdown-menu a, .nav .dropdown-menu a, .navigation .dropdown-menu a, .pkp_navigation_primary li ul a, /*.pkp_navigation_primary_row li ul a,*/ .main-navigation li ul a, /* Header wrapper dropdown links */ .pkp_structure_head .dropdown-menu a, .header_warga .dropdown-menu a, .header_warna .dropdown-menu a, .pkp_head_wrapper .dropdown-menu a, .pkp_structure_head ul ul a, .header_warga ul ul a, .header_warna ul ul a, .pkp_head_wrapper ul ul a, /* Additional OJS structures */ .pkp_site_nav_menu .dropdown-menu a, .pkp_site_nav_menu ul ul a, .site-nav .dropdown-menu a, .site-nav ul ul a, /* Bootstrap and generic */ nav .dropdown-menu a, nav ul ul a, ul.dropdown-menu a, ul.sub-menu a, li ul.dropdown-menu a, li ul.sub-menu a, /* Nested structures */ .pkp_structure_head .pkp_navigation_primary ul ul a, /*.pkp_structure_head .pkp_navigation_primary_row ul ul a,*/ .header_warna .pkp_navigation_primary ul ul a, /*.header_warna .pkp_navigation_primary_row ul ul a,*/ /* List items in dropdowns */ .dropdown-menu li a, .sub-menu li a, ul ul li a, li ul li a { color: #000000 !important; background: transparent !important; background-color: transparent !important; /* padding: 8px 15px !important; */ display: block !important; /* transition: all 0.3s ease !important; */ text-decoration: none !important; } /* Multi-level dropdown support with enhanced selectors */ .pkp_navigation_primary .dropdown-menu .dropdown-menu, /*.pkp_navigation_primary_row .dropdown-menu .dropdown-menu,*/ .main-navigation .dropdown-menu .dropdown-menu, .pkp_navigation_primary ul ul ul, /*.pkp_navigation_primary_row ul ul ul,*/ .main-navigation ul ul ul, .navbar-nav .dropdown-menu .dropdown-menu, #navigationUserWrapper .dropdown-menu .dropdown-menu, #navigationUser .dropdown-menu .dropdown-menu, .user-nav .dropdown-menu .dropdown-menu, .nav .dropdown-menu .dropdown-menu, /* Additional nested dropdowns */ .dropdown-menu .dropdown-menu, .sub-menu .sub-menu, ul ul ul, li ul ul { background-color: #94caca !important; background: #94caca !important; position: absolute !important; left: 100% !important; top: -5px !important; margin: 0 !important; min-width: 180px !important; z-index: 9999 !important; border-radius: 5px !important; } /* Dropdown list items - ensure consistent background */ .dropdown-menu li, .sub-menu li, .pkp_navigation_primary ul ul li, /*.pkp_navigation_primary_row ul ul li,*/ .main-navigation ul ul li, .navbar-nav .dropdown-menu li, #navigationUserWrapper ul li, #navigationUser ul li, .user-nav ul li, .nav .dropdown-menu li, .navigation .dropdown-menu li, ul ul li, li ul li { background: transparent !important; background-color: transparent !important; border: none !important; margin: 0 !important; padding: 2px !important; } /* Dropdown hover states for list items */ .dropdown-menu li:hover, .sub-menu li:hover, .pkp_navigation_primary ul ul li:hover, /*.pkp_navigation_primary_row ul ul li:hover,*/ .main-navigation ul ul li:hover, .navbar-nav .dropdown-menu li:hover, #navigationUserWrapper ul li:hover, #navigationUser ul li:hover, .user-nav ul li:hover, .nav .dropdown-menu li:hover, ul ul li:hover, li ul li:hover { background-color: transparent !important; /* margin: 0 !important; */ /* padding: 0 !important; */ } /* Task count badge positioning */ #navigationUserWrapper .task_count, #navigationUser .task_count { position: absolute !important; top: 2px !important; right: 2px !important; background-color: #e74c3c !important; color: white !important; border-radius: 10px !important; font-size: 11px !important; font-weight: bold !important; padding: 2px 6px !important; min-width: 18px !important; height: 18px !important; line-height: 14px !important; text-align: center !important; z-index: 10 !important; } /* Active/current menu item with enhanced selectors */ .pkp_navigation_primary .current a, /*.pkp_navigation_primary_row .current a,*/ .pkp_navigation_primary .active a, .main-navigation .current-menu-item a, .pkp_navigation_primary .dropdown-menu .current a, /*.pkp_navigation_primary_row .dropdown-menu .current a,*/ .pkp_navigation_primary ul ul .current a, /*.pkp_navigation_primary_row ul ul .current a,*/ .main-navigation .dropdown-menu .current a, .navbar-nav .dropdown-menu .current a { color: #000000 !important; font-weight: 600 !important; /* background-color: rgba(255,255,255,0.1) !important; */ } /* Universal dropdown override for any missed selectors */ .pkp_structure_head ul ul, .header_warna ul ul, .pkp_head_wrapper ul ul, nav ul ul, .navigation ul ul { background-color: #a7e3e3 !important; background: #a7e3e3 !important; } .pkp_structure_head ul ul a, .header_warna ul ul a, .pkp_head_wrapper ul ul a, nav ul ul a, .navigation ul ul a { color: #000000 !important; background: transparent !important; } /* Navigation hover effects - main menu and user navigation */ .pkp_navigation_primary > li > a:hover, .pkp_navigation_primary > li.active > a:hover, /*.pkp_navigation_primary_row > li > a:hover, .pkp_navigation_primary_row > li.active > a:hover,*/ .main-navigation > li > a:hover, .main-navigation > li.active > a:hover, .navbar-nav > li > a:hover, #navigationUserWrapper > li > a:hover, #navigationUser > li > a:hover, .user-nav > li > a:hover, .navbar-nav > li.active > a:hover, .nav-link:hover { color: #00FF0D !important; background-color: #022738 !important; } /* Submenu hover effects - same color as main menu and user navigation */ #navigationPrimary ul a:hover, #navigationPrimary ul a:focus, .pkp_navigation_primary ul ul a:hover, /*.pkp_navigation_primary_row ul ul a:hover,*/ .main-navigation ul ul a:hover, .navbar-nav ul ul a:hover, #navigationUserWrapper ul a:hover, #navigationUser ul a:hover, .user-nav ul a:hover, .dropdown-menu a:hover, .sub-menu a:hover, .dropdown a:hover, .pkp_navigation_primary .dropdown-menu a:hover, /*.pkp_navigation_primary_row .dropdown-menu a:hover,*/ .main-navigation .dropdown-menu a:hover, .navbar-nav .dropdown-menu a:hover, #navigationUserWrapper .dropdown-menu a:hover, #navigationUser .dropdown-menu a:hover, .user-nav .dropdown-menu a:hover, .nav .dropdown-menu a:hover, .navigation .dropdown-menu a:hover, .pkp_navigation_primary .sub-menu a:hover, /*.pkp_navigation_primary_row .sub-menu a:hover,*/ .main-navigation .sub-menu a:hover, .pkp_navigation_primary ul ul ul a:hover, /*.pkp_navigation_primary_row ul ul ul a:hover,*/ .main-navigation ul ul ul a:hover, .navbar-nav ul ul ul a:hover, .pkp_structure_head ul ul a:hover, .header_warna ul ul a:hover, .pkp_head_wrapper ul ul a:hover, nav ul ul a:hover, .navigation ul ul a:hover, .pkp_navigation_primary .dropdown-menu .dropdown-menu a:hover, /*.pkp_navigation_primary_row .dropdown-menu .dropdown-menu a:hover,*/ .main-navigation .dropdown-menu .dropdown-menu a:hover, .navbar-nav .dropdown-menu .dropdown-menu a:hover, #navigationUserWrapper .dropdown-menu .dropdown-menu a:hover, #navigationUser .dropdown-menu .dropdown-menu a:hover, .user-nav .dropdown-menu .dropdown-menu a:hover, .pkp_navigation_primary .dropdown-menu .current a:hover, /*.pkp_navigation_primary_row .dropdown-menu .current a:hover,*/ .dropdown .fa:hover, #navigationUserWrapper .dropdown-menu a:hover, .header ul.dropdown-menu a:hover, .pkp_structure_head ul.dropdown-menu a:hover, ul.dropdown-menu a:hover, .dropdown ul a:hover, ul.dropdown-menu li a:hover, .dropdown ul li a:hover { color: #00FF0D !important; background-color: #022738 !important; border: none !important; outline: none !important; box-shadow: none !important; /* border-radius: 4px !important; */ } /* Modern Dropdown Hover Effects - Enhanced Animation */ /* Add smooth transition for all dropdown links */ .dropdown-menu a, .sub-menu a, .dropdown a, .pkp_navigation_primary .dropdown-menu a, /*.pkp_navigation_primary_row .dropdown-menu a,*/ .pkp_navigation_primary .sub-menu a, /*.pkp_navigation_primary_row .sub-menu a,*/ .main-navigation .dropdown-menu a, .main-navigation .sub-menu a, .pkp_navigation_primary ul ul a, /*.pkp_navigation_primary_row ul ul a,*/ .main-navigation ul ul a, .navbar-nav .dropdown-menu a, #navigationUserWrapper .dropdown-menu a, #navigationUser .dropdown-menu a, .user-nav .dropdown-menu a, .nav .dropdown-menu a, .navigation .dropdown-menu a, .pkp_navigation_primary li ul a, /*.pkp_navigation_primary_row li ul a,*/ .main-navigation li ul a, .pkp_structure_head .dropdown-menu a, .header_warga .dropdown-menu a, .header_warna .dropdown-menu a, .pkp_head_wrapper .dropdown-menu a { /* transition: all 0.35s cubic-bezier(0.4, 0.0, 0.2, 1) !important; */ position: relative !important; overflow: hidden !important; } /* Simple and clean dropdown link hover */ .dropdown-menu a:hover, .sub-menu a:hover, .dropdown a:hover, .pkp_navigation_primary .dropdown-menu a:hover, /*.pkp_navigation_primary_row .dropdown-menu a:hover,*/ .pkp_navigation_primary .sub-menu a:hover, /*.pkp_navigation_primary_row .sub-menu a:hover,*/ .main-navigation .dropdown-menu a:hover, .main-navigation .sub-menu a:hover, .pkp_navigation_primary ul ul a:hover, /*.pkp_navigation_primary_row ul ul a:hover,*/ .main-navigation ul ul a:hover, .navbar-nav .dropdown-menu a:hover, #navigationUserWrapper .dropdown-menu a:hover, #navigationUser .dropdown-menu a:hover, .user-nav .dropdown-menu a:hover, /* Remove ALL hover effects from dropdown links */ .nav .dropdown-menu a:hover, .navigation .dropdown-menu a:hover, .pkp_navigation_primary .dropdown-menu .dropdown-menu a:hover, /*.pkp_navigation_primary_row .dropdown-menu .dropdown-menu a:hover, .pkp_navigation_primary ul ul ul a:hover, /*.pkp_navigation_primary_row ul ul ul a:hover, .main-navigation .dropdown-menu .dropdown-menu a:hover, .navbar-nav .dropdown-menu .dropdown-menu a:hover, .pkp_navigation_primary .current a:hover, /*.pkp_navigation_primary_row .current a:hover, .main-navigation .current-menu-item a:hover, .pkp_navigation_primary .dropdown-menu .current a:hover { /*.pkp_navigation_primary_row .dropdown-menu .current a:hover {*/ color: inherit !important; background: transparent !important; border-radius: 0 !important; transform: none !important; } /* Remove ALL effects from submenu indicators and icons */ .pkp_navigation_primary li.has-dropdown:hover > a:after, /*.pkp_navigation_primary_row li.has-dropdown:hover > a:after,*/ .main-navigation li.has-dropdown:hover > a:after, .dropdown-menu .caret:hover, .sub-menu .caret:hover, .dropdown-toggle .caret:hover, .dropdown .fa:hover, .dropdown .glyphicon:hover { color: inherit !important; transform: none !important; } /* Simple Universal dropdown hover */ .pkp_structure_head ul ul a:hover, .header_warna ul ul a:hover, .pkp_head_wrapper ul ul a:hover, nav ul ul a:hover, .navigation ul ul a:hover { color: #022738 !important; background: rgba(255,255,255,0.7) !important; /* border-radius: 4px !important; */ } /* Simple dropdown container styling */ .dropdown-menu, .sub-menu, .pkp_navigation_primary ul ul, .main-navigation ul ul, #navigationUserWrapper ul, #navigationUser ul, .user-nav ul { box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important; } /* Simple focus states for accessibility */ .dropdown-menu a:focus, .sub-menu a:focus, .pkp_navigation_primary .dropdown-menu a:focus, .main-navigation .dropdown-menu a:focus { color: #022738 !important; /* background: rgba(255,255,255,0.2) !important; */ /* border-radius: 4px !important; */ /* outline: 2px solid #022738 !important; */ } /* CLEAN HEADER - Normal positioning, proper z-index */ .pkp_structure_head { position: relative !important; top: auto !important; left: auto !important; right: auto !important; z-index: 100 !important; width: 100% !important; box-shadow: 0 2px 10px rgba(0,0,0,0.1) !important; } /* Navigation with proper z-index (below header) */ .pkp_navigation_primary_wrapper { position: relative !important; z-index: 90 !important; } /* No body padding needed for non-fixed header */ body { padding-top: 0 !important; } /* Responsive adjustments */ @media (min-width: 768px) { body { padding-top: 0 !important; } } @media (min-width: 992px) { body { padding-top: 0 !important; } } @media (min-width: 1200px) { body { padding-top: 0 !important; } } /* Smooth scrolling untuk user experience */ html { scroll-behavior: smooth !important; } /* Header layout tetap rapi */ .pkp_site_name_wrapper { position: relative !important; z-index: 95 !important; padding: 0 !important; margin: 0 !important; height: 100% !important; display: flex !important; align-items: stretch !important; } /* ===== CLEAN HEADER LAYOUT - SIMPLE & EFFECTIVE ===== */ /* Header container - clean and simple */ .pkp_structure_head { padding: 0px 0px 0px 0px; margin: 0 !important; // min-height: 80px !important; display: flex !important; align-items: center !important; } /* Container untuk header */ .pkp_structure_head .container, .pkp_structure_head > div { position: relative !important; padding: 0 15px !important; height: 100% !important; display: flex !important; align-items: center !important; width: 100% !important; } /* Header inner wrapper untuk flexbox layout */ .pkp_site_name_wrapper { width: 100% !important; display: flex !important; align-items: center !important; justify-content: space-between !important; padding: 0 !important; margin: 0 !important; height: 100% !important; } /* Logo area */ .pkp_site_name { flex: 1 1 auto !important; margin-right: 20px !important; padding: 0 !important; height: 100% !important; display: flex !important; align-items: center !important; } /* Remove hover effects from logo link */ .pkp_site_name a, .pkp_site_name a.is_img { transition: none !important; transform: none !important; } .pkp_site_name a:hover, .pkp_site_name a.is_img:hover { transform: none !important; transition: none !important; } /* Logo image container - controlled width */ .pkp_site_name .is_img { height: 100% !important; width: 100% !important; display: flex !important; align-items: center !important; padding: 0 !important; margin: 0 !important; } /* Logo image */ .pkp_site_name .is_img img { height: 60px !important; width: 100% !important; max-width: none !important; object-fit: cover !important; object-position: left center !important; display: block !important; margin: 0 !important; padding: 0 !important; } /* Additional override for any potential conflicts */ .pkp_site_name_wrapper .pkp_site_name .is_img img, header .pkp_site_name .is_img img, .journal-description-wrapper .pkp_site_name .is_img img { width: 100% !important; max-width: none !important; min-width: 100% !important; } /* Search area - flexible but doesn't affect logo */ .ms-auto { flex: 1 1 auto !important; display: flex !important; align-items: center !important; justify-content: flex-end !important; margin: 0 10px !important; padding: 0 !important; max-width: 350px !important; z-index: 1000 !important; } /* User navigation - consistent whether logged in or not */ #navigationUserWrapper { flex: 0 0 auto !important; display: flex !important; align-items: center !important; margin: 0 !important; padding: 0 !important; border-radius: 20px !important; background: rgba(255,255,255,0.15) !important; white-space: nowrap !important; } /* Ensure profile menu items display vertically */ #navigationUserWrapper > li { display: block !important; margin: 0 !important; padding: 0 !important; } #navigationUserWrapper > li > a { display: block !important; /* padding: 8px 12px !important; */ margin: 0 !important; text-decoration: none !important; color: #000000 !important; font-weight: 500 !important; font-size: 14px !important; border-radius: 5px !important; } /* Handle when user navigation is missing (not logged in) */ .pkp_site_name_wrapper:not(:has(#navigationUserWrapper)) .ms-auto { padding-right: 15px !important; } /* Alternative selector for browsers that don't support :has */ .ms-auto:last-child { padding-right: 15px !important; } /* User navigation links - aligned with main navigation */ #navigationUserWrapper a { color: #000000 !important; text-decoration: none !important; font-weight: 500 !important; font-size: 14px !important; } /* User navigation buttons/items background - aligned with main navigation */ #navigationUserWrapper, #navigationUserWrapper li, #navigationUser, #navigationUser li, .user-nav, .user-nav li { background-color: #BAFDFD !important; border-radius: 0px !important; padding: 10px !important; } /* User navigation buttons/items hover background - matching main navigation */ #navigationUserWrapper:hover, #navigationUserWrapper li:hover, #navigationUser:hover, #navigationUser li:hover, .user-nav:hover, .user-nav li:hover { /* background-color: #19537c !important; */ transition: background-color 0.3s ease !important; } /* Prevent unwanted size and position changes during hover */ #navigationUserWrapper, #navigationUserWrapper li, #navigationUser, #navigationUser li, .user-nav, .user-nav li, #navigationUserWrapper a, #navigationUser a, .user-nav a { transition: none !important; transform: none !important; width: auto !important; height: auto !important; line-height: inherit !important; font-size: inherit !important; text-align: inherit !important; } /* Ensure proper display properties */ #navigationUserWrapper { display: flex !important; flex-direction: row !important; } #navigationUserWrapper > li { display: block !important; } #navigationUserWrapper > li > a { display: block !important; /* padding: 8px 12px !important; */ margin: 0 !important; } /* Ensure stable hover effects only for background color */ #navigationUserWrapper a:hover, #navigationUser a:hover, .user-nav a:hover { transition: background-color 0.3s ease !important; transform: none !important; width: auto !important; height: auto !important; padding: inherit !important; margin: inherit !important; line-height: inherit !important; font-size: inherit !important; text-align: inherit !important; } /* User navigation main buttons - aligned with main navigation */ #navigationUserWrapper > li > a, #navigationUser > li > a, .user-nav > li > a { background-color: #BAFDFD !important; color: #ecf0f1 !important; border-radius: 0px !important; margin: 0 !important; /* padding: 8px 12px !important; */ } /* User navigation hover - exactly matching primary navigation */ #navigationUserWrapper a:hover, #navigationUserWrapper a:focus, #navigationUser a:hover, #navigationUser a:focus, .user-nav a:hover, .user-nav a:focus { background-color: #19537c !important; color: #ffffff !important; } /* User navigation main buttons hover - exactly matching primary navigation */ #navigationUserWrapper > li > a:hover, #navigationUser > li > a:hover, .user-nav > li > a:hover { background-color: #19537c !important; color: #ffffff !important; text-decoration: none !important; opacity: 1 !important; filter: none !important; } #navigationUserWrapper a:hover { color: #ffffff !important; text-decoration: none !important; opacity: 1 !important; filter: none !important; } /* User Navigation Dropdown Styling - aligned with primary navigation */ #navigationUserWrapper ul, #navigationUserWrapper .dropdown-menu, #navigationUser ul { /* background-color: #BAFDFD !important; */ /* border-radius: 8px !important; */ /* box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important; */ margin: 0 !important; padding: 0px !important; /* border: 1px solid rgba(255,255,255,0.2) !important; */ } /* Agar dropdown tidak tertutup wrapper dan bisa muncul ke kiri */ .pkp_site_name_wrapper { overflow: visible !important; z-index: 90 !important; } #navigationUserWrapper { position: relative !important; z-index: 100 !important; } #navigationUser > li.profile, #navigationUser > li.profile > a, #navigationUserWrapper .dropdown-menu a { color: #000000 !important; display: block !important; background: transparent !important; /* border-radius: 4px !important; */ margin: 0 !important; padding: 4px 4px !important; } /* Dropdown menu user navigation: default ke kanan, bisa dibalik ke kiri jika perlu */ #navigationUser > li.profile > ul, #navigationUser > li > ul { display: none !important; position: absolute !important; right: 0 !important; left: auto !important; top: calc(100% - 1px) !important; min-width: 180px !important; z-index: 2000 !important; background-color: #BAFDFD !important; background: #BAFDFD !important; /* border-radius: 8px !important; */ margin: 0 !important; padding: 10px !important; box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important; border: 1px solid rgba(255,255,255,0.2) !important; } /* Tampilkan dropdown hanya saat tombol admin di-hover */ #navigationUser > li.profile:hover > ul, #navigationUser > li.profile:focus-within > ul { display: block !important; } /* Jika ingin dropdown ke kiri tombol admin, ganti right: 0 menjadi left: 0 dan right: auto */ /* #navigationUser > li.profile > ul, #navigationUser > li > ul { left: 0 !important; right: auto !important; } */ /* Remove ALL hover effects from profile menu submenu items */ #navigationUserWrapper ul a:hover, #navigationUserWrapper .dropdown-menu a:hover, #navigationUser ul a:hover, #navigationUserWrapper ul li:hover, #navigationUser li:hover, .user-nav ul li:hover { background-color: transparent !important; color: inherit !important; text-decoration: none !important; border: none !important; box-shadow: none !important; transform: none !important; transition: none !important; } /* Prevent any unwanted transitions or transformations in dropdown menus */ #navigationUserWrapper ul, #navigationUserWrapper .dropdown-menu, #navigationUser ul, #navigationUser .dropdown-menu, .user-nav ul, .user-nav .dropdown-menu { transition: none !important; transform: none !important; } #navigationUserWrapper ul a, #navigationUserWrapper .dropdown-menu a, #navigationUser ul a, #navigationUser .dropdown-menu a, .user-nav ul a, .user-nav .dropdown-menu a { transition: none !important; transform: none !important; width: auto !important; height: auto !important; padding: inherit !important; margin: inherit !important; line-height: inherit !important; font-size: inherit !important; text-align: inherit !important; } #navigationUserWrapper ul a:hover, #navigationUserWrapper .dropdown-menu a:hover, #navigationUser ul a:hover, #navigationUser .dropdown-menu a:hover, .user-nav ul a:hover, .user-nav .dropdown-menu a:hover { transition: background-color 0.3s ease, color 0.3s ease !important; transform: none !important; width: auto !important; height: auto !important; /* padding: inherit !important; */ margin: inherit !important; line-height: inherit !important; font-size: inherit !important; text-align: inherit !important; background-color: rgba(255,255,255,0.15) !important; text-decoration: none !important; opacity: 1 !important; filter: none !important; /* padding: 0px 12px !important; */ /* margin: 0 !important; */ } /* Task count badge - complete positioning */ .task_count, .badge, .nav-badge { background-color: #e74c3c !important; color: white !important; border-radius: 10px !important; font-size: 11px !important; font-weight: bold !important; padding: 2px 6px !important; min-width: 18px !important; height: 18px !important; line-height: 14px !important; text-align: center !important; display: inline-block !important; position: absolute !important; box-sizing: border-box !important; top: 2px !important; right: 2px !important; margin: 0 !important; float: none !important; clear: none !important; vertical-align: baseline !important; z-index: 10 !important; font-family: inherit !important; letter-spacing: 0 !important; word-spacing: 0 !important; white-space: nowrap !important; text-shadow: none !important; -webkit-text-shadow: none !important; -moz-text-shadow: none !important; -ms-text-shadow: none !important; -o-text-shadow: none !important; direction: ltr !important; unicode-bidi: embed !important; overflow: visible !important; visibility: visible !important; opacity: 1 !important; filter: none !important; -webkit-filter: none !important; } /* Additional selectors for dropdown - more specific targeting */ .navbar-nav .dropdown-menu, ul.nav-menu, .nav .dropdown-menu, .dropdown-menu { background-color: #BAFDFD !important; border: 1px solid rgba(255,255,255,0.2) !important; border-radius: 8px !important; /* box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important; */ padding: 0 !important; margin: 0 !important; z-index: 1050 !important; box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important; } /* Dropdown links - comprehensive targeting */ .navbar-nav .dropdown-menu a, ul.nav-menu a, .nav .dropdown-menu a, .dropdown-menu a, .dropdown-menu li a { color: #ecf0f1 !important; display: block !important; background: transparent !important; border-radius: 4px !important; margin: 0 !important; /* padding: 8px 12px !important; */ text-decoration: none !important; } /* Dropdown hover - comprehensive targeting */ .navbar-nav .dropdown-menu a:hover, ul.nav-menu a:hover, .nav .dropdown-menu a:hover, .dropdown-menu a:hover, .dropdown-menu li a:hover { color: #ecf0f1 !important; /* background-color: rgba(21, 79, 90, 0.8) !important; */ text-decoration: none !important; /* padding: 8px 12px !important; */ margin: 0 !important; } /* Dropdown items and list items */ /* .dropdown-menu li, .navbar-nav .dropdown-menu li, ul.nav-menu li { background: transparent !important; border: none !important; margin: 0 !important; padding: 0 !important; } */ /* Make sure dropdown is visible and positioned correctly */ /* .dropdown-menu.show, .dropdown-menu:not(.d-none) { display: block !important; opacity: 1 !important; visibility: visible !important; } */ /* Task count badge - consolidated */ .task_count, .badge, .nav-badge { background-color: #e74c3c !important; color: white !important; border-radius: 10px !important; font-size: 11px !important; font-weight: bold !important; padding: 2px 6px !important; min-width: 18px !important; height: 18px !important; line-height: 14px !important; text-align: center !important; display: inline-block !important; } /* Force dark background for any potential white dropdown issues */ /* #navigationUser ul, #navigationUserWrapper ul, .navigation ul, .user-nav ul, .nav ul, .navbar ul, .header ul.dropdown-menu, .pkp_structure_head ul.dropdown-menu { background-color: #BAFDFD !important; color: #ecf0f1 !important; margin: 0 !important; padding: 0 !important; /* border: 1px solid rgba(255,255,255,0.2) !important; */ /* border-radius: 8px !important; */ /* box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important; */ } */ /* Apply header background color to main navigation items */ .pkp_navigation_primary > li { background-color: #BAFDFD !important; } /* Apply header background color to user profile submenu elements */ #navigationUser ul, #navigationUserWrapper ul { background-color: #BAFDFD !important; } /* Force text color for any potential white text issues */ #navigationUser ul a, #navigationUserWrapper ul a, .navigation ul a, .user-nav ul a, .nav ul a, .navbar ul a, .header ul.dropdown-menu a, .pkp_structure_head ul.dropdown-menu a { color: #000000 !important; background: transparent !important; /* padding: 8px 12px !important; */ margin: 0 !important; display: block !important; } /* Force hover colors */ #navigationUser ul a:hover, #navigationUserWrapper ul a:hover, .navigation ul a:hover, .user-nav ul a:hover, .nav ul a:hover, .navbar ul a:hover, .header ul.dropdown-menu a:hover, .pkp_structure_head ul.dropdown-menu a:hover { /* color: #022738 !important; */ color: #00FF0D !important; background-color: rgba(255, 255, 255, 0.15) !important; text-decoration: none !important; /* padding: 8px 12px !important; */ margin: 0 !important; } /* Override any Bootstrap or theme defaults that might cause white text */ .dropdown-item { color: #ecf0f1 !important; background-color: transparent !important; } .dropdown-item:hover, .dropdown-item:focus { color: #ecf0f1 !important; background-color: rgba(21, 79, 90, 0.8) !important; } /* Ensure proper contrast for any Bootstrap navbar components */ .navbar-nav .nav-link, .navbar-nav .dropdown-item { color: #ecf0f1 !important; } .navbar-nav .nav-link:hover, .navbar-nav .dropdown-item:hover { color: #ecf0f1 !important; background-color: rgba(21, 79, 90, 0.8) !important; } /* Additional comprehensive targeting for all possible dropdown scenarios */ ul.dropdown-menu, .dropdown ul, .btn-group ul, .nav-item ul, .user-menu ul, .admin-menu ul { background-color: #BAFDFD !important; border: 1px solid rgba(255,255,255,0.2) !important; border-radius: 8px !important; box-shadow: 0 5px 15px rgba(0,0,0,0.3) !important; z-index: 1050 !important; margin: 0 !important; padding: 0 !important; } ul.dropdown-menu a, .dropdown ul a, .btn-group ul a, .nav-item ul a, .user-menu ul a, .admin-menu ul a, ul.dropdown-menu li a, .dropdown ul li a, .btn-group ul li a, .nav-item ul li a, .user-menu ul li a, .admin-menu ul li a { color: #ecf0f1 !important; background: transparent !important; display: block !important; /* padding: 8px 12px !important; */ margin: 0 !important; text-decoration: none !important; } ul.dropdown-menu a:hover, .dropdown ul a:hover, .btn-group ul a:hover, .nav-item ul a:hover, .user-menu ul a:hover, .admin-menu ul a:hover, ul.dropdown-menu li a:hover, .dropdown ul li a:hover, .btn-group ul li a:hover, .nav-item ul li a:hover, .user-menu ul li a:hover, .admin-menu ul li a:hover { color: #ecf0f1 !important; /* background-color: rgba(21, 79, 90, 0.8) !important; */ text-decoration: none !important; /* padding: 8px 12px !important; */ margin: 0 !important; } /* Responsive design - MAINTAIN FULL WIDTH logo */ @media (max-width: 992px) { .pkp_site_name { /* Keep flex: 1 1 auto to maintain full width */ margin-right: 15px !important; } .pkp_site_name .is_img img { height: 50px !important; /* Keep width: 100% for full width */ } .ms-auto { max-width: 200px !important; font-size: 13px !important; z-index: 1000 !important; } #navigationUserWrapper { font-size: 13px !important; z-index: 1000 !important; } #menu-open { z-index: 1000 !important; } } @media (max-width: 768px) { .pkp_structure_head { min-height: 60px !important; } .pkp_site_name { width: 200px !important; max-width: 200px !important; margin-right: 15px !important; } .pkp_site_name .is_img img { height: 40px !important; } .pkp_site_name_wrapper { flex-direction: row !important; gap: 10px !important; } .ms-auto { max-width: 180px !important; font-size: 12px !important; z-index: 1000 !important; } #navigationUserWrapper { font-size: 12px !important; } } @media (max-width: 480px) { .pkp_structure_head { min-height: 50px !important; } .pkp_site_name { width: 150px !important; max-width: 150px !important; } .pkp_site_name .is_img img { height: 35px !important; } .ms-auto { max-width: 140px !important; font-size: 11px !important; z-index: 1000 !important; } #navigationUserWrapper { font-size: 11px !important; } } /* FORCE CORRECT Z-INDEX HIERARCHY */ /* Header at top level */ .pkp_structure_head { z-index: 100 !important; } /* Site name/logo inside header */ .pkp_site_name_wrapper, .pkp_site_name { z-index: 95 !important; } /* Navigation below header */ .pkp_navigation_primary_wrapper, .pkp_navigation_primary { /*.pkp_navigation_primary_row {*/ z-index: 90 !important; } /* Only dropdown menus get higher z-index than navigation */ .pkp_navigation_primary .dropdown-menu, .pkp_navigation_primary ul ul, .dropdown-menu, .sub-menu, .pkp_site_nav_menu ul { z-index: 200 !important; } /* Content should be below navigation */ .pkp_structure_content, .pkp_structure_main, .pkp_structure_sidebar { z-index: 10 !important; } /* Footer at bottom */ .pkp_structure_footer { z-index: 10 !important; } /* Override any inline z-index that might be problematic */ .pkp_navigation_primary * { z-index: inherit !important; } /* Ensure navigation links don't have excessive z-index */ .pkp_navigation_primary a { /*.pkp_navigation_primary_row a {*/ z-index: auto !important; } /* --- AGGRESSIVE MENU COMPACTION FIX --- */ /* Force the primary navigation to stay on one line */ .pkp_structure_head .pkp_navigation_primary { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; white-space: nowrap !important; margin: 0 !important; padding: 0 !important; } /* Reduce padding on menu items to save space */ .pkp_structure_head .pkp_navigation_primary > li > a { padding-left: 0.5rem !important; padding-right: 0.5rem !important; font-size: 0.95rem !important; } /* Reduce gap if using refined list */ .pkp_structure_head .pkp_navigation_primary > li { margin-left: 0 !important; margin-right: 0 !important; } /* Specific override for the search box container to NOT grow */ /* Now targets the structural div that holds both search and user menu */ .pkp_head_wrapper .pkp_navigation_primary_wrapper > div.ml-auto { flex-shrink: 0 !important; } /* Remove default padding from navigation wrapper to allow edge alignment */ .pkp_navigation_primary_wrapper { padding-left: 0 !important; padding-right: 0 !important; width: 100% !important; display: flex !important; align-items: center !important; height: 100% !important; /* Ensure it takes full height of container */ } /* Ensure the row is also flex to handle height */ .pkp_navigation_primary_row { display: flex !important; align-items: center !important; } /* Fixed Height for Header Logo Area (Matches IJIL) */ .pkp_site_name_wrapper { min-height: 225px !important; display: flex !important; align-items: center !important; /* Vertically center the logo */ padding-left: 2rem !important; /* Breathing room for Logo (Left) */ padding-right: 0 !important; /* Reset right padding */ flex: 1 1 auto !important; /* Allow wrapper to grow and take available width */ width: auto !important; } /* Ensure inner containers allow full width */ .pkp_site_name, .pkp_site_name a, .header-logo, .header-logo a { display: block; width: 100%; /* Force full width on intermediate containers */ text-align: center; /* Center the image if it doesn't fill width */ } /* Prevent Logo from overflowing but keep it LARGE/PROPORTIONAL */ .pkp_site_name_wrapper .is_img img { max-height: 220px !important; /* Use available height */ width: auto !important; /* Maintain aspect ratio */ max-width: 100% !important; /* Ensure it never overflows width */ /* Magic combo for responsive banners: */ display: inline-block !important; } /* Custom Login/Register Buttons as per User Request - Override general-consolidated.css */ /* Normal State - Neutral Gray (like inactive breadcrumbs) */ html body .page_login .buttons button.submit, html body .page_login form .buttons button, html body #login .buttons button.submit, html body .cmp_form.login .buttons button, html body form.cmp_form.login button.submit, html body .cmp_form.cmp_form_login .buttons button, html body .cmp_form.cmp_form_register .buttons button { display: inline-block !important; background: #f3f5fa !important; background-color: #f3f5fa !important; color: #333333 !important; border: 2px solid rgba(0, 0, 0, 0.4); padding: 10px 20px !important; font-size: 14px !important; font-weight: 500 !important; border-radius: 8px !important; text-decoration: none !important; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important; text-transform: none !important; } /* Hover State - Dynamic Theme Color (like active breadcrumbs) */ html body .page_login .buttons button.submit:hover, html body .page_login form .buttons button:hover, html body #login .buttons button.submit:hover, html body .cmp_form.login .buttons button:hover, html body form.cmp_form.login button.submit:hover, html body .cmp_form.cmp_form_login .buttons button:hover, html body .cmp_form.cmp_form_register .buttons button:hover { background: #1E6292 !important; background-color: #1E6292 !important; color: #00FF0D !important; transform: translateY(-2px) !important; box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important; } /* Cache-busting: 1766170237 */