/* ========================================================= JITP — NAVIGATION DROPDOWN + CURRENT ARTICLE 3D CARDS Jurnal Inovasi dan Teknologi Pendidikan SAFE SCOPE - ABOUT dropdown fix - CURRENT ISSUE article cards only - Does NOT modify header image - Does NOT redesign the main navbar - Does NOT modify sidebar/footer/page width ========================================================= */ /* ======================================================= PART A — ABOUT DROPDOWN FIX ======================================================= */ .pkp_navigation_primary { position: relative; } .pkp_navigation_primary > li { position: relative; } /* Hide submenu until parent is hovered/focused */ .pkp_navigation_primary > li > ul { position: absolute !important; top: 100% !important; left: 0 !important; z-index: 99999 !important; display: none !important; width: 230px; margin: 0 !important; padding: 6px 0 !important; background: #ffffff; border: 1px solid #d9e3ec; border-radius: 0 0 7px 7px; box-shadow: 0 8px 20px rgba(0, 35, 70, 0.18); text-align: left; } /* Show dropdown */ .pkp_navigation_primary > li:hover > ul, .pkp_navigation_primary > li:focus-within > ul { display: block !important; visibility: visible !important; opacity: 1 !important; } /* Submenu items */ .pkp_navigation_primary > li > ul > li { display: block !important; position: relative; width: 100%; margin: 0 !important; padding: 0 !important; } /* Submenu links */ .pkp_navigation_primary > li > ul > li > a { display: block !important; width: 100%; box-sizing: border-box; margin: 0 !important; padding: 10px 14px !important; background: #ffffff; color: #164b73 !important; border: 0 !important; font-size: 13px; line-height: 1.35; text-align: left; text-decoration: none !important; white-space: normal; transition: background-color 0.18s ease, color 0.18s ease, padding-left 0.18s ease; } .pkp_navigation_primary > li > ul > li > a:hover, .pkp_navigation_primary > li > ul > li > a:focus { background: #eef7fc !important; color: #0b5d91 !important; padding-left: 18px !important; text-decoration: none !important; } /* Keep parent above submenu */ .pkp_navigation_primary > li > a { position: relative; z-index: 100000; } /* ======================================================= PART B — CURRENT ISSUE ARTICLE CARDS 3D + BLUE GRADIENT JITP STYLE ======================================================= */ /* The selector below is the standard OJS article-summary container. It affects article cards, not the header, navigation, sidebar, or footer. */ .obj_article_summary { position: relative; box-sizing: border-box; margin: 0 0 24px 0 !important; padding: 22px 24px 20px 24px !important; border: 1px solid #c9dfed !important; border-left: 6px solid #1269a0 !important; border-radius: 14px !important; background: linear-gradient( 135deg, #f7fcff 0%, #eaf7ff 52%, #dff3fb 100% ) !important; /* Main 3D effect: 1st shadow = solid lower edge 2nd shadow = soft depth 3rd shadow = ambient glow */ box-shadow: 0 5px 0 #b9d4e4, 0 10px 22px rgba(13, 76, 112, 0.14), 0 2px 4px rgba(13, 76, 112, 0.08) !important; overflow: hidden; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } /* Glossy top edge */ .obj_article_summary::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient( 90deg, #063d73 0%, #087ea4 35%, #19a9c8 70%, #54d2df 100% ); opacity: 0.95; } /* Subtle diagonal highlight */ .obj_article_summary::after { content: ""; position: absolute; top: -70px; right: -80px; width: 220px; height: 140px; background: rgba(255,255,255,0.28); transform: rotate(25deg); pointer-events: none; } /* ------------------------------------------------------- Alternating blue gradient palette ------------------------------------------------------- */ /* Card 1 — Ocean Blue */ .obj_article_summary:nth-child(1) { background: linear-gradient( 135deg, #f4fbff 0%, #e4f5fc 48%, #d5edf8 100% ) !important; border-left-color: #087ea4 !important; } /* Card 2 — Royal Blue */ .obj_article_summary:nth-child(2) { background: linear-gradient( 135deg, #f3f8ff 0%, #e8f0fc 50%, #d9e8f8 100% ) !important; border-left-color: #2868b2 !important; } /* Card 3 — Cyan Blue */ .obj_article_summary:nth-child(3) { background: linear-gradient( 135deg, #f1fcff 0%, #e2f7fb 50%, #d5f0f5 100% ) !important; border-left-color: #168dcc !important; } /* Card 4 — Deep Blue Tint */ .obj_article_summary:nth-child(4) { background: linear-gradient( 135deg, #f5f9fd 0%, #e9f1f8 50%, #dbe9f4 100% ) !important; border-left-color: #15558c !important; } /* Card 5 — Aqua */ .obj_article_summary:nth-child(5) { background: linear-gradient( 135deg, #f2fcfd 0%, #e4f8f9 50%, #d6f0f2 100% ) !important; border-left-color: #1498ad !important; } /* Card 6 — Soft Navy */ .obj_article_summary:nth-child(6) { background: linear-gradient( 135deg, #f4f8fc 0%, #e8eff7 50%, #dae6f1 100% ) !important; border-left-color: #315f91 !important; } /* Continue palette */ .obj_article_summary:nth-child(7) { background: linear-gradient( 135deg, #f4fbff 0%, #e4f5fc 48%, #d5edf8 100% ) !important; border-left-color: #087ea4 !important; } .obj_article_summary:nth-child(8) { background: linear-gradient( 135deg, #f3f8ff 0%, #e8f0fc 50%, #d9e8f8 100% ) !important; border-left-color: #2868b2 !important; } .obj_article_summary:nth-child(9) { background: linear-gradient( 135deg, #f1fcff 0%, #e2f7fb 50%, #d5f0f5 100% ) !important; border-left-color: #168dcc !important; } .obj_article_summary:nth-child(10) { background: linear-gradient( 135deg, #f5f9fd 0%, #e9f1f8 50%, #dbe9f4 100% ) !important; border-left-color: #15558c !important; } /* ------------------------------------------------------- Article title ------------------------------------------------------- */ .obj_article_summary .title { position: relative; z-index: 2; margin: 0 0 10px 0 !important; font-size: 18px; line-height: 1.5; font-weight: 700; } .obj_article_summary .title a { color: #123f63 !important; text-decoration: none !important; transition: color 0.2s ease; } .obj_article_summary .title a:hover { color: #087ea4 !important; } /* ------------------------------------------------------- Authors ------------------------------------------------------- */ .obj_article_summary .authors { position: relative; z-index: 2; margin-top: 6px; color: #405c70 !important; font-size: 14px; line-height: 1.55; } /* ------------------------------------------------------- Metadata / pages ------------------------------------------------------- */ .obj_article_summary .meta { position: relative; z-index: 2; color: #587184 !important; font-size: 13px; } /* ------------------------------------------------------- PDF / Galley button ------------------------------------------------------- */ .obj_article_summary .galleys_links { position: relative; z-index: 3; margin-top: 15px; } .obj_article_summary .galleys_links a { display: inline-block; padding: 8px 16px !important; background: linear-gradient( 180deg, #176a9e 0%, #0d527e 100% ) !important; border: 1px solid #0b4268 !important; border-radius: 8px !important; color: #ffffff !important; font-size: 13px; font-weight: 700; line-height: 1.2; text-decoration: none !important; box-shadow: 0 3px 0 #073a5b, 0 5px 10px rgba(18, 79, 125, 0.18); transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .obj_article_summary .galleys_links a:hover { background: linear-gradient( 180deg, #1596bd 0%, #087ea4 100% ) !important; transform: translateY(-2px); box-shadow: 0 4px 0 #075b78, 0 8px 15px rgba(8, 126, 164, 0.20); } /* ------------------------------------------------------- 3D hover effect ------------------------------------------------------- */ .obj_article_summary:hover { transform: translateY(-5px); box-shadow: 0 7px 0 #aac9dc, 0 16px 30px rgba(13, 76, 112, 0.19), 0 3px 7px rgba(13, 76, 112, 0.10) !important; border-color: #a9cde2 !important; } /* ======================================================= PART C — RESPONSIVE ======================================================= */ @media (max-width: 900px) { /* Dropdown remains controlled by OJS on smaller screens */ .pkp_navigation_primary > li > ul { position: static !important; display: none !important; width: 100%; margin: 0 !important; padding: 0 !important; border: 0; border-radius: 0; box-shadow: none; background: transparent; } .pkp_navigation_primary > li[aria-expanded="true"] > ul, .pkp_navigation_primary > li > a[aria-expanded="true"] + ul { display: block !important; visibility: visible !important; opacity: 1 !important; } .pkp_navigation_primary > li > ul > li > a { padding: 10px 20px !important; background: transparent !important; } /* Article cards */ .obj_article_summary { padding: 20px 21px 18px 21px !important; margin-bottom: 20px !important; border-radius: 12px !important; } .obj_article_summary .title { font-size: 17px; } } @media (max-width: 600px) { .obj_article_summary { padding: 18px 17px 17px 17px !important; margin-bottom: 17px !important; border-left-width: 5px !important; border-radius: 11px !important; box-shadow: 0 4px 0 #c1d8e6, 0 7px 16px rgba(13, 76, 112, 0.11) !important; } .obj_article_summary:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #b4cfdf, 0 10px 20px rgba(13, 76, 112, 0.14) !important; } .obj_article_summary .title { font-size: 16px; line-height: 1.45; } .obj_article_summary .authors { font-size: 13px; } .obj_article_summary .galleys_links a { padding: 8px 14px !important; font-size: 12px; } } /* ========================================================= END ========================================================= /* ======================================================= PART D — CURRENT ARTICLE TEXT ORDER TITLE → AUTHORS → AFFILIATION → PDF IMPORTANT: CSS can only arrange/show an affiliation element if OJS outputs that element in the article-summary HTML. This section therefore does not invent or hard-code institutional names. ======================================================= */ /* Keep the article information in a clean vertical flow. */ .obj_article_summary { display: block; } /* 1. ARTICLE TITLE — first */ .obj_article_summary .title { display: block !important; margin-top: 0 !important; margin-bottom: 8px !important; } /* 2. AUTHORS — immediately below title */ .obj_article_summary .authors { display: block !important; margin-top: 0 !important; margin-bottom: 5px !important; line-height: 1.55 !important; } /* 3. AFFILIATION — immediately below authors Supports common OJS/custom affiliation selectors. */ .obj_article_summary .affiliation, .obj_article_summary .affiliations, .obj_article_summary .author-affiliation, .obj_article_summary .article-affiliation { display: block !important; margin-top: 0 !important; margin-bottom: 12px !important; color: #587184 !important; font-size: 13px !important; font-style: normal !important; line-height: 1.5 !important; } /* Small visual distinction for institution text. */ .obj_article_summary .affiliation::before, .obj_article_summary .affiliations::before, .obj_article_summary .author-affiliation::before, .obj_article_summary .article-affiliation::before { content: "Institution: "; color: #315f78; font-weight: 600; } /* 4. PDF BUTTON — after author/institution information */ .obj_article_summary .galleys_links { display: block !important; margin-top: 12px !important; } /* Keep mobile arrangement identical: title → author → institution → PDF, without changing card design. */ @media (max-width: 600px) { .obj_article_summary .title { margin-bottom: 7px !important; } .obj_article_summary .authors { margin-bottom: 4px !important; } .obj_article_summary .affiliation, .obj_article_summary .affiliations, .obj_article_summary .author-affiliation, .obj_article_summary .article-affiliation { margin-bottom: 10px !important; font-size: 12.5px !important; } .obj_article_summary .galleys_links { margin-top: 10px !important; } } /* ========================================================= END OF TEXT-ORDER UPDATE ========================================================= /* ======================================================= JITP — GRADIENT MAIN NAVBAR Only changes the main navigation bar appearance. Header, article cards, sidebar and footer are untouched. ======================================================= */ .pkp_navigation_primary_wrapper { background: linear-gradient( 180deg, #ffffff 0%, #f4f7fa 45%, #dce5ec 100% ) !important; border-top: 1px solid #cbd9e4 !important; border-bottom: 3px solid #0b6f9e !important; box-shadow: 0 2px 7px rgba(0, 55, 90, 0.16) !important; } .pkp_navigation_primary { background: transparent !important; } .pkp_navigation_primary > li > a { position: relative; background: transparent !important; color: #164b73 !important; font-weight: 600; border: 0 !important; transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } .pkp_navigation_primary > li > a:hover, .pkp_navigation_primary > li > a:focus { background: linear-gradient( 180deg, #eaf7fc 0%, #d5edf6 100% ) !important; color: #075985 !important; } .pkp_navigation_primary > li.is_active > a, .pkp_navigation_primary > li.active > a { background: linear-gradient( 180deg, #dceff8 0%, #c6e4f0 100% ) !important; color: #064d73 !important; box-shadow: inset 0 -3px 0 #0b7fa8 !important; } .pkp_navigation_primary > li > ul { background: #ffffff !important; border-top: 3px solid #0b7fa8 !important; box-shadow: 0 8px 20px rgba(0, 45, 75, 0.20) !important; } .pkp_navigation_primary > li > ul > li > a { background: #ffffff !important; color: #164b73 !important; } .pkp_navigation_primary > li > ul > li > a:hover, .pkp_navigation_primary > li > ul > li > a:focus { background: linear-gradient( 90deg, #e9f7fc 0%, #f8fcfe 100% ) !important; color: #087ea4 !important; } .pkp_search { background: transparent !important; } .pkp_search button, .pkp_search .search_controls { color: #164b73 !important; } @media (max-width: 900px) { .pkp_navigation_primary_wrapper { background: linear-gradient( 180deg, #ffffff 0%, #e5edf3 100% ) !important; border-bottom: 3px solid #0b6f9e !important; } } /* ======================================================= END — GRADIENT MAIN NAVBAR ======================================================= */ /* ======================================================= FINAL NAVBAR WIDTH OVERRIDE — FULL CONTAINER EDGE Purpose: - Extend ONLY the main navbar to the left/right edge of the existing JITP content container. - Preserve header dimensions. - Preserve Current Issue/article cards. - Preserve dropdown behavior. - Do not alter overall page width. The current OJS theme leaves approximately 20px of horizontal inset around the navigation wrapper. The negative margins below cancel that inset. ======================================================= */ .pkp_navigation_primary_wrapper { position: relative !important; /* Cancel the theme's horizontal inset */ width: calc(100% + 40px) !important; margin-left: -20px !important; margin-right: -20px !important; box-sizing: border-box !important; /* Keep the existing gradient */ background: linear-gradient( 180deg, #ffffff 0%, #f4f7fa 45%, #dce5ec 100% ) !important; border-top: 1px solid #cbd9e4 !important; border-bottom: 3px solid #0b6f9e !important; box-shadow: 0 2px 7px rgba(0, 55, 90, 0.16) !important; z-index: 1000 !important; } /* Keep the navigation list itself transparent so the gradient belongs to the full-width wrapper. */ .pkp_navigation_primary_wrapper .pkp_navigation_primary { background: transparent !important; } /* Keep search aligned with the expanded navigation bar. */ .pkp_navigation_primary_wrapper .pkp_search { background: transparent !important; } /* Preserve dropdown position after the wrapper expands. */ .pkp_navigation_primary_wrapper .pkp_navigation_primary > li { position: relative; } /* On smaller screens, remove the desktop negative-margin treatment so the responsive OJS navigation remains safe. */ @media (max-width: 900px) { .pkp_navigation_primary_wrapper { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } } /* ======================================================= END — FINAL NAVBAR WIDTH OVERRIDE ======================================================= */ /* ======================================================= FINAL MICRO-ADJUSTMENT — NAVBAR FULL EDGE Only removes the remaining left/right inset of the navigation bar. All other CSS remains unchanged. ======================================================= */ @media (min-width: 901px) { .pkp_navigation_primary_wrapper { position: relative !important; left: -10px !important; width: calc(100% + 20px) !important; margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } } /* ======================================================= END — NAVBAR FULL EDGE MICRO-ADJUSTMENT ======================================================= */ /* ========================================================== FINAL MICRO-ADJUSTMENT #2 — REMOVE REMAINING RIGHT INSET Based on the latest desktop rendering: navbar left edge is aligned, but the right edge remains inset by approximately 18–20px. Only the navbar wrapper is adjusted. No other component is modified. ========================================================== */ @media (min-width: 901px) { .pkp_navigation_primary_wrapper { position: relative !important; /* Preserve the already-correct left alignment */ left: -10px !important; /* Add only the missing right-side width */ width: calc(100% + 40px) !important; /* Prevent the previous margin rule from reintroducing a second horizontal offset */ margin-left: 0 !important; margin-right: 0 !important; box-sizing: border-box !important; } } /* ========================================================== END — FINAL MICRO-ADJUSTMENT #2 ========================================================== */ /* ========================================================== FINAL LEFT-EDGE MICRO FIX — VISUAL ONLY ---------------------------------------------------------- The right edge is already correctly aligned. This patch fills ONLY the remaining left-side gap. No width, position, menu, header, article, dropdown, or other component rules are changed. ========================================================== */ @media (min-width: 901px) { .pkp_navigation_primary_wrapper::before { content: ""; position: absolute !important; /* Fill the remaining left inset only */ left: -10px !important; top: -1px !important; bottom: -3px !important; width: 10px !important; background: linear-gradient( 180deg, #ffffff 0%, #f4f7fa 45%, #dce5ec 100% ) !important; border-top: 1px solid #cbd9e4 !important; border-bottom: 3px solid #0b6f9e !important; box-shadow: 0 2px 7px rgba(0, 55, 90, 0.16) !important; pointer-events: none !important; z-index: -1 !important; } } /* ========================================================== END — LEFT-EDGE MICRO FIX ========================================================== */ /* ========================================================== DEFINITIVE LEFT EDGE FILL ---------------------------------------------------------- The right edge is already correct. The remaining ~20px left inset is visual only. This patch fills that exact area with the same navbar gradient and depth. No menu geometry or other component is modified. ========================================================== */ @media (min-width: 901px) { /* Allow the visual extension to appear outside the navigation wrapper without changing its layout. */ .pkp_navigation_primary_wrapper { overflow: visible !important; } /* Replace the previous left-edge pseudo-element with a visible 20px extension matching the navbar exactly. */ .pkp_navigation_primary_wrapper::before { content: "" !important; position: absolute !important; left: -20px !important; top: 0 !important; bottom: -3px !important; width: 20px !important; background: linear-gradient( 180deg, #ffffff 0%, #f4f7fa 45%, #dce5ec 100% ) !important; border-top: 1px solid #cbd9e4 !important; border-bottom: 3px solid #0b6f9e !important; box-shadow: inset 0 1px 0 rgba(255,255,255,0.95), inset 0 -2px 0 rgba(8,76,111,0.18), -1px 2px 7px rgba(0,55,90,0.16) !important; opacity: 1 !important; visibility: visible !important; display: block !important; pointer-events: none !important; z-index: 0 !important; } /* Keep the actual OJS navigation controls above the extension layer. */ .pkp_navigation_primary_wrapper .pkp_navigation_primary, .pkp_navigation_primary_wrapper .pkp_search { position: relative !important; z-index: 2 !important; } } /* ========================================================== END — DEFINITIVE LEFT EDGE FILL ========================================================== */ /* ========================================================== FINAL VISUAL MATCH — LEFT NAVBAR EDGE Only corrects the visual difference at the left extension. The existing navbar width/position and all other components remain untouched. ========================================================== */ @media (min-width: 901px) { .pkp_navigation_primary_wrapper { overflow: visible !important; } .pkp_navigation_primary_wrapper::before { content: "" !important; position: absolute !important; /* Match the actual remaining left inset */ left: -20px !important; top: -1px !important; width: 20px !important; height: calc(100% + 4px) !important; /* Inherit the exact navbar background instead of recreating a slightly different gradient. */ background: inherit !important; border: 0 !important; box-shadow: inherit !important; pointer-events: none !important; opacity: 1 !important; visibility: visible !important; display: block !important; z-index: 0 !important; } /* Recreate only the navbar's bottom depth line across the left extension, so it visually joins the main bar. */ .pkp_navigation_primary_wrapper::after { content: "" !important; position: absolute !important; left: -20px !important; bottom: -3px !important; width: 20px !important; height: 3px !important; background: #0b6f9e !important; box-shadow: 0 2px 7px rgba(0,55,90,0.16) !important; pointer-events: none !important; z-index: 1 !important; } .pkp_navigation_primary_wrapper .pkp_navigation_primary, .pkp_navigation_primary_wrapper .pkp_search { position: relative !important; z-index: 2 !important; } } /* ========================================================== END — FINAL VISUAL MATCH ========================================================== */ /* ========================================================== PART E — JITP SIDEBAR / ADDITIONAL MENU ---------------------------------------------------------- ONLY affects the custom sidebar menu using: .intep-sidebar-menu Existing header, navbar, article cards and page layout are not modified. ========================================================== */ .intep-sidebar-menu { width: 100%; box-sizing: border-box; margin: 0 0 22px 0; padding: 0; } /* Sidebar title */ .intep-sidebar-menu .intep-sidebar-title { display: block; width: 100%; box-sizing: border-box; margin: 0 0 8px 0; padding: 11px 12px; background: linear-gradient( 180deg, #0b5d91 0%, #084a73 55%, #063d61 100% ); border: 1px solid #063957; border-radius: 5px 5px 0 0; color: #ffffff !important; font-size: 14px; font-weight: 700; line-height: 1.3; text-align: center; letter-spacing: 0.2px; box-shadow: 0 3px 0 #052f4a, 0 5px 10px rgba(0, 55, 90, 0.16); } /* Individual sidebar buttons */ .intep-sidebar-menu > a { display: block !important; width: 100%; box-sizing: border-box; margin: 0 0 4px 0 !important; padding: 9px 11px !important; background: linear-gradient( 180deg, #ffffff 0%, #f1f7fa 48%, #dceaf1 100% ) !important; border: 1px solid #b9d2df !important; border-left: 4px solid #0b6f9e !important; border-radius: 3px !important; color: #164b73 !important; font-size: 12px !important; font-weight: 700; line-height: 1.35; text-decoration: none !important; box-shadow: 0 2px 0 #c1d6e1, 0 3px 7px rgba(0, 55, 90, 0.10); transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; } /* Hover / focus */ .intep-sidebar-menu > a:hover, .intep-sidebar-menu > a:focus { background: linear-gradient( 180deg, #eaf8fc 0%, #d8eff7 50%, #c5e5ef 100% ) !important; border-color: #86bfd4 !important; border-left-color: #087ea4 !important; color: #075985 !important; text-decoration: none !important; transform: translateX(2px); box-shadow: 0 3px 0 #9bbfd0, 0 5px 10px rgba(0, 76, 112, 0.16); } /* Keep menu compact on tablets */ @media (max-width: 900px) { .intep-sidebar-menu .intep-sidebar-title { font-size: 13px; padding: 10px 11px; } .intep-sidebar-menu > a { padding: 9px 10px !important; font-size: 12px !important; } } /* Smaller mobile screens */ @media (max-width: 600px) { .intep-sidebar-menu { margin-bottom: 18px; } .intep-sidebar-menu .intep-sidebar-title { padding: 9px 10px; font-size: 13px; } .intep-sidebar-menu > a { margin-bottom: 3px !important; padding: 8px 9px !important; font-size: 11.5px !important; } } /* ========================================================== END — JITP SIDEBAR / ADDITIONAL MENU ========================================================== */ /* ========================================================== PART F — JITP WHATSAPP LIVE CHAT ---------------------------------------------------------- ONLY affects the custom Live Chat block using: .intep-livechat Existing header, navbar, article cards, sidebar menu and page layout are not modified. ========================================================== */ .intep-livechat { width: 100%; margin: 15px 0; padding: 0; box-sizing: border-box; } .intep-livechat-button { display: flex; align-items: center; width: 100%; min-height: 70px; padding: 7px 10px; box-sizing: border-box; background: #ffffff; border: 2px solid #e9008a; border-radius: 8px; text-decoration: none !important; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } .intep-livechat-button:hover, .intep-livechat-button:focus { background: #fff7fc !important; border-color: #e9008a !important; text-decoration: none !important; transform: translateY(-1px); box-shadow: 0 3px 8px rgba(233, 0, 138, 0.12); } .intep-wa-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; min-width: 48px; margin-right: 10px; background: #25d366; color: #ffffff; border-radius: 8px; font-family: Arial, sans-serif; font-size: 12px; font-weight: 700; line-height: 1; text-align: center; } .intep-livechat-text { display: flex; flex-direction: column; justify-content: center; font-family: Arial, sans-serif; line-height: 1.1; } .intep-livechat-small { display: block; margin-bottom: 3px; color: #16a34a !important; font-family: Arial, sans-serif; font-size: 14px; font-weight: 700; line-height: 1.2; } .intep-livechat-large { display: block; color: #e9008a !important; font-family: Arial, sans-serif; font-size: 22px; font-weight: 400; line-height: 1.1; letter-spacing: 0; } .intep-livechat-button:visited { color: inherit; text-decoration: none !important; } .intep-livechat-button:focus { outline: none; } @media (max-width: 900px) { .intep-livechat { margin: 14px 0; } .intep-livechat-button { min-height: 66px; } .intep-livechat-large { font-size: 20px; } } @media (max-width: 600px) { .intep-livechat { margin: 12px 0; } .intep-livechat-button { min-height: 62px; padding: 6px 8px; } .intep-wa-icon { width: 44px; height: 44px; min-width: 44px; margin-right: 9px; font-size: 11px; } .intep-livechat-small { font-size: 13px; } .intep-livechat-large { font-size: 18px; } } /* ========================================================== END — JITP WHATSAPP LIVE CHAT ========================================================== */ /* ========================================================== JITP — FINAL SIDEBAR FONT + LIVE CHAT GLOW ENHANCEMENT ---------------------------------------------------------- ADD-ONLY OVERRIDE Existing CSS above is intentionally left unchanged. ========================================================== */ /* Modern/simple font for JITP custom sidebar */ .intep-sidebar-menu, .intep-sidebar-menu *, .intep-sidebar-information, .intep-sidebar-information * { font-family: Arial, Helvetica, sans-serif !important; } /* Keep sidebar headings clean and modern */ .intep-sidebar-menu .intep-sidebar-title, .intep-sidebar-information .intep-sidebar-title { font-family: Arial, Helvetica, sans-serif !important; } /* Keep sidebar links simple, readable and modern */ .intep-sidebar-menu > a, .intep-sidebar-information a { font-family: Arial, Helvetica, sans-serif !important; } /* ---------------------------------------------------------- WhatsApp Live Chat — Catchy Glow Hover ---------------------------------------------------------- */ .intep-livechat-button { font-family: Arial, Helvetica, sans-serif !important; /* Smooth glow transition */ transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, filter 0.25s ease !important; } /* Hover glow — no popup, only subtle lift + glow */ .intep-livechat-button:hover { background: #ffffff !important; border-color: #25d366 !important; transform: translateY(-2px) !important; box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.10), 0 0 10px rgba(37, 211, 102, 0.35), 0 0 22px rgba(37, 211, 102, 0.22), 0 5px 12px rgba(37, 211, 102, 0.18) !important; filter: brightness(1.02) !important; } /* Keyboard focus — same visual language as hover */ .intep-livechat-button:focus { background: #ffffff !important; border-color: #25d366 !important; box-shadow: 0 0 0 3px rgba(37, 211, 102, 0.14), 0 0 14px rgba(37, 211, 102, 0.38), 0 0 24px rgba(37, 211, 102, 0.20) !important; transform: translateY(-2px) !important; } /* WhatsApp icon gets a very subtle glow on hover */ .intep-livechat-button:hover .intep-wa-icon { box-shadow: 0 0 8px rgba(37, 211, 102, 0.45), 0 0 15px rgba(37, 211, 102, 0.22); transition: box-shadow 0.25s ease; } /* Prevent glow/lift from becoming excessive on touch devices */ @media (max-width: 600px) { .intep-livechat-button:hover { transform: none !important; box-shadow: 0 0 0 2px rgba(37, 211, 102, 0.08), 0 0 10px rgba(37, 211, 102, 0.25), 0 4px 10px rgba(37, 211, 102, 0.14) !important; } } /* ========================================================== END — FINAL SIDEBAR FONT + LIVE CHAT GLOW ENHANCEMENT ========================================================== */ /* ========================================================== JITP — SIDEBAR NO-GAP FINAL OVERRIDE ---------------------------------------------------------- Only removes vertical gaps between sidebar menu items. Existing colors, sizes, borders and other styling remain. ========================================================== */ /* ADDITIONAL MENU: buttons touch each other */ .intep-sidebar-menu > a { margin-top: 0 !important; margin-bottom: 0 !important; } /* ADDITIONAL MENU: title touches the first button */ .intep-sidebar-menu .intep-sidebar-title { margin-bottom: 0 !important; } /* INFORMATION SIDEBAR: supports either class name */ .intep-sidebar-information > a, .intep-sidebar-information .intep-sidebar-link, .intep-sidebar-info > a, .intep-sidebar-info .intep-sidebar-link { margin-top: 0 !important; margin-bottom: 0 !important; } /* INFORMATION SIDEBAR: remove gaps between its direct items */ .intep-sidebar-information a, .intep-sidebar-info a { margin-bottom: 0 !important; } /* INFORMATION SIDEBAR: title touches the first item */ .intep-sidebar-information .intep-sidebar-title, .intep-sidebar-info .intep-sidebar-title { margin-bottom: 0 !important; } /* Keep each sidebar block itself compact */ .intep-sidebar-menu, .intep-sidebar-information, .intep-sidebar-info { gap: 0 !important; } /* ========================================================== END — SIDEBAR NO-GAP FINAL OVERRIDE ========================================================== */ /* ========================================================== JITP — SIDEBAR BLOCK-TO-BLOCK NO-GAP FIX ---------------------------------------------------------- ONLY removes the vertical space BETWEEN: Additional Menu → Live Chat → Information. Existing sidebar colors, fonts, sizes, borders and effects are not changed. ========================================================== */ /* Remove OJS spacing from the three custom sidebar blocks */ .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-menu), .pkp_structure_sidebar .pkp_block:has(.intep-livechat), .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-information), .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-info) { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Additional Menu — no space after the menu */ .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-menu) { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Live Chat — remove its own vertical margin */ .pkp_structure_sidebar .pkp_block:has(.intep-livechat), .pkp_structure_sidebar .intep-livechat { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Information — no space before it */ .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-information), .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-info) { margin-top: 0 !important; padding-top: 0 !important; } /* Remove spacing caused by the generic OJS block content wrapper */ .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-menu) .content, .pkp_structure_sidebar .pkp_block:has(.intep-livechat) .content, .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-information) .content, .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-info) .content { margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } /* Make the three blocks directly adjacent */ .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-menu) + .pkp_block:has(.intep-livechat), .pkp_structure_sidebar .pkp_block:has(.intep-livechat) + .pkp_block:has(.intep-sidebar-information), .pkp_structure_sidebar .pkp_block:has(.intep-livechat) + .pkp_block:has(.intep-sidebar-info) { margin-top: 0 !important; padding-top: 0 !important; } /* ========================================================== END — SIDEBAR BLOCK-TO-BLOCK NO-GAP FIX ========================================================== */ /* ========================================================== JITP — EQUAL GAP: LIVE CHAT → INFORMATION ---------------------------------------------------------- ONLY adjusts the space after Live Chat so it matches the existing space between Additional Menu and Live Chat. No other styling or component is changed. ========================================================== */ .pkp_structure_sidebar .pkp_block:has(.intep-livechat) { margin-bottom: 15px !important; } /* ========================================================== END — EQUAL GAP: LIVE CHAT → INFORMATION ========================================================== */ /* ========================================================== JITP — NAVBAR SEARCH → ADDITIONAL MENU EQUAL GAP ---------------------------------------------------------- ONLY adds the same vertical spacing before ADDITIONAL MENU as the existing spacing between the sidebar blocks. No existing CSS rules are changed. ========================================================== */ .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-menu) { margin-top: 15px !important; padding-top: 0 !important; } /* Keep the same spacing on desktop and responsive layouts */ @media (max-width: 900px) { .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-menu) { margin-top: 15px !important; } } /* ========================================================== END — NAVBAR SEARCH → ADDITIONAL MENU EQUAL GAP ========================================================== */ /* ========================================================== JITP — CURRENT ARTICLE CARD COMPACT SIZE ---------------------------------------------------------- ONLY reduces the physical dimensions/vertical spacing of Current Issue article cards to a more compact JOSAR-like proportion. Existing gradient, 3D effect, hover, borders, colors, navbar, sidebar and other components are untouched. ========================================================== */ .obj_article_summary { padding: 14px 18px 12px 18px !important; margin-bottom: 18px !important; } /* Compact vertical spacing inside the article card */ .obj_article_summary .title { margin-bottom: 6px !important; line-height: 1.35 !important; } .obj_article_summary .authors { margin-top: 3px !important; margin-bottom: 3px !important; line-height: 1.4 !important; } .obj_article_summary .affiliation, .obj_article_summary .affiliations, .obj_article_summary .author-affiliation, .obj_article_summary .article-affiliation { margin-bottom: 7px !important; line-height: 1.4 !important; } .obj_article_summary .galleys_links { margin-top: 8px !important; } /* Keep the compact proportion on tablets */ @media (max-width: 900px) { .obj_article_summary { padding: 13px 16px 11px 16px !important; margin-bottom: 16px !important; } .obj_article_summary .title { margin-bottom: 5px !important; } .obj_article_summary .galleys_links { margin-top: 7px !important; } } /* Keep the compact proportion on mobile */ @media (max-width: 600px) { .obj_article_summary { padding: 12px 14px 10px 14px !important; margin-bottom: 14px !important; } .obj_article_summary .title { margin-bottom: 5px !important; } .obj_article_summary .authors { margin-bottom: 2px !important; } .obj_article_summary .affiliation, .obj_article_summary .affiliations, .obj_article_summary .author-affiliation, .obj_article_summary .article-affiliation { margin-bottom: 6px !important; } .obj_article_summary .galleys_links { margin-top: 7px !important; } } /* ========================================================== END — CURRENT ARTICLE CARD COMPACT SIZE ========================================================== */ /* ========================================================== JITP — FOOTER STYLING ---------------------------------------------------------- ONLY styles the custom .jitp-footer. Existing header, navbar, article cards, sidebar and other components remain unchanged. ========================================================== */ .jitp-footer { width: 100% !important; box-sizing: border-box !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 35px !important; margin: 35px 0 0 0 !important; padding: 28px 38px 24px 38px !important; background: linear-gradient( 135deg, #003b5c 0%, #005b7a 42%, #008db5 72%, #20b7d4 100% ) !important; color: #ffffff !important; border-top: 1px solid rgba(255,255,255,0.35) !important; border-bottom: 8px solid #002d46 !important; box-shadow: 0 -3px 0 rgba(0,91,122,0.20), 0 8px 0 rgba(0,45,70,0.18), 0 12px 22px rgba(0,0,0,0.18) !important; } .jitp-footer .jitp-footer-left { flex: 1 1 auto !important; min-width: 0 !important; box-sizing: border-box !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; line-height: 1.55 !important; color: #ffffff !important; } .jitp-footer .jitp-footer-title { margin: 0 0 6px 0 !important; padding: 0 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.3 !important; color: #ffffff !important; } .jitp-footer .jitp-footer-left p { margin: 3px 0 !important; padding: 0 !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; line-height: 1.55 !important; } .jitp-footer a { color: #ffffff !important; text-decoration: underline !important; } .jitp-footer a:hover { color: #dff8ff !important; } .jitp-footer .jitp-license { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; margin-top: 12px !important; padding: 0 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12.5px !important; line-height: 1.5 !important; color: #ffffff !important; } .jitp-footer .jitp-license .jitp-cc-logo { width: 88px !important; height: 31px !important; max-width: 88px !important; min-width: 88px !important; object-fit: contain !important; display: inline-block !important; vertical-align: middle !important; flex: 0 0 88px !important; } .jitp-footer .jitp-footer-right { flex: 0 0 190px !important; width: 190px !important; box-sizing: border-box !important; text-align: center !important; font-family: Arial, Helvetica, sans-serif !important; color: #ffffff !important; } .jitp-footer .jitp-ojs-text { margin: 0 !important; padding: 0 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; line-height: 1.25 !important; font-weight: 400 !important; color: #ffffff !important; } .jitp-footer .jitp-ojs-logo { margin: 2px 0 0 0 !important; padding: 0 !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 31px !important; line-height: 1.05 !important; font-weight: 400 !important; letter-spacing: 0 !important; color: #ffffff !important; } .jitp-footer .jitp-ojs-small { margin: 5px 0 0 0 !important; padding: 0 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 11px !important; line-height: 1.2 !important; color: #e7faff !important; } .jitp-footer img { max-width: 100% !important; } .jitp-footer .jitp-cc-logo { max-width: 88px !important; } @media (max-width: 768px) { .jitp-footer { flex-direction: column !important; align-items: flex-start !important; gap: 22px !important; padding: 24px 25px 20px 25px !important; } .jitp-footer .jitp-footer-right { width: 100% !important; flex-basis: auto !important; text-align: left !important; } } @media (max-width: 480px) { .jitp-footer { padding: 20px 16px 18px 16px !important; border-bottom-width: 6px !important; } .jitp-footer .jitp-footer-title { font-size: 16px !important; } .jitp-footer .jitp-footer-left p { font-size: 12px !important; } .jitp-footer .jitp-license { align-items: flex-start !important; gap: 8px !important; font-size: 12px !important; } .jitp-footer .jitp-footer-right { text-align: left !important; } .jitp-footer .jitp-ojs-logo { font-size: 27px !important; } } /* ========================================================== END — FOOTER STYLING ========================================================== */ /* ========================================================== JITP — FOOTER FULL HORIZONTAL EDGE ---------------------------------------------------------- ONLY removes the remaining left/right inset of the footer. All existing header, navbar, article, sidebar and footer styling remains unchanged. ========================================================== */ .jitp-footer { width: calc(100% + 60px) !important; margin-left: -30px !important; margin-right: -30px !important; box-sizing: border-box !important; } /* Keep the footer full-width on responsive screens */ @media (max-width: 900px) { .jitp-footer { width: calc(100% + 60px) !important; margin-left: -30px !important; margin-right: -30px !important; } } @media (max-width: 480px) { .jitp-footer { width: calc(100% + 32px) !important; margin-left: -16px !important; margin-right: -16px !important; } } /* ========================================================== END — FOOTER FULL HORIZONTAL EDGE ========================================================== */ /* ========================================================== FINAL FOOTER BOTTOM GAP FIX ---------------------------------------------------------- ONLY removes the remaining space below the custom footer. All other footer styling and all other components remain unchanged. ========================================================== */ .jitp-footer { margin-bottom: 0 !important; } /* Remove bottom spacing from the immediate footer container when present, without changing the footer's appearance. */ .pkp_structure_footer_wrapper:has(.jitp-footer), .pkp_structure_footer:has(.jitp-footer) { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Ensure the custom footer itself reaches the bottom edge. */ .jitp-footer { position: relative !important; bottom: 0 !important; } /* ========================================================== END — FOOTER BOTTOM GAP FIX ========================================================== */ /* ========================================================== FINAL FIX — FOOTER EXTEND TO BOTTOM EDGE ---------------------------------------------------------- ONLY extends the custom footer downward to eliminate the remaining bottom gap. All existing colors, gradient, 3D effect, typography, CC logo, OJS/PKP section and horizontal layout remain. ========================================================== */ @media (min-width: 769px) { .jitp-footer { padding-bottom: 54px !important; margin-bottom: 0 !important; } .pkp_structure_footer_wrapper:has(.jitp-footer), .pkp_structure_footer:has(.jitp-footer) { padding-bottom: 0 !important; margin-bottom: 0 !important; } } /* ========================================================== END — FOOTER EXTEND TO BOTTOM EDGE ========================================================== */ /* ========================================================== FINAL — JITP FOOTER FLUSH WITH WEBSITE BOTTOM EDGE ---------------------------------------------------------- ONLY fixes the remaining space UNDER .jitp-footer. The footer design, colors, typography, width, header, navbar, article cards and sidebar are NOT changed. ========================================================== */ /* Make the custom footer the last visible layer in its footer area. */ .jitp-footer { position: relative !important; overflow: visible !important; z-index: 20 !important; margin-bottom: 0 !important; } /* Remove only the OJS/PKP spacing surrounding the custom footer. */ .pkp_structure_footer_wrapper:has(.jitp-footer), .pkp_structure_footer:has(.jitp-footer) { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* Remove the lower spacing/background from common OJS footer containers without hiding the custom footer itself. */ .pkp_structure_footer_wrapper:has(.jitp-footer) > *, .pkp_structure_footer:has(.jitp-footer) > * { margin-bottom: 0 !important; } /* The footer is extended visually downward only to cover the residual white/navy area left by the theme. */ .jitp-footer::after { content: "" !important; position: absolute !important; left: 0 !important; right: 0 !important; bottom: -50px !important; height: 50px !important; background: inherit !important; pointer-events: none !important; z-index: 0 !important; } /* Keep the footer's own content above the extension layer. */ .jitp-footer > * { position: relative !important; z-index: 2 !important; } /* Desktop: match the visible bottom-edge treatment. */ @media (min-width: 769px) { .jitp-footer::after { bottom: -50px !important; height: 50px !important; } } /* Mobile: use a smaller extension so the original responsive footer dimensions remain intact. */ @media (max-width: 768px) { .jitp-footer::after { bottom: -30px !important; height: 30px !important; } } /* ========================================================== END — FOOTER FLUSH WITH WEBSITE BOTTOM EDGE ========================================================== */ /* ========================================================== FINAL USER REQUEST — FOOTER LEBIH PENDEK + BOTTOM GRADIENT ---------------------------------------------------------- ONLY: 1. Mengurangi tinggi footer desktop agar tidak terlalu besar. 2. Menghilangkan garis bawah biru gelap yang memutus gradasi. Semua komponen lain tetap tidak diubah. ========================================================== */ @media (min-width: 769px) { .jitp-footer { padding-bottom: 18px !important; border-bottom: 0 !important; } } /* Mobile: hanya menyatukan bagian bawah dengan gradasi, tanpa mengubah ukuran/footer layout yang sudah ada. */ @media (max-width: 768px) { .jitp-footer { border-bottom: 0 !important; } } /* Pastikan ekstensi bawah tetap memakai gradasi footer yang sama, sehingga tidak muncul garis/bidang warna terpisah. */ .jitp-footer::after { background: inherit !important; } /* ========================================================== END — FOOTER LEBIH PENDEK + BOTTOM GRADIENT ========================================================== */ /* ========================================================== JITP — FINAL FLAG COUNTER SIDEBAR GAP ---------------------------------------------------------- ONLY fixes the vertical spacing: INFORMATION → FLAG COUNTER The target is the Custom Block that follows Information. Other colors, fonts, sizes, positions and components are intentionally left unchanged. ========================================================== */ /* 1. Remove the block's inherited OJS bottom spacing */ .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-information), .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-info) { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* 2. The Custom Block immediately after Information gets exactly the same 15px gap used elsewhere in the sidebar */ .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-information) ~ .pkp_block.custom_block, .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-info) ~ .pkp_block.custom_block, .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-information) ~ .pkp_block:has([id^="customblock-flag-counter"]), .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-info) ~ .pkp_block:has([id^="customblock-flag-counter"]) { margin-top: 15px !important; padding-top: 0 !important; } /* 3. Remove hidden top spacing inside the Flag Counter Custom Block itself */ .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-information) ~ .pkp_block.custom_block .content, .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-info) ~ .pkp_block.custom_block .content, .pkp_structure_sidebar .pkp_block:has([id^="customblock-flag-counter"]) .content { margin-top: 0 !important; padding-top: 0 !important; } /* 4. Prevent the first paragraph/div in the Flag Counter block from creating another unwanted top gap */ .pkp_structure_sidebar .pkp_block:has([id^="customblock-flag-counter"]) .content > p:first-child, .pkp_structure_sidebar .pkp_block:has([id^="customblock-flag-counter"]) .content > div:first-child { margin-top: 0 !important; padding-top: 0 !important; } /* 5. Same result on tablet/mobile */ @media (max-width: 900px) { .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-information) ~ .pkp_block.custom_block, .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-info) ~ .pkp_block.custom_block { margin-top: 15px !important; padding-top: 0 !important; } } /* ========================================================== END — FINAL FLAG COUNTER SIDEBAR GAP ========================================================== */ /* ========================================================== JITP — DEFINITIVE FLAG COUNTER GAP FIX V2 ---------------------------------------------------------- IMPORTANT: The Flag Counter Custom Block is itself identified by #customblock-flag-counter. The previous selector used :has() to look for that ID inside another element, so it could fail when the ID is on the block itself. ONLY changes the vertical gap immediately above the Flag Counter block. ========================================================== */ /* Information block: remove only its bottom spacing */ .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-information), .pkp_structure_sidebar .pkp_block:has(.intep-sidebar-info) { margin-bottom: 0 !important; padding-bottom: 0 !important; } /* FLAG COUNTER BLOCK ITSELF */ .pkp_structure_sidebar #customblock-flag-counter { margin-top: 15px !important; padding-top: 0 !important; } /* Remove OJS content-wrapper spacing inside Flag Counter */ .pkp_structure_sidebar #customblock-flag-counter > .content { margin-top: 0 !important; padding-top: 0 !important; } /* Remove top margin from the actual Flag Counter element */ .pkp_structure_sidebar #customblock-flag-counter > .content > *:first-child { margin-top: 0 !important; } /* If Flag Counter is wrapped in a paragraph/div, remove only the wrapper's top spacing */ .pkp_structure_sidebar #customblock-flag-counter > .content > p:first-child, .pkp_structure_sidebar #customblock-flag-counter > .content > div:first-child { margin-top: 0 !important; padding-top: 0 !important; } /* Keep the same 15px visual gap on smaller screens */ @media (max-width: 900px) { .pkp_structure_sidebar #customblock-flag-counter { margin-top: 15px !important; padding-top: 0 !important; } .pkp_structure_sidebar #customblock-flag-counter > .content { margin-top: 0 !important; padding-top: 0 !important; } } /* ========================================================== END — DEFINITIVE FLAG COUNTER GAP FIX V2 ========================================================== */ /* ========================================================== INTEP — CURRENT ISSUE DESCRIPTION ---------------------------------------------------------- ADD-ONLY OVERRIDE Only styles the custom INTEP issue description. Existing header, navbar, article cards, sidebar, footer and all previous CSS rules remain unchanged. ========================================================== */ .intep-issue-description { width: 100% !important; max-width: 100% !important; margin: 18px 0 10px 0 !important; padding: 0 !important; box-sizing: border-box !important; font-family: Arial, Helvetica, sans-serif !important; color: #263238 !important; } .intep-issue-description p { font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.7 !important; color: #263238 !important; margin: 0 !important; padding: 0 !important; } .intep-issue-description .intep-issue-intro { display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 0 0 20px 0 !important; padding: 18px 20px !important; background: #f2f8fb !important; border-left: 5px solid #087ea4 !important; border-radius: 0 7px 7px 0 !important; } .intep-issue-description .intep-issue-intro strong { font-family: Arial, Helvetica, sans-serif !important; font-weight: 700 !important; color: #004b6b !important; } .intep-issue-description .intep-issue-highlight { display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 0 0 22px 0 !important; padding: 18px 20px !important; background: linear-gradient( 135deg, #eef8fc 0%, #e1f2f8 100% ) !important; border: 1px solid #c5dfe9 !important; border-left: 5px solid #0b8dad !important; border-radius: 7px !important; } .intep-issue-description h3 { display: block !important; margin: 0 0 10px 0 !important; padding: 0 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.4 !important; color: #004b6b !important; } .intep-issue-description .intep-issue-highlight p, .intep-issue-description .intep-issue-about p { text-align: justify !important; } .intep-issue-description .intep-issue-about { display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 0 0 18px 0 !important; padding: 17px 0 0 0 !important; border-top: 1px solid #d7e2e7 !important; } .intep-issue-description .intep-issue-tagline { display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 10px 15px !important; background: #004b6b !important; border-radius: 5px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.5 !important; letter-spacing: .2px; text-align: center !important; color: #ffffff !important; } .intep-issue-description strong { font-family: Arial, Helvetica, sans-serif !important; } @media (max-width: 900px) { .intep-issue-description .intep-issue-intro, .intep-issue-description .intep-issue-highlight { padding: 16px 18px !important; } .intep-issue-description p { font-size: 14px !important; line-height: 1.65 !important; } } @media (max-width: 600px) { .intep-issue-description { margin-top: 12px !important; } .intep-issue-description .intep-issue-intro, .intep-issue-description .intep-issue-highlight { padding: 15px 16px !important; } .intep-issue-description p { font-size: 14px !important; line-height: 1.6 !important; text-align: left !important; } .intep-issue-description h3 { font-size: 16px !important; } .intep-issue-description .intep-issue-tagline { font-size: 11px !important; } } /* ========================================================== END — INTEP CURRENT ISSUE DESCRIPTION ========================================================== */ /* ========================================================== FINAL INTEP — CURRENT ISSUE DESCRIPTION NATIVE OJS FIX ---------------------------------------------------------- ONLY targets the native OJS Issue Description structure: .obj_issue_toc > .heading > .description This replaces the dependency on custom classes such as .intep-issue-description, so it works even when OJS/TinyMCE sanitizes or removes custom class attributes. No header, navbar, article cards, sidebar or footer rules are changed. ========================================================== */ /* Main native OJS description area */ .current_issue .obj_issue_toc .heading .description, .obj_issue_toc .heading .description { width: 100% !important; box-sizing: border-box !important; font-family: Arial, Helvetica, sans-serif !important; color: #263238 !important; } /* Reset only the paragraphs inside the Issue Description */ .current_issue .obj_issue_toc .heading .description p, .obj_issue_toc .heading .description p { font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.65 !important; color: #263238 !important; } /* First paragraph — INTEP introduction */ .current_issue .obj_issue_toc .heading .description > p:first-of-type, .obj_issue_toc .heading .description > p:first-of-type { margin: 0 0 20px 0 !important; padding: 18px 20px !important; box-sizing: border-box !important; background: #f2f8fb !important; border-left: 5px solid #087ea4 !important; border-radius: 0 7px 7px 0 !important; } /* Bold journal name */ .current_issue .obj_issue_toc .heading .description strong, .obj_issue_toc .heading .description strong { font-family: Arial, Helvetica, sans-serif !important; font-weight: 700 !important; color: #004b6b !important; } /* Native headings, if TinyMCE/OJS preserves H3 */ .current_issue .obj_issue_toc .heading .description h3, .obj_issue_toc .heading .description h3 { display: block !important; margin: 0 0 10px 0 !important; padding: 0 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.4 !important; color: #004b6b !important; } /* If the editor saved the section labels as ordinary paragraphs, keep the following content visually compact and readable. */ .current_issue .obj_issue_toc .heading .description > p:not(:first-of-type), .obj_issue_toc .heading .description > p:not(:first-of-type) { margin-top: 0 !important; margin-bottom: 16px !important; } /* Second paragraph: highlight text gets a light card treatment. This is intentionally limited to the native OJS description. */ .current_issue .obj_issue_toc .heading .description > p:nth-of-type(2), .obj_issue_toc .heading .description > p:nth-of-type(2) { padding: 16px 20px !important; background: linear-gradient(135deg, #eef8fc 0%, #e1f2f8 100%) !important; border: 1px solid #c5dfe9 !important; border-left: 5px solid #0b8dad !important; border-radius: 7px !important; } /* Keep the final section visually separated without changing text. */ .current_issue .obj_issue_toc .heading .description > p:nth-of-type(3), .obj_issue_toc .heading .description > p:nth-of-type(3) { margin-top: 18px !important; padding-top: 16px !important; border-top: 1px solid #d7e2e7 !important; } /* Tagline/last paragraph: subtle INTEP identity strip */ .current_issue .obj_issue_toc .heading .description > p:last-of-type, .obj_issue_toc .heading .description > p:last-of-type { margin-bottom: 0 !important; } /* When the description contains a real tagline div/span, style it. These selectors do not affect ordinary OJS content elsewhere. */ .current_issue .obj_issue_toc .heading .description .intep-issue-tagline, .obj_issue_toc .heading .description .intep-issue-tagline { display: block !important; margin: 0 !important; padding: 10px 15px !important; box-sizing: border-box !important; background: #004b6b !important; border-radius: 5px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.5 !important; text-align: center !important; color: #ffffff !important; } /* Desktop: keep the description visually balanced beside the cover. */ @media (min-width: 901px) { .current_issue .obj_issue_toc .heading .description, .obj_issue_toc .heading .description { box-sizing: border-box !important; } } /* Tablet */ @media (max-width: 900px) { .current_issue .obj_issue_toc .heading .description p, .obj_issue_toc .heading .description p { font-size: 14px !important; line-height: 1.6 !important; } .current_issue .obj_issue_toc .heading .description > p:first-of-type, .obj_issue_toc .heading .description > p:first-of-type, .current_issue .obj_issue_toc .heading .description > p:nth-of-type(2), .obj_issue_toc .heading .description > p:nth-of-type(2) { padding: 16px 18px !important; } } /* Mobile */ @media (max-width: 600px) { .current_issue .obj_issue_toc .heading .description, .obj_issue_toc .heading .description { margin-top: 12px !important; } .current_issue .obj_issue_toc .heading .description p, .obj_issue_toc .heading .description p { font-size: 14px !important; line-height: 1.6 !important; text-align: left !important; } .current_issue .obj_issue_toc .heading .description > p:first-of-type, .obj_issue_toc .heading .description > p:first-of-type, .current_issue .obj_issue_toc .heading .description > p:nth-of-type(2), .obj_issue_toc .heading .description > p:nth-of-type(2) { padding: 15px 16px !important; } .current_issue .obj_issue_toc .heading .description h3, .obj_issue_toc .heading .description h3 { font-size: 16px !important; } } /* ========================================================== END — NATIVE OJS ISSUE DESCRIPTION FIX ========================================================== */ /* ========================================================== INTEP — FINAL VISUAL POLISH FOR CURRENT ISSUE DESCRIPTION ---------------------------------------------------------- ADD-ONLY OVERRIDE Fixes only the visual hierarchy of: INTRO → HIGHLIGHTS → ABOUT → TAGLINE Existing header, navbar, cover, article cards, sidebar and footer styling remain untouched. ========================================================== */ /* ---------------------------------------------------------- 1. INTRO CARD — slightly cleaner and more balanced ---------------------------------------------------------- */ .current_issue .obj_issue_toc .heading .description > p:first-of-type, .obj_issue_toc .heading .description > p:first-of-type { position: relative !important; margin-bottom: 18px !important; padding: 18px 20px !important; border-left: 5px solid #087ea4 !important; border-radius: 0 8px 8px 0 !important; box-shadow: 0 3px 10px rgba(8, 126, 164, 0.08) !important; } /* ---------------------------------------------------------- 2. HIGHLIGHTS HEADING — put the heading INTO the card ---------------------------------------------------------- */ .current_issue .obj_issue_toc .heading .description h3, .obj_issue_toc .heading .description h3 { box-sizing: border-box !important; margin: 0 !important; padding: 11px 20px 7px 20px !important; background: linear-gradient(135deg, #eef8fc 0%, #e1f2f8 100%) !important; border: 1px solid #c5dfe9 !important; border-bottom: 0 !important; border-left: 5px solid #0b8dad !important; border-radius: 8px 8px 0 0 !important; color: #004b6b !important; font-size: 16px !important; line-height: 1.35 !important; } /* Paragraph immediately following a heading becomes the body of that same visual card. */ .current_issue .obj_issue_toc .heading .description h3 + p, .obj_issue_toc .heading .description h3 + p { box-sizing: border-box !important; margin: 0 0 20px 0 !important; padding: 8px 20px 17px 20px !important; background: linear-gradient(135deg, #eef8fc 0%, #e1f2f8 100%) !important; border: 1px solid #c5dfe9 !important; border-top: 0 !important; border-left: 5px solid #0b8dad !important; border-radius: 0 0 8px 8px !important; box-shadow: 0 3px 10px rgba(8, 126, 164, 0.06) !important; } /* ---------------------------------------------------------- 3. ABOUT THIS ISSUE — clear section heading ---------------------------------------------------------- */ .current_issue .obj_issue_toc .heading .description h3:nth-of-type(2), .obj_issue_toc .heading .description h3:nth-of-type(2) { margin-top: 4px !important; padding: 12px 0 9px 0 !important; background: transparent !important; border: 0 !important; border-top: 2px solid #d7e2e7 !important; border-radius: 0 !important; color: #004b6b !important; font-size: 16px !important; } /* About paragraph becomes a clean information panel. */ .current_issue .obj_issue_toc .heading .description h3:nth-of-type(2) + p, .obj_issue_toc .heading .description h3:nth-of-type(2) + p { margin: 0 0 12px 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* ---------------------------------------------------------- 4. RESEARCH · INNOVATION · EDUCATIONAL TECHNOLOGY becomes the visual closing strip ---------------------------------------------------------- */ .current_issue .obj_issue_toc .heading .description > p:last-of-type, .obj_issue_toc .heading .description > p:last-of-type { box-sizing: border-box !important; margin: 10px 0 0 0 !important; padding: 10px 15px !important; background: linear-gradient(135deg, #004b6b 0%, #087ea4 100%) !important; border-radius: 6px !important; color: #ffffff !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1.5 !important; letter-spacing: .2px !important; text-align: center !important; box-shadow: 0 3px 8px rgba(0, 75, 107, 0.12) !important; } /* Keep any links inside the closing strip readable. */ .current_issue .obj_issue_toc .heading .description > p:last-of-type a, .obj_issue_toc .heading .description > p:last-of-type a { color: #ffffff !important; } /* ---------------------------------------------------------- 5. DESKTOP — improve the relationship between cover and description without changing the cover itself ---------------------------------------------------------- */ @media (min-width: 901px) { .current_issue .obj_issue_toc .heading .description, .obj_issue_toc .heading .description { padding-left: 0 !important; } } /* ---------------------------------------------------------- 6. TABLET / MOBILE ---------------------------------------------------------- */ @media (max-width: 900px) { .current_issue .obj_issue_toc .heading .description h3, .obj_issue_toc .heading .description h3 { font-size: 15px !important; padding: 10px 17px 7px 17px !important; } .current_issue .obj_issue_toc .heading .description h3 + p, .obj_issue_toc .heading .description h3 + p { padding: 7px 17px 15px 17px !important; } } @media (max-width: 600px) { .current_issue .obj_issue_toc .heading .description h3, .obj_issue_toc .heading .description h3 { font-size: 15px !important; padding: 10px 15px 7px 15px !important; } .current_issue .obj_issue_toc .heading .description h3 + p, .obj_issue_toc .heading .description h3 + p { padding: 7px 15px 14px 15px !important; } .current_issue .obj_issue_toc .heading .description > p:last-of-type, .obj_issue_toc .heading .description > p:last-of-type { font-size: 11px !important; padding: 9px 12px !important; } } /* ========================================================== END — FINAL VISUAL POLISH ========================================================== */ /* ========================================================== INTEP — CURRENT ISSUE FINAL ALIGNMENT PATCH ---------------------------------------------------------- ONLY adjusts the Current Issue description/cover alignment, About This Issue, and the closing identity line. Existing CSS above is intentionally preserved. ========================================================== */ /* 1. COVER + DESCRIPTION: keep the cover at the very top of the issue heading and prevent the description from pushing the cover downward. */ .current_issue .obj_issue_toc .heading, .obj_issue_toc .heading { position: relative !important; overflow: visible !important; } .current_issue .obj_issue_toc .heading .cover, .obj_issue_toc .heading .cover { float: left !important; margin: 0 30px 20px 0 !important; padding: 0 !important; position: relative !important; top: 0 !important; vertical-align: top !important; } .current_issue .obj_issue_toc .heading .cover img, .obj_issue_toc .heading .cover img { display: block !important; margin: 0 !important; } /* Make the description begin at the same visual top as the cover. */ .current_issue .obj_issue_toc .heading .description, .obj_issue_toc .heading .description { margin-top: 0 !important; padding-top: 0 !important; vertical-align: top !important; } /* 2. INTRO CARD: slightly more compact so the cover and intro read as one balanced unit. */ .current_issue .obj_issue_toc .heading .description > p:first-of-type, .obj_issue_toc .heading .description > p:first-of-type { margin-top: 0 !important; margin-bottom: 18px !important; padding: 17px 20px !important; min-height: 0 !important; } /* 3. HIGHLIGHTS: keep heading visually attached to its card. */ .current_issue .obj_issue_toc .heading .description h3:first-of-type, .obj_issue_toc .heading .description h3:first-of-type { margin: 0 !important; padding: 10px 20px 7px 20px !important; background: #eaf5f9 !important; border-left: 5px solid #0b8dad !important; border-right: 1px solid #c5dfe9 !important; border-top: 1px solid #c5dfe9 !important; border-bottom: 0 !important; border-radius: 7px 7px 0 0 !important; color: #004b6b !important; font-size: 15px !important; line-height: 1.4 !important; } .current_issue .obj_issue_toc .heading .description h3:first-of-type + p, .obj_issue_toc .heading .description h3:first-of-type + p { margin: 0 0 18px 0 !important; padding: 10px 20px 16px 20px !important; border-top: 0 !important; border-radius: 0 0 7px 7px !important; } /* 4. ABOUT: clean academic section instead of a heavy filled box. */ .current_issue .obj_issue_toc .heading .description h3:nth-of-type(2), .obj_issue_toc .heading .description h3:nth-of-type(2) { margin: 22px 0 0 0 !important; padding: 10px 0 8px 0 !important; background: transparent !important; border: 0 !important; border-top: 2px solid #d6e2e8 !important; border-radius: 0 !important; color: #004b6b !important; font-size: 15px !important; line-height: 1.4 !important; } .current_issue .obj_issue_toc .heading .description h3:nth-of-type(2) + p, .obj_issue_toc .heading .description h3:nth-of-type(2) + p { margin: 0 0 10px 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; font-size: 15px !important; line-height: 1.65 !important; } /* 5. CLOSING IDENTITY LINE: small and elegant, not oversized. */ .current_issue .obj_issue_toc .heading .description > p:last-of-type, .obj_issue_toc .heading .description > p:last-of-type { margin: 6px 0 0 0 !important; padding: 8px 12px !important; background: linear-gradient(90deg, #004b6b 0%, #087ea4 100%) !important; border: 0 !important; border-radius: 4px !important; color: #ffffff !important; font-size: 11.5px !important; font-weight: 600 !important; line-height: 1.4 !important; text-align: center !important; letter-spacing: .15px !important; } /* 6. Clear the float after the whole description so the following OJS elements remain in their normal position. */ .current_issue .obj_issue_toc .heading .description::after, .obj_issue_toc .heading .description::after { content: "" !important; display: block !important; clear: both !important; } /* 7. Responsive protection. */ @media (max-width: 900px) { .current_issue .obj_issue_toc .heading .cover, .obj_issue_toc .heading .cover { float: none !important; margin: 0 auto 20px auto !important; text-align: center !important; } .current_issue .obj_issue_toc .heading .description > p:first-of-type, .obj_issue_toc .heading .description > p:first-of-type { padding: 15px 17px !important; } } @media (max-width: 600px) { .current_issue .obj_issue_toc .heading .description h3:first-of-type, .obj_issue_toc .heading .description h3:first-of-type, .current_issue .obj_issue_toc .heading .description h3:first-of-type + p, .obj_issue_toc .heading .description h3:first-of-type + p { padding-left: 15px !important; padding-right: 15px !important; } .current_issue .obj_issue_toc .heading .description > p:last-of-type, .obj_issue_toc .heading .description > p:last-of-type { font-size: 11px !important; } } /* ========================================================== END — INTEP CURRENT ISSUE FINAL ALIGNMENT PATCH ========================================================== */ /* ========================================================== INTEP — CURRENT ISSUE COVER VISIBILITY / OVERLAP FIX ---------------------------------------------------------- Only fixes the cover being hidden behind the intro card. No other page components are changed. ========================================================== */ .current_issue .obj_issue_toc .heading .cover, .obj_issue_toc .heading .cover { position: relative !important; z-index: 20 !important; float: left !important; visibility: visible !important; opacity: 1 !important; } .current_issue .obj_issue_toc .heading .cover img, .obj_issue_toc .heading .cover img { position: relative !important; z-index: 21 !important; display: block !important; visibility: visible !important; opacity: 1 !important; } /* Keep the descriptive cards behind the cover instead of painting over it. */ .current_issue .obj_issue_toc .heading .description, .obj_issue_toc .heading .description { position: relative !important; z-index: 1 !important; } /* Preserve the intended cover + intro relationship. */ .current_issue .obj_issue_toc .heading .description > p:first-of-type, .obj_issue_toc .heading .description > p:first-of-type { position: relative !important; z-index: 2 !important; } /* Highlights remains below/alongside the cover naturally. */ .current_issue .obj_issue_toc .heading .description h3:first-of-type, .current_issue .obj_issue_toc .heading .description h3:first-of-type + p, .obj_issue_toc .heading .description h3:first-of-type, .obj_issue_toc .heading .description h3:first-of-type + p { position: relative !important; z-index: 2 !important; } /* ========================================================== END — COVER VISIBILITY / OVERLAP FIX ========================================================== */ /* ========================================================== INTEP — CURRENT ISSUE FINAL POLISH Only refines About This Issue + issue tagline. Cover, Intro, Highlights, sidebar, header and footer are intentionally left unchanged. ========================================================== */ /* About This Issue: clean academic presentation */ .current_issue .obj_issue_toc .heading .description h3:nth-of-type(2), .obj_issue_toc .heading .description h3:nth-of-type(2) { margin: 22px 0 10px 0 !important; padding: 0 0 8px 0 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.35 !important; color: #064d73 !important; border-bottom: 2px solid #d8e7ef !important; background: transparent !important; box-shadow: none !important; } /* About paragraph: remove heavy blue box */ .current_issue .obj_issue_toc .heading .description h3:nth-of-type(2) + p, .obj_issue_toc .heading .description h3:nth-of-type(2) + p { margin: 0 0 10px 0 !important; padding: 0 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.65 !important; color: #263746 !important; text-align: left !important; background: transparent !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Tagline: subtle professional identity strip */ .current_issue .obj_issue_toc .heading .description h3:nth-of-type(2) + p + p, .obj_issue_toc .heading .description h3:nth-of-type(2) + p + p { display: block !important; margin: 10px 0 0 0 !important; padding: 8px 12px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: .15px !important; color: #075b82 !important; text-align: left !important; background: #f2f8fb !important; border-left: 3px solid #0b82ad !important; border-radius: 0 4px 4px 0 !important; box-shadow: none !important; } /* Keep the issue metadata visually separated */ .current_issue .obj_issue_toc .heading .published, .obj_issue_toc .heading .published { margin-top: 18px !important; } /* Mobile */ @media (max-width: 600px) { .current_issue .obj_issue_toc .heading .description h3:nth-of-type(2), .obj_issue_toc .heading .description h3:nth-of-type(2) { font-size: 16px !important; } .current_issue .obj_issue_toc .heading .description h3:nth-of-type(2) + p, .obj_issue_toc .heading .description h3:nth-of-type(2) + p { font-size: 15px !important; line-height: 1.55 !important; } .current_issue .obj_issue_toc .heading .description h3:nth-of-type(2) + p + p, .obj_issue_toc .heading .description h3:nth-of-type(2) + p + p { font-size: 12px !important; } } /* ========================================================== END — CURRENT ISSUE FINAL POLISH ========================================================== */ /* ========================================================== INTEP — RESPONSIVE MOBILE OPTIMIZATION ---------------------------------------------------------- ADD-ONLY PATCH Desktop rules above are intentionally preserved. This section only improves the Current Issue presentation on tablet/mobile screens. ========================================================== */ /* Keep the existing desktop appearance untouched. */ @media (min-width: 901px) { .current_issue .obj_issue_toc .heading .cover, .obj_issue_toc .heading .cover { float: left !important; margin-right: 30px !important; } } /* TABLET */ @media (max-width: 900px) { .current_issue .obj_issue_toc .heading .cover, .obj_issue_toc .heading .cover { float: none !important; width: 100% !important; max-width: 280px !important; margin: 0 auto 20px auto !important; padding: 0 !important; text-align: center !important; } .current_issue .obj_issue_toc .heading .cover img, .obj_issue_toc .heading .cover img { display: block !important; width: 100% !important; max-width: 280px !important; height: auto !important; margin: 0 auto !important; } .current_issue .obj_issue_toc .heading .description, .obj_issue_toc .heading .description { width: 100% !important; margin: 0 !important; padding: 0 !important; } .current_issue .obj_issue_toc .heading .description > p:first-of-type, .obj_issue_toc .heading .description > p:first-of-type { margin: 0 0 18px 0 !important; padding: 16px 18px !important; font-size: 16px !important; line-height: 1.6 !important; text-align: left !important; } .current_issue .obj_issue_toc .heading .description h3:first-of-type, .obj_issue_toc .heading .description h3:first-of-type { font-size: 15px !important; line-height: 1.4 !important; padding: 10px 16px 7px 16px !important; } .current_issue .obj_issue_toc .heading .description h3:first-of-type + p, .obj_issue_toc .heading .description h3:first-of-type + p { padding: 10px 16px 16px 16px !important; font-size: 15px !important; line-height: 1.6 !important; } .current_issue .obj_issue_toc .heading .description h3:nth-of-type(2), .obj_issue_toc .heading .description h3:nth-of-type(2) { margin-top: 22px !important; font-size: 16px !important; } .current_issue .obj_issue_toc .heading .description h3:nth-of-type(2) + p, .obj_issue_toc .heading .description h3:nth-of-type(2) + p { font-size: 15px !important; line-height: 1.6 !important; } .current_issue .obj_issue_toc .heading .description h3:nth-of-type(2) + p + p, .obj_issue_toc .heading .description h3:nth-of-type(2) + p + p { font-size: 12px !important; line-height: 1.45 !important; } /* Article cards: preserve the existing design, only improve readability and spacing on smaller screens. */ .obj_article_summary { margin-bottom: 20px !important; padding: 18px 16px 17px 16px !important; border-radius: 12px !important; } .obj_article_summary .title, .obj_article_summary h3, .obj_article_summary .title a { line-height: 1.35 !important; } } /* MOBILE */ @media (max-width: 600px) { /* Current Issue title */ .current_issue .obj_issue_toc .heading h2, .obj_issue_toc .heading h2 { font-size: 21px !important; line-height: 1.3 !important; margin-bottom: 18px !important; } /* Cover: centered, readable, never stretched */ .current_issue .obj_issue_toc .heading .cover, .obj_issue_toc .heading .cover { float: none !important; width: 100% !important; max-width: 250px !important; margin: 0 auto 18px auto !important; text-align: center !important; } .current_issue .obj_issue_toc .heading .cover img, .obj_issue_toc .heading .cover img { display: block !important; width: 100% !important; max-width: 250px !important; height: auto !important; margin: 0 auto !important; } /* Intro */ .current_issue .obj_issue_toc .heading .description > p:first-of-type, .obj_issue_toc .heading .description > p:first-of-type { margin-bottom: 16px !important; padding: 15px 15px !important; font-size: 15px !important; line-height: 1.6 !important; text-align: left !important; border-left-width: 4px !important; border-radius: 0 7px 7px 0 !important; } /* Highlights */ .current_issue .obj_issue_toc .heading .description h3:first-of-type, .obj_issue_toc .heading .description h3:first-of-type { padding: 9px 14px 7px 14px !important; font-size: 15px !important; line-height: 1.4 !important; } .current_issue .obj_issue_toc .heading .description h3:first-of-type + p, .obj_issue_toc .heading .description h3:first-of-type + p { padding: 9px 14px 14px 14px !important; margin-bottom: 16px !important; font-size: 15px !important; line-height: 1.6 !important; } /* About This Issue */ .current_issue .obj_issue_toc .heading .description h3:nth-of-type(2), .obj_issue_toc .heading .description h3:nth-of-type(2) { margin: 20px 0 9px 0 !important; padding: 0 0 7px 0 !important; font-size: 15px !important; line-height: 1.4 !important; } .current_issue .obj_issue_toc .heading .description h3:nth-of-type(2) + p, .obj_issue_toc .heading .description h3:nth-of-type(2) + p { margin-bottom: 10px !important; font-size: 15px !important; line-height: 1.6 !important; text-align: left !important; } /* Research · Innovation · Educational Technology */ .current_issue .obj_issue_toc .heading .description h3:nth-of-type(2) + p + p, .obj_issue_toc .heading .description h3:nth-of-type(2) + p + p { margin-top: 8px !important; padding: 8px 10px !important; font-size: 11.5px !important; line-height: 1.45 !important; text-align: center !important; } /* Published metadata */ .current_issue .obj_issue_toc .heading .published, .obj_issue_toc .heading .published { margin-top: 15px !important; font-size: 13px !important; } /* Article cards: one clean mobile column */ .obj_article_summary { width: 100% !important; box-sizing: border-box !important; margin-bottom: 18px !important; padding: 16px 14px 15px 14px !important; border-radius: 11px !important; } .obj_article_summary .title, .obj_article_summary h3, .obj_article_summary .title a { font-size: 16px !important; line-height: 1.4 !important; } .obj_article_summary .meta, .obj_article_summary .authors, .obj_article_summary .author { font-size: 13px !important; line-height: 1.5 !important; } /* Keep PDF/button controls comfortable for touch */ .obj_article_summary a, .obj_article_summary button { min-height: 34px; } } /* ========================================================== END — INTEP RESPONSIVE MOBILE OPTIMIZATION ========================================================== */ /* ========================================================== INTEP — CORRECTED ISSUE DESCRIPTION HEADING BOLD ---------------------------------------------------------- ADD-ONLY OVERRIDE The previous selector targeted an OJS heading element that is not used by this issue description. In the current issue description, the labels are paragraph-level content. Expected order: 1. Introductory paragraph 2. Highlights of This Issue 3. Highlights text 4. About This Issue 5. About text ========================================================== */ /* Strongly target the actual paragraph positions */ .obj_issue_toc .description > p:nth-of-type(2), .obj_issue_toc .description > p:nth-of-type(4), .issue_description .description > p:nth-of-type(2), .issue_description .description > p:nth-of-type(4), .obj_issue_toc .description p:nth-child(2), .obj_issue_toc .description p:nth-child(4), .issue_description .description p:nth-child(2), .issue_description .description p:nth-child(4) { font-weight: 700 !important; } /* Cover cases where OJS/editor wraps the heading text in or elements */ .obj_issue_toc .description > p:nth-of-type(2) *, .obj_issue_toc .description > p:nth-of-type(4) *, .issue_description .description > p:nth-of-type(2) *, .issue_description .description > p:nth-of-type(4) { font-weight: 700 !important; } /* Also support common OJS issue-description containers */ .issue_toc .description > p:nth-of-type(2), .issue_toc .description > p:nth-of-type(4), .issue-toc .description > p:nth-of-type(2), .issue-toc .description > p:nth-of-type(4) { font-weight: 700 !important; } /* ========================================================== END — CORRECTED ISSUE DESCRIPTION HEADING BOLD ========================================================== */ /* ========================================================== INTEP — DEFINITIVE ISSUE HEADING BOLD PATCH V2 ---------------------------------------------------------- The live page confirms that "Highlights of This Issue" and "About This Issue" are not being rendered as the paragraph positions targeted by the previous patch. This override targets heading elements H1-H6 INSIDE THE native OJS Issue Description only. It therefore does not alter article titles, sidebar headings, navbar headings, footer headings, or other page content. It also explicitly restores normal weight for paragraphs, so the descriptive body text is not accidentally bolded. ========================================================== */ /* 1. Make ONLY actual heading elements inside the Issue Description bold. */ .current_issue .obj_issue_toc .heading .description :is(h1, h2, h3, h4, h5, h6), .obj_issue_toc .heading .description :is(h1, h2, h3, h4, h5, h6) { font-weight: 700 !important; } /* 2. Force heading descendants to inherit the bold weight. This handles TinyMCE spans that may contain inline font-weight declarations. */ .current_issue .obj_issue_toc .heading .description :is(h1, h2, h3, h4, h5, h6) *, .obj_issue_toc .heading .description :is(h1, h2, h3, h4, h5, h6) * { font-weight: 700 !important; } /* 3. Keep ordinary description paragraphs normal. */ .current_issue .obj_issue_toc .heading .description p, .obj_issue_toc .heading .description p { font-weight: 400 !important; } /* 4. Restore bold only when the heading itself contains a strong/bold child. */ .current_issue .obj_issue_toc .heading .description :is(h1, h2, h3, h4, h5, h6) strong, .current_issue .obj_issue_toc .heading .description :is(h1, h2, h3, h4, h5, h6) b, .obj_issue_toc .heading .description :is(h1, h2, h3, h4, h5, h6) strong, .obj_issue_toc .heading .description :is(h1, h2, h3, h4, h5, h6) b { font-weight: 700 !important; } /* 5. Mobile/tablet: preserve the same bold hierarchy. */ @media (max-width: 900px) { .current_issue .obj_issue_toc .heading .description :is(h1, h2, h3, h4, h5, h6), .obj_issue_toc .heading .description :is(h1, h2, h3, h4, h5, h6), .current_issue .obj_issue_toc .heading .description :is(h1, h2, h3, h4, h5, h6) *, .obj_issue_toc .heading .description :is(h1, h2, h3, h4, h5, h6) * { font-weight: 700 !important; } } /* ========================================================== END — DEFINITIVE ISSUE HEADING BOLD PATCH V2 ========================================================== */ /* ========================================================== INTEP — FINAL ISSUE DESCRIPTION FIX ---------------------------------------------------------- The live OJS HTML shows that: "Highlights of This Issue" "About This Issue" are plain text nodes directly inside: .obj_issue_toc .heading .description CSS cannot select a text node directly. Therefore the correct method is: 1. Make the DESCRIPTION container bold. 2. Reset all

elements inside it to normal weight. This makes only the standalone text nodes bold while the actual descriptive paragraphs remain normal. This patch is intentionally limited to the Issue Description area and does not modify the rest of the site. ========================================================== */ .obj_issue_toc .heading .description { font-weight: 700 !important; } /* Keep all actual body paragraphs normal. */ .obj_issue_toc .heading .description > p { font-weight: 400 !important; } /* Keep inline emphasis in the introductory paragraph working. */ .obj_issue_toc .heading .description > p strong, .obj_issue_toc .heading .description > p b { font-weight: 700 !important; } /* If the labels are later converted to the recommended class-based HTML, they remain bold as well. */ .obj_issue_toc .heading .description .issue-description-heading { font-weight: 700 !important; } /* Recommended heading spacing without changing the existing layout of the issue cover/description. */ .obj_issue_toc .heading .description .issue-description-heading { margin-top: 18px !important; margin-bottom: 8px !important; } /* Mobile: preserve the same behavior. */ @media (max-width: 900px) { .obj_issue_toc .heading .description { font-weight: 700 !important; } .obj_issue_toc .heading .description > p { font-weight: 400 !important; } .obj_issue_toc .heading .description > p strong, .obj_issue_toc .heading .description > p b, .obj_issue_toc .heading .description .issue-description-heading { font-weight: 700 !important; } } /* ========================================================== END — FINAL ISSUE DESCRIPTION FIX ========================================================== */ /* ========================================================== INTEP — MOBILE ISSUE COVER NO-OVERFLOW FIX ---------------------------------------------------------- Purpose: Prevent the Current Issue / Issue cover image from becoming wider than the phone viewport or visually "jebol" outside its content column. IMPORTANT: This is an ADD-ONLY mobile patch. Existing desktop design, article cards, sidebar, typography, colors, header, footer, and other styling are intentionally untouched. ========================================================== */ @media (max-width: 600px) { /* Keep the issue heading inside the available viewport. */ .current_issue .obj_issue_toc .heading, .obj_issue_toc .heading { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow: hidden !important; } /* Cover wrapper must never exceed its parent column. */ .current_issue .obj_issue_toc .heading .cover, .obj_issue_toc .heading .cover { float: none !important; display: block !important; width: 100% !important; max-width: 250px !important; box-sizing: border-box !important; margin-left: auto !important; margin-right: auto !important; padding: 0 !important; overflow: hidden !important; } /* The actual cover image scales proportionally and is constrained by BOTH the cover wrapper and viewport. */ .current_issue .obj_issue_toc .heading .cover img, .obj_issue_toc .heading .cover img { display: block !important; width: auto !important; height: auto !important; max-width: 100% !important; max-height: none !important; box-sizing: border-box !important; margin: 0 auto !important; object-fit: contain !important; } /* Prevent any intrinsic image dimensions from forcing horizontal overflow on very narrow phones. */ .current_issue .obj_issue_toc .heading img, .obj_issue_toc .heading img { max-width: 100% !important; height: auto !important; } /* Keep the description below the cover inside the available mobile content width. */ .current_issue .obj_issue_toc .heading .description, .obj_issue_toc .heading .description { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; overflow-wrap: break-word !important; word-wrap: break-word !important; } } /* Extra protection for very narrow phones. */ @media (max-width: 380px) { .current_issue .obj_issue_toc .heading .cover, .obj_issue_toc .heading .cover { width: 100% !important; max-width: 220px !important; margin-left: auto !important; margin-right: auto !important; } .current_issue .obj_issue_toc .heading .cover img, .obj_issue_toc .heading .cover img { max-width: 100% !important; } } /* ========================================================== END — MOBILE ISSUE COVER NO-OVERFLOW FIX ========================================================== */ /* ========================================================== FINAL VISITORS FLAG COUNTER SIDEBAR ---------------------------------------------------------- ADD-ONLY PATCH ONLY affects #customblock-flag-counter. Existing header, navbar, article cards, other sidebar blocks, footer, fonts, colors and page layout are untouched. Purpose: - Give VISITORS the same two-part sidebar appearance: dark-blue heading + light-blue body. - Make the body span the full sidebar width. - Keep Flag Counter centered and responsive. - Prevent horizontal overflow on mobile. ========================================================== */ /* VISITORS — outer block */ #customblock-flag-counter { width: 100% !important; box-sizing: border-box !important; } /* VISITORS — dark-blue sidebar heading */ #customblock-flag-counter .sidebar-item > .kepala { display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 10px 10px !important; background: linear-gradient( 180deg, #0b5d91 0%, #084a73 55%, #063d61 100% ) !important; color: #ffffff !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.3 !important; text-align: center !important; text-transform: uppercase !important; border: 1px solid #063957 !important; border-radius: 5px 5px 0 0 !important; box-shadow: 0 3px 0 #052f4a, 0 5px 10px rgba(0, 55, 90, 0.16) !important; } /* VISITORS — light-blue body, exactly the same sidebar width */ #customblock-flag-counter .sidebar-item > .badan-gradient { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 !important; padding: 12px 10px !important; background: #eaf6fa !important; border: 1px solid #c5e0e8 !important; border-top: 0 !important; border-radius: 0 0 5px 5px !important; text-align: center !important; overflow: hidden !important; } /* Flag Counter image area */ #customblock-flag-counter .flagcounter-container { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; overflow: hidden !important; } /* Flag Counter link */ #customblock-flag-counter .flagcounter-container > a { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; margin: 0 auto !important; padding: 0 !important; text-align: center !important; } /* Flag Counter itself — centered, never wider than sidebar */ #customblock-flag-counter .flagcounter-image { display: inline-block !important; width: auto !important; max-width: 100% !important; height: auto !important; margin: 0 auto !important; padding: 0 !important; border: 0 !important; box-sizing: border-box !important; vertical-align: middle !important; } /* Mobile: only resize the Visitors block when necessary. No other sidebar/component is touched. */ @media (max-width: 600px) { #customblock-flag-counter { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #customblock-flag-counter .sidebar-item > .kepala { width: 100% !important; padding: 9px 8px !important; font-size: 13px !important; } #customblock-flag-counter .sidebar-item > .badan-gradient { width: 100% !important; max-width: 100% !important; padding: 9px 5px !important; box-sizing: border-box !important; } #customblock-flag-counter .flagcounter-container, #customblock-flag-counter .flagcounter-container > a { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } #customblock-flag-counter .flagcounter-image { width: auto !important; max-width: 100% !important; height: auto !important; } } /* Very small phones */ @media (max-width: 380px) { #customblock-flag-counter .sidebar-item > .kepala { font-size: 12px !important; padding: 8px 6px !important; } #customblock-flag-counter .sidebar-item > .badan-gradient { padding: 8px 3px !important; } } /* ========================================================== END — FINAL VISITORS FLAG COUNTER SIDEBAR ========================================================== */ /* ========================================================== JITP — EDITORIAL TEAM ---------------------------------------------------------- ADD-ONLY SECTION This section is appended to the latest JITP stylesheet. Existing CSS above is NOT changed. Scope: only the custom Editorial Team HTML using .jitp-editorial-team Does not style table headers or Reviewer section. ========================================================== */ .jitp-editorial-team { width: 100%; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; color: #17324d; } .jitp-editorial-team *, .jitp-editorial-team *::before, .jitp-editorial-team *::after { box-sizing: border-box; } .jitp-editorial-team .editorial-team-section { width: 100%; margin: 0; padding: 0; } /* Editorial Team heading only */ .jitp-editorial-team .editorial-team-section > h3 { color: #003b5c; font-family: Arial, Helvetica, sans-serif; font-size: 21px; font-weight: 700; line-height: 1.3; margin: 28px 0 16px; padding: 0 0 10px 14px; border-left: 5px solid #20b8c8; border-bottom: 1px solid #d9edf1; } /* Individual editorial member card */ .jitp-editorial-team .member { position: relative; width: 100%; margin: 0 0 15px; padding: 19px 22px; background: #ffffff; border: 1px solid #dceff3; border-left: 5px solid #20b8c8; border-radius: 12px; box-shadow: 0 5px 16px rgba(0, 59, 92, 0.07); transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .jitp-editorial-team .member:hover { transform: translateY(-2px); border-left-color: #003b5c; box-shadow: 0 9px 24px rgba(0, 59, 92, 0.12); } /* Position / role */ .jitp-editorial-team .member-role { display: inline-block; margin: 0 0 8px; padding: 4px 10px; color: #00677c; background: #e8f8fa; border: 1px solid #c7edf1; border-radius: 999px; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: 700; line-height: 1.35; } /* Name */ .jitp-editorial-team .member-name { margin: 0 0 5px; color: #003b5c; font-family: Arial, Helvetica, sans-serif; font-size: 18px; font-weight: 700; line-height: 1.45; } /* Affiliation */ .jitp-editorial-team .member-affiliation { margin: 0; color: #4c6273; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: 400; line-height: 1.6; } /* Academic profile icon row */ .jitp-editorial-team .profile-links { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-top: 11px; } /* Clickable logo button */ .jitp-editorial-team .profile-links a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 30px; padding: 5px; background: #f4fcfd; border: 1px solid #c9e9ee; border-radius: 7px; text-decoration: none !important; box-shadow: none; transition: transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } /* Logo hover */ .jitp-editorial-team .profile-links a:hover, .jitp-editorial-team .profile-links a:focus { transform: translateY(-1px); background: #e0f6f8; border-color: #20b8c8; text-decoration: none !important; box-shadow: 0 3px 8px rgba(0, 59, 92, 0.10); } /* Google Scholar / ORCID / Scopus logos */ .jitp-editorial-team .profile-links img { display: block !important; width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } /* Preserve recognizable profile-link colors */ .jitp-editorial-team .profile-links a[aria-label="Google Scholar"] { color: #4285f4 !important; } .jitp-editorial-team .profile-links a[aria-label="ORCID"] { color: #a6ce39 !important; } .jitp-editorial-team .profile-links a[aria-label="Scopus"] { color: #e9711c !important; } /* ---------------------------------------------------------- RESPONSIVE — TABLET ---------------------------------------------------------- */ @media (max-width: 900px) { .jitp-editorial-team .member { padding: 17px 18px; border-radius: 10px; } .jitp-editorial-team .member-name { font-size: 17px; } .jitp-editorial-team .member-affiliation { font-size: 13.5px; } } /* ---------------------------------------------------------- RESPONSIVE — MOBILE ---------------------------------------------------------- */ @media (max-width: 600px) { .jitp-editorial-team .editorial-team-section > h3 { margin-top: 22px; margin-bottom: 13px; padding-left: 11px; padding-bottom: 8px; border-left-width: 4px; font-size: 18px; } .jitp-editorial-team .member { margin-bottom: 12px; padding: 15px 14px; border-left-width: 4px; border-radius: 9px; box-shadow: 0 4px 13px rgba(0, 59, 92, 0.06); } .jitp-editorial-team .member-name { font-size: 16px; line-height: 1.4; } .jitp-editorial-team .member-affiliation { font-size: 13px; line-height: 1.55; } .jitp-editorial-team .profile-links { gap: 5px; margin-top: 9px; } .jitp-editorial-team .profile-links a { width: 31px; height: 28px; padding: 4px; border-radius: 6px; } .jitp-editorial-team .profile-links img { width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; } } /* ---------------------------------------------------------- VERY SMALL MOBILE ---------------------------------------------------------- */ @media (max-width: 360px) { .jitp-editorial-team .member { padding: 13px 12px; } .jitp-editorial-team .member-name { font-size: 15px; } .jitp-editorial-team .member-affiliation { font-size: 12.5px; } } /* ---------------------------------------------------------- ACCESSIBILITY ---------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { .jitp-editorial-team .member, .jitp-editorial-team .profile-links a { transition: none; } } /* ========================================================== END — EDITORIAL TEAM ADD-ONLY SECTION ========================================================== */ /* ========================================================== JITP — EDITORIAL TEAM COMPACT CARDS + PROFILE ICONS + FLAGS ADD-ONLY OVERRIDE — DOES NOT CHANGE OTHER SITE COMPONENTS Does not style table headers or Reviewer section. ========================================================== */ .jitp-editorial-team .member { display:block; width:100%; margin:0 0 10px !important; padding:11px 14px !important; border-left-width:4px !important; border-radius:8px !important; box-shadow:0 3px 10px rgba(0,59,92,.06) !important; } .jitp-editorial-team .member-role { margin:0 0 4px !important; padding:3px 8px !important; font-size:10.5px !important; line-height:1.25 !important; } .jitp-editorial-team .member-name-row { display:flex !important; align-items:center !important; flex-wrap:wrap !important; gap:8px !important; width:100% !important; margin:0 !important; padding:0 !important; } .jitp-editorial-team .member-name { flex:0 1 auto !important; min-width:0 !important; margin:0 !important; font-size:16px !important; line-height:1.35 !important; } .jitp-editorial-team .member-name-row .profile-links { display:inline-flex !important; flex:0 0 auto !important; align-items:center !important; flex-wrap:nowrap !important; gap:4px !important; margin:0 !important; padding:0 !important; } .jitp-editorial-team .member-name-row .profile-links a { display:inline-flex !important; align-items:center !important; justify-content:center !important; width:27px !important; height:25px !important; min-width:27px !important; padding:3px !important; border-radius:5px !important; background:#f4fcfd !important; border:1px solid #c9e9ee !important; box-shadow:none !important; } .jitp-editorial-team .member-name-row .profile-links img { display:block !important; width:15px !important; height:15px !important; max-width:15px !important; max-height:15px !important; object-fit:contain !important; margin:0 !important; padding:0 !important; border:0 !important; box-shadow:none !important; } .jitp-editorial-team .affiliation-row { display:flex !important; align-items:center !important; gap:7px !important; width:100% !important; margin:3px 0 0 !important; padding:0 !important; } .jitp-editorial-team .member-affiliation { flex:0 1 auto !important; min-width:0 !important; margin:0 !important; font-size:12.5px !important; line-height:1.4 !important; } .jitp-editorial-team .country-flag { display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 0 auto !important; width:24px !important; height:18px !important; margin:0 !important; padding:0 !important; font-family:"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji",sans-serif !important; font-size:17px !important; line-height:1 !important; } .jitp-editorial-team .member > .profile-links { display:none !important; } .jitp-editorial-team .member:hover { transform:translateY(-1px) !important; box-shadow:0 5px 14px rgba(0,59,92,.09) !important; } @media (max-width:900px) { .jitp-editorial-team .member { margin-bottom:9px !important; padding:10px 13px !important; } .jitp-editorial-team .member-name { font-size:15.5px !important; } } @media (max-width:600px) { .jitp-editorial-team .member { margin-bottom:8px !important; padding:9px 11px !important; border-left-width:4px !important; } .jitp-editorial-team .member-name-row { gap:6px !important; } .jitp-editorial-team .member-name { font-size:14.5px !important; } .jitp-editorial-team .member-name-row .profile-links { gap:3px !important; } .jitp-editorial-team .member-name-row .profile-links a { width:25px !important; height:23px !important; min-width:25px !important; } .jitp-editorial-team .member-name-row .profile-links img { width:14px !important; height:14px !important; max-width:14px !important; max-height:14px !important; } .jitp-editorial-team .affiliation-row { gap:5px !important; margin-top:2px !important; } .jitp-editorial-team .member-affiliation { font-size:11.5px !important; } .jitp-editorial-team .country-flag { width:22px !important; height:17px !important; font-size:16px !important; } } @media (max-width:360px) { .jitp-editorial-team .member { padding:8px 10px !important; } .jitp-editorial-team .member-name { font-size:13.5px !important; } .jitp-editorial-team .member-affiliation { font-size:11px !important; } } /* ========================================================== JITP — EDITORIAL TEAM FLAG IMAGE FIX ---------------------------------------------------------- ADD-ONLY CORRECTION The OJS rich-text editor converts flag emoji characters into "??????" in the saved HTML. Use flag image files instead. No other component is modified. ========================================================== */ .jitp-editorial-team .country-flag { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 24px !important; height: 17px !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; text-decoration: none !important; } .jitp-editorial-team .country-flag img { display: block !important; width: 24px !important; height: 16px !important; max-width: 24px !important; max-height: 16px !important; min-width: 24px !important; min-height: 16px !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; border: 1px solid rgba(0, 59, 92, 0.12) !important; border-radius: 2px !important; box-shadow: none !important; } @media (max-width: 600px) { .jitp-editorial-team .country-flag { width: 22px !important; height: 15px !important; } .jitp-editorial-team .country-flag img { width: 22px !important; height: 15px !important; max-width: 22px !important; max-height: 15px !important; min-width: 22px !important; min-height: 15px !important; } } /* ========================================================== END — EDITORIAL TEAM FLAG IMAGE FIX ========================================================== */ /* ========================================================== JITP — REVIEWERS SUBMENU / REVIEWER CARDS ---------------------------------------------------------- ADD-ONLY SECTION - Mirrors the Editorial Team visual model - Only affects .jitp-reviewers - Does not modify Editorial Team, Reviewer tables, navbar, header, sidebar, footer, or article cards. ========================================================== */ .jitp-reviewers { width: 100%; box-sizing: border-box; margin: 0; padding: 0; font-family: Arial, Helvetica, sans-serif; } .jitp-reviewers .reviewers-section { width: 100%; margin: 0; padding: 0; } .jitp-reviewers .reviewers-section > h3 { margin: 28px 0 16px !important; padding: 0 0 9px 12px !important; border-left: 5px solid #087ea4 !important; border-bottom: 1px solid #d7e8ef !important; color: #003b5c !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 20px !important; font-weight: 700 !important; line-height: 1.35 !important; } .jitp-reviewers .member { display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 0 0 10px !important; padding: 11px 14px !important; background: linear-gradient( 135deg, #ffffff 0%, #f7fcfe 52%, #eef9fc 100% ) !important; border: 1px solid #d2e7ee !important; border-left: 4px solid #087ea4 !important; border-radius: 8px !important; box-shadow: 0 3px 10px rgba(0,59,92,.06) !important; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .jitp-reviewers .member:hover { transform: translateY(-1px) !important; border-color: #b7dbe5 !important; border-left-color: #003b5c !important; box-shadow: 0 5px 14px rgba(0,59,92,.09) !important; } .jitp-reviewers .member-role { display: inline-block !important; margin: 0 0 4px !important; padding: 3px 8px !important; color: #00677c !important; background: #e8f8fa !important; border: 1px solid #c7edf1 !important; border-radius: 999px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 10.5px !important; font-weight: 700 !important; line-height: 1.25 !important; } .jitp-reviewers .member-name-row { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } .jitp-reviewers .member-name { flex: 0 1 auto !important; min-width: 0 !important; margin: 0 !important; color: #003b5c !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1.35 !important; } .jitp-reviewers .profile-links { display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; flex-wrap: nowrap !important; gap: 4px !important; margin: 0 !important; padding: 0 !important; } .jitp-reviewers .profile-links a { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 27px !important; height: 25px !important; min-width: 27px !important; padding: 3px !important; background: #f4fcfd !important; border: 1px solid #c9e9ee !important; border-radius: 5px !important; text-decoration: none !important; box-shadow: none !important; transition: transform .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease; } .jitp-reviewers .profile-links a:hover, .jitp-reviewers .profile-links a:focus { transform: translateY(-1px) !important; background: #e0f6f8 !important; border-color: #20b8c8 !important; text-decoration: none !important; box-shadow: 0 3px 8px rgba(0,59,92,.10) !important; } .jitp-reviewers .profile-links img { display: block !important; width: 15px !important; height: 15px !important; max-width: 15px !important; max-height: 15px !important; min-width: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; } .jitp-reviewers .profile-links a[aria-label="Google Scholar"] { color: #4285f4 !important; } .jitp-reviewers .profile-links a[aria-label="SINTA ID"] { color: #0b7189 !important; } .jitp-reviewers .profile-links a[aria-label="ORCID"] { color: #a6ce39 !important; } .jitp-reviewers .profile-links a[aria-label="Scopus"] { color: #e9711c !important; } .jitp-reviewers .profile-links a[aria-label="SINTA ID"] img { width: 15px !important; height: 15px !important; max-width: 15px !important; max-height: 15px !important; object-fit: contain !important; } .jitp-reviewers .affiliation-row { display: flex !important; align-items: center !important; gap: 7px !important; width: 100% !important; margin: 3px 0 0 !important; padding: 0 !important; } .jitp-reviewers .member-affiliation { flex: 0 1 auto !important; min-width: 0 !important; margin: 0 !important; color: #4c6273 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12.5px !important; font-weight: 400 !important; line-height: 1.4 !important; } .jitp-reviewers .country-flag { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; width: 24px !important; height: 17px !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; text-decoration: none !important; } .jitp-reviewers .country-flag img { display: block !important; width: 24px !important; height: 16px !important; max-width: 24px !important; max-height: 16px !important; min-width: 24px !important; min-height: 16px !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; border: 1px solid rgba(0,59,92,.12) !important; border-radius: 2px !important; box-shadow: none !important; } @media (max-width: 900px) { .jitp-reviewers .reviewers-section > h3 { font-size: 19px !important; } .jitp-reviewers .member { margin-bottom: 9px !important; padding: 10px 13px !important; } .jitp-reviewers .member-name { font-size: 15.5px !important; } .jitp-reviewers .member-affiliation { font-size: 12.5px !important; } } @media (max-width: 600px) { .jitp-reviewers .reviewers-section > h3 { margin-top: 22px !important; margin-bottom: 13px !important; padding-left: 11px !important; padding-bottom: 8px !important; border-left-width: 4px !important; font-size: 18px !important; } .jitp-reviewers .member { margin-bottom: 8px !important; padding: 9px 11px !important; border-left-width: 4px !important; border-radius: 8px !important; } .jitp-reviewers .member-name-row { gap: 6px !important; } .jitp-reviewers .member-name { font-size: 14.5px !important; } .jitp-reviewers .profile-links { gap: 3px !important; } .jitp-reviewers .profile-links a { width: 25px !important; height: 23px !important; min-width: 25px !important; } .jitp-reviewers .profile-links img, .jitp-reviewers .profile-links a[aria-label="SINTA ID"] img { width: 14px !important; height: 14px !important; max-width: 14px !important; max-height: 14px !important; } .jitp-reviewers .affiliation-row { gap: 5px !important; margin-top: 2px !important; } .jitp-reviewers .member-affiliation { font-size: 11.5px !important; line-height: 1.4 !important; } .jitp-reviewers .country-flag { width: 22px !important; height: 15px !important; } .jitp-reviewers .country-flag img { width: 22px !important; height: 15px !important; max-width: 22px !important; max-height: 15px !important; min-width: 22px !important; min-height: 15px !important; } } @media (max-width: 360px) { .jitp-reviewers .member { padding: 8px 10px !important; } .jitp-reviewers .member-name { font-size: 13.5px !important; } .jitp-reviewers .member-affiliation { font-size: 11px !important; } } @media (prefers-reduced-motion: reduce) { .jitp-reviewers .member, .jitp-reviewers .profile-links a { transition: none !important; } } /* ========================================================== END — REVIEWERS SUBMENU / REVIEWER CARDS ========================================================== */ /* ========================================================== JITP — CURRENT ISSUE ARTICLE INFO FINAL ADJUSTMENT ---------------------------------------------------------- ONLY adjusts: 1. Institution + country flag beside author 2. Abstract Views / Downloads icons and labels 3. PDF button alignment 4. Small gap between Current Issue 3D article cards Existing header, navbar, sidebar, footer, Editorial Team, Reviewers and other components remain untouched. ========================================================== */ /* ---------------------------------------------------------- 1. INSTITUTION + COUNTRY FLAG — MANUAL DISPLAY REMOVED Institution/country/flag are no longer hard-coded in issue cards. ---------------------------------------------------------- */ /* ---------------------------------------------------------- 2. ABSTRACT VIEWS + DOWNLOADS + PDF IN ONE ROW ---------------------------------------------------------- */ .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 8px !important; margin-top: 5px !important; margin-bottom: 0 !important; padding: 0 !important; } /* Abstract Views */ .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links::before { content: "\f06e Abstract Views" !important; display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important; color: #315f78 !important; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome, Arial, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.2 !important; white-space: nowrap !important; } /* Downloads */ .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links::after { content: "\f019 Downloads" !important; display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important; color: #315f78 !important; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome, Arial, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.2 !important; white-space: nowrap !important; } /* Keep the PDF button after both statistics */ .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links li { display: inline-flex !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; } .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links a { margin: 0 !important; } /* ---------------------------------------------------------- 3. SMALLER GAP BETWEEN 3D ARTICLE CARDS ---------------------------------------------------------- */ .obj_issue_toc .cmp_article_list .obj_article_summary { margin-bottom: 12px !important; } .obj_issue_toc .cmp_article_list > li:last-child .obj_article_summary { margin-bottom: 0 !important; } /* ---------------------------------------------------------- 4. RESPONSIVE ---------------------------------------------------------- */ @media (max-width: 900px) { .obj_issue_toc .cmp_article_list .obj_article_summary .authors { padding-bottom: 22px !important; } .obj_issue_toc .cmp_article_list .obj_article_summary .authors::after { font-size: 12px !important; background-size: 17px 11px !important; padding-right: 22px !important; } .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links { gap: 7px !important; margin-top: 5px !important; } .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links::before, .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links::after { font-size: 11.5px !important; } .obj_issue_toc .cmp_article_list .obj_article_summary { margin-bottom: 11px !important; } } @media (max-width: 600px) { .obj_issue_toc .cmp_article_list .obj_article_summary .authors { padding-bottom: 21px !important; } .obj_issue_toc .cmp_article_list .obj_article_summary .authors::after { font-size: 11px !important; background-size: 16px 11px !important; padding-right: 20px !important; } .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links { gap: 6px !important; flex-wrap: wrap !important; margin-top: 4px !important; } .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links::before, .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links::after { font-size: 10.5px !important; } .obj_issue_toc .cmp_article_list .obj_article_summary { margin-bottom: 9px !important; } } @media (max-width: 360px) { .obj_issue_toc .cmp_article_list .obj_article_summary .authors::after { font-size: 10.5px !important; background-size: 15px 10px !important; padding-right: 19px !important; } .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links { gap: 5px !important; } .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links::before, .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links::after { font-size: 10px !important; } .obj_issue_toc .cmp_article_list .obj_article_summary { margin-bottom: 8px !important; } } /* ========================================================== END — CURRENT ISSUE ARTICLE INFO FINAL ADJUSTMENT ========================================================== */ /* ========================================================== JITP — FINAL ORDER FIX Abstract Views → Downloads → PDF ========================================================== */ .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links::before { content: "\f06e Abstract Views \f019 Downloads" !important; display: inline-flex !important; align-items: center !important; flex: 0 0 auto !important; color: #315f78 !important; font-family: "Font Awesome 5 Free", "Font Awesome 6 Free", FontAwesome, Arial, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.2 !important; white-space: pre !important; } .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links::after { content: none !important; display: none !important; } @media (max-width: 900px) { .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links::before { font-size: 11.5px !important; } } @media (max-width: 600px) { .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links::before { font-size: 10.5px !important; } } @media (max-width: 360px) { .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links::before { font-size: 10px !important; } } /* ========================================================== END — FINAL ORDER FIX ========================================================== */ /* ========================================================== JITP — REAL OJS ARTICLE STATISTICS DISPLAY ---------------------------------------------------------- IMPORTANT: This CSS does NOT create/fake statistics. It styles the REAL statistics HTML produced by the Article Statistics Display plugin for OJS 3.3. Required plugin: Article Statistics Display https://github.com/ojs-services/articleStatisticsDisplay Required OJS component: Usage Statistics Plugin must be enabled. Display order: Abstract Views → Downloads → PDF ========================================================== */ /* Remove the previous CSS-generated/fake statistics text. The real values will come from OJS/plugin HTML. */ .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links::before, .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links::after { content: none !important; display: none !important; } /* Put the article-summary children in a controlled vertical flow so the REAL statistics can appear before the PDF button. */ .obj_issue_toc .cmp_article_list .obj_article_summary { display: flex !important; flex-direction: column !important; } /* Preserve the existing article content order. */ .obj_issue_toc .cmp_article_list .obj_article_summary .title { order: 1 !important; } .obj_issue_toc .cmp_article_list .obj_article_summary .meta { order: 2 !important; } /* Real statistics injected by the plugin hook: Templates::Issue::Issue::Article */ .obj_issue_toc .cmp_article_list .obj_article_summary .asd-stats-summary { order: 3 !important; display: inline-flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 10px !important; width: fit-content !important; max-width: 100% !important; margin: 5px 0 0 0 !important; padding: 0 !important; color: #315f78 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.2 !important; } /* Real Abstract Views counter */ .obj_issue_toc .cmp_article_list .obj_article_summary .asd-stats-summary .asd-views { display: inline-flex !important; align-items: center !important; gap: 4px !important; color: #315f78 !important; white-space: nowrap !important; } /* Real download counter */ .obj_issue_toc .cmp_article_list .obj_article_summary .asd-stats-summary .asd-downloads { display: inline-flex !important; align-items: center !important; gap: 4px !important; color: #315f78 !important; white-space: nowrap !important; } /* Plugin icons */ .obj_issue_toc .cmp_article_list .obj_article_summary .asd-stats-summary .asd-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; font-size: 13px !important; line-height: 1 !important; } /* Real numbers */ .obj_issue_toc .cmp_article_list .obj_article_summary .asd-stats-summary .asd-count { font-weight: 700 !important; color: #164b73 !important; } /* PDF stays after the REAL statistics */ .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links { order: 4 !important; display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 8px !important; width: fit-content !important; max-width: 100% !important; margin-top: 6px !important; } /* Keep the PDF button unchanged visually */ .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links li { display: inline-flex !important; flex: 0 0 auto !important; margin: 0 !important; padding: 0 !important; } /* ---------------------------------------------------------- RESPONSIVE ---------------------------------------------------------- */ @media (max-width: 900px) { .obj_issue_toc .cmp_article_list .obj_article_summary .asd-stats-summary { gap: 8px !important; font-size: 11.5px !important; } .obj_issue_toc .cmp_article_list .obj_article_summary .asd-stats-summary .asd-icon { font-size: 12px !important; } .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links { gap: 7px !important; margin-top: 5px !important; } } @media (max-width: 600px) { .obj_issue_toc .cmp_article_list .obj_article_summary .asd-stats-summary { gap: 7px !important; font-size: 11px !important; flex-wrap: wrap !important; } .obj_issue_toc .cmp_article_list .obj_article_summary .asd-stats-summary .asd-icon { font-size: 11px !important; } .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links { gap: 6px !important; margin-top: 4px !important; } } @media (max-width: 360px) { .obj_issue_toc .cmp_article_list .obj_article_summary .asd-stats-summary { gap: 6px !important; font-size: 10.5px !important; } .obj_issue_toc .cmp_article_list .obj_article_summary .galleys_links { gap: 5px !important; } } /* ========================================================== END — REAL OJS ARTICLE STATISTICS DISPLAY ========================================================== */