/* ==========================================================================
JRTN GLOBAL STYLESHEET
Journal of Rural and Tropical Nursing
========================================================================== */
/* ==========================================================================
1–2. JRTN HEADER, NAVIGATION, AND ISSN — FINAL REDESIGN
========================================================================== */
/* --------------------------------------------------------------------------
HEADER FOUNDATION
-------------------------------------------------------------------------- */
.pkp_structure_head {
position: relative !important;
z-index: 1000 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
background:
linear-gradient(
112deg,
#183ea8 0%,
#1766c9 58%,
#0aa1d8 100%
) !important;
border: 0 !important;
box-shadow:
0 6px 22px rgba(15, 45, 92, 0.14) !important;
font-family: inherit !important;
}
.pkp_structure_head *,
.pkp_structure_head *::before,
.pkp_structure_head *::after {
box-sizing: border-box !important;
}
.pkp_head_wrapper {
position: relative !important;
width: 100% !important;
max-width: 1160px !important;
min-height: 166px !important;
margin: 0 auto !important;
padding: 0 26px !important;
}
/* --------------------------------------------------------------------------
DESKTOP BRAND AREA
-------------------------------------------------------------------------- */
.pkp_site_name_wrapper {
position: relative !important;
display: flex !important;
width: 100% !important;
height: 112px !important;
align-items: center !important;
margin: 0 !important;
padding: 18px 0 8px !important;
}
.pkp_site_name {
display: block !important;
width: auto !important;
max-width: 310px !important;
margin: 0 !important;
padding: 0 !important;
text-align: left !important;
}
.pkp_site_name > a,
.pkp_site_name .is_img {
display: flex !important;
width: auto !important;
align-items: center !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 0 !important;
}
.pkp_site_name img {
display: block !important;
width: auto !important;
max-width: 255px !important;
height: auto !important;
max-height: 74px !important;
margin: 0 !important;
object-fit: contain !important;
}
/* --------------------------------------------------------------------------
ISSN — DESKTOP
-------------------------------------------------------------------------- */
.pkp_head_wrapper::after {
position: absolute !important;
top: 70px !important;
right: 26px !important;
display: inline-flex !important;
max-width: 58% !important;
align-items: center !important;
justify-content: flex-end !important;
content:
"E-ISSN: APPLICATION IN PROGRESS | P-ISSN: APPLICATION IN PROGRESS"
!important;
color: rgba(255, 255, 255, 0.96) !important;
font-family: inherit !important;
font-size: 0.66rem !important;
font-weight: 750 !important;
letter-spacing: 0.025em !important;
line-height: 1.4 !important;
text-align: right !important;
text-transform: uppercase !important;
white-space: nowrap !important;
pointer-events: none !important;
}
/* --------------------------------------------------------------------------
USER NAVIGATION — REGISTER AND LOGIN
-------------------------------------------------------------------------- */
.pkp_navigation_user_wrapper {
position: absolute !important;
top: 10px !important;
right: 26px !important;
margin: 0 !important;
padding: 0 !important;
}
.pkp_navigation_user {
display: flex !important;
gap: 5px !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
}
.pkp_navigation_user > li {
margin: 0 !important;
padding: 0 !important;
}
.pkp_navigation_user > li > a {
display: inline-flex !important;
min-height: 31px !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 6px 10px !important;
color: rgba(255, 255, 255, 0.9) !important;
text-decoration: none !important;
background: transparent !important;
border: 1px solid transparent !important;
border-radius: 5px !important;
font-family: inherit !important;
font-size: 0.76rem !important;
font-weight: 600 !important;
line-height: 1.2 !important;
transition:
background-color 160ms ease,
border-color 160ms ease,
color 160ms ease !important;
}
.pkp_navigation_user > li:first-child > a {
background: rgba(255, 255, 255, 0.08) !important;
border-color: rgba(255, 255, 255, 0.32) !important;
}
.pkp_navigation_user > li > a:hover,
.pkp_navigation_user > li > a:focus {
color: #ffffff !important;
background: rgba(255, 255, 255, 0.15) !important;
border-color: rgba(255, 255, 255, 0.4) !important;
}
/* --------------------------------------------------------------------------
PRIMARY NAVIGATION BAR
-------------------------------------------------------------------------- */
.pkp_navigation_primary_row {
position: relative !important;
width: auto !important;
margin: 0 -26px !important;
padding: 0 26px !important;
background: rgba(7, 31, 96, 0.17) !important;
border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
border-bottom: 1px solid rgba(7, 35, 92, 0.08) !important;
}
.pkp_navigation_primary_wrapper {
display: flex !important;
width: 100% !important;
min-height: 54px !important;
align-items: stretch !important;
margin: 0 !important;
padding: 0 !important;
}
.pkp_navigation_primary {
display: flex !important;
gap: 3px !important;
align-items: stretch !important;
margin: 0 !important;
padding: 0 !important;
}
.pkp_navigation_primary > li {
position: relative !important;
display: flex !important;
align-items: stretch !important;
margin: 0 !important;
padding: 0 !important;
}
.pkp_navigation_primary > li > a {
position: relative !important;
display: inline-flex !important;
min-height: 54px !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 14px !important;
color: rgba(255, 255, 255, 0.92) !important;
text-decoration: none !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
font-family: inherit !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
line-height: 1.2 !important;
transition:
color 160ms ease,
background-color 160ms ease !important;
}
.pkp_navigation_primary > li > a::after {
position: absolute !important;
right: 13px !important;
bottom: 0 !important;
left: 13px !important;
display: block !important;
height: 3px !important;
content: "" !important;
background: #ffffff !important;
border-radius: 3px 3px 0 0 !important;
transform: scaleX(0) !important;
transform-origin: center !important;
transition: transform 170ms ease !important;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
color: #ffffff !important;
background: rgba(255, 255, 255, 0.07) !important;
}
.pkp_navigation_primary > li > a:hover::after,
.pkp_navigation_primary > li > a:focus::after,
.pkp_navigation_primary > li.current > a::after,
.pkp_navigation_primary > li > a[aria-current="page"]::after {
transform: scaleX(1) !important;
}
.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li > a[aria-current="page"] {
color: #ffffff !important;
font-weight: 700 !important;
}
/* --------------------------------------------------------------------------
SUBMIT MANUSCRIPT — PRIMARY CTA
Akan aktif otomatis setelah link ditambahkan ke Primary Navigation
-------------------------------------------------------------------------- */
.pkp_navigation_primary
> li
> a[href*="/jrtn/submission"],
.pkp_navigation_primary
> li
> a[href$="/submission"] {
min-height: 36px !important;
align-self: center !important;
margin: 9px 0 9px 9px !important;
padding: 0 15px !important;
color: #174f98 !important;
background: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.95) !important;
border-radius: 6px !important;
box-shadow:
0 4px 12px rgba(7, 35, 92, 0.16) !important;
font-size: 0.8rem !important;
font-weight: 750 !important;
}
.pkp_navigation_primary
> li
> a[href*="/jrtn/submission"]::after,
.pkp_navigation_primary
> li
> a[href$="/submission"]::after {
display: none !important;
content: none !important;
}
.pkp_navigation_primary
> li
> a[href*="/jrtn/submission"]:hover,
.pkp_navigation_primary
> li
> a[href*="/jrtn/submission"]:focus,
.pkp_navigation_primary
> li
> a[href$="/submission"]:hover,
.pkp_navigation_primary
> li
> a[href$="/submission"]:focus {
color: #123f7c !important;
background: #f4f8fc !important;
border-color: #ffffff !important;
transform: translateY(-1px) !important;
}
/* --------------------------------------------------------------------------
SEARCH BUTTON
-------------------------------------------------------------------------- */
.pkp_search {
display: flex !important;
align-items: center !important;
margin: 0 0 0 auto !important;
padding: 0 !important;
}
.pkp_search .search_prompt {
display: inline-flex !important;
min-height: 36px !important;
align-items: center !important;
justify-content: center !important;
margin: 9px 0 !important;
padding: 0 12px !important;
color: rgba(255, 255, 255, 0.94) !important;
text-decoration: none !important;
background: rgba(255, 255, 255, 0.07) !important;
border: 1px solid rgba(255, 255, 255, 0.26) !important;
border-radius: 6px !important;
font-family: inherit !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
transition:
background-color 160ms ease,
border-color 160ms ease !important;
}
.pkp_search .search_prompt:hover,
.pkp_search .search_prompt:focus {
color: #ffffff !important;
background: rgba(255, 255, 255, 0.15) !important;
border-color: rgba(255, 255, 255, 0.42) !important;
}
/* --------------------------------------------------------------------------
ABOUT DROPDOWN — STABLE HOVER BRIDGE
Dropdown sits flush beneath the trigger and remains reachable by mouse
and keyboard without crossing an inactive empty gap.
-------------------------------------------------------------------------- */
.pkp_navigation_primary ul {
min-width: 255px !important;
margin: 0 !important;
padding: 8px !important;
background: #ffffff !important;
border: 1px solid #d7e1ea !important;
border-radius: 8px !important;
box-shadow:
0 14px 32px rgba(17, 38, 68, 0.17) !important;
}
.pkp_navigation_primary ul li {
margin: 0 !important;
padding: 0 !important;
}
.pkp_navigation_primary ul a {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 10px 11px !important;
color: #24364c !important;
text-decoration: none !important;
background: transparent !important;
border: 0 !important;
border-radius: 5px !important;
font-family: inherit !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
line-height: 1.4 !important;
}
.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus {
color: #174f98 !important;
background: #eef5fb !important;
}
@media (min-width: 992px) {
.pkp_navigation_primary > li {
position: relative !important;
}
.pkp_navigation_primary > li > ul {
position: absolute !important;
/* Overlap the trigger by 1px so there is no inactive gap. */
top: calc(100% - 1px) !important;
left: 0 !important;
z-index: 300 !important;
margin: 0 !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
transform: translateY(3px) !important;
transition:
opacity 140ms ease,
transform 140ms ease,
visibility 0ms linear 180ms !important;
}
/* Invisible bridge extends upward into the About trigger area. */
.pkp_navigation_primary > li > ul::before {
position: absolute !important;
top: -10px !important;
right: 0 !important;
left: 0 !important;
display: block !important;
height: 10px !important;
content: "" !important;
background: transparent !important;
pointer-events: auto !important;
}
.pkp_navigation_primary > li:hover > ul,
.pkp_navigation_primary > li:focus-within > ul {
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: translateY(0) !important;
transition-delay: 0ms !important;
}
}
/* --------------------------------------------------------------------------
KEYBOARD ACCESSIBILITY
-------------------------------------------------------------------------- */
.pkp_structure_head a:focus-visible,
.pkp_site_nav_toggle:focus-visible {
outline: 3px solid rgba(255, 255, 255, 0.48) !important;
outline-offset: 2px !important;
}
/* ==========================================================================
MOBILE AND TABLET HEADER
========================================================================== */
@media (max-width: 991px) {
/* ----------------------------------------------------------------------
MOBILE HEADER FOUNDATION
---------------------------------------------------------------------- */
.pkp_structure_head {
min-height: 96px !important;
box-shadow:
0 5px 18px rgba(15, 45, 92, 0.16) !important;
}
.pkp_head_wrapper {
width: 100% !important;
max-width: none !important;
min-height: 96px !important;
margin: 0 !important;
padding: 0 !important;
}
/* ----------------------------------------------------------------------
MOBILE BRANDING BAR — 64PX
---------------------------------------------------------------------- */
.pkp_site_name_wrapper {
position: relative !important;
display: flex !important;
width: 100% !important;
height: 64px !important;
align-items: center !important;
margin: 0 !important;
padding: 0 12px !important;
background: transparent !important;
border-bottom:
1px solid rgba(255, 255, 255, 0.12) !important;
}
.pkp_site_name {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 12px 0 56px !important;
text-align: left !important;
}
.pkp_site_name > a,
.pkp_site_name .is_img {
display: flex !important;
width: 100% !important;
align-items: center !important;
justify-content: flex-start !important;
}
.pkp_site_name img {
width: auto !important;
max-width: 166px !important;
height: auto !important;
max-height: 42px !important;
margin: 0 !important;
}
/* ----------------------------------------------------------------------
MOBILE MENU TOGGLE
---------------------------------------------------------------------- */
.pkp_site_nav_toggle {
position: absolute !important;
top: 11px !important;
left: 12px !important;
z-index: 5 !important;
display: inline-flex !important;
width: 42px !important;
height: 42px !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
color: #ffffff !important;
background: rgba(5, 31, 91, 0.24) !important;
border: 1px solid rgba(255, 255, 255, 0.25) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.pkp_site_nav_toggle:hover,
.pkp_site_nav_toggle:focus {
background: rgba(5, 31, 91, 0.38) !important;
border-color: rgba(255, 255, 255, 0.45) !important;
}
/* ----------------------------------------------------------------------
MOBILE ISSN BAR — 32PX
---------------------------------------------------------------------- */
.pkp_head_wrapper::after {
position: absolute !important;
top: 64px !important;
right: 0 !important;
left: 0 !important;
display: flex !important;
width: 100% !important;
max-width: none !important;
height: 32px !important;
align-items: center !important;
justify-content: center !important;
padding: 0 12px !important;
content:
"E-ISSN: APPLICATION IN PROGRESS"
!important;
color: rgba(255, 255, 255, 0.94) !important;
background: rgba(5, 30, 86, 0.18) !important;
border-top:
1px solid rgba(255, 255, 255, 0.06) !important;
font-family: inherit !important;
font-size: 0.58rem !important;
font-weight: 750 !important;
letter-spacing: 0.035em !important;
line-height: 1 !important;
text-align: center !important;
text-transform: uppercase !important;
white-space: nowrap !important;
overflow: hidden !important;
pointer-events: none !important;
}
/* ----------------------------------------------------------------------
MOBILE MENU PANEL
---------------------------------------------------------------------- */
.pkp_site_nav_menu {
max-height: calc(100vh - 96px) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
background: #ffffff !important;
border-top: 0 !important;
border-bottom: 2px solid #dde5ec !important;
box-shadow:
0 18px 35px rgba(17, 38, 68, 0.2) !important;
}
.pkp_navigation_primary_row {
width: 100% !important;
margin: 0 !important;
padding: 9px 14px 13px !important;
background: #ffffff !important;
border: 0 !important;
}
.pkp_navigation_primary_wrapper {
display: block !important;
width: 100% !important;
min-height: 0 !important;
}
.pkp_navigation_primary {
display: flex !important;
flex-direction: column !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.pkp_navigation_primary > li {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
order: 1 !important;
}
/* Pindahkan item Submit Manuscript ke posisi paling bawah navigasi utama (setelah About) */
.pkp_navigation_primary > li:has(> a[href*="/submission"]),
.pkp_navigation_primary > li:has(> a[href$="/submission"]) {
order: 10 !important;
}
.pkp_navigation_primary > li > a {
display: flex !important;
width: 100% !important;
min-height: 46px !important;
align-items: center !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 0 4px !important;
color: #1d2d42 !important;
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid #e2e8ee !important;
border-radius: 0 !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
}
.pkp_navigation_primary > li > a::after {
display: none !important;
content: none !important;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus {
color: #174f98 !important;
background: #f5f8fb !important;
}
/* ----------------------------------------------------------------------
MOBILE SUBMIT BUTTON (CTA DI PALING BAWAH NAVIGASI UTAMA)
---------------------------------------------------------------------- */
.pkp_navigation_primary
> li
> a[href*="/jrtn/submission"],
.pkp_navigation_primary
> li
> a[href$="/submission"] {
min-height: 44px !important;
justify-content: center !important;
margin: 14px 0 6px !important;
padding: 0 15px !important;
color: #ffffff !important;
background: #1762b7 !important;
border: 1px solid #1762b7 !important;
border-radius: 6px !important;
box-shadow: 0 2px 6px rgba(23, 98, 183, 0.22) !important;
font-size: 0.86rem !important;
font-weight: 700 !important;
}
.pkp_navigation_primary
> li
> a[href*="/jrtn/submission"]:hover,
.pkp_navigation_primary
> li
> a[href*="/jrtn/submission"]:focus,
.pkp_navigation_primary
> li
> a[href$="/submission"]:hover,
.pkp_navigation_primary
> li
> a[href$="/submission"]:focus {
color: #ffffff !important;
background: #124f98 !important;
border-color: #124f98 !important;
transform: none !important;
}
/* ----------------------------------------------------------------------
MOBILE DROPDOWN
---------------------------------------------------------------------- */
.pkp_navigation_primary ul {
position: static !important;
min-width: 0 !important;
margin: 0 !important;
padding: 4px 0 7px 12px !important;
background: #f7f9fb !important;
border: 0 !important;
border-bottom: 1px solid #e2e8ee !important;
border-radius: 0 0 6px 6px !important;
box-shadow: none !important;
}
.pkp_navigation_primary ul a {
padding: 10px 10px !important;
color: #405066 !important;
font-size: 0.82rem !important;
}
.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus {
color: #174f98 !important;
background: #eaf2f9 !important;
}
/* ----------------------------------------------------------------------
MOBILE SEARCH
---------------------------------------------------------------------- */
.pkp_search {
display: block !important;
width: 100% !important;
margin: 10px 0 0 !important;
padding: 0 !important;
}
.pkp_search .search_prompt {
display: flex !important;
width: 100% !important;
min-height: 44px !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 14px !important;
color: #174f98 !important;
background: #f2f6fa !important;
border: 1px solid #d4e0ea !important;
border-radius: 6px !important;
font-size: 0.86rem !important;
}
.pkp_search .search_prompt:hover,
.pkp_search .search_prompt:focus {
color: #123f7c !important;
background: #e8f0f7 !important;
border-color: #b9ccdc !important;
}
/* ----------------------------------------------------------------------
MOBILE USER NAVIGATION (GUEST & LOGGED-IN)
---------------------------------------------------------------------- */
.pkp_navigation_user_wrapper {
position: static !important;
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 14px 14px 22px !important;
background: #f7f9fb !important;
border-top: 1px solid #dde5ec !important;
}
/* Container utama: 2 kolom untuk mode tamu (Register & Login) */
.pkp_navigation_user {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
/* Sembunyikan item kosong atau item bawaan OJS yang di-hide */
.pkp_navigation_user > li:empty,
.pkp_navigation_user > li[style*="display: none"],
.pkp_navigation_user > li[style*="display:none"],
.pkp_navigation_user > li.is_hidden,
.pkp_navigation_user > li.hidden {
display: none !important;
}
/* Mode Logged-in: Jika ada submenu atau li.profile, bentangkan 1 kolom penuh */
.pkp_navigation_user:has(li.profile),
.pkp_navigation_user:has(ul) {
display: flex !important;
flex-direction: column !important;
gap: 0 !important;
}
.pkp_navigation_user > li {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* Fallback jika browser belum mendukung :has() */
.pkp_navigation_user > li.profile,
.pkp_navigation_user > li:has(ul) {
grid-column: 1 / -1 !important;
width: 100% !important;
}
/* ----------------------------------------------------------------------
TOMBOL GUEST (REGISTER & LOGIN)
---------------------------------------------------------------------- */
.pkp_navigation_user > li:not(.profile):not(:has(ul)) > a {
display: flex !important;
width: 100% !important;
min-height: 42px !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 8px 10px !important;
color: #174f98 !important;
text-decoration: none !important;
background: #ffffff !important;
border: 1px solid #cfdbe6 !important;
border-radius: 6px !important;
font-size: 0.82rem !important;
font-weight: 650 !important;
transition: all 140ms ease !important;
}
.pkp_navigation_user > li:not(.profile):not(:has(ul)) > a:hover,
.pkp_navigation_user > li:not(.profile):not(:has(ul)) > a:focus {
color: #ffffff !important;
background: #1762b7 !important;
border-color: #1762b7 !important;
}
/* ----------------------------------------------------------------------
KARTU AKUN PENGGUNA TERLOGIN (HEADER PROFILE)
---------------------------------------------------------------------- */
.pkp_navigation_user > li.profile > a,
.pkp_navigation_user > li:has(ul) > a {
display: flex !important;
width: 100% !important;
min-height: 46px !important;
align-items: center !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 10px 14px !important;
color: #0f2d59 !important;
text-decoration: none !important;
background: #ffffff !important;
border: 1px solid #cfdbe6 !important;
border-bottom: 1px solid #eef3f8 !important;
border-radius: 8px 8px 0 0 !important;
box-shadow: 0 2px 5px rgba(15, 45, 92, 0.04) !important;
font-size: 0.88rem !important;
font-weight: 700 !important;
transition: background-color 140ms ease !important;
}
.pkp_navigation_user > li.profile > a:hover,
.pkp_navigation_user > li.profile > a:focus,
.pkp_navigation_user > li:has(ul) > a:hover,
.pkp_navigation_user > li:has(ul) > a:focus {
color: #1762b7 !important;
background: #f8fafc !important;
}
.pkp_navigation_user > li.profile > a::before,
.pkp_navigation_user > li:has(ul) > a::before {
display: inline-block !important;
content: "\f2bd" !important; /* fa-user-circle-o */
font-family: FontAwesome, "Font Awesome 4", sans-serif !important;
font-size: 1.25em !important;
font-weight: normal !important;
line-height: 1 !important;
color: #1762b7 !important;
margin-right: 10px !important;
}
/* ----------------------------------------------------------------------
SUBMENU DROPDOWN PENGGUNA TERLOGIN (MOBILE ACCORDION / LIST)
---------------------------------------------------------------------- */
.pkp_navigation_user > li.profile > ul,
.pkp_navigation_user > li:has(ul) > ul,
.pkp_navigation_user ul {
position: static !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 4px 0 !important;
background: #ffffff !important;
border: 1px solid #cfdbe6 !important;
border-top: none !important;
border-radius: 0 0 8px 8px !important;
box-shadow: 0 6px 16px rgba(15, 45, 92, 0.07) !important;
float: none !important;
clear: both !important;
list-style: none !important;
visibility: visible !important;
opacity: 1 !important;
transform: none !important;
overflow: hidden !important;
}
.pkp_navigation_user ul li {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
border-bottom: 1px solid #f1f5f9 !important;
}
.pkp_navigation_user ul li:last-child {
border-bottom: none !important;
}
.pkp_navigation_user ul li a {
display: flex !important;
width: 100% !important;
min-height: 42px !important;
align-items: center !important;
justify-content: flex-start !important;
margin: 0 !important;
padding: 9px 14px !important;
color: #334155 !important;
text-decoration: none !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
font-size: 0.84rem !important;
font-weight: 550 !important;
transition:
background-color 140ms ease,
color 140ms ease,
padding-left 140ms ease !important;
}
.pkp_navigation_user ul li a:hover,
.pkp_navigation_user ul li a:focus {
color: #1762b7 !important;
background: #f1f6fc !important;
padding-left: 18px !important;
}
/* Ikon Submenu FontAwesome */
.pkp_navigation_user ul li a::before {
display: inline-block !important;
width: 18px !important;
margin-right: 10px !important;
font-family: FontAwesome, "Font Awesome 4", sans-serif !important;
font-size: 0.95em !important;
font-weight: normal !important;
text-align: center !important;
line-height: 1 !important;
color: #1762b7 !important;
}
/* Dashboard */
.pkp_navigation_user ul li a[href*="/dashboard"]::before,
.pkp_navigation_user ul li a[href*="/submissions"]::before {
content: "\f0e4" !important; /* fa-tachometer */
}
/* View Profile */
.pkp_navigation_user ul li a[href*="/user/profile"]::before {
content: "\f007" !important; /* fa-user */
}
/* Submit Manuscript */
.pkp_navigation_user ul li a[href*="/submission"]::before {
content: "\f044" !important; /* fa-pencil-square-o */
}
/* Administration */
.pkp_navigation_user ul li a[href*="/admin"]::before {
content: "\f013" !important; /* fa-cog */
}
/* Logout */
.pkp_navigation_user ul li a[href*="/signOut"]::before,
.pkp_navigation_user ul li a[href*="/logout"]::before {
content: "\f08b" !important; /* fa-sign-out */
color: #dc2626 !important;
}
.pkp_navigation_user ul li a[href*="/signOut"],
.pkp_navigation_user ul li a[href*="/logout"] {
color: #dc2626 !important;
}
.pkp_navigation_user ul li a[href*="/signOut"]:hover,
.pkp_navigation_user ul li a[href*="/logout"]:hover {
background: #fef2f2 !important;
color: #b91c1c !important;
}
/* ----------------------------------------------------------------------
BADGE / TASK COUNT (NOTIFIKASI TUGAS)
---------------------------------------------------------------------- */
.pkp_navigation_user .task_count,
.pkp_navigation_user .badge {
display: inline-flex !important;
min-width: 20px !important;
height: 20px !important;
align-items: center !important;
justify-content: center !important;
margin-left: auto !important;
padding: 0 6px !important;
color: #ffffff !important;
background: #2563eb !important;
border: none !important;
border-radius: 9999px !important;
font-family: inherit !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
line-height: 1 !important;
}
.pkp_navigation_user > li.profile > a .task_count,
.pkp_navigation_user > li.profile > a .badge {
background: #e02424 !important;
box-shadow: 0 1px 3px rgba(224, 36, 36, 0.35) !important;
}
}
/* ==========================================================================
VERY SMALL MOBILE
========================================================================== */
@media (max-width: 380px) {
.pkp_site_name {
padding-right: 6px !important;
padding-left: 54px !important;
}
.pkp_site_name img {
max-width: 145px !important;
max-height: 38px !important;
}
.pkp_head_wrapper::after {
padding: 0 7px !important;
font-size: 0.52rem !important;
letter-spacing: 0.025em !important;
}
.pkp_navigation_user {
grid-template-columns: 1fr !important;
}
}
/* ==========================================================================
REDUCED MOTION
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.pkp_structure_head *,
.pkp_structure_head *::before,
.pkp_structure_head *::after {
scroll-behavior: auto !important;
transition: none !important;
animation: none !important;
}
}
/* ==========================================================================
HEADER POSITION FIX
Memindahkan user navigation dan search ke sisi kanan desktop
========================================================================== */
@media (min-width: 992px) {
/* Pastikan seluruh posisi absolut mengacu ke wrapper header */
.pkp_head_wrapper {
position: relative !important;
}
/* ----------------------------------------------------------------------
USER ACCOUNT — TOP RIGHT
Reset posisi bawaan theme OJS
---------------------------------------------------------------------- */
.pkp_navigation_user_wrapper {
position: absolute !important;
top: 15px !important;
right: 26px !important;
bottom: auto !important;
left: auto !important;
z-index: 20 !important;
display: block !important;
width: auto !important;
max-width: 300px !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
clear: none !important;
transform: none !important;
}
.pkp_navigation_user {
display: flex !important;
width: auto !important;
gap: 6px !important;
align-items: center !important;
justify-content: flex-end !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
.pkp_navigation_user > li {
position: relative !important;
display: block !important;
width: auto !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
.pkp_navigation_user > li > a {
width: auto !important;
max-width: 260px !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* ----------------------------------------------------------------------
PRIMARY NAVIGATION LAYOUT
---------------------------------------------------------------------- */
.pkp_navigation_primary_row {
position: relative !important;
}
.pkp_navigation_primary_wrapper {
position: relative !important;
display: flex !important;
width: 100% !important;
min-height: 54px !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
}
.pkp_navigation_primary {
position: static !important;
display: flex !important;
flex: 0 1 auto !important;
width: auto !important;
max-width: calc(100% - 145px) !important;
align-items: stretch !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
transform: none !important;
}
/* ----------------------------------------------------------------------
SEARCH — NAVIGATION RIGHT
Reset absolute positioning bawaan OJS
---------------------------------------------------------------------- */
.pkp_search {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
z-index: 10 !important;
display: flex !important;
flex: 0 0 auto !important;
width: auto !important;
align-items: center !important;
justify-content: flex-end !important;
margin: 0 0 0 auto !important;
padding: 0 !important;
float: none !important;
clear: none !important;
transform: none !important;
}
.pkp_search .search_prompt {
position: relative !important;
display: inline-flex !important;
width: auto !important;
min-width: 92px !important;
min-height: 36px !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
margin: 9px 0 !important;
padding: 0 13px !important;
white-space: nowrap !important;
transform: none !important;
}
/* ----------------------------------------------------------------------
DESKTOP USER ACCOUNT DROPDOWN STYLING (STABLE HOVER BRIDGE)
Dropdown melekat rapat di bawah nama user tanpa celah kosong,
sehingga submenu tidak hilang saat kursor digeser dari nama akun ke menu.
---------------------------------------------------------------------- */
.pkp_navigation_user > li {
position: relative !important;
}
.pkp_navigation_user > li > ul,
.pkp_navigation_user ul {
position: absolute !important;
/* Melekat rapat di bawah trigger (overlap 1px agar tidak ada celah mati) */
top: calc(100% - 1px) !important;
right: 0 !important;
left: auto !important;
min-width: 230px !important;
margin: 0 !important;
padding: 6px 0 !important;
background: #ffffff !important;
border: 1px solid #d4e0ea !important;
border-radius: 8px !important;
box-shadow:
0 12px 28px rgba(15, 45, 92, 0.16) !important;
list-style: none !important;
z-index: 500 !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
transform: translateY(2px) !important;
transition:
opacity 140ms ease,
transform 140ms ease,
visibility 0ms linear 160ms !important;
}
/* Jembatan hover tak kasat mata (invisible hover bridge): menutup celah antara tombol trigger dan dropdown */
.pkp_navigation_user > li > ul::before,
.pkp_navigation_user ul::before {
position: absolute !important;
top: -12px !important;
right: 0 !important;
left: 0 !important;
display: block !important;
height: 12px !important;
content: "" !important;
background: transparent !important;
pointer-events: auto !important;
}
/* Tampilkan dan aktifkan saat kursor hover di li, di trigger, atau di ul itu sendiri */
.pkp_navigation_user > li:hover > ul,
.pkp_navigation_user > li:focus-within > ul,
.pkp_navigation_user > li.-is_open > ul,
.pkp_navigation_user > li.is_open > ul,
.pkp_navigation_user ul:hover {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: translateY(0) !important;
transition-delay: 0ms !important;
}
.pkp_navigation_user ul li {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid #f1f5f9 !important;
}
.pkp_navigation_user ul li:last-child {
border-bottom: none !important;
}
.pkp_navigation_user ul li a {
display: flex !important;
width: 100% !important;
min-height: 38px !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 8px 14px !important;
color: #334155 !important;
text-decoration: none !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
font-size: 0.82rem !important;
font-weight: 550 !important;
transition: background-color 140ms ease, color 140ms ease !important;
}
.pkp_navigation_user ul li a:hover,
.pkp_navigation_user ul li a:focus {
color: #1762b7 !important;
background: #f1f6fc !important;
}
/* Ikon Submenu FontAwesome Desktop */
.pkp_navigation_user ul li a::before {
display: inline-block !important;
width: 18px !important;
margin-right: 10px !important;
font-family: FontAwesome, "Font Awesome 4", sans-serif !important;
font-size: 0.95em !important;
font-weight: normal !important;
text-align: center !important;
color: #1762b7 !important;
line-height: 1 !important;
}
.pkp_navigation_user ul li a[href*="/dashboard"]::before,
.pkp_navigation_user ul li a[href*="/submissions"]::before { content: "\f0e4" !important; }
.pkp_navigation_user ul li a[href*="/user/profile"]::before { content: "\f007" !important; }
.pkp_navigation_user ul li a[href*="/submission"]::before { content: "\f044" !important; }
.pkp_navigation_user ul li a[href*="/admin"]::before { content: "\f013" !important; }
.pkp_navigation_user ul li a[href*="/signOut"]::before,
.pkp_navigation_user ul li a[href*="/logout"]::before { content: "\f08b" !important; color: #dc2626 !important; }
.pkp_navigation_user ul li a[href*="/signOut"],
.pkp_navigation_user ul li a[href*="/logout"] { color: #dc2626 !important; }
.pkp_navigation_user ul li a[href*="/signOut"]:hover,
.pkp_navigation_user ul li a[href*="/logout"]:hover { background: #fef2f2 !important; color: #b91c1c !important; }
.pkp_navigation_user .task_count,
.pkp_navigation_user .badge {
display: inline-flex !important;
min-width: 18px !important;
height: 18px !important;
align-items: center !important;
justify-content: center !important;
margin-left: auto !important;
padding: 0 5px !important;
color: #ffffff !important;
background: #2563eb !important;
border: none !important;
border-radius: 9999px !important;
font-family: inherit !important;
font-size: 0.68rem !important;
font-weight: 700 !important;
line-height: 1 !important;
}
}
/* ==========================================================================
SEARCH FIX — ANCHOR TO FAR RIGHT
Memindahkan Search ke pojok kanan navigation bar
========================================================================== */
@media (min-width: 992px) {
/* Area navigasi menjadi acuan posisi Search */
.pkp_navigation_primary_row {
position: relative !important;
}
.pkp_navigation_primary_wrapper {
position: relative !important;
width: 100% !important;
/* Sisakan ruang agar menu tidak bertabrakan dengan Search */
padding-right: 125px !important;
}
.pkp_navigation_primary {
position: relative !important;
width: 100% !important;
max-width: none !important;
}
/* ----------------------------------------------------------------------
Jika Search berada sebagai item LI di dalam primary navigation
---------------------------------------------------------------------- */
.pkp_navigation_primary
> li:has(> .pkp_search),
.pkp_navigation_primary
> li:has(> .pkp_search_desktop) {
position: absolute !important;
top: 0 !important;
right: 0 !important;
bottom: auto !important;
left: auto !important;
z-index: 20 !important;
display: flex !important;
width: auto !important;
height: 54px !important;
align-items: center !important;
justify-content: flex-end !important;
margin: 0 !important;
padding: 0 !important;
float: none !important;
transform: none !important;
}
/* ----------------------------------------------------------------------
Search link bawaan OJS
---------------------------------------------------------------------- */
.pkp_navigation_primary .pkp_search,
.pkp_navigation_primary .pkp_search_desktop {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
display: inline-flex !important;
width: auto !important;
min-width: 94px !important;
min-height: 36px !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 13px !important;
color: rgba(255, 255, 255, 0.95) !important;
text-decoration: none !important;
white-space: nowrap !important;
background: rgba(255, 255, 255, 0.08) !important;
border: 1px solid rgba(255, 255, 255, 0.28) !important;
border-radius: 6px !important;
font-family: inherit !important;
font-size: 0.8rem !important;
font-weight: 600 !important;
line-height: 1.2 !important;
float: none !important;
transform: none !important;
transition:
background-color 160ms ease,
border-color 160ms ease !important;
}
.pkp_navigation_primary .pkp_search:hover,
.pkp_navigation_primary .pkp_search:focus,
.pkp_navigation_primary .pkp_search_desktop:hover,
.pkp_navigation_primary .pkp_search_desktop:focus {
color: #ffffff !important;
background: rgba(255, 255, 255, 0.16) !important;
border-color: rgba(255, 255, 255, 0.48) !important;
}
/* ----------------------------------------------------------------------
Fallback jika Search bukan berada di dalam LI
---------------------------------------------------------------------- */
.pkp_navigation_primary_wrapper > .pkp_search,
.pkp_navigation_primary_wrapper > .pkp_search_desktop,
.pkp_navigation_primary_wrapper
> .pkp_navigation_search_wrapper {
position: absolute !important;
top: 9px !important;
right: 0 !important;
bottom: auto !important;
left: auto !important;
z-index: 20 !important;
width: auto !important;
margin: 0 !important;
float: none !important;
transform: none !important;
}
}
/* ==========================================================================
SEARCH POSITION REFINEMENT
Memberi jarak kanan dan menyelaraskan Search secara vertikal
========================================================================== */
@media (min-width: 992px) {
/* Sisakan ruang yang cukup untuk tombol Search */
.pkp_navigation_primary_wrapper {
padding-right: 132px !important;
}
/* Search sebagai item di dalam primary navigation */
.pkp_navigation_primary
> li:has(> .pkp_search),
.pkp_navigation_primary
> li:has(> .pkp_search_desktop) {
position: absolute !important;
top: 50% !important;
right: 18px !important;
bottom: auto !important;
left: auto !important;
width: auto !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
align-items: center !important;
justify-content: center !important;
transform: translateY(-50%) !important;
}
/* Wrapper Search */
.pkp_navigation_primary .pkp_search,
.pkp_navigation_primary .pkp_search_desktop {
position: static !important;
display: inline-flex !important;
width: auto !important;
height: 36px !important;
min-height: 36px !important;
align-items: center !important;
justify-content: center !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
transform: none !important;
}
/* Link Search yang sebenarnya */
.pkp_navigation_primary .pkp_search .search_prompt,
.pkp_navigation_primary .pkp_search_desktop .search_prompt {
position: static !important;
display: inline-flex !important;
width: auto !important;
height: 36px !important;
min-height: 36px !important;
align-items: center !important;
justify-content: center !important;
gap: 5px !important;
margin: 0 !important;
padding: 0 12px !important;
line-height: 1 !important;
white-space: nowrap !important;
transform: none !important;
}
/* Fallback jika Search berada langsung di dalam wrapper */
.pkp_navigation_primary_wrapper > .pkp_search,
.pkp_navigation_primary_wrapper > .pkp_search_desktop,
.pkp_navigation_primary_wrapper
> .pkp_navigation_search_wrapper {
position: absolute !important;
top: 50% !important;
right: 18px !important;
bottom: auto !important;
left: auto !important;
height: auto !important;
margin: 0 !important;
transform: translateY(-50%) !important;
}
}
/* ==========================================================================
3. FOOTER JRTN
========================================================================== */
.pkp_structure_footer {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 25px 0 10px !important;
box-sizing: border-box !important;
background-color: #0f172a !important;
border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.pkp_footer_content {
width: 100% !important;
max-width: 1100px !important;
margin: 0 auto !important;
padding: 0 20px !important;
background-color: transparent !important;
border: none !important;
box-shadow: none !important;
}
/* Hilangkan logo bawaan platform OJS */
.pkp_brand_footer {
display: none !important;
}
/* ==========================================================================
4. RESPONSIVE FOOTER
========================================================================== */
@media (max-width: 768px) {
.pkp_footer_content table,
.pkp_footer_content tbody,
.pkp_footer_content tr,
.pkp_footer_content td {
display: block !important;
width: 100% !important;
padding: 0 !important;
box-sizing: border-box !important;
border: none !important;
text-align: center !important;
}
.pkp_footer_content td {
margin-bottom: 25px !important;
}
/* Sembunyikan sel pembatas */
.pkp_footer_content td[width="1"] {
display: none !important;
}
/* Kembalikan tabel logo penerbit menjadi horizontal */
.pkp_footer_content table table {
display: table !important;
width: auto !important;
margin: 0 auto 15px !important;
}
.pkp_footer_content table table tbody {
display: table-row-group !important;
}
.pkp_footer_content table table tr {
display: table-row !important;
}
.pkp_footer_content table table td {
display: table-cell !important;
width: auto !important;
margin-bottom: 0 !important;
padding-right: 12px !important;
vertical-align: middle !important;
text-align: left !important;
}
.pkp_footer_content p img {
display: block !important;
margin: 0 auto !important;
}
}
/* ==========================================================================
5. JRTN CONTENT DESIGN SYSTEM
Hanya bekerja pada HTML yang dibungkus dengan .jrtn-page
========================================================================== */
.jrtn-page {
--jrtn-ink: #172033;
--jrtn-muted: #526177;
--jrtn-accent: #1e4b7a;
--jrtn-accent-dark: #153a60;
--jrtn-accent-soft: #eef5fb;
--jrtn-line: #d5e0ea;
--jrtn-surface: #f7f9fb;
--jrtn-white: #ffffff;
width: 100% !important;
max-width: none !important;
color: var(--jrtn-ink) !important;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Arial,
sans-serif !important;
font-size: 16px !important;
line-height: 1.65 !important;
}
.jrtn-page *,
.jrtn-page *::before,
.jrtn-page *::after {
box-sizing: border-box;
}
.jrtn-page p,
.jrtn-page h2,
.jrtn-page h3,
.jrtn-page h4,
.jrtn-page ul,
.jrtn-page ol,
.jrtn-page section,
.jrtn-page aside,
.jrtn-page div {
max-width: none;
}
.jrtn-page p {
margin-top: 0 !important;
}
.jrtn-page a {
color: var(--jrtn-accent);
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.jrtn-page a:hover {
color: var(--jrtn-accent-dark);
}
.jrtn-page a:focus-visible {
outline: 3px solid rgba(30, 75, 122, 0.28);
outline-offset: 3px;
}
/* ==========================================================================
6. HERO / PEMBUKA HOME
Tanpa container, tetapi motif background tetap dipertahankan
========================================================================== */
.jrtn-page .jrtn-hero {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 0 18px !important;
padding: 24px 14px 30px 0 !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid var(--jrtn-line) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Motif lingkaran utama */
.jrtn-page .jrtn-hero::after {
position: absolute !important;
right: -78px !important;
bottom: -94px !important;
z-index: 0 !important;
display: block !important;
width: 240px !important;
height: 240px !important;
content: "" !important;
border: 34px solid rgba(30, 75, 122, 0.055) !important;
border-radius: 50% !important;
pointer-events: none !important;
}
/* Motif lingkaran tambahan */
.jrtn-page .jrtn-hero::before {
position: absolute !important;
right: 72px !important;
bottom: -76px !important;
z-index: 0 !important;
display: block !important;
width: 120px !important;
height: 120px !important;
content: "" !important;
border: 20px solid rgba(14, 165, 233, 0.035) !important;
border-radius: 50% !important;
pointer-events: none !important;
}
.jrtn-page .jrtn-meta {
position: relative !important;
z-index: 1 !important;
display: block !important;
width: 100% !important;
margin: 0 0 12px !important;
color: var(--jrtn-accent-dark) !important;
font-size: 0.75rem !important;
font-weight: 750 !important;
letter-spacing: 0.055em !important;
line-height: 1.45 !important;
text-transform: uppercase !important;
}
.jrtn-page .jrtn-meta-separator {
margin: 0 8px !important;
color: #8496a8 !important;
}
.jrtn-page .jrtn-hero-title {
position: relative !important;
z-index: 1 !important;
display: block !important;
width: 100% !important;
max-width: 860px !important;
min-width: 0 !important;
margin: 0 0 14px !important;
padding: 0 !important;
color: var(--jrtn-ink) !important;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Arial,
sans-serif !important;
font-size: clamp(1.9rem, 3.6vw, 2.7rem) !important;
font-weight: 760 !important;
letter-spacing: -0.022em !important;
line-height: 1.14 !important;
word-break: normal !important;
overflow-wrap: normal !important;
white-space: normal !important;
hyphens: none !important;
}
.jrtn-page .jrtn-hero-lead {
position: relative !important;
z-index: 1 !important;
display: block !important;
width: 100% !important;
max-width: 840px !important;
min-width: 0 !important;
margin: 0 0 20px !important;
padding: 0 !important;
color: var(--jrtn-muted) !important;
font-size: 1rem !important;
line-height: 1.7 !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
.jrtn-page .jrtn-actions {
position: relative !important;
z-index: 1 !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 10px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* ==========================================================================
7. BUTTONS
========================================================================== */
.jrtn-page .jrtn-button {
display: inline-flex !important;
min-height: 42px !important;
align-items: center !important;
justify-content: center !important;
padding: 9px 18px !important;
border: 1px solid var(--jrtn-accent) !important;
border-radius: 5px !important;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Arial,
sans-serif !important;
font-size: 0.9rem !important;
font-weight: 700 !important;
line-height: 1.3 !important;
text-align: center !important;
text-decoration: none !important;
transition:
background-color 140ms ease,
border-color 140ms ease,
color 140ms ease !important;
}
.jrtn-page .jrtn-button-primary {
background: var(--jrtn-accent) !important;
color: var(--jrtn-white) !important;
}
.jrtn-page .jrtn-button-primary:hover {
background: var(--jrtn-accent-dark) !important;
border-color: var(--jrtn-accent-dark) !important;
color: var(--jrtn-white) !important;
}
.jrtn-page .jrtn-button-secondary {
background: var(--jrtn-white) !important;
color: var(--jrtn-accent) !important;
}
.jrtn-page .jrtn-button-secondary:hover {
background: #f1f6fa !important;
color: var(--jrtn-accent-dark) !important;
}
/* ==========================================================================
8. JOURNAL FACTS
========================================================================== */
.jrtn-page .jrtn-facts {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px !important;
width: 100% !important;
margin: 0 0 18px !important;
padding: 0 !important;
}
.jrtn-page .jrtn-fact {
display: block !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 13px 15px !important;
background: var(--jrtn-white) !important;
border: 1px solid var(--jrtn-line) !important;
border-radius: 6px !important;
box-shadow: 0 1px 2px rgba(18, 38, 63, 0.035) !important;
}
.jrtn-page .jrtn-fact-label {
display: block !important;
width: 100% !important;
margin: 0 0 4px !important;
color: var(--jrtn-muted) !important;
font-size: 0.69rem !important;
font-weight: 750 !important;
letter-spacing: 0.055em !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
}
.jrtn-page .jrtn-fact-value {
display: block !important;
width: 100% !important;
margin: 0 !important;
color: var(--jrtn-ink) !important;
font-size: 0.93rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
/* ==========================================================================
9. SECTION CONTAINERS
========================================================================== */
.jrtn-page .jrtn-section {
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 0 18px !important;
padding: 24px 26px !important;
background: var(--jrtn-white) !important;
border: 1px solid var(--jrtn-line) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
.jrtn-page .jrtn-section-soft {
background:
linear-gradient(
135deg,
rgba(238, 245, 251, 0.9),
rgba(247, 249, 251, 0.95)
) !important;
}
/* ==========================================================================
10. SECTION HEADERS
Label, judul, dan isi sejajar pada margin kiri yang sama
========================================================================== */
.jrtn-page .jrtn-section-header {
position: relative !important;
display: block !important;
float: none !important;
clear: both !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 0 13px !important;
padding: 0 !important;
}
.jrtn-page .jrtn-section-header > div {
display: block !important;
float: none !important;
clear: both !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/*
* Marker diubah menjadi garis horizontal kecil.
* Tidak lagi mengambil ruang di sebelah kiri teks.
*/
.jrtn-page .jrtn-section-marker {
position: static !important;
display: block !important;
width: 32px !important;
height: 3px !important;
min-height: 0 !important;
margin: 0 0 10px !important;
padding: 0 !important;
background: var(--jrtn-accent) !important;
border: 0 !important;
border-radius: 3px !important;
}
.jrtn-page .jrtn-eyebrow {
display: block !important;
width: 100% !important;
margin: 0 0 4px !important;
padding: 0 !important;
color: var(--jrtn-accent) !important;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Arial,
sans-serif !important;
font-size: 0.7rem !important;
font-weight: 800 !important;
letter-spacing: 0.07em !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
}
.jrtn-page .jrtn-section-title {
display: block !important;
float: none !important;
clear: both !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
color: var(--jrtn-ink) !important;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Arial,
sans-serif !important;
font-size: clamp(1.35rem, 2.2vw, 1.8rem) !important;
font-weight: 740 !important;
letter-spacing: -0.012em !important;
line-height: 1.28 !important;
word-break: normal !important;
overflow-wrap: normal !important;
white-space: normal !important;
hyphens: none !important;
}
.jrtn-page .jrtn-section-intro {
display: block !important;
float: none !important;
clear: both !important;
width: 100% !important;
max-width: 860px !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
color: var(--jrtn-muted) !important;
font-size: 0.96rem !important;
line-height: 1.68 !important;
word-break: normal !important;
overflow-wrap: break-word !important;
white-space: normal !important;
}
/* Alignment tetap sama pada mobile */
@media (max-width: 680px) {
.jrtn-page .jrtn-section-header {
padding-left: 0 !important;
}
.jrtn-page .jrtn-section-marker {
width: 28px !important;
margin-bottom: 8px !important;
}
.jrtn-page .jrtn-section-title {
font-size: 1.38rem !important;
line-height: 1.3 !important;
}
}
/* ==========================================================================
11. CORE SCOPE CARDS
========================================================================== */
.jrtn-page .jrtn-scope-list {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
width: 100% !important;
margin: 19px 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
.jrtn-page .jrtn-scope-list > li::before {
display: none !important;
content: none !important;
}
.jrtn-page .jrtn-scope-item {
display: grid !important;
grid-template-columns: 34px minmax(0, 1fr) !important;
gap: 11px !important;
align-items: start !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 15px !important;
background: var(--jrtn-white) !important;
border: 1px solid var(--jrtn-line) !important;
border-radius: 6px !important;
}
.jrtn-page .jrtn-scope-number {
display: inline-flex !important;
width: 30px !important;
height: 30px !important;
align-items: center !important;
justify-content: center !important;
background: var(--jrtn-accent-soft) !important;
border: 1px solid #b9ccde !important;
border-radius: 4px !important;
color: var(--jrtn-accent-dark) !important;
font-size: 0.71rem !important;
font-weight: 800 !important;
}
.jrtn-page .jrtn-scope-item > div {
display: block !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.jrtn-page .jrtn-scope-item h4 {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 0 5px !important;
padding: 0 !important;
color: var(--jrtn-ink) !important;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Arial,
sans-serif !important;
font-size: 0.98rem !important;
font-weight: 750 !important;
line-height: 1.4 !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
.jrtn-page .jrtn-scope-item p {
display: block !important;
width: 100% !important;
margin: 0 !important;
color: var(--jrtn-muted) !important;
font-size: 0.9rem !important;
line-height: 1.58 !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
.jrtn-page .jrtn-section-link {
margin: 16px 0 0 !important;
}
.jrtn-page .jrtn-text-link {
font-weight: 700 !important;
text-decoration: none !important;
}
.jrtn-page .jrtn-text-link:hover {
text-decoration: underline !important;
}
/* ==========================================================================
12. MANUSCRIPT TYPES DAN ISSUE NOTICE
========================================================================== */
.jrtn-page .jrtn-split {
display: grid !important;
grid-template-columns:
minmax(0, 1.35fr)
minmax(245px, 0.65fr) !important;
gap: 18px !important;
align-items: stretch !important;
width: 100% !important;
margin: 0 0 18px !important;
padding: 0 !important;
}
.jrtn-page .jrtn-panel {
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 23px 25px !important;
background: var(--jrtn-white) !important;
border: 1px solid var(--jrtn-line) !important;
border-radius: 8px !important;
}
.jrtn-page .jrtn-manuscript-list {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px 20px !important;
width: 100% !important;
margin: 17px 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
.jrtn-page .jrtn-manuscript-list > li {
position: relative !important;
width: 100% !important;
margin: 0 !important;
padding: 8px 8px 8px 17px !important;
color: var(--jrtn-ink) !important;
border-bottom: 1px solid #e3e9ef !important;
font-size: 0.92rem !important;
line-height: 1.45 !important;
}
.jrtn-page .jrtn-manuscript-list > li::before {
position: absolute !important;
top: 16px !important;
left: 2px !important;
display: block !important;
width: 5px !important;
height: 5px !important;
content: "" !important;
background: var(--jrtn-accent) !important;
border-radius: 50% !important;
}
.jrtn-page .jrtn-notice {
display: block !important;
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding: 23px !important;
background:
linear-gradient(
150deg,
rgba(238, 245, 251, 1),
rgba(247, 250, 252, 1)
) !important;
border: 1px solid #b9ccde !important;
border-top: 4px solid var(--jrtn-accent) !important;
border-radius: 8px !important;
}
.jrtn-page .jrtn-notice-label {
margin: 0 0 7px !important;
color: var(--jrtn-accent) !important;
font-size: 0.7rem !important;
font-weight: 800 !important;
letter-spacing: 0.07em !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
}
.jrtn-page .jrtn-notice h3 {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 0 10px !important;
padding: 0 !important;
color: var(--jrtn-ink) !important;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Arial,
sans-serif !important;
font-size: 1.18rem !important;
font-weight: 750 !important;
line-height: 1.35 !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
.jrtn-page .jrtn-notice p {
margin: 0 0 14px !important;
color: var(--jrtn-muted) !important;
font-size: 0.91rem !important;
line-height: 1.58 !important;
}
/* ==========================================================================
13. TABLET
========================================================================== */
@media (max-width: 900px) {
.jrtn-page .jrtn-facts {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.jrtn-page .jrtn-split {
grid-template-columns: 1fr !important;
}
}
/* ==========================================================================
14. MOBILE
========================================================================== */
@media (max-width: 680px) {
.jrtn-page .jrtn-hero {
padding: 18px 0 23px !important;
}
.jrtn-page .jrtn-hero::after {
right: -110px !important;
bottom: -120px !important;
width: 225px !important;
height: 225px !important;
}
.jrtn-page .jrtn-hero::before {
right: 28px !important;
bottom: -85px !important;
}
.jrtn-page .jrtn-hero-title {
max-width: 92% !important;
font-size: 1.78rem !important;
line-height: 1.18 !important;
}
.jrtn-page .jrtn-hero-lead {
max-width: 94% !important;
}
.jrtn-page .jrtn-section,
.jrtn-page .jrtn-panel,
.jrtn-page .jrtn-notice {
padding: 18px !important;
}
.jrtn-page .jrtn-section-header {
padding-left: 13px !important;
}
.jrtn-page .jrtn-section-title {
font-size: 1.38rem !important;
line-height: 1.3 !important;
}
.jrtn-page .jrtn-scope-list,
.jrtn-page .jrtn-manuscript-list {
grid-template-columns: 1fr !important;
}
}
/* ==========================================================================
15. MOBILE KECIL
========================================================================== */
@media (max-width: 480px) {
.jrtn-page .jrtn-actions {
display: grid !important;
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-button {
width: 100% !important;
}
.jrtn-page .jrtn-facts {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-meta {
padding-right: 70px !important;
}
.jrtn-page .jrtn-meta-separator {
display: none !important;
}
.jrtn-page .jrtn-hero-title {
max-width: 100% !important;
}
.jrtn-page .jrtn-hero-lead {
max-width: 100% !important;
}
}
/* ==========================================================================
16. ACCESSIBILITY
========================================================================== */
@media (prefers-reduced-motion: reduce) {
.jrtn-page .jrtn-button {
transition: none !important;
}
}
/* ==========================================================================
17. ABOUT THE JOURNAL PAGE
Tambahkan pada bagian paling bawah stylesheet JRTN
========================================================================== */
.jrtn-page.jrtn-about-page {
width: 100% !important;
max-width: none !important;
}
/* --------------------------------------------------------------------------
ABOUT INTRO
Pembuka terbuka tanpa card, dengan motif yang konsisten dengan HOME
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-about-hero {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 0 18px !important;
padding: 22px 150px 27px 0 !important;
overflow: hidden !important;
background: transparent !important;
border: 0 !important;
border-bottom: 1px solid var(--jrtn-line) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Motif lingkaran besar */
.jrtn-page .jrtn-about-hero::after {
position: absolute !important;
right: -72px !important;
bottom: -92px !important;
z-index: 0 !important;
display: block !important;
width: 225px !important;
height: 225px !important;
content: "" !important;
border: 32px solid rgba(30, 75, 122, 0.055) !important;
border-radius: 50% !important;
pointer-events: none !important;
}
/* Motif lingkaran kecil */
.jrtn-page .jrtn-about-hero::before {
position: absolute !important;
right: 65px !important;
bottom: -62px !important;
z-index: 0 !important;
display: block !important;
width: 112px !important;
height: 112px !important;
content: "" !important;
border: 18px solid rgba(14, 165, 233, 0.04) !important;
border-radius: 50% !important;
pointer-events: none !important;
}
.jrtn-page .jrtn-about-kicker {
position: relative !important;
z-index: 1 !important;
display: block !important;
margin: 0 0 7px !important;
color: var(--jrtn-accent) !important;
font-size: 0.73rem !important;
font-weight: 800 !important;
letter-spacing: 0.075em !important;
line-height: 1.4 !important;
text-transform: uppercase !important;
}
.jrtn-page .jrtn-about-title {
position: relative !important;
z-index: 1 !important;
display: block !important;
width: 100% !important;
max-width: 810px !important;
margin: 0 0 13px !important;
padding: 0 !important;
color: var(--jrtn-ink) !important;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Arial,
sans-serif !important;
font-size: clamp(1.9rem, 3.4vw, 2.55rem) !important;
font-weight: 760 !important;
letter-spacing: -0.021em !important;
line-height: 1.16 !important;
word-break: normal !important;
overflow-wrap: normal !important;
white-space: normal !important;
hyphens: none !important;
}
.jrtn-page .jrtn-about-lead {
position: relative !important;
z-index: 1 !important;
display: block !important;
width: 100% !important;
max-width: 850px !important;
margin: 0 !important;
color: var(--jrtn-muted) !important;
font-size: 1rem !important;
line-height: 1.72 !important;
}
/* --------------------------------------------------------------------------
ABOUT PROFILE FACTS
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-about-facts {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 10px !important;
width: 100% !important;
margin: 0 0 18px !important;
padding: 0 !important;
}
.jrtn-page .jrtn-about-fact {
display: block !important;
min-width: 0 !important;
margin: 0 !important;
padding: 13px 15px !important;
background: var(--jrtn-white) !important;
border: 1px solid var(--jrtn-line) !important;
border-radius: 6px !important;
}
.jrtn-page .jrtn-about-fact-label {
display: block !important;
margin: 0 0 4px !important;
color: var(--jrtn-muted) !important;
font-size: 0.68rem !important;
font-weight: 750 !important;
letter-spacing: 0.055em !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
}
.jrtn-page .jrtn-about-fact-value {
display: block !important;
margin: 0 !important;
color: var(--jrtn-ink) !important;
font-size: 0.92rem !important;
font-weight: 700 !important;
line-height: 1.42 !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
/* --------------------------------------------------------------------------
TWO-COLUMN ABOUT CONTENT
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-about-columns {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 18px !important;
width: 100% !important;
margin: 0 0 18px !important;
}
.jrtn-page .jrtn-about-panel {
display: block !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 23px 25px !important;
background: var(--jrtn-white) !important;
border: 1px solid var(--jrtn-line) !important;
border-radius: 8px !important;
}
.jrtn-page .jrtn-about-panel-soft {
background:
linear-gradient(
140deg,
rgba(238, 245, 251, 0.88),
rgba(248, 250, 252, 0.96)
) !important;
}
/* --------------------------------------------------------------------------
EDITORIAL PURPOSE POINTS
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-purpose-list {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
width: 100% !important;
margin: 18px 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
.jrtn-page .jrtn-purpose-list > li {
display: grid !important;
grid-template-columns: 32px minmax(0, 1fr) !important;
gap: 11px !important;
margin: 0 !important;
padding: 13px 0 !important;
border-top: 1px solid var(--jrtn-line) !important;
}
.jrtn-page .jrtn-purpose-list > li::before {
display: none !important;
content: none !important;
}
.jrtn-page .jrtn-purpose-index {
display: inline-flex !important;
width: 28px !important;
height: 28px !important;
align-items: center !important;
justify-content: center !important;
background: var(--jrtn-accent-soft) !important;
border: 1px solid #bed0df !important;
border-radius: 4px !important;
color: var(--jrtn-accent-dark) !important;
font-size: 0.7rem !important;
font-weight: 800 !important;
}
.jrtn-page .jrtn-purpose-list h4 {
display: block !important;
width: 100% !important;
margin: 0 0 4px !important;
color: var(--jrtn-ink) !important;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Arial,
sans-serif !important;
font-size: 0.96rem !important;
font-weight: 750 !important;
line-height: 1.4 !important;
}
.jrtn-page .jrtn-purpose-list p {
margin: 0 !important;
color: var(--jrtn-muted) !important;
font-size: 0.9rem !important;
line-height: 1.58 !important;
}
/* --------------------------------------------------------------------------
FULL FOCUS AND SCOPE LIST
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-about-scope-list {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 12px !important;
width: 100% !important;
margin: 19px 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
.jrtn-page .jrtn-about-scope-list > li {
position: relative !important;
display: block !important;
min-width: 0 !important;
margin: 0 !important;
padding: 17px 17px 16px 48px !important;
background: var(--jrtn-white) !important;
border: 1px solid var(--jrtn-line) !important;
border-radius: 6px !important;
}
.jrtn-page .jrtn-about-scope-list > li::before {
position: absolute !important;
top: 17px !important;
left: 15px !important;
display: inline-flex !important;
width: 25px !important;
height: 25px !important;
align-items: center !important;
justify-content: center !important;
content: attr(data-number) !important;
background: var(--jrtn-accent-soft) !important;
border: 1px solid #bed0df !important;
border-radius: 4px !important;
color: var(--jrtn-accent-dark) !important;
font-size: 0.66rem !important;
font-weight: 800 !important;
}
.jrtn-page .jrtn-about-scope-list h4 {
display: block !important;
width: 100% !important;
margin: 0 0 5px !important;
color: var(--jrtn-ink) !important;
font-family:
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
Arial,
sans-serif !important;
font-size: 0.97rem !important;
font-weight: 750 !important;
line-height: 1.42 !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
.jrtn-page .jrtn-about-scope-list p {
margin: 0 !important;
color: var(--jrtn-muted) !important;
font-size: 0.89rem !important;
line-height: 1.58 !important;
}
/* --------------------------------------------------------------------------
ADDITIONAL TOPICS
Simple list, bukan chips/pills
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-topic-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0 22px !important;
width: 100% !important;
margin: 18px 0 0 !important;
padding: 0 !important;
list-style: none !important;
border-top: 1px solid var(--jrtn-line) !important;
}
.jrtn-page .jrtn-topic-grid > li {
position: relative !important;
margin: 0 !important;
padding: 10px 4px 10px 16px !important;
color: var(--jrtn-ink) !important;
border-bottom: 1px solid var(--jrtn-line) !important;
font-size: 0.89rem !important;
line-height: 1.45 !important;
}
.jrtn-page .jrtn-topic-grid > li::before {
position: absolute !important;
top: 18px !important;
left: 2px !important;
display: block !important;
width: 5px !important;
height: 5px !important;
content: "" !important;
background: var(--jrtn-accent) !important;
border-radius: 50% !important;
}
/* --------------------------------------------------------------------------
READERSHIP AND MANUSCRIPT LISTS
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-simple-list {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 7px 22px !important;
width: 100% !important;
margin: 17px 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
.jrtn-page .jrtn-simple-list > li {
position: relative !important;
margin: 0 !important;
padding: 8px 4px 8px 17px !important;
color: var(--jrtn-ink) !important;
border-bottom: 1px solid #e3e9ef !important;
font-size: 0.9rem !important;
line-height: 1.45 !important;
}
.jrtn-page .jrtn-simple-list > li::before {
position: absolute !important;
top: 16px !important;
left: 2px !important;
display: block !important;
width: 5px !important;
height: 5px !important;
content: "" !important;
background: var(--jrtn-accent) !important;
border-radius: 50% !important;
}
/* --------------------------------------------------------------------------
PUBLISHER AND HISTORY
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-publisher-box {
display: grid !important;
grid-template-columns: minmax(0, 1.3fr) minmax(220px, 0.7fr) !important;
gap: 24px !important;
width: 100% !important;
margin: 0 0 18px !important;
padding: 23px 25px !important;
background:
linear-gradient(
145deg,
rgba(238, 245, 251, 0.8),
rgba(255, 255, 255, 1)
) !important;
border: 1px solid var(--jrtn-line) !important;
border-left: 4px solid var(--jrtn-accent) !important;
border-radius: 8px !important;
}
.jrtn-page .jrtn-publisher-box p {
margin: 0 0 10px !important;
color: var(--jrtn-muted) !important;
font-size: 0.92rem !important;
line-height: 1.62 !important;
}
.jrtn-page .jrtn-publisher-box p:last-child {
margin-bottom: 0 !important;
}
.jrtn-page .jrtn-publisher-meta {
padding-left: 21px !important;
border-left: 1px solid var(--jrtn-line) !important;
}
.jrtn-page .jrtn-publisher-meta-row {
margin: 0 0 12px !important;
}
.jrtn-page .jrtn-publisher-meta-row:last-child {
margin-bottom: 0 !important;
}
.jrtn-page .jrtn-publisher-meta-label {
display: block !important;
margin: 0 0 2px !important;
color: var(--jrtn-muted) !important;
font-size: 0.67rem !important;
font-weight: 750 !important;
letter-spacing: 0.055em !important;
text-transform: uppercase !important;
}
.jrtn-page .jrtn-publisher-meta-value {
display: block !important;
color: var(--jrtn-ink) !important;
font-size: 0.91rem !important;
font-weight: 700 !important;
line-height: 1.45 !important;
}
/* --------------------------------------------------------------------------
RESPONSIVE ABOUT PAGE
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
.jrtn-page .jrtn-about-facts,
.jrtn-page .jrtn-topic-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.jrtn-page .jrtn-about-columns,
.jrtn-page .jrtn-publisher-box {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-publisher-meta {
padding-top: 18px !important;
padding-left: 0 !important;
border-top: 1px solid var(--jrtn-line) !important;
border-left: 0 !important;
}
}
@media (max-width: 680px) {
.jrtn-page .jrtn-about-hero {
padding: 18px 30px 23px 0 !important;
}
.jrtn-page .jrtn-about-hero::after {
right: -125px !important;
bottom: -125px !important;
}
.jrtn-page .jrtn-about-hero::before {
right: 12px !important;
bottom: -75px !important;
}
.jrtn-page .jrtn-about-title {
max-width: 94% !important;
font-size: 1.75rem !important;
line-height: 1.2 !important;
}
.jrtn-page .jrtn-about-scope-list,
.jrtn-page .jrtn-simple-list {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-about-panel,
.jrtn-page .jrtn-publisher-box {
padding: 18px !important;
}
}
@media (max-width: 480px) {
.jrtn-page .jrtn-about-facts,
.jrtn-page .jrtn-topic-grid {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-about-hero {
padding-right: 0 !important;
}
.jrtn-page .jrtn-about-title,
.jrtn-page .jrtn-about-lead {
max-width: 100% !important;
}
}
/* ==========================================================================
18. TYPOGRAPHY SYNC WITH OJS
Menyamakan tipografi custom HTML dengan theme aktif OJS
========================================================================== */
/*
* Root halaman custom mengikuti font yang digunakan
* oleh container dan theme OJS.
*/
.jrtn-page {
font-family: inherit !important;
}
/*
* Timpa seluruh font-family yang sebelumnya dipaksakan
* pada elemen custom JRTN.
*/
.jrtn-page p,
.jrtn-page a,
.jrtn-page span,
.jrtn-page strong,
.jrtn-page li,
.jrtn-page h2,
.jrtn-page h3,
.jrtn-page h4,
.jrtn-page button,
.jrtn-page .jrtn-meta,
.jrtn-page .jrtn-button,
.jrtn-page .jrtn-hero-title,
.jrtn-page .jrtn-section-title,
.jrtn-page .jrtn-about-title,
.jrtn-page .jrtn-scope-item h4,
.jrtn-page .jrtn-about-scope-list h4,
.jrtn-page .jrtn-purpose-list h4,
.jrtn-page .jrtn-notice h3 {
font-family: inherit !important;
}
/* --------------------------------------------------------------------------
NORMALISASI HEADING
Menggunakan weight standar agar tidak terasa seperti font sintetis
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-hero-title,
.jrtn-page .jrtn-about-title {
font-weight: 700 !important;
letter-spacing: -0.012em !important;
}
.jrtn-page .jrtn-section-title {
font-weight: 700 !important;
letter-spacing: -0.008em !important;
}
.jrtn-page .jrtn-scope-item h4,
.jrtn-page .jrtn-about-scope-list h4,
.jrtn-page .jrtn-purpose-list h4,
.jrtn-page .jrtn-notice h3 {
font-weight: 700 !important;
letter-spacing: 0 !important;
}
/* --------------------------------------------------------------------------
LABEL DAN METADATA
Tetap memiliki hierarki, tetapi tidak terlalu mekanis
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-eyebrow,
.jrtn-page .jrtn-about-kicker,
.jrtn-page .jrtn-meta,
.jrtn-page .jrtn-fact-label,
.jrtn-page .jrtn-about-fact-label,
.jrtn-page .jrtn-notice-label,
.jrtn-page .jrtn-publisher-meta-label {
font-weight: 700 !important;
letter-spacing: 0.045em !important;
}
/* --------------------------------------------------------------------------
BODY COPY
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-hero-lead,
.jrtn-page .jrtn-about-lead,
.jrtn-page .jrtn-section-intro,
.jrtn-page .jrtn-scope-item p,
.jrtn-page .jrtn-about-scope-list p,
.jrtn-page .jrtn-purpose-list p,
.jrtn-page .jrtn-notice p,
.jrtn-page .jrtn-publisher-box p {
font-weight: 400 !important;
letter-spacing: normal !important;
}
/* --------------------------------------------------------------------------
BUTTONS
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-button {
font-family: inherit !important;
font-weight: 600 !important;
letter-spacing: normal !important;
}
/* ==========================================================================
19. KEY INFORMATION SECTION HEADERS
Heading besar untuk informasi yang paling sering dicari author dan reader
========================================================================== */
.jrtn-page .jrtn-key-section-header {
position: relative !important;
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 0 18px !important;
padding: 0 0 14px !important;
border-bottom: 1px solid var(--jrtn-line) !important;
}
/* Aksen pendek di atas heading */
.jrtn-page .jrtn-key-section-header::before {
display: block !important;
width: 38px !important;
height: 3px !important;
margin: 0 0 10px !important;
background: var(--jrtn-accent) !important;
border-radius: 3px !important;
content: "" !important;
}
/* Nama section utama */
.jrtn-page .jrtn-key-section-title {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 0 !important;
color: var(--jrtn-ink) !important;
font-family: inherit !important;
font-size: clamp(1.5rem, 2.5vw, 1.9rem) !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
line-height: 1.25 !important;
word-break: normal !important;
overflow-wrap: normal !important;
white-space: normal !important;
}
/* Penjelasan singkat di bawah nama section */
.jrtn-page .jrtn-key-section-description {
display: block !important;
width: 100% !important;
max-width: 820px !important;
margin: 7px 0 0 !important;
padding: 0 !important;
color: var(--jrtn-muted) !important;
font-family: inherit !important;
font-size: 0.95rem !important;
font-weight: 400 !important;
line-height: 1.6 !important;
}
/*
* Versi compact untuk heading yang berada
* di dalam panel dua kolom.
*/
.jrtn-page .jrtn-key-section-header-compact {
margin-bottom: 14px !important;
padding-bottom: 11px !important;
}
.jrtn-page .jrtn-key-section-header-compact::before {
width: 30px !important;
margin-bottom: 8px !important;
}
.jrtn-page .jrtn-key-section-header-compact
.jrtn-key-section-title {
font-size: clamp(1.25rem, 2vw, 1.5rem) !important;
}
.jrtn-page .jrtn-key-section-header-compact
.jrtn-key-section-description {
margin-top: 5px !important;
font-size: 0.9rem !important;
}
/* Memudahkan anchor link berhenti di posisi yang nyaman */
.jrtn-page section[id],
.jrtn-page div[id] {
scroll-margin-top: 90px;
}
@media (max-width: 680px) {
.jrtn-page .jrtn-key-section-header {
margin-bottom: 15px !important;
padding-bottom: 12px !important;
}
.jrtn-page .jrtn-key-section-title {
font-size: 1.45rem !important;
line-height: 1.28 !important;
}
.jrtn-page .jrtn-key-section-description {
font-size: 0.92rem !important;
}
}
/* ==========================================================================
20. AIMS, FOCUS AND SCOPE PAGE
Tambahkan pada bagian paling bawah stylesheet JRTN
========================================================================== */
/* --------------------------------------------------------------------------
CONTEXTUAL REQUIREMENT BOX
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-scope-note {
position: relative !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
margin: 18px 0 0 !important;
padding: 20px 22px 20px 58px !important;
background:
linear-gradient(
140deg,
rgba(238, 245, 251, 0.95),
rgba(248, 250, 252, 1)
) !important;
border: 1px solid #bfd0df !important;
border-left: 4px solid var(--jrtn-accent) !important;
border-radius: 7px !important;
}
.jrtn-page .jrtn-scope-note::before {
position: absolute !important;
top: 20px !important;
left: 19px !important;
display: inline-flex !important;
width: 25px !important;
height: 25px !important;
align-items: center !important;
justify-content: center !important;
content: "i" !important;
background: var(--jrtn-accent) !important;
color: var(--jrtn-white) !important;
border-radius: 50% !important;
font-family: inherit !important;
font-size: 0.82rem !important;
font-weight: 700 !important;
line-height: 1 !important;
}
.jrtn-page .jrtn-scope-note h4 {
display: block !important;
width: 100% !important;
margin: 0 0 6px !important;
padding: 0 !important;
color: var(--jrtn-ink) !important;
font-family: inherit !important;
font-size: 1rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
.jrtn-page .jrtn-scope-note p {
margin: 0 !important;
color: var(--jrtn-muted) !important;
font-size: 0.92rem !important;
line-height: 1.62 !important;
}
/* --------------------------------------------------------------------------
SUITABILITY CHECKLIST
Centang hijau untuk indikator manuskrip yang sesuai dengan scope
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-fit-list {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
width: 100% !important;
margin: 18px 0 0 !important;
padding: 0 !important;
list-style: none !important;
}
.jrtn-page .jrtn-fit-list > li {
position: relative !important;
display: block !important;
min-width: 0 !important;
margin: 0 !important;
padding: 14px 15px 14px 47px !important;
background: #fbfefc !important;
border: 1px solid #cfe4d5 !important;
border-radius: 6px !important;
color: var(--jrtn-ink) !important;
font-size: 0.9rem !important;
line-height: 1.52 !important;
}
/* Hilangkan marker list bawaan theme OJS */
.jrtn-page .jrtn-fit-list > li::marker {
content: none !important;
}
/* Centang hijau */
.jrtn-page .jrtn-fit-list > li::before {
position: absolute !important;
top: 14px !important;
left: 15px !important;
display: inline-flex !important;
width: 22px !important;
height: 22px !important;
align-items: center !important;
justify-content: center !important;
content: "✓" !important;
background: #e6f4ea !important;
color: #247a3d !important;
border: 1px solid #9fceac !important;
border-radius: 50% !important;
font-family: inherit !important;
font-size: 0.78rem !important;
font-weight: 800 !important;
line-height: 1 !important;
}
/* --------------------------------------------------------------------------
OUT-OF-SCOPE LIST
Silang merah untuk kondisi yang berada di luar scope jurnal
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-exclusion-list {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 9px !important;
width: 100% !important;
margin: 18px 0 0 !important;
padding: 0 !important;
list-style: none !important;
border-top: 0 !important;
}
.jrtn-page .jrtn-exclusion-list > li {
position: relative !important;
display: block !important;
min-width: 0 !important;
margin: 0 !important;
padding: 14px 15px 14px 47px !important;
background: #fffafa !important;
border: 1px solid #ebd1d1 !important;
border-radius: 6px !important;
color: var(--jrtn-muted) !important;
font-size: 0.91rem !important;
line-height: 1.55 !important;
}
/* Hilangkan marker bawaan theme */
.jrtn-page .jrtn-exclusion-list > li::marker {
content: none !important;
}
/* Silang merah */
.jrtn-page .jrtn-exclusion-list > li::before {
position: absolute !important;
top: 14px !important;
left: 15px !important;
display: inline-flex !important;
width: 22px !important;
height: 22px !important;
align-items: center !important;
justify-content: center !important;
content: "×" !important;
background: #fbeaea !important;
color: #a33a3a !important;
border: 1px solid #dfadad !important;
border-radius: 50% !important;
font-family: inherit !important;
font-size: 1rem !important;
font-weight: 700 !important;
line-height: 1 !important;
}
/* --------------------------------------------------------------------------
BOTTOM SUBMISSION PANEL
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-scope-action {
position: relative !important;
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 24px !important;
align-items: center !important;
width: 100% !important;
margin: 0 0 18px !important;
padding: 22px 24px !important;
overflow: hidden !important;
background:
linear-gradient(
140deg,
rgba(238, 245, 251, 0.92),
rgba(255, 255, 255, 1)
) !important;
border: 1px solid var(--jrtn-line) !important;
border-left: 4px solid var(--jrtn-accent) !important;
border-radius: 8px !important;
}
.jrtn-page .jrtn-scope-action h3 {
display: block !important;
width: 100% !important;
margin: 0 0 5px !important;
padding: 0 !important;
color: var(--jrtn-ink) !important;
font-family: inherit !important;
font-size: 1.2rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
.jrtn-page .jrtn-scope-action p {
margin: 0 !important;
color: var(--jrtn-muted) !important;
font-size: 0.91rem !important;
line-height: 1.58 !important;
}
.jrtn-page .jrtn-scope-action-buttons {
display: flex !important;
flex-wrap: wrap !important;
gap: 9px !important;
justify-content: flex-end !important;
}
/* --------------------------------------------------------------------------
RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width: 780px) {
.jrtn-page .jrtn-fit-list {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-scope-action {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-scope-action-buttons {
justify-content: flex-start !important;
}
}
@media (max-width: 480px) {
.jrtn-page .jrtn-scope-note {
padding: 50px 17px 17px !important;
}
.jrtn-page .jrtn-scope-note::before {
top: 16px !important;
left: 17px !important;
}
.jrtn-page .jrtn-scope-action {
padding: 18px !important;
}
.jrtn-page .jrtn-scope-action-buttons {
display: grid !important;
grid-template-columns: 1fr !important;
}
}
/* ==========================================================================
21. PUBLISHER, OWNERSHIP, AND CONTACT PAGES
========================================================================== */
/* --------------------------------------------------------------------------
PUBLISHER IDENTITY
Accent line memiliki ruang sendiri dan tidak menutupi label
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-publisher-identity {
position: relative !important;
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 24px !important;
width: 100% !important;
margin: 18px 0 0 !important;
padding: 0 18px 0 22px !important;
overflow: hidden !important;
background: var(--jrtn-white) !important;
border: 1px solid var(--jrtn-line) !important;
border-left: 1px solid var(--jrtn-line) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
/* Accent line terpisah dari area teks */
.jrtn-page .jrtn-publisher-identity::before {
position: absolute !important;
top: 0 !important;
bottom: 0 !important;
left: 0 !important;
display: block !important;
width: 4px !important;
content: "" !important;
background: var(--jrtn-accent) !important;
border-radius: 8px 0 0 8px !important;
pointer-events: none !important;
}
.jrtn-page .jrtn-publisher-identity-row {
display: grid !important;
grid-template-columns:
minmax(128px, 0.38fr)
minmax(0, 0.62fr) !important;
gap: 14px !important;
align-items: start !important;
min-width: 0 !important;
margin: 0 !important;
padding: 13px 0 !important;
border-bottom: 1px solid var(--jrtn-line) !important;
}
/* Hilangkan garis bawah pada dua item terakhir */
.jrtn-page .jrtn-publisher-identity-row:nth-last-child(-n + 2) {
border-bottom: 0 !important;
}
.jrtn-page .jrtn-publisher-identity-label {
display: block !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
color: var(--jrtn-muted) !important;
font-family: inherit !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.045em !important;
line-height: 1.45 !important;
text-transform: uppercase !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
.jrtn-page .jrtn-publisher-identity-value {
display: block !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
color: var(--jrtn-ink) !important;
font-family: inherit !important;
font-size: 0.92rem !important;
font-weight: 600 !important;
line-height: 1.52 !important;
word-break: normal !important;
overflow-wrap: anywhere !important;
}
.jrtn-page .jrtn-publisher-identity-value a {
color: var(--jrtn-accent) !important;
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 3px !important;
}
@media (max-width: 900px) {
.jrtn-page .jrtn-publisher-identity {
grid-template-columns: 1fr !important;
padding-right: 17px !important;
padding-left: 21px !important;
}
.jrtn-page .jrtn-publisher-identity-row:nth-last-child(-n + 2) {
border-bottom: 1px solid var(--jrtn-line) !important;
}
.jrtn-page .jrtn-publisher-identity-row:last-child {
border-bottom: 0 !important;
}
}
@media (max-width: 560px) {
.jrtn-page .jrtn-publisher-identity-row {
grid-template-columns: 1fr !important;
gap: 4px !important;
}
}
/* --------------------------------------------------------------------------
PUBLISHER RESPONSIBILITIES
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-responsibility-list {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
width: 100% !important;
margin: 17px 0 0 !important;
padding: 0 !important;
list-style: none !important;
border-top: 1px solid var(--jrtn-line) !important;
}
.jrtn-page .jrtn-responsibility-list > li {
position: relative !important;
margin: 0 !important;
padding: 11px 4px 11px 21px !important;
color: var(--jrtn-muted) !important;
border-bottom: 1px solid var(--jrtn-line) !important;
font-family: inherit !important;
font-size: 0.91rem !important;
line-height: 1.58 !important;
}
.jrtn-page .jrtn-responsibility-list > li::before {
position: absolute !important;
top: 20px !important;
left: 3px !important;
display: block !important;
width: 6px !important;
height: 6px !important;
content: "" !important;
background: var(--jrtn-accent) !important;
border-radius: 50% !important;
}
/* --------------------------------------------------------------------------
EDITORIAL INDEPENDENCE
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-independence-box {
display: block !important;
width: 100% !important;
margin: 17px 0 0 !important;
padding: 18px 20px !important;
background:
linear-gradient(
145deg,
rgba(238, 245, 251, 0.92),
rgba(250, 252, 253, 1)
) !important;
border: 1px solid #bfd0df !important;
border-left: 4px solid var(--jrtn-accent) !important;
border-radius: 7px !important;
}
.jrtn-page .jrtn-independence-box h4 {
margin: 0 0 6px !important;
color: var(--jrtn-ink) !important;
font-family: inherit !important;
font-size: 0.98rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
.jrtn-page .jrtn-independence-box p {
margin: 0 !important;
color: var(--jrtn-muted) !important;
font-family: inherit !important;
font-size: 0.91rem !important;
line-height: 1.62 !important;
}
/* --------------------------------------------------------------------------
PUBLISHER QUICK CONTACT
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-publisher-contact-strip {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 0 !important;
width: 100% !important;
margin: 0 0 18px !important;
padding: 0 !important;
overflow: hidden !important;
background: var(--jrtn-white) !important;
border: 1px solid var(--jrtn-line) !important;
border-radius: 8px !important;
}
.jrtn-page .jrtn-publisher-contact-item {
display: block !important;
min-width: 0 !important;
margin: 0 !important;
padding: 16px 18px !important;
}
.jrtn-page .jrtn-publisher-contact-item + .jrtn-publisher-contact-item {
border-left: 1px solid var(--jrtn-line) !important;
}
.jrtn-page .jrtn-publisher-contact-label {
display: block !important;
margin: 0 0 4px !important;
color: var(--jrtn-muted) !important;
font-family: inherit !important;
font-size: 0.68rem !important;
font-weight: 700 !important;
letter-spacing: 0.045em !important;
text-transform: uppercase !important;
}
.jrtn-page .jrtn-publisher-contact-value {
display: block !important;
color: var(--jrtn-ink) !important;
font-family: inherit !important;
font-size: 0.91rem !important;
font-weight: 600 !important;
line-height: 1.48 !important;
overflow-wrap: anywhere !important;
}
/* --------------------------------------------------------------------------
CONTACT ROUTING GUIDE
Diletakkan di atas kontak bawaan OJS
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-contact-routing {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 11px !important;
width: 100% !important;
margin: 18px 0 !important;
padding: 0 !important;
}
.jrtn-page .jrtn-contact-route {
display: block !important;
min-width: 0 !important;
margin: 0 !important;
padding: 16px !important;
background: var(--jrtn-white) !important;
border: 1px solid var(--jrtn-line) !important;
border-top: 3px solid var(--jrtn-accent) !important;
border-radius: 6px !important;
}
.jrtn-page .jrtn-contact-route-label {
display: block !important;
margin: 0 0 5px !important;
color: var(--jrtn-accent) !important;
font-family: inherit !important;
font-size: 0.67rem !important;
font-weight: 700 !important;
letter-spacing: 0.05em !important;
line-height: 1.4 !important;
text-transform: uppercase !important;
}
.jrtn-page .jrtn-contact-route h4 {
margin: 0 0 6px !important;
color: var(--jrtn-ink) !important;
font-family: inherit !important;
font-size: 0.96rem !important;
font-weight: 700 !important;
line-height: 1.42 !important;
}
.jrtn-page .jrtn-contact-route p {
margin: 0 !important;
color: var(--jrtn-muted) !important;
font-family: inherit !important;
font-size: 0.88rem !important;
line-height: 1.56 !important;
}
/* --------------------------------------------------------------------------
CONTACT NOTICE
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-contact-notice {
display: block !important;
width: 100% !important;
margin: 0 0 18px !important;
padding: 15px 17px !important;
background: var(--jrtn-accent-soft) !important;
border: 1px solid #c2d3e1 !important;
border-radius: 6px !important;
}
.jrtn-page .jrtn-contact-notice p {
margin: 0 !important;
color: var(--jrtn-muted) !important;
font-family: inherit !important;
font-size: 0.89rem !important;
line-height: 1.58 !important;
}
/* --------------------------------------------------------------------------
CONTACT DETAILS
Digunakan jika kontak ditampilkan melalui HTML custom
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-contact-cards {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
width: 100% !important;
margin: 0 0 18px !important;
}
.jrtn-page .jrtn-contact-card {
display: block !important;
min-width: 0 !important;
margin: 0 !important;
padding: 20px !important;
background: var(--jrtn-white) !important;
border: 1px solid var(--jrtn-line) !important;
border-radius: 8px !important;
}
.jrtn-page .jrtn-contact-card-role {
display: block !important;
margin: 0 0 6px !important;
color: var(--jrtn-accent) !important;
font-family: inherit !important;
font-size: 0.69rem !important;
font-weight: 700 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
}
.jrtn-page .jrtn-contact-card h3 {
margin: 0 0 4px !important;
color: var(--jrtn-ink) !important;
font-family: inherit !important;
font-size: 1.12rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
.jrtn-page .jrtn-contact-affiliation {
margin: 0 0 15px !important;
color: var(--jrtn-muted) !important;
font-family: inherit !important;
font-size: 0.88rem !important;
line-height: 1.55 !important;
}
.jrtn-page .jrtn-contact-details {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border-top: 1px solid var(--jrtn-line) !important;
}
.jrtn-page .jrtn-contact-detail {
display: grid !important;
grid-template-columns: 75px minmax(0, 1fr) !important;
gap: 12px !important;
padding: 9px 0 !important;
border-bottom: 1px solid var(--jrtn-line) !important;
}
.jrtn-page .jrtn-contact-detail-label {
color: var(--jrtn-muted) !important;
font-family: inherit !important;
font-size: 0.68rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
.jrtn-page .jrtn-contact-detail-value {
color: var(--jrtn-ink) !important;
font-family: inherit !important;
font-size: 0.89rem !important;
font-weight: 500 !important;
line-height: 1.45 !important;
overflow-wrap: anywhere !important;
}
/* --------------------------------------------------------------------------
OPTIONAL: PENYESUAIAN KONTAK BAWAAN OJS
Selector ini aman jika struktur theme menggunakan .page_contact
-------------------------------------------------------------------------- */
.page_contact .address,
.page_contact .contact {
margin-bottom: 16px !important;
padding: 18px !important;
background: #ffffff !important;
border: 1px solid #d5e0ea !important;
border-radius: 7px !important;
}
.page_contact .contact h2,
.page_contact .contact h3,
.page_contact .address h2,
.page_contact .address h3 {
margin-top: 0 !important;
font-family: inherit !important;
font-weight: 700 !important;
}
/* --------------------------------------------------------------------------
RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
.jrtn-page .jrtn-publisher-identity,
.jrtn-page .jrtn-contact-routing {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-publisher-contact-strip {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-publisher-contact-item
+ .jrtn-publisher-contact-item {
border-top: 1px solid var(--jrtn-line) !important;
border-left: 0 !important;
}
}
@media (max-width: 680px) {
.jrtn-page .jrtn-publisher-identity-row {
grid-template-columns: 1fr !important;
gap: 4px !important;
}
.jrtn-page .jrtn-contact-cards {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 480px) {
.jrtn-page .jrtn-contact-detail {
grid-template-columns: 1fr !important;
gap: 3px !important;
}
}
/* ==========================================================================
22. CUSTOM CONTACT PAGE
Journal of Rural and Tropical Nursing
========================================================================== */
.jrtn-page.jrtn-contact-page {
width: 100% !important;
max-width: none !important;
}
/* --------------------------------------------------------------------------
CONTACT ROUTING
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-contact-routing-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 11px !important;
width: 100% !important;
margin: 18px 0 0 !important;
padding: 0 !important;
}
.jrtn-page .jrtn-contact-route-card {
position: relative !important;
display: block !important;
min-width: 0 !important;
margin: 0 !important;
padding: 17px 17px 17px 50px !important;
background: var(--jrtn-white) !important;
border: 1px solid var(--jrtn-line) !important;
border-radius: 7px !important;
}
.jrtn-page .jrtn-contact-route-index {
position: absolute !important;
top: 17px !important;
left: 15px !important;
display: inline-flex !important;
width: 25px !important;
height: 25px !important;
align-items: center !important;
justify-content: center !important;
background: var(--jrtn-accent-soft) !important;
color: var(--jrtn-accent-dark) !important;
border: 1px solid #b9ccdd !important;
border-radius: 4px !important;
font-family: inherit !important;
font-size: 0.67rem !important;
font-weight: 700 !important;
line-height: 1 !important;
}
.jrtn-page .jrtn-contact-route-card h4 {
display: block !important;
width: 100% !important;
margin: 0 0 6px !important;
padding: 0 !important;
color: var(--jrtn-ink) !important;
font-family: inherit !important;
font-size: 0.96rem !important;
font-weight: 700 !important;
line-height: 1.42 !important;
}
.jrtn-page .jrtn-contact-route-card p {
margin: 0 !important;
color: var(--jrtn-muted) !important;
font-family: inherit !important;
font-size: 0.88rem !important;
line-height: 1.57 !important;
}
/* --------------------------------------------------------------------------
CONTACT PERSON DIRECTORY
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-contact-directory {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 14px !important;
width: 100% !important;
margin: 0 0 18px !important;
padding: 0 !important;
}
.jrtn-page .jrtn-contact-person-card {
position: relative !important;
display: flex !important;
flex-direction: column !important;
min-width: 0 !important;
margin: 0 !important;
padding: 22px !important;
overflow: hidden !important;
background: var(--jrtn-white) !important;
border: 1px solid var(--jrtn-line) !important;
border-radius: 8px !important;
box-shadow: none !important;
}
/* Accent berbeda tipis untuk membedakan fungsi */
.jrtn-page .jrtn-contact-person-card::before {
position: absolute !important;
top: 0 !important;
right: 0 !important;
left: 0 !important;
display: block !important;
height: 4px !important;
content: "" !important;
background: var(--jrtn-accent) !important;
}
.jrtn-page .jrtn-contact-person-card-technical::before {
background: #47748f !important;
}
.jrtn-page .jrtn-contact-role {
display: block !important;
margin: 2px 0 7px !important;
color: var(--jrtn-accent) !important;
font-family: inherit !important;
font-size: 0.69rem !important;
font-weight: 700 !important;
letter-spacing: 0.055em !important;
line-height: 1.4 !important;
text-transform: uppercase !important;
}
.jrtn-page .jrtn-contact-person-name {
display: block !important;
width: 100% !important;
margin: 0 0 6px !important;
padding: 0 !important;
color: var(--jrtn-ink) !important;
font-family: inherit !important;
font-size: 1.18rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
.jrtn-page .jrtn-contact-person-affiliation {
margin: 0 0 14px !important;
color: var(--jrtn-muted) !important;
font-family: inherit !important;
font-size: 0.88rem !important;
line-height: 1.57 !important;
}
.jrtn-page .jrtn-contact-person-purpose {
margin: 0 0 15px !important;
padding: 12px 14px !important;
background: var(--jrtn-surface) !important;
border-left: 3px solid var(--jrtn-accent) !important;
border-radius: 0 5px 5px 0 !important;
color: var(--jrtn-muted) !important;
font-family: inherit !important;
font-size: 0.87rem !important;
line-height: 1.56 !important;
}
/* --------------------------------------------------------------------------
CONTACT DETAIL ROWS
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-contact-meta {
display: block !important;
width: 100% !important;
margin: auto 0 0 !important;
padding: 0 !important;
border-top: 1px solid var(--jrtn-line) !important;
}
.jrtn-page .jrtn-contact-meta-row {
display: grid !important;
grid-template-columns: 82px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
width: 100% !important;
margin: 0 !important;
padding: 10px 0 !important;
border-bottom: 1px solid var(--jrtn-line) !important;
}
.jrtn-page .jrtn-contact-meta-row:last-child {
border-bottom: 0 !important;
}
.jrtn-page .jrtn-contact-meta-label {
display: block !important;
margin: 0 !important;
color: var(--jrtn-muted) !important;
font-family: inherit !important;
font-size: 0.67rem !important;
font-weight: 700 !important;
letter-spacing: 0.045em !important;
line-height: 1.5 !important;
text-transform: uppercase !important;
}
.jrtn-page .jrtn-contact-meta-value {
display: block !important;
min-width: 0 !important;
margin: 0 !important;
color: var(--jrtn-ink) !important;
font-family: inherit !important;
font-size: 0.89rem !important;
font-weight: 500 !important;
line-height: 1.5 !important;
overflow-wrap: anywhere !important;
}
.jrtn-page .jrtn-contact-meta-value a {
color: var(--jrtn-accent) !important;
font-weight: 600 !important;
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 3px !important;
}
/* --------------------------------------------------------------------------
PUBLISHER AND MAILING ADDRESS
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-contact-office {
display: grid !important;
grid-template-columns:
minmax(0, 1.15fr)
minmax(250px, 0.85fr) !important;
gap: 25px !important;
align-items: start !important;
width: 100% !important;
margin: 0 0 18px !important;
padding: 23px 25px !important;
background:
linear-gradient(
145deg,
rgba(238, 245, 251, 0.82),
rgba(255, 255, 255, 1)
) !important;
border: 1px solid var(--jrtn-line) !important;
border-left: 4px solid var(--jrtn-accent) !important;
border-radius: 8px !important;
}
.jrtn-page .jrtn-contact-office-description {
margin: 0 !important;
color: var(--jrtn-muted) !important;
font-family: inherit !important;
font-size: 0.92rem !important;
line-height: 1.63 !important;
}
.jrtn-page .jrtn-contact-office-details {
display: block !important;
min-width: 0 !important;
padding-left: 22px !important;
border-left: 1px solid var(--jrtn-line) !important;
}
.jrtn-page .jrtn-contact-office-row {
margin: 0 0 13px !important;
}
.jrtn-page .jrtn-contact-office-row:last-child {
margin-bottom: 0 !important;
}
.jrtn-page .jrtn-contact-office-label {
display: block !important;
margin: 0 0 3px !important;
color: var(--jrtn-muted) !important;
font-family: inherit !important;
font-size: 0.67rem !important;
font-weight: 700 !important;
letter-spacing: 0.045em !important;
line-height: 1.4 !important;
text-transform: uppercase !important;
}
.jrtn-page .jrtn-contact-office-value {
display: block !important;
min-width: 0 !important;
color: var(--jrtn-ink) !important;
font-family: inherit !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
line-height: 1.52 !important;
overflow-wrap: anywhere !important;
}
/* --------------------------------------------------------------------------
CONTACT GUIDANCE
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-contact-guidance {
display: block !important;
width: 100% !important;
margin: 0 0 18px !important;
padding: 18px 20px !important;
background: var(--jrtn-accent-soft) !important;
border: 1px solid #bfd0df !important;
border-radius: 7px !important;
}
.jrtn-page .jrtn-contact-guidance h3 {
display: block !important;
width: 100% !important;
margin: 0 0 7px !important;
color: var(--jrtn-ink) !important;
font-family: inherit !important;
font-size: 1rem !important;
font-weight: 700 !important;
line-height: 1.42 !important;
}
.jrtn-page .jrtn-contact-guidance-list {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 7px 24px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.jrtn-page .jrtn-contact-guidance-list > li {
position: relative !important;
margin: 0 !important;
padding: 7px 2px 7px 17px !important;
color: var(--jrtn-muted) !important;
font-family: inherit !important;
font-size: 0.88rem !important;
line-height: 1.52 !important;
}
.jrtn-page .jrtn-contact-guidance-list > li::before {
position: absolute !important;
top: 15px !important;
left: 2px !important;
display: block !important;
width: 5px !important;
height: 5px !important;
content: "" !important;
background: var(--jrtn-accent) !important;
border-radius: 50% !important;
}
/* --------------------------------------------------------------------------
RESPONSIVE CONTACT PAGE
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
.jrtn-page .jrtn-contact-routing-grid {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-contact-office {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-contact-office-details {
padding-top: 18px !important;
padding-left: 0 !important;
border-top: 1px solid var(--jrtn-line) !important;
border-left: 0 !important;
}
}
@media (max-width: 760px) {
.jrtn-page .jrtn-contact-directory {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-contact-guidance-list {
grid-template-columns: 1fr !important;
}
}
@media (max-width: 480px) {
.jrtn-page .jrtn-contact-person-card,
.jrtn-page .jrtn-contact-office {
padding: 18px !important;
}
.jrtn-page .jrtn-contact-meta-row {
grid-template-columns: 1fr !important;
gap: 3px !important;
}
.jrtn-page .jrtn-contact-route-card {
padding-right: 15px !important;
padding-left: 48px !important;
}
}
/* ==========================================================================
CONTACT PAGE — SECTION SPACING
Memberi jarak vertikal konsisten antarbagian utama
========================================================================== */
/* Hilangkan margin bawah lama pada elemen utama */
.jrtn-page.jrtn-contact-page > .jrtn-about-hero,
.jrtn-page.jrtn-contact-page > section,
.jrtn-page.jrtn-contact-page > .jrtn-contact-office,
.jrtn-page.jrtn-contact-page > .jrtn-contact-guidance {
margin-bottom: 0 !important;
}
/* Beri jarak pada setiap elemen utama setelah elemen pertama */
.jrtn-page.jrtn-contact-page > * + * {
margin-top: 28px !important;
}
/* Jarak sedikit lebih ringkas pada mobile */
@media (max-width: 680px) {
.jrtn-page.jrtn-contact-page > * + * {
margin-top: 20px !important;
}
}
.jrtn-page > * + * {
margin-top: 28px !important;
}
@media (max-width: 680px) {
.jrtn-page > * + * {
margin-top: 20px !important;
}
}
/* ==========================================================================
23. JRTN RIGHT SIDEBAR
========================================================================== */
.jrtn-sidebar {
--jrtn-sidebar-ink: #172033;
--jrtn-sidebar-muted: #637083;
--jrtn-sidebar-line: #d9e2ea;
--jrtn-sidebar-surface: #f7f9fb;
--jrtn-sidebar-blue: #1e4b7a;
--jrtn-sidebar-blue-dark: #163a5d;
--jrtn-sidebar-blue-soft: #eef5fb;
--jrtn-sidebar-green: #3d7452;
--jrtn-sidebar-brown: #80643e;
--jrtn-sidebar-slate: #526b7a;
--jrtn-sidebar-purple: #705383;
display: block !important;
width: 100% !important;
color: var(--jrtn-sidebar-ink) !important;
font-family: inherit !important;
}
.jrtn-sidebar *,
.jrtn-sidebar *::before,
.jrtn-sidebar *::after {
box-sizing: border-box;
}
.jrtn-sidebar a {
color: var(--jrtn-sidebar-blue) !important;
}
.jrtn-sidebar a:focus-visible {
outline: 3px solid rgba(30, 75, 122, 0.25);
outline-offset: 3px;
}
/* --------------------------------------------------------------------------
SHARED BLOCK
-------------------------------------------------------------------------- */
.jrtn-sidebar-block {
display: block !important;
width: 100% !important;
margin: 0 0 16px !important;
padding: 16px !important;
background: #ffffff !important;
border: 1px solid var(--jrtn-sidebar-line) !important;
border-radius: 7px !important;
box-shadow: none !important;
}
.jrtn-sidebar-heading {
position: relative !important;
display: block !important;
margin: 0 0 13px !important;
padding: 0 0 0 12px !important;
}
.jrtn-sidebar-heading::before {
position: absolute !important;
top: 1px !important;
bottom: 1px !important;
left: 0 !important;
display: block !important;
width: 3px !important;
content: "" !important;
background: var(--jrtn-sidebar-blue) !important;
border-radius: 3px !important;
}
.jrtn-sidebar-block-downloads .jrtn-sidebar-heading::before {
background: var(--jrtn-sidebar-green) !important;
}
.jrtn-sidebar-block-policies .jrtn-sidebar-heading::before {
background: var(--jrtn-sidebar-brown) !important;
}
.jrtn-sidebar-block-rights .jrtn-sidebar-heading::before {
background: var(--jrtn-sidebar-slate) !important;
}
.jrtn-sidebar-block-services .jrtn-sidebar-heading::before {
background: #607d8b !important;
}
.jrtn-sidebar-block-visitors .jrtn-sidebar-heading::before {
background: var(--jrtn-sidebar-purple) !important;
}
.jrtn-sidebar-block-tools .jrtn-sidebar-heading::before {
background: #0284c7 !important;
}
.jrtn-sidebar-eyebrow {
display: block !important;
margin: 0 0 2px !important;
color: var(--jrtn-sidebar-muted) !important;
font-family: inherit !important;
font-size: 0.66rem !important;
font-weight: 700 !important;
letter-spacing: 0.07em !important;
line-height: 1.4 !important;
text-transform: uppercase !important;
}
.jrtn-sidebar-title {
display: block !important;
margin: 0 !important;
color: var(--jrtn-sidebar-ink) !important;
font-family: inherit !important;
font-size: 1.06rem !important;
font-weight: 700 !important;
line-height: 1.35 !important;
}
/* --------------------------------------------------------------------------
DOWNLOAD CARDS
-------------------------------------------------------------------------- */
.jrtn-sidebar-downloads {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
margin: 0 !important;
}
.jrtn-sidebar-download {
display: grid !important;
grid-template-columns: 44px minmax(0, 1fr) !important;
gap: 11px !important;
align-items: center !important;
min-width: 0 !important;
padding: 10px 11px !important;
color: var(--jrtn-sidebar-ink) !important;
text-decoration: none !important;
background: var(--jrtn-sidebar-surface) !important;
border: 1px solid var(--jrtn-sidebar-line) !important;
border-radius: 6px !important;
}
.jrtn-sidebar-download:hover {
background: var(--jrtn-sidebar-blue-soft) !important;
border-color: #b7cbdc !important;
}
.jrtn-sidebar-download-icon {
display: flex !important;
width: 44px !important;
height: 44px !important;
align-items: center !important;
justify-content: center !important;
overflow: hidden !important;
background: #ffffff !important;
border: 1px solid var(--jrtn-sidebar-line) !important;
border-radius: 5px !important;
}
.jrtn-sidebar-download-icon img {
display: block !important;
width: 34px !important;
height: 34px !important;
object-fit: contain !important;
}
.jrtn-sidebar-download-text {
display: block !important;
min-width: 0 !important;
}
.jrtn-sidebar-download-title {
display: block !important;
margin: 0 0 2px !important;
color: var(--jrtn-sidebar-ink) !important;
font-family: inherit !important;
font-size: 0.88rem !important;
font-weight: 700 !important;
line-height: 1.35 !important;
}
.jrtn-sidebar-download-meta {
display: block !important;
color: var(--jrtn-sidebar-muted) !important;
font-family: inherit !important;
font-size: 0.73rem !important;
font-weight: 400 !important;
line-height: 1.4 !important;
}
/* --------------------------------------------------------------------------
AUTHOR / PUBLISHING TOOLS (2x2 GRID)
-------------------------------------------------------------------------- */
.jrtn-sidebar-tools-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
margin: 0 !important;
}
.jrtn-sidebar-tool-card {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
padding: 12px 6px 10px !important;
background: var(--jrtn-sidebar-surface) !important;
border: 1px solid var(--jrtn-sidebar-line) !important;
border-radius: 6px !important;
text-decoration: none !important;
color: var(--jrtn-sidebar-ink) !important;
transition: all 0.18s ease-in-out !important;
min-width: 0 !important;
}
.jrtn-sidebar-tool-card:hover {
background: #ffffff !important;
border-color: #94a3b8 !important;
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.05) !important;
transform: translateY(-1px) !important;
}
.jrtn-sidebar-tool-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 38px !important;
height: 38px !important;
margin-bottom: 7px !important;
border-radius: 8px !important;
background: #ffffff !important;
border: 1px solid var(--jrtn-sidebar-line) !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
flex-shrink: 0 !important;
}
.jrtn-sidebar-tool-icon img {
display: block !important;
width: 22px !important;
height: 22px !important;
object-fit: contain !important;
}
.jrtn-tool-mendeley {
background: #fff5f5 !important;
border-color: #fed7d7 !important;
}
.jrtn-tool-turnitin {
background: #f0f7ff !important;
border-color: #bfdbfe !important;
}
.jrtn-tool-grammarly {
background: #f0fdf4 !important;
border-color: #bbf7d0 !important;
}
.jrtn-tool-scholar {
background: #f8faff !important;
border-color: #dbeafe !important;
}
.jrtn-sidebar-tool-info {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
width: 100% !important;
min-width: 0 !important;
gap: 2px !important;
}
.jrtn-sidebar-tool-title {
display: block !important;
font-family: inherit !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
color: var(--jrtn-sidebar-ink) !important;
line-height: 1.25 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
.jrtn-sidebar-tool-desc {
display: block !important;
font-family: inherit !important;
font-size: 0.64rem !important;
font-weight: 500 !important;
color: var(--jrtn-sidebar-muted) !important;
line-height: 1.2 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
max-width: 100% !important;
}
/* --------------------------------------------------------------------------
SUBMIT CTA
-------------------------------------------------------------------------- */
.jrtn-sidebar-submit {
position: relative !important;
display: block !important;
width: 100% !important;
margin: 0 0 16px !important;
padding: 17px !important;
overflow: hidden !important;
background: var(--jrtn-sidebar-blue) !important;
border: 1px solid var(--jrtn-sidebar-blue) !important;
border-radius: 7px !important;
}
.jrtn-sidebar-submit::after {
position: absolute !important;
right: -44px !important;
bottom: -56px !important;
display: block !important;
width: 120px !important;
height: 120px !important;
content: "" !important;
border: 19px solid rgba(255, 255, 255, 0.07) !important;
border-radius: 50% !important;
pointer-events: none !important;
}
.jrtn-sidebar-submit-label,
.jrtn-sidebar-submit-title,
.jrtn-sidebar-submit-text,
.jrtn-sidebar-submit-button {
position: relative !important;
z-index: 1 !important;
}
.jrtn-sidebar-submit-label {
display: block !important;
margin: 0 0 4px !important;
color: rgba(255, 255, 255, 0.76) !important;
font-family: inherit !important;
font-size: 0.65rem !important;
font-weight: 700 !important;
letter-spacing: 0.07em !important;
text-transform: uppercase !important;
}
.jrtn-sidebar-submit-title {
display: block !important;
margin: 0 0 6px !important;
color: #ffffff !important;
font-family: inherit !important;
font-size: 1.08rem !important;
font-weight: 700 !important;
line-height: 1.35 !important;
}
.jrtn-sidebar-submit-text {
margin: 0 0 13px !important;
color: rgba(255, 255, 255, 0.84) !important;
font-family: inherit !important;
font-size: 0.79rem !important;
line-height: 1.5 !important;
}
.jrtn-sidebar-submit-button {
display: inline-flex !important;
min-height: 38px !important;
align-items: center !important;
justify-content: center !important;
padding: 8px 13px !important;
color: var(--jrtn-sidebar-blue-dark) !important;
text-decoration: none !important;
background: #ffffff !important;
border: 1px solid #ffffff !important;
border-radius: 5px !important;
font-family: inherit !important;
font-size: 0.82rem !important;
font-weight: 700 !important;
}
.jrtn-sidebar-submit-button:hover {
color: var(--jrtn-sidebar-blue-dark) !important;
background: #f1f5f9 !important;
}
/* --------------------------------------------------------------------------
SIDEBAR LINK LIST
-------------------------------------------------------------------------- */
.jrtn-sidebar-links {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 4px 0 0 !important;
border-top: 1px solid var(--jrtn-sidebar-line) !important;
}
.jrtn-sidebar-link {
position: relative !important;
display: flex !important;
align-items: center !important;
width: 100% !important;
margin: 3px 0 !important;
padding: 8px 32px 8px 10px !important;
color: var(--jrtn-sidebar-ink) !important;
text-decoration: none !important;
background: transparent !important;
border: 1px solid transparent !important;
border-bottom: 1px solid rgba(217, 226, 234, 0.45) !important;
border-radius: 6px !important;
font-family: inherit !important;
font-size: 0.84rem !important;
font-weight: 500 !important;
line-height: 1.42 !important;
transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease, padding-left 0.18s ease, box-shadow 0.18s ease !important;
}
.jrtn-sidebar-link:last-child {
border-bottom: 1px solid transparent !important;
}
.jrtn-sidebar-link::after {
position: absolute !important;
top: 50% !important;
right: 10px !important;
display: block !important;
content: "›" !important;
color: #8b98a8 !important;
font-size: 1.1rem !important;
font-weight: 600 !important;
line-height: 1 !important;
transform: translateY(-50%) !important;
transition: color 0.18s ease, transform 0.18s ease !important;
}
/* 1. HOVER EFFECT: Dark background with crisp white text & smooth forward nudge */
.jrtn-sidebar-link:hover {
background: #1e4b7a !important;
color: #ffffff !important;
border-color: #1e4b7a !important;
padding-left: 14px !important;
box-shadow: 0 2px 6px rgba(30, 75, 122, 0.22) !important;
}
.jrtn-sidebar-link:hover::after {
color: #ffffff !important;
transform: translateY(-50%) translateX(2px) !important;
}
/* 2. ACTIVE / CURRENT OPENED PAGE EFFECT:
Deep navy background with vibrant gold left-accent border (#f8d96b),
bold white text, elevated shadow, and gold indicator arrow */
.jrtn-sidebar-link.is-active,
.jrtn-sidebar-link.active,
.jrtn-sidebar-link[aria-current="page"],
body.pkp_page_author-guidelines .jrtn-sidebar a[href*="author-guidelines"],
body:has(.jrtn-author-guidelines-page) .jrtn-sidebar a[href*="author-guidelines"],
body.pkp_page_article-types .jrtn-sidebar a[href*="article-types"],
body:has(.jrtn-article-types-page) .jrtn-sidebar a[href*="article-types"],
body[class*="submission-checklist"] .jrtn-sidebar a[href*="submission-checklist"],
body:has(.jrtn-submission-checklist-page) .jrtn-sidebar a[href*="submission-checklist"],
body.pkp_page_reporting-guidelines .jrtn-sidebar a[href*="reporting-guidelines"],
body:has(.jrtn-reporting-guidelines-page) .jrtn-sidebar a[href*="reporting-guidelines"],
body.pkp_page_apcs .jrtn-sidebar a[href*="apcs"],
body.pkp_page_article-processing-charges .jrtn-sidebar a[href*="apcs"],
body:has(.jrtn-apc-page) .jrtn-sidebar a[href*="apcs"],
body.pkp_page_reviewer-guidelines .jrtn-sidebar a[href*="reviewer-guidelines"],
body:has(.jrtn-reviewer-guidelines-page) .jrtn-sidebar a[href*="reviewer-guidelines"],
body.pkp_page_reviewer-responsibilities .jrtn-sidebar a[href*="reviewer-responsibilities"],
body:has(.jrtn-reviewer-responsibilities-page) .jrtn-sidebar a[href*="reviewer-responsibilities"],
body[class*="reporting-coi"] .jrtn-sidebar a[href*="reporting-coi"],
body[class*="reviewer-conflicts-of-interest"] .jrtn-sidebar a[href*="reporting-coi"],
body:has(.jrtn-reviewer-coi-page) .jrtn-sidebar a[href*="reporting-coi"],
body.pkp_page_review-form .jrtn-sidebar a[href*="review-form"],
body:has(.jrtn-review-form-page) .jrtn-sidebar a[href*="review-form"],
body.pkp_page_aim-focus-scope .jrtn-sidebar a[href*="aim-focus-scope"],
body:has(.jrtn-scope-page) .jrtn-sidebar a[href*="aim-focus-scope"],
body.pkp_page_peer-review-process .jrtn-sidebar a[href*="peer-review-process"],
body:has(.jrtn-peer-review-page) .jrtn-sidebar a[href*="peer-review-process"],
body.pkp_page_publication-ethics .jrtn-sidebar a[href*="publication-ethics"],
body:has(.jrtn-ethics-page) .jrtn-sidebar a[href*="publication-ethics"],
body.pkp_page_authorship-contributorship .jrtn-sidebar a[href*="authorship-contributorship"],
body:has(.jrtn-authorship-page) .jrtn-sidebar a[href*="authorship-contributorship"],
body.pkp_page_research-ethics-consent .jrtn-sidebar a[href*="research-ethics-consent"],
body:has(.jrtn-research-ethics-page) .jrtn-sidebar a[href*="research-ethics-consent"],
body.pkp_page_conflict-of-interest .jrtn-sidebar a[href*="conflict-of-interest"],
body:has(.jrtn-coi-page) .jrtn-sidebar a[href*="conflict-of-interest"],
body.pkp_page_plagiarism .jrtn-sidebar a[href*="plagiarism"],
body.pkp_page_plagiarism-similarity .jrtn-sidebar a[href*="plagiarism"],
body:has(.jrtn-plagiarism-page) .jrtn-sidebar a[href*="plagiarism"],
body.pkp_page_AI-policy .jrtn-sidebar a[href*="AI-policy"],
body.pkp_page_ai-policy .jrtn-sidebar a[href*="AI-policy"],
body:has(.jrtn-ai-policy-page) .jrtn-sidebar a[href*="AI-policy"],
body.pkp_page_corrections-retractions .jrtn-sidebar a[href*="corrections-retractions"],
body:has(.jrtn-corrections-page) .jrtn-sidebar a[href*="corrections-retractions"],
body.pkp_page_complaints-appeals .jrtn-sidebar a[href*="complaints-appeals"],
body:has(.jrtn-complaints-page) .jrtn-sidebar a[href*="complaints-appeals"],
body.pkp_page_open-access-policy .jrtn-sidebar a[href*="open-access-policy"],
body:has(.jrtn-oa-page) .jrtn-sidebar a[href*="open-access-policy"],
body.pkp_page_copyright-licensing .jrtn-sidebar a[href*="copyright-licensing"],
body:has(.jrtn-copyright-page) .jrtn-sidebar a[href*="copyright-licensing"],
body.pkp_page_data-availability .jrtn-sidebar a[href*="data-availability"],
body:has(.jrtn-data-availability-page) .jrtn-sidebar a[href*="data-availability"],
body.pkp_page_archiving-preservation .jrtn-sidebar a[href*="archiving-preservation"],
body:has(.jrtn-archiving-page) .jrtn-sidebar a[href*="archiving-preservation"],
body.pkp_op_privacy .jrtn-sidebar a[href*="privacy"],
body.pkp_page_about.pkp_op_privacy .jrtn-sidebar a[href*="privacy"],
body.pkp_page_privacy .jrtn-sidebar a[href*="privacy"],
body:has(.jrtn-privacy-page) .jrtn-sidebar a[href*="privacy"],
body.pkp_op_readers .jrtn-sidebar a[href*="information/readers"],
body.pkp_op_readers .jrtn-sidebar a[href*="information-readers"],
body.pkp_page_information.pkp_op_readers .jrtn-sidebar a[href*="information/readers"],
body.pkp_page_information.pkp_op_readers .jrtn-sidebar a[href*="information-readers"],
body.pkp_page_information-readers .jrtn-sidebar a[href*="information/readers"],
body.pkp_page_information-readers .jrtn-sidebar a[href*="information-readers"],
body:has(.jrtn-information-readers-page) .jrtn-sidebar a[href*="information/readers"],
body:has(.jrtn-information-readers-page) .jrtn-sidebar a[href*="information-readers"],
body.pkp_op_authors .jrtn-sidebar a[href*="information/authors"],
body.pkp_op_authors .jrtn-sidebar a[href*="information-authors"],
body.pkp_page_information.pkp_op_authors .jrtn-sidebar a[href*="information/authors"],
body.pkp_page_information.pkp_op_authors .jrtn-sidebar a[href*="information-authors"],
body.pkp_page_information-authors .jrtn-sidebar a[href*="information/authors"],
body.pkp_page_information-authors .jrtn-sidebar a[href*="information-authors"],
body:has(.jrtn-information-authors-page) .jrtn-sidebar a[href*="information/authors"],
body:has(.jrtn-information-authors-page) .jrtn-sidebar a[href*="information-authors"],
body.pkp_op_librarians .jrtn-sidebar a[href*="information/librarians"],
body.pkp_op_librarians .jrtn-sidebar a[href*="information-librarians"],
body.pkp_page_information.pkp_op_librarians .jrtn-sidebar a[href*="information/librarians"],
body.pkp_page_information.pkp_op_librarians .jrtn-sidebar a[href*="information-librarians"],
body.pkp_page_information-librarians .jrtn-sidebar a[href*="information/librarians"],
body.pkp_page_information-librarians .jrtn-sidebar a[href*="information-librarians"],
body:has(.jrtn-information-librarians-page) .jrtn-sidebar a[href*="information/librarians"],
body:has(.jrtn-information-librarians-page) .jrtn-sidebar a[href*="information-librarians"],
body.pkp_page_submission-checklists .jrtn-sidebar a[href*="submission-checklist"],
body.pkp_page_submission-checklists .jrtn-sidebar a[href*="submission-checklists"],
body.pkp_page_conflicts-of-interest .jrtn-sidebar a[href*="conflict-of-interest"],
body[class*="conflicts-of-interest"] .jrtn-sidebar a[href*="conflict-of-interest"] {
background: #163a5d !important;
color: #ffffff !important;
font-weight: 700 !important;
border: 1px solid #163a5d !important;
border-left: 4px solid #f8d96b !important;
padding-left: 12px !important;
border-radius: 6px !important;
box-shadow: 0 2px 8px rgba(22, 58, 93, 0.32) !important;
}
.jrtn-sidebar-link.is-active::after,
.jrtn-sidebar-link.active::after,
.jrtn-sidebar-link[aria-current="page"]::after,
body.pkp_page_author-guidelines .jrtn-sidebar a[href*="author-guidelines"]::after,
body:has(.jrtn-author-guidelines-page) .jrtn-sidebar a[href*="author-guidelines"]::after,
body.pkp_page_article-types .jrtn-sidebar a[href*="article-types"]::after,
body:has(.jrtn-article-types-page) .jrtn-sidebar a[href*="article-types"]::after,
body[class*="submission-checklist"] .jrtn-sidebar a[href*="submission-checklist"]::after,
body:has(.jrtn-submission-checklist-page) .jrtn-sidebar a[href*="submission-checklist"]::after,
body.pkp_page_reporting-guidelines .jrtn-sidebar a[href*="reporting-guidelines"]::after,
body:has(.jrtn-reporting-guidelines-page) .jrtn-sidebar a[href*="reporting-guidelines"]::after,
body.pkp_page_apcs .jrtn-sidebar a[href*="apcs"]::after,
body.pkp_page_article-processing-charges .jrtn-sidebar a[href*="apcs"]::after,
body:has(.jrtn-apc-page) .jrtn-sidebar a[href*="apcs"]::after,
body.pkp_page_reviewer-guidelines .jrtn-sidebar a[href*="reviewer-guidelines"]::after,
body:has(.jrtn-reviewer-guidelines-page) .jrtn-sidebar a[href*="reviewer-guidelines"]::after,
body.pkp_page_reviewer-responsibilities .jrtn-sidebar a[href*="reviewer-responsibilities"]::after,
body:has(.jrtn-reviewer-responsibilities-page) .jrtn-sidebar a[href*="reviewer-responsibilities"]::after,
body[class*="reporting-coi"] .jrtn-sidebar a[href*="reporting-coi"]::after,
body[class*="reviewer-conflicts-of-interest"] .jrtn-sidebar a[href*="reporting-coi"]::after,
body:has(.jrtn-reviewer-coi-page) .jrtn-sidebar a[href*="reporting-coi"]::after,
body.pkp_page_review-form .jrtn-sidebar a[href*="review-form"]::after,
body:has(.jrtn-review-form-page) .jrtn-sidebar a[href*="review-form"]::after,
body.pkp_page_aim-focus-scope .jrtn-sidebar a[href*="aim-focus-scope"]::after,
body:has(.jrtn-scope-page) .jrtn-sidebar a[href*="aim-focus-scope"]::after,
body.pkp_page_peer-review-process .jrtn-sidebar a[href*="peer-review-process"]::after,
body:has(.jrtn-peer-review-page) .jrtn-sidebar a[href*="peer-review-process"]::after,
body.pkp_page_publication-ethics .jrtn-sidebar a[href*="publication-ethics"]::after,
body:has(.jrtn-ethics-page) .jrtn-sidebar a[href*="publication-ethics"]::after,
body.pkp_page_authorship-contributorship .jrtn-sidebar a[href*="authorship-contributorship"]::after,
body:has(.jrtn-authorship-page) .jrtn-sidebar a[href*="authorship-contributorship"]::after,
body.pkp_page_research-ethics-consent .jrtn-sidebar a[href*="research-ethics-consent"]::after,
body:has(.jrtn-research-ethics-page) .jrtn-sidebar a[href*="research-ethics-consent"]::after,
body.pkp_page_conflict-of-interest .jrtn-sidebar a[href*="conflict-of-interest"]::after,
body:has(.jrtn-coi-page) .jrtn-sidebar a[href*="conflict-of-interest"]::after,
body.pkp_page_plagiarism .jrtn-sidebar a[href*="plagiarism"]::after,
body.pkp_page_plagiarism-similarity .jrtn-sidebar a[href*="plagiarism"]::after,
body:has(.jrtn-plagiarism-page) .jrtn-sidebar a[href*="plagiarism"]::after,
body.pkp_page_AI-policy .jrtn-sidebar a[href*="AI-policy"]::after,
body.pkp_page_ai-policy .jrtn-sidebar a[href*="AI-policy"]::after,
body:has(.jrtn-ai-policy-page) .jrtn-sidebar a[href*="AI-policy"]::after,
body.pkp_page_corrections-retractions .jrtn-sidebar a[href*="corrections-retractions"]::after,
body:has(.jrtn-corrections-page) .jrtn-sidebar a[href*="corrections-retractions"]::after,
body.pkp_page_complaints-appeals .jrtn-sidebar a[href*="complaints-appeals"]::after,
body:has(.jrtn-complaints-page) .jrtn-sidebar a[href*="complaints-appeals"]::after,
body.pkp_page_open-access-policy .jrtn-sidebar a[href*="open-access-policy"]::after,
body:has(.jrtn-oa-page) .jrtn-sidebar a[href*="open-access-policy"]::after,
body.pkp_page_copyright-licensing .jrtn-sidebar a[href*="copyright-licensing"]::after,
body:has(.jrtn-copyright-page) .jrtn-sidebar a[href*="copyright-licensing"]::after,
body.pkp_page_data-availability .jrtn-sidebar a[href*="data-availability"]::after,
body:has(.jrtn-data-availability-page) .jrtn-sidebar a[href*="data-availability"]::after,
body.pkp_page_archiving-preservation .jrtn-sidebar a[href*="archiving-preservation"]::after,
body:has(.jrtn-archiving-page) .jrtn-sidebar a[href*="archiving-preservation"]::after,
body.pkp_op_privacy .jrtn-sidebar a[href*="privacy"]::after,
body.pkp_page_about.pkp_op_privacy .jrtn-sidebar a[href*="privacy"]::after,
body.pkp_page_privacy .jrtn-sidebar a[href*="privacy"]::after,
body:has(.jrtn-privacy-page) .jrtn-sidebar a[href*="privacy"]::after,
body.pkp_op_readers .jrtn-sidebar a[href*="information/readers"]::after,
body.pkp_op_readers .jrtn-sidebar a[href*="information-readers"]::after,
body.pkp_page_information.pkp_op_readers .jrtn-sidebar a[href*="information/readers"]::after,
body.pkp_page_information.pkp_op_readers .jrtn-sidebar a[href*="information-readers"]::after,
body.pkp_page_information-readers .jrtn-sidebar a[href*="information/readers"]::after,
body.pkp_page_information-readers .jrtn-sidebar a[href*="information-readers"]::after,
body:has(.jrtn-information-readers-page) .jrtn-sidebar a[href*="information/readers"]::after,
body:has(.jrtn-information-readers-page) .jrtn-sidebar a[href*="information-readers"]::after,
body.pkp_op_authors .jrtn-sidebar a[href*="information/authors"]::after,
body.pkp_op_authors .jrtn-sidebar a[href*="information-authors"]::after,
body.pkp_page_information.pkp_op_authors .jrtn-sidebar a[href*="information/authors"]::after,
body.pkp_page_information.pkp_op_authors .jrtn-sidebar a[href*="information-authors"]::after,
body.pkp_page_information-authors .jrtn-sidebar a[href*="information/authors"]::after,
body.pkp_page_information-authors .jrtn-sidebar a[href*="information-authors"]::after,
body:has(.jrtn-information-authors-page) .jrtn-sidebar a[href*="information/authors"]::after,
body:has(.jrtn-information-authors-page) .jrtn-sidebar a[href*="information-authors"]::after,
body.pkp_op_librarians .jrtn-sidebar a[href*="information/librarians"]::after,
body.pkp_op_librarians .jrtn-sidebar a[href*="information-librarians"]::after,
body.pkp_page_information.pkp_op_librarians .jrtn-sidebar a[href*="information/librarians"]::after,
body.pkp_page_information.pkp_op_librarians .jrtn-sidebar a[href*="information-librarians"]::after,
body.pkp_page_information-librarians .jrtn-sidebar a[href*="information/librarians"]::after,
body.pkp_page_information-librarians .jrtn-sidebar a[href*="information-librarians"]::after,
body:has(.jrtn-information-librarians-page) .jrtn-sidebar a[href*="information/librarians"]::after,
body:has(.jrtn-information-librarians-page) .jrtn-sidebar a[href*="information-librarians"]::after,
body.pkp_page_submission-checklists .jrtn-sidebar a[href*="submission-checklist"]::after,
body.pkp_page_submission-checklists .jrtn-sidebar a[href*="submission-checklists"]::after,
body.pkp_page_conflicts-of-interest .jrtn-sidebar a[href*="conflict-of-interest"]::after,
body[class*="conflicts-of-interest"] .jrtn-sidebar a[href*="conflict-of-interest"]::after {
color: #f8d96b !important;
font-weight: 700 !important;
transform: translateY(-50%) translateX(2px) !important;
}
/* --------------------------------------------------------------------------
JOURNAL INFORMATION
-------------------------------------------------------------------------- */
.jrtn-sidebar-facts {
display: block !important;
margin: 0 !important;
padding: 0 !important;
border-top: 1px solid var(--jrtn-sidebar-line) !important;
}
.jrtn-sidebar-fact {
display: grid !important;
grid-template-columns: minmax(0, 0.43fr) minmax(0, 0.57fr) !important;
gap: 10px !important;
margin: 0 !important;
padding: 9px 0 !important;
border-bottom: 1px solid var(--jrtn-sidebar-line) !important;
}
.jrtn-sidebar-fact:last-child {
border-bottom: 0 !important;
}
.jrtn-sidebar-fact-label {
color: var(--jrtn-sidebar-muted) !important;
font-family: inherit !important;
font-size: 0.65rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
line-height: 1.45 !important;
text-transform: uppercase !important;
}
.jrtn-sidebar-fact-value {
color: var(--jrtn-sidebar-ink) !important;
font-family: inherit !important;
font-size: 0.78rem !important;
font-weight: 600 !important;
line-height: 1.45 !important;
overflow-wrap: break-word !important;
}
/* --------------------------------------------------------------------------
VISITORS
-------------------------------------------------------------------------- */
.jrtn-sidebar-visitor-intro {
margin: 0 0 13px !important;
color: var(--jrtn-sidebar-muted) !important;
font-family: inherit !important;
font-size: 0.79rem !important;
line-height: 1.55 !important;
}
.jrtn-sidebar-counter {
display: block !important;
width: 100% !important;
margin: 0 0 14px !important;
padding: 10px !important;
text-align: center !important;
background: var(--jrtn-sidebar-surface) !important;
border: 1px solid var(--jrtn-sidebar-line) !important;
border-radius: 6px !important;
}
.jrtn-sidebar-counter img {
display: block !important;
max-width: 100% !important;
height: auto !important;
margin: 0 auto !important;
border: 0 !important;
}
.jrtn-sidebar-visitor-map-label {
display: block !important;
margin: 0 0 7px !important;
color: var(--jrtn-sidebar-muted) !important;
font-family: inherit !important;
font-size: 0.68rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
}
.jrtn-sidebar-visitor-frame {
display: block !important;
width: 100% !important;
height: 110px !important;
overflow: hidden !important;
border: 1px solid var(--jrtn-sidebar-line) !important;
border-radius: 6px !important;
}
/* --------------------------------------------------------------------------
RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width: 480px) {
.jrtn-sidebar-block {
padding: 14px !important;
}
.jrtn-sidebar-fact {
grid-template-columns: 1fr !important;
gap: 2px !important;
}
}
/* ==========================================================================
SIDEBAR — PENDING LINKS
Hapus class .jrtn-sidebar-link-pending setelah halaman sudah aktif
========================================================================== */
.jrtn-sidebar-link-pending {
color: #718096 !important;
cursor: default !important;
pointer-events: none !important;
}
.jrtn-sidebar-link-pending::after {
content: "–" !important;
color: #a0aab6 !important;
}
.jrtn-sidebar-link-pending:hover {
color: #718096 !important;
}
/* ==========================================================================
24. SIDEBAR PUBLICATION SCHEDULE
Tiga tingkat bulan penerbitan
========================================================================== */
.jrtn-sidebar-block-schedule
.jrtn-sidebar-heading::before {
background: #356f91 !important;
}
.jrtn-sidebar-schedule-intro {
margin: 0 0 12px !important;
color: var(--jrtn-sidebar-muted) !important;
font-family: inherit !important;
font-size: 0.78rem !important;
line-height: 1.52 !important;
}
/* --------------------------------------------------------------------------
THREE-LEVEL MONTH BLOCK
-------------------------------------------------------------------------- */
.jrtn-sidebar-schedule {
position: relative !important;
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
width: 100% !important;
margin: 0 0 13px !important;
padding: 0 !important;
overflow: hidden !important;
background: #ffffff !important;
border: 1px solid var(--jrtn-sidebar-line) !important;
border-radius: 7px !important;
}
.jrtn-sidebar-month {
position: relative !important;
display: grid !important;
grid-template-columns:
28px
minmax(0, 1fr)
auto !important;
gap: 8px !important;
align-items: center !important;
min-width: 0 !important;
margin: 0 !important;
padding: 11px 11px !important;
border-bottom: 1px solid var(--jrtn-sidebar-line) !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
cursor: pointer !important;
animation:
jrtn-sidebar-month-reveal
320ms
ease-out
both;
}
.jrtn-sidebar-month:last-child {
border-bottom: 0 !important;
}
.jrtn-sidebar-month:nth-child(1) {
animation-delay: 40ms;
}
.jrtn-sidebar-month:nth-child(2) {
animation-delay: 100ms;
}
.jrtn-sidebar-month:nth-child(3) {
animation-delay: 160ms;
}
/* 1. PUBLISHED MONTH (SEPTEMBER) */
.jrtn-sidebar-month--published {
background: linear-gradient(135deg, #f0f7ff 0%, #e6f0fa 100%) !important;
border-left: 3.5px solid #1e4b7a !important;
}
.jrtn-sidebar-month--published:hover {
background: #deedfc !important;
transform: translateX(2px) !important;
}
.jrtn-sidebar-month--published .jrtn-sidebar-month-index {
background: #1e4b7a !important;
color: #ffffff !important;
border-color: #1e4b7a !important;
box-shadow: 0 2px 4px rgba(30, 75, 122, 0.25) !important;
}
.jrtn-sidebar-month--published .jrtn-sidebar-month-name {
color: #163a5d !important;
}
.jrtn-sidebar-month-arrow {
display: inline-flex !important;
align-items: center !important;
font-size: 0.95rem !important;
line-height: 1 !important;
transition: transform 0.2s ease !important;
color: #1e4b7a !important;
margin-left: 1px !important;
}
.jrtn-sidebar-month--published:hover .jrtn-sidebar-month-arrow {
transform: translateX(3px) !important;
}
.jrtn-sidebar-month-status--published {
background: #e6f4ea !important;
color: #137333 !important;
border: 1px solid #b7e1cd !important;
}
/* 2. UPCOMING MONTHS (JANUARY, MAY) */
.jrtn-sidebar-month--upcoming {
background: #ffffff !important;
}
.jrtn-sidebar-month--upcoming:hover {
background: #f8fafc !important;
transform: translateX(2px) !important;
}
.jrtn-sidebar-month--upcoming .jrtn-sidebar-month-index {
background: #ffffff !important;
color: #64748b !important;
border-color: #cbd5e1 !important;
}
.jrtn-sidebar-month-status--upcoming {
background: #f1f5f9 !important;
color: #64748b !important;
border: 1px solid #e2e8f0 !important;
}
/* Nomor urut bulan */
.jrtn-sidebar-month-index {
display: inline-flex !important;
width: 28px !important;
height: 28px !important;
align-items: center !important;
justify-content: center !important;
background: #ffffff !important;
color: var(--jrtn-sidebar-blue-dark) !important;
border: 1px solid #b9ccdc !important;
border-radius: 5px !important;
font-family: inherit !important;
font-size: 0.65rem !important;
font-weight: 700 !important;
line-height: 1 !important;
}
/* Nama dan deskripsi bulan */
.jrtn-sidebar-month-content {
display: block !important;
min-width: 0 !important;
}
.jrtn-sidebar-month-name {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
white-space: nowrap !important;
margin: 0 0 1px !important;
color: var(--jrtn-sidebar-ink) !important;
font-family: inherit !important;
font-size: 0.86rem !important;
font-weight: 700 !important;
line-height: 1.35 !important;
}
.jrtn-sidebar-month-meta {
display: block !important;
color: var(--jrtn-sidebar-muted) !important;
font-family: inherit !important;
font-size: 0.68rem !important;
line-height: 1.35 !important;
}
/* Label nomor issue */
.jrtn-sidebar-month-status {
display: inline-block !important;
padding: 3px 6px !important;
background: rgba(255, 255, 255, 0.72) !important;
color: var(--jrtn-sidebar-blue-dark) !important;
border: 1px solid rgba(30, 75, 122, 0.16) !important;
border-radius: 4px !important;
font-family: inherit !important;
font-size: 0.61rem !important;
font-weight: 700 !important;
letter-spacing: 0.025em !important;
line-height: 1.3 !important;
white-space: nowrap !important;
}
/* --------------------------------------------------------------------------
LANGUAGE INFORMATION
-------------------------------------------------------------------------- */
.jrtn-sidebar-language {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 10px !important;
align-items: center !important;
width: 100% !important;
margin: 0 !important;
padding: 10px 1px 0 !important;
border-top: 1px solid var(--jrtn-sidebar-line) !important;
}
.jrtn-sidebar-language-label {
color: var(--jrtn-sidebar-muted) !important;
font-family: inherit !important;
font-size: 0.66rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
line-height: 1.4 !important;
text-transform: uppercase !important;
}
.jrtn-sidebar-language-value {
color: var(--jrtn-sidebar-ink) !important;
font-family: inherit !important;
font-size: 0.82rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
/* --------------------------------------------------------------------------
SUBTLE ONE-TIME ANIMATION
-------------------------------------------------------------------------- */
@keyframes jrtn-sidebar-month-reveal {
from {
opacity: 0;
transform: translateX(-5px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@media (prefers-reduced-motion: reduce) {
.jrtn-sidebar-month {
animation: none !important;
}
}
@media (max-width: 480px) {
.jrtn-sidebar-month {
grid-template-columns:
30px
minmax(0, 1fr) !important;
}
.jrtn-sidebar-month-status {
grid-column: 2 !important;
justify-self: start !important;
margin-top: 3px !important;
}
}
/* ==========================================================================
24B. SIDEBAR PUBLICATION SCHEDULE MODAL (PURE CSS :TARGET)
========================================================================== */
.jrtn-modal-overlay {
display: none !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100vw !important;
height: 100vh !important;
z-index: 999999 !important;
background: rgba(15, 23, 42, 0.65) !important;
backdrop-filter: blur(4px) !important;
-webkit-backdrop-filter: blur(4px) !important;
align-items: center !important;
justify-content: center !important;
padding: 1.25rem !important;
box-sizing: border-box !important;
}
.jrtn-modal-overlay:target {
display: flex !important;
animation: jrtn-modal-fade-in 0.2s ease-out !important;
}
.jrtn-modal-backdrop {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
z-index: 1 !important;
cursor: default !important;
text-decoration: none !important;
}
.jrtn-modal-card {
position: relative !important;
z-index: 2 !important;
background: #ffffff !important;
border: 1px solid rgba(226, 232, 240, 0.8) !important;
border-radius: 14px !important;
padding: 2rem 1.75rem 1.5rem !important;
max-width: 440px !important;
width: 100% !important;
box-shadow: 0 20px 45px rgba(15, 23, 42, 0.25), 0 4px 12px rgba(15, 23, 42, 0.08) !important;
text-align: center !important;
animation: jrtn-modal-scale-up 0.22s cubic-bezier(0.16, 1, 0.3, 1) !important;
box-sizing: border-box !important;
}
.jrtn-sidebar .jrtn-modal-card a.jrtn-modal-close,
.jrtn-modal-card a.jrtn-modal-close,
a.jrtn-modal-close,
.jrtn-modal-close {
position: absolute !important;
top: 14px !important;
right: 16px !important;
width: 32px !important;
height: 32px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border-radius: 50% !important;
color: #64748b !important;
background: #f1f5f9 !important;
font-size: 1.25rem !important;
line-height: 1 !important;
text-decoration: none !important;
transition: all 0.18s ease !important;
}
.jrtn-sidebar .jrtn-modal-card a.jrtn-modal-close:hover,
.jrtn-modal-card a.jrtn-modal-close:hover,
a.jrtn-modal-close:hover,
.jrtn-modal-close:hover {
color: #0f172a !important;
background: #e2e8f0 !important;
transform: scale(1.08) !important;
}
.jrtn-modal-icon {
width: 52px !important;
height: 52px !important;
margin: 0 auto 1rem !important;
border-radius: 12px !important;
background: linear-gradient(135deg, #f0f7ff 0%, #e0effe 100%) !important;
color: #1e4b7a !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
border: 1px solid #bfdbfe !important;
}
.jrtn-modal-eyebrow {
display: inline-block !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
color: #64748b !important;
margin-bottom: 0.25rem !important;
}
.jrtn-modal-title {
margin: 0 0 0.5rem !important;
font-size: 1.35rem !important;
font-weight: 700 !important;
color: #0f172a !important;
line-height: 1.3 !important;
}
.jrtn-modal-badge {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 3px 10px !important;
border-radius: 9999px !important;
background: #ecfdf5 !important;
color: #065f46 !important;
font-size: 0.72rem !important;
font-weight: 600 !important;
border: 1px solid #a7f3d0 !important;
margin-bottom: 1rem !important;
}
.jrtn-modal-badge-dot {
width: 6px !important;
height: 6px !important;
border-radius: 50% !important;
background: #10b981 !important;
box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2) !important;
}
.jrtn-modal-desc {
margin: 0 0 1.5rem !important;
font-size: 0.86rem !important;
line-height: 1.6 !important;
color: #475569 !important;
text-align: center !important;
}
.jrtn-modal-actions {
display: flex !important;
flex-direction: column !important;
gap: 0.6rem !important;
margin-bottom: 0.85rem !important;
}
.jrtn-sidebar .jrtn-modal-card a.jrtn-modal-btn,
.jrtn-modal-card a.jrtn-modal-btn,
a.jrtn-modal-btn,
.jrtn-modal-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0.65rem 1.25rem !important;
border-radius: 8px !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
box-sizing: border-box !important;
}
.jrtn-sidebar .jrtn-modal-card a.jrtn-modal-btn--primary,
.jrtn-modal-card a.jrtn-modal-btn--primary,
a.jrtn-modal-btn--primary,
.jrtn-modal-btn--primary {
background: #1e4b7a !important;
color: #ffffff !important;
border: 1px solid #1e4b7a !important;
box-shadow: 0 2px 6px rgba(30, 75, 122, 0.3) !important;
}
.jrtn-sidebar .jrtn-modal-card a.jrtn-modal-btn--primary:hover,
.jrtn-modal-card a.jrtn-modal-btn--primary:hover,
a.jrtn-modal-btn--primary:hover,
.jrtn-modal-btn--primary:hover {
background: #163a5d !important;
color: #ffffff !important;
box-shadow: 0 4px 10px rgba(30, 75, 122, 0.4) !important;
transform: translateY(-1px) !important;
}
.jrtn-sidebar .jrtn-modal-card a.jrtn-modal-btn--secondary,
.jrtn-modal-card a.jrtn-modal-btn--secondary,
a.jrtn-modal-btn--secondary,
.jrtn-modal-btn--secondary {
background: #f8fafc !important;
color: #334155 !important;
border: 1px solid #cbd5e1 !important;
}
.jrtn-sidebar .jrtn-modal-card a.jrtn-modal-btn--secondary:hover,
.jrtn-modal-card a.jrtn-modal-btn--secondary:hover,
a.jrtn-modal-btn--secondary:hover,
.jrtn-modal-btn--secondary:hover {
background: #f1f5f9 !important;
color: #0f172a !important;
border-color: #94a3b8 !important;
}
.jrtn-modal-footer-note {
margin: 0 !important;
font-size: 0.72rem !important;
color: #64748b !important;
font-weight: 500 !important;
}
@keyframes jrtn-modal-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes jrtn-modal-scale-up {
from { opacity: 0; transform: scale(0.94); }
to { opacity: 1; transform: scale(1); }
}
/* ==========================================================================
25. SIDEBAR PRIORITY LINKS
Hanya menggunakan badge KEY berwarna gold
========================================================================== */
.jrtn-sidebar-link-key {
padding-right: 58px !important;
}
/* Badge KEY berwarna gold */
.jrtn-sidebar-link-key::before {
position: absolute !important;
top: 50% !important;
right: 28px !important;
display: inline-flex !important;
min-width: 26px !important;
height: 15px !important;
align-items: center !important;
justify-content: center !important;
padding: 0 5px !important;
content: "KEY" !important;
color: #765100 !important;
background:
linear-gradient(
135deg,
#fff7c7 0%,
#f8d96b 48%,
#fff0a6 100%
) !important;
border: 1px solid #ddb94d !important;
border-radius: 3px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.8),
0 1px 2px rgba(113, 79, 0, 0.12) !important;
font-family: inherit !important;
font-size: 0.46rem !important;
font-weight: 800 !important;
letter-spacing: 0.055em !important;
line-height: 1 !important;
text-transform: uppercase !important;
transform: translateY(-50%) !important;
pointer-events: none !important;
}
/* Panah berada di sisi paling kanan */
.jrtn-sidebar-link-key::after {
right: 10px !important;
}
/* Hover konsisten 100% dengan link lainnya: dark navy background & white text */
.jrtn-sidebar-link-key:hover {
background: #1e4b7a !important;
color: #ffffff !important;
border-color: #1e4b7a !important;
padding-left: 14px !important;
box-shadow: 0 2px 6px rgba(30, 75, 122, 0.22) !important;
}
.jrtn-sidebar-link-key:hover::after {
color: #ffffff !important;
transform: translateY(-50%) translateX(2px) !important;
}
/* Badge sedikit lebih terang ketika link diarahkan */
.jrtn-sidebar-link-key:hover::before {
color: #674500 !important;
background:
linear-gradient(
135deg,
#fff9d8 0%,
#f5cf4c 48%,
#fff1a4 100%
) !important;
border-color: #cda333 !important;
}
/* --------------------------------------------------------------------------
PRIORITY LINK YANG MASIH PENDING
Tidak menampilkan badge KEY sampai halaman aktif
-------------------------------------------------------------------------- */
.jrtn-sidebar-link-pending.jrtn-sidebar-link-key {
margin: 0 !important;
padding: 10px 20px 10px 0 !important;
background: transparent !important;
color: #718096 !important;
border: 0 !important;
border-bottom: 1px solid var(--jrtn-sidebar-line) !important;
border-radius: 0 !important;
font-weight: 500 !important;
}
.jrtn-sidebar-link-pending.jrtn-sidebar-link-key::before {
display: none !important;
content: none !important;
}
.jrtn-sidebar-link-pending.jrtn-sidebar-link-key::after {
right: 2px !important;
content: "–" !important;
color: #a0aab6 !important;
}
/* --------------------------------------------------------------------------
INAUGURAL PUBLICATION CYCLE
-------------------------------------------------------------------------- */
.jrtn-sidebar-inaugural-note {
margin: 10px 0 13px !important;
padding: 10px 11px !important;
background: var(--jrtn-sidebar-blue-soft) !important;
color: var(--jrtn-sidebar-muted) !important;
border: 1px solid #c7d8e5 !important;
border-radius: 5px !important;
font-family: inherit !important;
font-size: 0.7rem !important;
font-weight: 500 !important;
line-height: 1.55 !important;
}
.jrtn-sidebar-inaugural-note strong {
color: var(--jrtn-sidebar-blue-dark) !important;
font-weight: 700 !important;
}
/* ==========================================================================
26. AUTHOR GUIDELINES PAGE — FINAL
Journal of Rural and Tropical Nursing
========================================================================== */
.jrtn-page.jrtn-author-guidelines-page {
width: 100% !important;
max-width: none !important;
font-family: inherit !important;
}
/* --------------------------------------------------------------------------
PAGE SPACING
-------------------------------------------------------------------------- */
.jrtn-page.jrtn-author-guidelines-page > * + * {
margin-top: 30px !important;
}
/* --------------------------------------------------------------------------
HERO ACTIONS
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-author-actions {
display: flex !important;
flex-wrap: wrap !important;
gap: 9px !important;
width: 100% !important;
margin: 22px 0 0 !important;
padding: 0 !important;
}
/* --------------------------------------------------------------------------
IMPORTANT NOTICE
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-author-notice {
display: grid !important;
grid-template-columns: 42px minmax(0, 1fr) !important;
gap: 14px !important;
align-items: start !important;
width: 100% !important;
margin: 0 !important;
padding: 18px 20px !important;
background: var(--jrtn-accent-soft, #eef5fb) !important;
border: 1px solid #bfd1df !important;
border-radius: 7px !important;
}
.jrtn-page .jrtn-author-notice-mark {
display: inline-flex !important;
width: 38px !important;
height: 38px !important;
align-items: center !important;
justify-content: center !important;
background: var(--jrtn-white, #ffffff) !important;
color: var(--jrtn-accent, #1e4b7a) !important;
border: 1px solid #b9ccdc !important;
border-radius: 50% !important;
font-family: inherit !important;
font-size: 0.92rem !important;
font-weight: 800 !important;
line-height: 1 !important;
}
.jrtn-page .jrtn-author-notice h3 {
margin: 0 0 5px !important;
color: var(--jrtn-ink, #172033) !important;
font-family: inherit !important;
font-size: 1rem !important;
font-weight: 700 !important;
line-height: 1.42 !important;
}
.jrtn-page .jrtn-author-notice p {
margin: 0 !important;
color: var(--jrtn-muted, #637083) !important;
font-family: inherit !important;
font-size: 0.91rem !important;
line-height: 1.62 !important;
}
.jrtn-page .jrtn-author-notice p + p {
margin-top: 8px !important;
}
/* --------------------------------------------------------------------------
PRE-SUBMISSION CHECKS
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-author-precheck {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 24px !important;
width: 100% !important;
margin: 18px 0 0 !important;
padding: 0 !important;
border-top: 1px solid var(--jrtn-line, #d9e2ea) !important;
}
.jrtn-page .jrtn-author-check {
position: relative !important;
margin: 0 !important;
padding: 13px 3px 13px 31px !important;
color: var(--jrtn-muted, #637083) !important;
border-bottom: 1px solid var(--jrtn-line, #d9e2ea) !important;
font-family: inherit !important;
font-size: 0.9rem !important;
line-height: 1.56 !important;
}
.jrtn-page .jrtn-author-check::before {
position: absolute !important;
top: 14px !important;
left: 2px !important;
display: inline-flex !important;
width: 20px !important;
height: 20px !important;
align-items: center !important;
justify-content: center !important;
content: "✓" !important;
background: #e8f4eb !important;
color: #287642 !important;
border: 1px solid #afd1b8 !important;
border-radius: 50% !important;
font-family: inherit !important;
font-size: 0.7rem !important;
font-weight: 800 !important;
line-height: 1 !important;
}
.jrtn-page .jrtn-author-check strong {
color: var(--jrtn-ink, #172033) !important;
font-weight: 700 !important;
}
/* --------------------------------------------------------------------------
REQUIRED FILES
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-author-file-list {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
width: 100% !important;
margin: 18px 0 0 !important;
padding: 0 !important;
list-style: none !important;
border-top: 1px solid var(--jrtn-line, #d9e2ea) !important;
}
.jrtn-page .jrtn-author-file-item {
display: grid !important;
grid-template-columns: 42px minmax(0, 1fr) !important;
gap: 14px !important;
align-items: start !important;
margin: 0 !important;
padding: 16px 2px !important;
border-bottom: 1px solid var(--jrtn-line, #d9e2ea) !important;
}
.jrtn-page .jrtn-author-file-number {
display: inline-flex !important;
width: 34px !important;
height: 34px !important;
align-items: center !important;
justify-content: center !important;
background: var(--jrtn-accent-soft, #eef5fb) !important;
color: var(--jrtn-accent, #1e4b7a) !important;
border: 1px solid #bfd1df !important;
border-radius: 5px !important;
font-family: inherit !important;
font-size: 0.68rem !important;
font-weight: 800 !important;
line-height: 1 !important;
}
.jrtn-page .jrtn-author-file-content {
min-width: 0 !important;
}
.jrtn-page .jrtn-author-file-content h4 {
margin: 0 0 5px !important;
color: var(--jrtn-ink, #172033) !important;
font-family: inherit !important;
font-size: 0.97rem !important;
font-weight: 700 !important;
line-height: 1.42 !important;
}
.jrtn-page .jrtn-author-file-content p {
margin: 0 !important;
color: var(--jrtn-muted, #637083) !important;
font-family: inherit !important;
font-size: 0.89rem !important;
line-height: 1.59 !important;
}
.jrtn-page .jrtn-author-file-content p + p {
margin-top: 8px !important;
}
/* --------------------------------------------------------------------------
TWO-COLUMN GUIDANCE
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-author-guidance-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 24px !important;
width: 100% !important;
margin: 18px 0 0 !important;
}
.jrtn-page .jrtn-author-guidance-panel {
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.jrtn-page .jrtn-author-guidance-panel h4 {
margin: 0 0 9px !important;
padding: 0 0 9px !important;
color: var(--jrtn-ink, #172033) !important;
border-bottom: 2px solid var(--jrtn-accent, #1e4b7a) !important;
font-family: inherit !important;
font-size: 1rem !important;
font-weight: 700 !important;
line-height: 1.42 !important;
}
.jrtn-page .jrtn-author-list {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.jrtn-page .jrtn-author-list > li {
position: relative !important;
margin: 0 !important;
padding: 10px 2px 10px 18px !important;
color: var(--jrtn-muted, #637083) !important;
border-bottom: 1px solid var(--jrtn-line, #d9e2ea) !important;
font-family: inherit !important;
font-size: 0.89rem !important;
line-height: 1.56 !important;
}
.jrtn-page .jrtn-author-list > li::before {
position: absolute !important;
top: 18px !important;
left: 2px !important;
display: block !important;
width: 5px !important;
height: 5px !important;
content: "" !important;
background: var(--jrtn-accent, #1e4b7a) !important;
border-radius: 50% !important;
}
/* --------------------------------------------------------------------------
MANUSCRIPT STRUCTURE
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-author-structure {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 0 !important;
width: 100% !important;
margin: 18px 0 0 !important;
border-top: 1px solid var(--jrtn-line, #d9e2ea) !important;
}
.jrtn-page .jrtn-author-structure-row {
display: grid !important;
grid-template-columns:
minmax(150px, 0.29fr)
minmax(0, 0.71fr) !important;
gap: 22px !important;
margin: 0 !important;
padding: 13px 2px !important;
border-bottom: 1px solid var(--jrtn-line, #d9e2ea) !important;
}
.jrtn-page .jrtn-author-structure-name {
color: var(--jrtn-ink, #172033) !important;
font-family: inherit !important;
font-size: 0.89rem !important;
font-weight: 700 !important;
line-height: 1.5 !important;
}
.jrtn-page .jrtn-author-structure-description {
color: var(--jrtn-muted, #637083) !important;
font-family: inherit !important;
font-size: 0.89rem !important;
line-height: 1.58 !important;
}
/* --------------------------------------------------------------------------
EQUATOR ACTION BOX
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-equator-box {
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(220px, 0.36fr) !important;
gap: 24px !important;
align-items: center !important;
width: 100% !important;
margin: 18px 0 !important;
padding: 20px 22px !important;
background: var(--jrtn-accent-soft, #eef5fb) !important;
border: 1px solid #bfd1df !important;
border-left: 4px solid var(--jrtn-accent, #1e4b7a) !important;
border-radius: 7px !important;
}
.jrtn-page .jrtn-equator-box h4 {
margin: 0 0 5px !important;
color: var(--jrtn-ink, #172033) !important;
font-family: inherit !important;
font-size: 1rem !important;
font-weight: 700 !important;
line-height: 1.42 !important;
}
.jrtn-page .jrtn-equator-box p {
margin: 0 !important;
color: var(--jrtn-muted, #637083) !important;
font-family: inherit !important;
font-size: 0.89rem !important;
line-height: 1.59 !important;
}
.jrtn-page .jrtn-equator-actions {
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
width: 100% !important;
}
.jrtn-page .jrtn-equator-actions .jrtn-button {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
}
/* --------------------------------------------------------------------------
EQUATOR TABLE
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-equator-table-wrap {
width: 100% !important;
margin: 0 !important;
overflow-x: auto !important;
border: 1px solid var(--jrtn-line, #d9e2ea) !important;
border-radius: 7px !important;
}
.jrtn-page .jrtn-equator-table {
width: 100% !important;
min-width: 720px !important;
margin: 0 !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
background: var(--jrtn-white, #ffffff) !important;
}
.jrtn-page .jrtn-equator-table th {
padding: 11px 13px !important;
background: var(--jrtn-accent-soft, #eef5fb) !important;
color: var(--jrtn-ink, #172033) !important;
border-bottom: 1px solid #bfd1df !important;
text-align: left !important;
vertical-align: bottom !important;
font-family: inherit !important;
font-size: 0.68rem !important;
font-weight: 800 !important;
letter-spacing: 0.04em !important;
line-height: 1.4 !important;
text-transform: uppercase !important;
}
.jrtn-page .jrtn-equator-table td {
padding: 12px 13px !important;
color: var(--jrtn-muted, #637083) !important;
border-bottom: 1px solid var(--jrtn-line, #d9e2ea) !important;
vertical-align: top !important;
font-family: inherit !important;
font-size: 0.85rem !important;
line-height: 1.53 !important;
}
.jrtn-page .jrtn-equator-table tr:last-child td {
border-bottom: 0 !important;
}
.jrtn-page .jrtn-equator-table td:first-child {
width: 32% !important;
color: var(--jrtn-ink, #172033) !important;
font-weight: 650 !important;
}
.jrtn-page .jrtn-equator-table td:nth-child(2) {
width: 24% !important;
}
.jrtn-page .jrtn-equator-table a {
color: var(--jrtn-accent, #1e4b7a) !important;
font-weight: 700 !important;
text-decoration: underline !important;
text-decoration-thickness: 1px !important;
text-underline-offset: 3px !important;
}
/* --------------------------------------------------------------------------
REPORTING STEPS
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-reporting-steps {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 10px !important;
width: 100% !important;
margin: 18px 0 0 !important;
}
.jrtn-page .jrtn-reporting-step {
min-width: 0 !important;
margin: 0 !important;
padding: 15px !important;
background: var(--jrtn-white, #ffffff) !important;
border: 1px solid var(--jrtn-line, #d9e2ea) !important;
border-top: 3px solid var(--jrtn-accent, #1e4b7a) !important;
border-radius: 6px !important;
}
.jrtn-page .jrtn-reporting-step-number {
display: block !important;
margin: 0 0 5px !important;
color: var(--jrtn-accent, #1e4b7a) !important;
font-family: inherit !important;
font-size: 0.65rem !important;
font-weight: 800 !important;
letter-spacing: 0.05em !important;
line-height: 1.4 !important;
text-transform: uppercase !important;
}
.jrtn-page .jrtn-reporting-step strong {
display: block !important;
margin: 0 0 4px !important;
color: var(--jrtn-ink, #172033) !important;
font-family: inherit !important;
font-size: 0.88rem !important;
font-weight: 700 !important;
line-height: 1.42 !important;
}
.jrtn-page .jrtn-reporting-step p {
margin: 0 !important;
color: var(--jrtn-muted, #637083) !important;
font-family: inherit !important;
font-size: 0.8rem !important;
line-height: 1.5 !important;
}
/* --------------------------------------------------------------------------
DECLARATION GRID
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-declaration-grid {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 24px !important;
width: 100% !important;
margin: 18px 0 0 !important;
border-top: 1px solid var(--jrtn-line, #d9e2ea) !important;
}
.jrtn-page .jrtn-declaration-item {
margin: 0 !important;
padding: 12px 2px !important;
border-bottom: 1px solid var(--jrtn-line, #d9e2ea) !important;
}
.jrtn-page .jrtn-declaration-item strong {
display: block !important;
margin: 0 0 3px !important;
color: var(--jrtn-ink, #172033) !important;
font-family: inherit !important;
font-size: 0.88rem !important;
font-weight: 700 !important;
line-height: 1.45 !important;
}
.jrtn-page .jrtn-declaration-item span {
display: block !important;
color: var(--jrtn-muted, #637083) !important;
font-family: inherit !important;
font-size: 0.84rem !important;
line-height: 1.53 !important;
}
/* --------------------------------------------------------------------------
ACCEPTANCE WORKFLOW
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-acceptance-flow {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 11px !important;
width: 100% !important;
margin: 18px 0 0 !important;
}
.jrtn-page .jrtn-acceptance-item {
min-width: 0 !important;
margin: 0 !important;
padding: 16px !important;
background: var(--jrtn-white, #ffffff) !important;
border: 1px solid var(--jrtn-line, #d9e2ea) !important;
border-top: 3px solid var(--jrtn-accent, #1e4b7a) !important;
border-radius: 6px !important;
}
.jrtn-page .jrtn-acceptance-item-number {
display: block !important;
margin: 0 0 5px !important;
color: var(--jrtn-accent, #1e4b7a) !important;
font-family: inherit !important;
font-size: 0.65rem !important;
font-weight: 800 !important;
letter-spacing: 0.05em !important;
text-transform: uppercase !important;
}
.jrtn-page .jrtn-acceptance-item h4 {
margin: 0 0 5px !important;
color: var(--jrtn-ink, #172033) !important;
font-family: inherit !important;
font-size: 0.92rem !important;
font-weight: 700 !important;
line-height: 1.42 !important;
}
.jrtn-page .jrtn-acceptance-item p {
margin: 0 !important;
color: var(--jrtn-muted, #637083) !important;
font-family: inherit !important;
font-size: 0.83rem !important;
line-height: 1.52 !important;
}
/* --------------------------------------------------------------------------
INLINE NOTE
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-author-inline-note {
margin: 17px 0 0 !important;
padding: 13px 15px !important;
background: var(--jrtn-surface, #f7f9fb) !important;
border: 1px solid var(--jrtn-line, #d9e2ea) !important;
border-left: 3px solid var(--jrtn-accent, #1e4b7a) !important;
border-radius: 0 6px 6px 0 !important;
color: var(--jrtn-muted, #637083) !important;
font-family: inherit !important;
font-size: 0.87rem !important;
line-height: 1.57 !important;
}
.jrtn-page .jrtn-author-inline-note strong {
color: var(--jrtn-ink, #172033) !important;
}
/* --------------------------------------------------------------------------
FINAL ACTION
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-author-final-action {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 22px !important;
align-items: center !important;
width: 100% !important;
margin: 0 !important;
padding: 22px 24px !important;
background: var(--jrtn-accent-soft, #eef5fb) !important;
border: 1px solid #bfd1df !important;
border-radius: 8px !important;
}
.jrtn-page .jrtn-author-final-action h3 {
margin: 0 0 5px !important;
color: var(--jrtn-ink, #172033) !important;
font-family: inherit !important;
font-size: 1.12rem !important;
font-weight: 700 !important;
line-height: 1.42 !important;
}
.jrtn-page .jrtn-author-final-action p {
margin: 0 !important;
color: var(--jrtn-muted, #637083) !important;
font-family: inherit !important;
font-size: 0.9rem !important;
line-height: 1.58 !important;
}
.jrtn-page .jrtn-author-final-buttons {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
justify-content: flex-end !important;
}
/* --------------------------------------------------------------------------
RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width: 960px) {
.jrtn-page .jrtn-reporting-steps {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.jrtn-page .jrtn-acceptance-flow {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-equator-box,
.jrtn-page .jrtn-author-final-action {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-author-final-buttons {
justify-content: flex-start !important;
}
}
@media (max-width: 720px) {
.jrtn-page .jrtn-author-precheck,
.jrtn-page .jrtn-author-guidance-grid,
.jrtn-page .jrtn-declaration-grid {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-author-structure-row {
grid-template-columns: 1fr !important;
gap: 4px !important;
}
.jrtn-page.jrtn-author-guidelines-page > * + * {
margin-top: 22px !important;
}
}
@media (max-width: 500px) {
.jrtn-page .jrtn-author-notice {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-reporting-steps {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-author-file-item {
grid-template-columns: 34px minmax(0, 1fr) !important;
gap: 10px !important;
}
.jrtn-page .jrtn-author-actions,
.jrtn-page .jrtn-author-final-buttons {
display: grid !important;
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-author-actions .jrtn-button,
.jrtn-page .jrtn-author-final-buttons .jrtn-button {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
}
}
/* ==========================================================================
27. ARTICLE TYPES PAGE
Journal of Rural and Tropical Nursing
========================================================================== */
.jrtn-page.jrtn-article-types-page {
width: 100% !important;
max-width: none !important;
font-family: inherit !important;
}
/* --------------------------------------------------------------------------
PAGE SPACING
-------------------------------------------------------------------------- */
.jrtn-page.jrtn-article-types-page > * + * {
margin-top: 30px !important;
}
/* --------------------------------------------------------------------------
ARTICLE TYPE QUICK NAVIGATION
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-types-nav {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 0 22px !important;
width: 100% !important;
margin: 18px 0 0 !important;
padding: 0 !important;
border-top: 1px solid var(--jrtn-line, #d9e2ea) !important;
}
.jrtn-page .jrtn-types-nav-link {
position: relative !important;
display: block !important;
min-width: 0 !important;
margin: 0 !important;
padding: 11px 25px 11px 2px !important;
color: var(--jrtn-ink, #172033) !important;
text-decoration: none !important;
border-bottom: 1px solid var(--jrtn-line, #d9e2ea) !important;
font-family: inherit !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
line-height: 1.45 !important;
}
.jrtn-page .jrtn-types-nav-link::after {
position: absolute !important;
top: 50% !important;
right: 3px !important;
content: "↓" !important;
color: #8190a0 !important;
font-size: 0.82rem !important;
line-height: 1 !important;
transform: translateY(-50%) !important;
}
.jrtn-page .jrtn-types-nav-link:hover,
.jrtn-page .jrtn-types-nav-link:focus {
color: var(--jrtn-accent, #1e4b7a) !important;
}
/* --------------------------------------------------------------------------
GENERAL WORD COUNT NOTICE
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-types-count-note {
display: grid !important;
grid-template-columns: 38px minmax(0, 1fr) !important;
gap: 13px !important;
align-items: start !important;
width: 100% !important;
margin: 0 !important;
padding: 17px 19px !important;
background: var(--jrtn-accent-soft, #eef5fb) !important;
border: 1px solid #bfd1df !important;
border-radius: 7px !important;
}
.jrtn-page .jrtn-types-count-mark {
display: inline-flex !important;
width: 34px !important;
height: 34px !important;
align-items: center !important;
justify-content: center !important;
background: #ffffff !important;
color: var(--jrtn-accent, #1e4b7a) !important;
border: 1px solid #b9ccdc !important;
border-radius: 50% !important;
font-family: inherit !important;
font-size: 0.82rem !important;
font-weight: 800 !important;
line-height: 1 !important;
}
.jrtn-page .jrtn-types-count-note h3 {
margin: 0 0 5px !important;
color: var(--jrtn-ink, #172033) !important;
font-family: inherit !important;
font-size: 0.98rem !important;
font-weight: 700 !important;
line-height: 1.42 !important;
}
.jrtn-page .jrtn-types-count-note p {
margin: 0 !important;
color: var(--jrtn-muted, #637083) !important;
font-family: inherit !important;
font-size: 0.89rem !important;
line-height: 1.6 !important;
}
/* --------------------------------------------------------------------------
ARTICLE TYPE SUMMARY TABLE
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-types-table-wrap {
width: 100% !important;
margin: 18px 0 0 !important;
overflow-x: auto !important;
border: 1px solid var(--jrtn-line, #d9e2ea) !important;
border-radius: 7px !important;
}
.jrtn-page .jrtn-types-table {
width: 100% !important;
min-width: 50px !important;
margin: 0 !important;
border-collapse: collapse !important;
border-spacing: 0 !important;
background: var(--jrtn-white, #ffffff) !important;
}
.jrtn-page .jrtn-types-table th {
padding: 11px 13px !important;
background: var(--jrtn-accent-soft, #eef5fb) !important;
color: var(--jrtn-ink, #172033) !important;
border-bottom: 1px solid #bfd1df !important;
text-align: left !important;
vertical-align: bottom !important;
font-family: inherit !important;
font-size: 0.67rem !important;
font-weight: 800 !important;
letter-spacing: 0.04em !important;
line-height: 1.4 !important;
text-transform: uppercase !important;
}
.jrtn-page .jrtn-types-table td {
padding: 11px 13px !important;
color: var(--jrtn-muted, #637083) !important;
border-bottom: 1px solid var(--jrtn-line, #d9e2ea) !important;
vertical-align: top !important;
font-family: inherit !important;
font-size: 0.84rem !important;
line-height: 1.5 !important;
}
.jrtn-page .jrtn-types-table tr:last-child td {
border-bottom: 0 !important;
}
.jrtn-page .jrtn-types-table td:first-child {
width: 32% !important;
color: var(--jrtn-ink, #172033) !important;
font-weight: 650 !important;
}
.jrtn-page .jrtn-types-table td:nth-child(2),
.jrtn-page .jrtn-types-table td:nth-child(3),
.jrtn-page .jrtn-types-table td:nth-child(4) {
white-space: nowrap !important;
}
.jrtn-page .jrtn-types-table a {
color: var(--jrtn-accent, #1e4b7a) !important;
font-weight: 700 !important;
text-decoration: none !important;
}
.jrtn-page .jrtn-types-table a:hover {
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
/* --------------------------------------------------------------------------
INDIVIDUAL ARTICLE TYPE
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-article-type {
position: relative !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
scroll-margin-top: 120px !important;
}
.jrtn-page .jrtn-article-type + .jrtn-article-type {
margin-top: 34px !important;
padding-top: 34px !important;
border-top: 1px solid var(--jrtn-line, #d9e2ea) !important;
}
.jrtn-page .jrtn-type-heading {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 20px !important;
align-items: start !important;
width: 100% !important;
margin: 0 0 16px !important;
}
.jrtn-page .jrtn-type-number {
display: block !important;
margin: 0 0 5px !important;
color: var(--jrtn-accent, #1e4b7a) !important;
font-family: inherit !important;
font-size: 0.68rem !important;
font-weight: 800 !important;
letter-spacing: 0.055em !important;
line-height: 1.4 !important;
text-transform: uppercase !important;
}
.jrtn-page .jrtn-type-title {
margin: 0 0 6px !important;
color: var(--jrtn-ink, #172033) !important;
font-family: inherit !important;
font-size: clamp(1.28rem, 2.1vw, 1.72rem) !important;
font-weight: 750 !important;
line-height: 1.25 !important;
}
.jrtn-page .jrtn-type-description {
max-width: 760px !important;
margin: 0 !important;
color: var(--jrtn-muted, #637083) !important;
font-family: inherit !important;
font-size: 0.91rem !important;
line-height: 1.62 !important;
}
.jrtn-page .jrtn-type-word-limit {
display: block !important;
min-width: 112px !important;
margin: 2px 0 0 !important;
padding: 10px 12px !important;
background: var(--jrtn-accent-soft, #eef5fb) !important;
border: 1px solid #bfd1df !important;
border-radius: 6px !important;
text-align: center !important;
}
.jrtn-page .jrtn-type-word-number {
display: block !important;
margin: 0 0 1px !important;
color: var(--jrtn-accent, #1e4b7a) !important;
font-family: inherit !important;
font-size: 1.02rem !important;
font-weight: 800 !important;
line-height: 1.25 !important;
}
.jrtn-page .jrtn-type-word-label {
display: block !important;
color: var(--jrtn-muted, #637083) !important;
font-family: inherit !important;
font-size: 0.61rem !important;
font-weight: 700 !important;
letter-spacing: 0.045em !important;
line-height: 1.35 !important;
text-transform: uppercase !important;
}
/* --------------------------------------------------------------------------
TYPE REQUIREMENT STRIP
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-type-facts {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 0 !important;
width: 100% !important;
margin: 0 0 20px !important;
padding: 0 !important;
overflow: hidden !important;
background: var(--jrtn-white, #ffffff) !important;
border: 1px solid var(--jrtn-line, #d9e2ea) !important;
border-radius: 7px !important;
}
.jrtn-page .jrtn-type-fact {
min-width: 0 !important;
margin: 0 !important;
padding: 12px 14px !important;
}
.jrtn-page .jrtn-type-fact + .jrtn-type-fact {
border-left: 1px solid var(--jrtn-line, #d9e2ea) !important;
}
.jrtn-page .jrtn-type-fact-label {
display: block !important;
margin: 0 0 3px !important;
color: var(--jrtn-muted, #637083) !important;
font-family: inherit !important;
font-size: 0.62rem !important;
font-weight: 750 !important;
letter-spacing: 0.045em !important;
line-height: 1.4 !important;
text-transform: uppercase !important;
}
.jrtn-page .jrtn-type-fact-value {
display: block !important;
color: var(--jrtn-ink, #172033) !important;
font-family: inherit !important;
font-size: 0.83rem !important;
font-weight: 650 !important;
line-height: 1.45 !important;
overflow-wrap: anywhere !important;
}
/* --------------------------------------------------------------------------
TYPE CONTENT COLUMNS
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-type-content {
display: grid !important;
grid-template-columns:
minmax(0, 1.06fr)
minmax(250px, 0.94fr) !important;
gap: 28px !important;
align-items: start !important;
width: 100% !important;
}
.jrtn-page .jrtn-type-column {
min-width: 0 !important;
}
.jrtn-page .jrtn-type-subtitle {
margin: 0 0 8px !important;
padding: 0 0 8px !important;
color: var(--jrtn-ink, #172033) !important;
border-bottom: 2px solid var(--jrtn-accent, #1e4b7a) !important;
font-family: inherit !important;
font-size: 0.96rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
.jrtn-page .jrtn-type-list {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.jrtn-page .jrtn-type-list > li {
position: relative !important;
margin: 0 !important;
padding: 9px 2px 9px 18px !important;
color: var(--jrtn-muted, #637083) !important;
border-bottom: 1px solid var(--jrtn-line, #d9e2ea) !important;
font-family: inherit !important;
font-size: 0.87rem !important;
line-height: 1.56 !important;
}
.jrtn-page .jrtn-type-list > li::before {
position: absolute !important;
top: 17px !important;
left: 2px !important;
width: 5px !important;
height: 5px !important;
content: "" !important;
background: var(--jrtn-accent, #1e4b7a) !important;
border-radius: 50% !important;
}
.jrtn-page .jrtn-type-list strong {
color: var(--jrtn-ink, #172033) !important;
font-weight: 700 !important;
}
/* --------------------------------------------------------------------------
REPORTING GUIDELINE NOTE
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-type-reporting {
margin: 16px 0 0 !important;
padding: 12px 14px !important;
background: var(--jrtn-surface, #f7f9fb) !important;
border: 1px solid var(--jrtn-line, #d9e2ea) !important;
border-left: 3px solid var(--jrtn-accent, #1e4b7a) !important;
border-radius: 0 6px 6px 0 !important;
color: var(--jrtn-muted, #637083) !important;
font-family: inherit !important;
font-size: 0.84rem !important;
line-height: 1.55 !important;
}
.jrtn-page .jrtn-type-reporting strong {
color: var(--jrtn-ink, #172033) !important;
}
.jrtn-page .jrtn-type-reporting a {
color: var(--jrtn-accent, #1e4b7a) !important;
font-weight: 700 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
/* --------------------------------------------------------------------------
INVITATION NOTE
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-types-invitation {
margin: 18px 0 0 !important;
padding: 15px 17px !important;
background: #fffaf0 !important;
border: 1px solid #e7d9b5 !important;
border-left: 3px solid #b38a2f !important;
border-radius: 0 6px 6px 0 !important;
color: #655b47 !important;
font-family: inherit !important;
font-size: 0.88rem !important;
line-height: 1.58 !important;
}
.jrtn-page .jrtn-types-invitation strong {
color: #4d422e !important;
}
/* --------------------------------------------------------------------------
FINAL ACTION
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-types-final-action {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 22px !important;
align-items: center !important;
width: 100% !important;
margin: 0 !important;
padding: 22px 24px !important;
background: var(--jrtn-accent-soft, #eef5fb) !important;
border: 1px solid #bfd1df !important;
border-radius: 8px !important;
}
.jrtn-page .jrtn-types-final-action h3 {
margin: 0 0 5px !important;
color: var(--jrtn-ink, #172033) !important;
font-family: inherit !important;
font-size: 1.1rem !important;
font-weight: 700 !important;
line-height: 1.42 !important;
}
.jrtn-page .jrtn-types-final-action p {
margin: 0 !important;
color: var(--jrtn-muted, #637083) !important;
font-family: inherit !important;
font-size: 0.89rem !important;
line-height: 1.58 !important;
}
.jrtn-page .jrtn-types-final-buttons {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
justify-content: flex-end !important;
}
/* --------------------------------------------------------------------------
RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width: 900px) {
.jrtn-page .jrtn-type-facts {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.jrtn-page .jrtn-type-fact:nth-child(3) {
border-left: 0 !important;
border-top: 1px solid var(--jrtn-line, #d9e2ea) !important;
}
.jrtn-page .jrtn-type-fact:nth-child(4) {
border-top: 1px solid var(--jrtn-line, #d9e2ea) !important;
}
.jrtn-page .jrtn-type-content {
grid-template-columns: 1fr !important;
gap: 22px !important;
}
.jrtn-page .jrtn-types-final-action {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-types-final-buttons {
justify-content: flex-start !important;
}
}
@media (max-width: 680px) {
.jrtn-page .jrtn-types-nav {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-type-heading {
grid-template-columns: 1fr !important;
gap: 12px !important;
}
.jrtn-page .jrtn-type-word-limit {
width: 118px !important;
}
.jrtn-page.jrtn-article-types-page > * + * {
margin-top: 22px !important;
}
}
@media (max-width: 480px) {
.jrtn-page .jrtn-types-count-note {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-type-facts {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-type-fact + .jrtn-type-fact {
border-top: 1px solid var(--jrtn-line, #d9e2ea) !important;
border-left: 0 !important;
}
.jrtn-page .jrtn-types-final-buttons {
display: grid !important;
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-types-final-buttons .jrtn-button {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
}
}
/* ==========================================================================
28. ARTICLE TYPE NAVIGATION — CSS ONLY
Smooth scrolling, target highlight, and selection notification
========================================================================== */
/* --------------------------------------------------------------------------
SMOOTH SCROLL
Berlaku untuk link internal seperti href="#jrtn-original-research"
-------------------------------------------------------------------------- */
html {
scroll-behavior: smooth !important;
}
/* --------------------------------------------------------------------------
SCROLL OFFSET
Mencegah judul article type tertutup header
-------------------------------------------------------------------------- */
.jrtn-page.jrtn-article-types-page .jrtn-article-type {
position: relative !important;
scroll-margin-top: 145px !important;
}
/* --------------------------------------------------------------------------
NAVIGATION LINK INTERACTION
-------------------------------------------------------------------------- */
.jrtn-page.jrtn-article-types-page .jrtn-types-nav-link {
transition:
color 160ms ease,
background-color 160ms ease,
padding-left 160ms ease !important;
}
.jrtn-page.jrtn-article-types-page .jrtn-types-nav-link:hover,
.jrtn-page.jrtn-article-types-page .jrtn-types-nav-link:focus {
padding-left: 8px !important;
color: var(--jrtn-accent, #1e4b7a) !important;
background: rgba(238, 245, 251, 0.72) !important;
}
/* --------------------------------------------------------------------------
TARGET SECTION HIGHLIGHT
Aktif ketika URL mengandung ID section yang dipilih
-------------------------------------------------------------------------- */
.jrtn-page.jrtn-article-types-page
.jrtn-article-type:target {
border-radius: 8px !important;
animation:
jrtn-article-target-highlight
1900ms
cubic-bezier(0.22, 1, 0.36, 1)
both !important;
}
@keyframes jrtn-article-target-highlight {
0% {
background-color: rgba(30, 75, 122, 0);
box-shadow:
0 0 0 0 rgba(30, 75, 122, 0);
}
18% {
background-color: rgba(238, 245, 251, 0.96);
box-shadow:
0 0 0 5px rgba(30, 75, 122, 0.12);
}
58% {
background-color: rgba(238, 245, 251, 0.6);
box-shadow:
0 0 0 3px rgba(30, 75, 122, 0.07);
}
100% {
background-color: rgba(30, 75, 122, 0);
box-shadow:
0 0 0 0 rgba(30, 75, 122, 0);
}
}
/* --------------------------------------------------------------------------
SELECTED INDICATOR BESIDE ARTICLE TYPE NUMBER
-------------------------------------------------------------------------- */
.jrtn-page.jrtn-article-types-page
.jrtn-article-type:target
.jrtn-type-number::after {
display: inline-flex !important;
min-height: 17px !important;
align-items: center !important;
justify-content: center !important;
margin-left: 8px !important;
padding: 2px 6px !important;
content: "Selected" !important;
color: #23683a !important;
background: #e8f4eb !important;
border: 1px solid #afd1b8 !important;
border-radius: 3px !important;
font-family: inherit !important;
font-size: 0.49rem !important;
font-weight: 800 !important;
letter-spacing: 0.045em !important;
line-height: 1 !important;
text-transform: uppercase !important;
vertical-align: middle !important;
animation:
jrtn-selected-label-reveal
420ms
ease-out
both !important;
}
@keyframes jrtn-selected-label-reveal {
from {
opacity: 0;
transform: translateX(-4px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
/* --------------------------------------------------------------------------
FIXED SELECTION NOTIFICATION
Pseudo-element dibuat dari section yang sedang menjadi :target
-------------------------------------------------------------------------- */
.jrtn-page.jrtn-article-types-page
.jrtn-article-type:target::before {
position: fixed !important;
right: 24px !important;
bottom: 24px !important;
z-index: 9999 !important;
display: flex !important;
width: min(390px, calc(100vw - 32px)) !important;
min-height: 52px !important;
align-items: center !important;
margin: 0 !important;
padding: 13px 16px 13px 47px !important;
color: var(--jrtn-ink, #172033) !important;
background:
linear-gradient(
135deg,
#ffffff 0%,
#f6f9fc 100%
) !important;
border: 1px solid #c5d6e4 !important;
border-left: 4px solid var(--jrtn-accent, #1e4b7a) !important;
border-radius: 7px !important;
box-shadow:
0 13px 32px rgba(17, 38, 68, 0.2) !important;
font-family: inherit !important;
font-size: 0.84rem !important;
font-weight: 700 !important;
letter-spacing: 0.005em !important;
line-height: 1.45 !important;
pointer-events: none !important;
animation:
jrtn-article-selection-toast
2800ms
ease
both !important;
}
/* Ikon centang pada notification */
.jrtn-page.jrtn-article-types-page
.jrtn-article-type:target::after {
position: fixed !important;
right: calc(min(390px, calc(100vw - 32px)) - 15px) !important;
bottom: 34px !important;
z-index: 10000 !important;
display: inline-flex !important;
width: 28px !important;
height: 28px !important;
align-items: center !important;
justify-content: center !important;
content: "✓" !important;
color: #287642 !important;
background: #e8f4eb !important;
border: 1px solid #afd1b8 !important;
border-radius: 50% !important;
font-family: inherit !important;
font-size: 0.72rem !important;
font-weight: 800 !important;
line-height: 1 !important;
pointer-events: none !important;
animation:
jrtn-article-selection-toast
2800ms
ease
both !important;
}
@keyframes jrtn-article-selection-toast {
0% {
visibility: visible;
opacity: 0;
transform: translateY(14px);
}
12% {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
76% {
visibility: visible;
opacity: 1;
transform: translateY(0);
}
100% {
visibility: hidden;
opacity: 0;
transform: translateY(8px);
}
}
/* --------------------------------------------------------------------------
NOTIFICATION TEXT FOR EACH ARTICLE TYPE
Tidak memerlukan perubahan HTML
-------------------------------------------------------------------------- */
#jrtn-original-research:target::before {
content:
"ARTICLE TYPE 01 SELECTED — Original Research Article"
!important;
}
#jrtn-systematic-review:target::before {
content:
"ARTICLE TYPE 02 SELECTED — Systematic Review and Meta-analysis"
!important;
}
#jrtn-scoping-review:target::before {
content:
"ARTICLE TYPE 03 SELECTED — Scoping Review and Evidence Synthesis"
!important;
}
#jrtn-study-protocol:target::before {
content:
"ARTICLE TYPE 04 SELECTED — Study Protocol"
!important;
}
#jrtn-instrument-study:target::before {
content:
"ARTICLE TYPE 05 SELECTED — Instrument Development and Validation Study"
!important;
}
#jrtn-case-report:target::before {
content:
"ARTICLE TYPE 06 SELECTED — Clinical or Community Case Report"
!important;
}
#jrtn-quality-improvement:target::before {
content:
"ARTICLE TYPE 07 SELECTED — Quality Improvement and Implementation Report"
!important;
}
#jrtn-short-communication:target::before {
content:
"ARTICLE TYPE 08 SELECTED — Short Communication"
!important;
}
#jrtn-perspective:target::before {
content:
"ARTICLE TYPE 09 SELECTED — Perspective, Policy, Practice, or Education Article"
!important;
}
#jrtn-commentary:target::before {
content:
"ARTICLE TYPE 10 SELECTED — Commentary"
!important;
}
#jrtn-letter:target::before {
content:
"ARTICLE TYPE 11 SELECTED — Letter to the Editor"
!important;
}
/* --------------------------------------------------------------------------
MOBILE ADJUSTMENTS
-------------------------------------------------------------------------- */
@media (max-width: 680px) {
.jrtn-page.jrtn-article-types-page .jrtn-article-type {
scroll-margin-top: 118px !important;
}
.jrtn-page.jrtn-article-types-page
.jrtn-article-type:target::before {
right: 14px !important;
bottom: 14px !important;
left: 14px !important;
width: auto !important;
min-height: 56px !important;
padding:
12px
14px
12px
47px !important;
font-size: 0.78rem !important;
}
.jrtn-page.jrtn-article-types-page
.jrtn-article-type:target::after {
right: auto !important;
bottom: 28px !important;
left: 27px !important;
}
}
/* --------------------------------------------------------------------------
REDUCED MOTION
Mengikuti preferensi aksesibilitas perangkat
-------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto !important;
}
.jrtn-page.jrtn-article-types-page
.jrtn-article-type:target {
animation: none !important;
background: var(--jrtn-accent-soft, #eef5fb) !important;
box-shadow:
0 0 0 3px rgba(30, 75, 122, 0.1) !important;
}
.jrtn-page.jrtn-article-types-page
.jrtn-article-type:target::before,
.jrtn-page.jrtn-article-types-page
.jrtn-article-type:target::after {
animation-duration: 1ms !important;
}
.jrtn-page.jrtn-article-types-page
.jrtn-types-nav-link {
transition: none !important;
}
}
/* ==========================================================================
29. SHARED DESIGN SYSTEM — UNIFIED BASE CLASSES
Kelas dasar yang digunakan oleh beberapa halaman sekaligus.
Menggantikan deklarasi berulang per halaman.
========================================================================== */
/* --------------------------------------------------------------------------
PAGE HERO TITLE
Digunakan oleh: jrtn-hero-title (homepage), jrtn-about-title (about)
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-page-hero-title {
position: relative !important;
z-index: 1 !important;
display: block !important;
width: 100% !important;
max-width: 860px !important;
min-width: 0 !important;
margin: 0 0 14px !important;
padding: 0 !important;
color: var(--jrtn-ink) !important;
font-family: inherit !important;
font-size: clamp(1.9rem, 3.5vw, 2.65rem) !important;
font-weight: 700 !important;
letter-spacing: -0.018em !important;
line-height: 1.15 !important;
word-break: normal !important;
overflow-wrap: normal !important;
white-space: normal !important;
hyphens: none !important;
}
@media (max-width: 680px) {
.jrtn-page .jrtn-page-hero-title {
font-size: 1.78rem !important;
line-height: 1.18 !important;
}
}
@media (max-width: 480px) {
.jrtn-page .jrtn-page-hero-title {
max-width: 100% !important;
}
}
/* --------------------------------------------------------------------------
PAGE LEAD / INTRO PARAGRAPH
Digunakan oleh: jrtn-hero-lead, jrtn-about-lead, jrtn-section-intro
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-page-lead {
position: relative !important;
z-index: 1 !important;
display: block !important;
width: 100% !important;
max-width: 860px !important;
min-width: 0 !important;
margin: 0 0 20px !important;
padding: 0 !important;
color: var(--jrtn-muted) !important;
font-family: inherit !important;
font-size: 1rem !important;
font-weight: 400 !important;
line-height: 1.7 !important;
letter-spacing: normal !important;
word-break: normal !important;
overflow-wrap: break-word !important;
}
@media (max-width: 480px) {
.jrtn-page .jrtn-page-lead {
max-width: 100% !important;
}
}
/* --------------------------------------------------------------------------
PAGE ACTION PANEL
Panel dua-kolom di bagian bawah halaman dengan tombol aksi.
Digunakan oleh: jrtn-scope-action, jrtn-author-final-action,
jrtn-types-final-action
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-page-action {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 24px !important;
align-items: center !important;
width: 100% !important;
margin: 0 0 18px !important;
padding: 22px 24px !important;
background:
linear-gradient(
140deg,
rgba(238, 245, 251, 0.92),
rgba(255, 255, 255, 1)
) !important;
border: 1px solid var(--jrtn-line) !important;
border-left: 4px solid var(--jrtn-accent) !important;
border-radius: 8px !important;
}
.jrtn-page .jrtn-page-action h3 {
display: block !important;
width: 100% !important;
margin: 0 0 5px !important;
padding: 0 !important;
color: var(--jrtn-ink) !important;
font-family: inherit !important;
font-size: 1.15rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
}
.jrtn-page .jrtn-page-action p {
margin: 0 !important;
color: var(--jrtn-muted) !important;
font-family: inherit !important;
font-size: 0.91rem !important;
line-height: 1.58 !important;
}
.jrtn-page .jrtn-page-action-buttons {
display: flex !important;
flex-wrap: wrap !important;
gap: 9px !important;
justify-content: flex-end !important;
}
@media (max-width: 780px) {
.jrtn-page .jrtn-page-action {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-page-action-buttons {
justify-content: flex-start !important;
}
}
@media (max-width: 480px) {
.jrtn-page .jrtn-page-action {
padding: 18px !important;
}
.jrtn-page .jrtn-page-action-buttons {
display: grid !important;
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-page-action-buttons .jrtn-button {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
}
}
/* --------------------------------------------------------------------------
PAGE EYEBROW / KICKER
Label kategori kecil di atas judul section.
Digunakan oleh: jrtn-eyebrow, jrtn-about-kicker, jrtn-scope-action label,
jrtn-type-number, dll.
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-page-eyebrow {
display: block !important;
margin: 0 0 5px !important;
color: var(--jrtn-accent) !important;
font-family: inherit !important;
font-size: 0.71rem !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
line-height: 1.4 !important;
text-transform: uppercase !important;
}
/* --------------------------------------------------------------------------
ALIASES — kelas lama diarahkan ke nilai yang sama dengan base class
Mempertahankan backward compatibility dengan halaman yang sudah di OJS
-------------------------------------------------------------------------- */
/* jrtn-hero-title dan jrtn-about-title → nilai kunci dari jrtn-page-hero-title */
.jrtn-page .jrtn-hero-title,
.jrtn-page .jrtn-about-title {
font-size: clamp(1.9rem, 3.5vw, 2.65rem) !important;
font-weight: 700 !important;
letter-spacing: -0.018em !important;
line-height: 1.15 !important;
}
/* jrtn-hero-lead dan jrtn-about-lead → nilai kunci dari jrtn-page-lead */
.jrtn-page .jrtn-hero-lead,
.jrtn-page .jrtn-about-lead {
font-size: 1rem !important;
font-weight: 400 !important;
line-height: 1.7 !important;
letter-spacing: normal !important;
}
/* jrtn-author-final-action, jrtn-types-final-action → shared CTA variant (no left border, solid bg) */
.jrtn-page .jrtn-author-final-action,
.jrtn-page .jrtn-types-final-action {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 22px !important;
align-items: center !important;
margin: 0 !important;
padding: 22px 24px !important;
background: var(--jrtn-accent-soft, #eef5fb) !important;
border: 1px solid #bfd1df !important;
border-radius: 8px !important;
}
/* ==========================================================================
LOCAL PREVIEW INDEX — DEVELOPMENT ONLY (NOT FOR OJS)
Scoped exclusively to `jrtn-preview-` selectors so it never affects
production JRTN page styles. Safe to ignore when copying content into OJS.
========================================================================== */
.jrtn-preview-body {
margin: 0;
padding: 0;
background: #f4f6f9;
color: #1c2430;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
line-height: 1.6;
}
.jrtn-preview-main {
max-width: 760px;
margin: 0 auto;
padding: 3rem 1.25rem 4rem;
box-sizing: border-box;
}
.jrtn-preview-header {
margin-bottom: 2.5rem;
padding-bottom: 1.5rem;
border-bottom: 1px solid #d9dee6;
}
.jrtn-preview-eyebrow {
margin: 0 0 0.5rem;
font-size: 0.75rem;
font-weight: 600;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #5a6b80;
}
.jrtn-preview-title {
margin: 0 0 0.75rem;
font-size: 1.75rem;
line-height: 1.25;
color: #123;
}
.jrtn-preview-lead {
margin: 0;
max-width: 60ch;
color: #46566a;
}
.jrtn-preview-group {
margin-bottom: 2.25rem;
}
.jrtn-preview-group-title {
margin: 0 0 1rem;
font-size: 1.05rem;
color: #1e4b7a;
}
.jrtn-preview-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 0.5rem;
}
.jrtn-preview-item {
margin: 0;
}
.jrtn-preview-link {
display: block;
padding: 0.85rem 1rem;
background: #ffffff;
border: 1px solid #d9dee6;
border-radius: 8px;
color: #1e4b7a;
text-decoration: none;
font-weight: 500;
word-break: break-word;
transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.jrtn-preview-link:hover {
background: #f0f5fb;
border-color: #1e4b7a;
}
.jrtn-preview-link:focus-visible {
outline: 3px solid #1766c9;
outline-offset: 2px;
}
@media (max-width: 480px) {
.jrtn-preview-main {
padding: 2rem 1rem 3rem;
}
.jrtn-preview-title {
font-size: 1.4rem;
}
}
/* ==========================================================================
LOCAL OJS PAGE SHELL PREVIEW
Development only — requires .jrtn-preview-ojs-body
Recreates the OJS content/sidebar layout that the default theme would
normally supply, so the preview shell (preview.html) matches production
proportions. All selectors are scoped under .jrtn-preview-ojs-body or use
the jrtn-preview- prefix, so nothing here affects the real OJS site.
========================================================================== */
.jrtn-preview-ojs-body {
margin: 0;
padding: 0;
background: #f4f6f9;
box-sizing: border-box;
overflow-x: hidden;
}
.jrtn-preview-ojs-body *,
.jrtn-preview-ojs-body *::before,
.jrtn-preview-ojs-body *::after {
box-sizing: border-box;
}
/* Content wrapper: main + sidebar side by side on desktop. */
.jrtn-preview-ojs-body .pkp_structure_content {
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 28px 20px 40px;
display: flex;
flex-wrap: wrap;
gap: 30px;
align-items: flex-start;
}
/* Main content column — wider than the sidebar. */
.jrtn-preview-ojs-body .pkp_structure_main {
flex: 1 1 0;
min-width: 0;
}
/* Sidebar column — fixed, narrower, on the right. */
.jrtn-preview-ojs-body .pkp_structure_sidebar {
flex: 0 0 310px;
max-width: 310px;
min-width: 0;
/* Ensure the aside inside has no conflicting left margin */
}
/* Strip any default margin OJS applies to the aside inside the sidebar */
.jrtn-preview-ojs-body .pkp_structure_sidebar aside,
.jrtn-preview-ojs-body .pkp_structure_sidebar > * {
margin-left: 0;
padding-left: 0;
}
/* Loading and error states. */
.jrtn-preview-loading {
padding: 2rem 0;
color: #5a6b80;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.jrtn-preview-error {
margin: 1rem 0;
padding: 1.25rem 1.5rem;
background: #fff5f5;
border: 1px solid #f0c2c2;
border-radius: 8px;
color: #6b1f1f;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}
.jrtn-preview-error-title {
margin: 0 0 0.5rem;
font-weight: 700;
}
.jrtn-preview-error-detail {
margin: 0 0 0.75rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9rem;
word-break: break-word;
}
.jrtn-preview-error-hint {
margin: 0;
font-size: 0.9rem;
color: #8a4a4a;
}
/* Tablet / mobile: sidebar drops below the content. */
@media (max-width: 768px) {
.jrtn-preview-ojs-body .pkp_structure_content {
flex-direction: column;
gap: 24px;
padding: 20px 16px 32px;
}
.jrtn-preview-ojs-body .pkp_structure_main {
flex: 1 1 100%;
width: 100%;
order: 1;
}
.jrtn-preview-ojs-body .pkp_structure_sidebar {
flex: 1 1 100%;
max-width: 100%;
width: 100%;
order: 2;
}
}
/* --------------------------------------------------------------------------
PREVIEW INDEX — local-server notice and raw-fragment list additions
-------------------------------------------------------------------------- */
.jrtn-preview-notice {
margin: 0 0 2rem;
padding: 1rem 1.25rem;
background: #eef5fb;
border: 1px solid #cfe0ef;
border-radius: 8px;
color: #22405f;
}
.jrtn-preview-notice-title {
margin: 0 0 0.4rem;
font-weight: 700;
}
.jrtn-preview-notice p {
margin: 0;
}
.jrtn-preview-notice code {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9em;
background: #dceafb;
padding: 0.1em 0.35em;
border-radius: 4px;
}
.jrtn-preview-group-note {
margin: 0 0 1rem;
color: #5a6b80;
font-size: 0.9rem;
max-width: 60ch;
}
.jrtn-preview-list-compact .jrtn-preview-link {
padding: 0.55rem 0.85rem;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.85rem;
font-weight: 400;
}
/* ==========================================================================
PREVIEW INDEX PAGE
Development only — styles for index.html, the local workspace landing page.
All selectors use the jrtn-preview-index- prefix and are scoped to
.jrtn-preview-index-body so they never affect the OJS site.
========================================================================== */
.jrtn-preview-index-body {
min-height: 100vh;
margin: 0;
padding: 0;
background: #f4f7fa;
color: #172033;
font-family:
Inter,
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
sans-serif;
}
/* --------------------------------------------------------------------------
HEADER
-------------------------------------------------------------------------- */
.jrtn-preview-index-header {
width: 100%;
background:
linear-gradient(
118deg,
#183ea8 0%,
#1766c9 62%,
#0a9ed2 100%
);
color: #ffffff;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
.jrtn-preview-index-header-inner {
display: flex;
width: min(1120px, calc(100% - 48px));
min-height: 240px;
align-items: center;
justify-content: space-between;
gap: 36px;
margin: 0 auto;
padding: 42px 0;
}
.jrtn-preview-index-kicker {
margin: 0 0 10px;
color: rgba(255, 255, 255, 0.76);
font-size: 0.72rem;
font-weight: 800;
letter-spacing: 0.08em;
line-height: 1.4;
text-transform: uppercase;
}
.jrtn-preview-index-title {
max-width: 760px;
margin: 0;
color: #ffffff;
font-size: clamp(2rem, 5vw, 3.7rem);
font-weight: 750;
letter-spacing: -0.035em;
line-height: 1.06;
}
.jrtn-preview-index-lead {
max-width: 700px;
margin: 18px 0 0;
color: rgba(255, 255, 255, 0.85);
font-size: 1rem;
line-height: 1.65;
}
.jrtn-preview-index-status {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 8px;
padding: 9px 12px;
color: #ffffff;
background: rgba(7, 31, 96, 0.2);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 6px;
font-size: 0.77rem;
font-weight: 700;
white-space: nowrap;
}
.jrtn-preview-index-status-dot {
width: 8px;
height: 8px;
background: #94efab;
border-radius: 50%;
box-shadow: 0 0 0 4px rgba(148, 239, 171, 0.15);
}
/* --------------------------------------------------------------------------
MAIN CONTENT
-------------------------------------------------------------------------- */
.jrtn-preview-index-main {
width: min(1120px, calc(100% - 48px));
margin: 0 auto;
padding: 46px 0 64px;
}
.jrtn-preview-index-main > * + * {
margin-top: 42px;
}
/* --------------------------------------------------------------------------
INTRODUCTION
-------------------------------------------------------------------------- */
.jrtn-preview-index-intro {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 28px;
padding-bottom: 22px;
border-bottom: 1px solid #ced9e3;
}
.jrtn-preview-index-intro h2 {
margin: 0 0 7px;
color: #172033;
font-size: 1.5rem;
line-height: 1.3;
}
.jrtn-preview-index-intro p {
max-width: 680px;
margin: 0;
color: #637083;
font-size: 0.93rem;
line-height: 1.6;
}
.jrtn-preview-index-meta {
display: flex;
flex-wrap: wrap;
gap: 7px;
justify-content: flex-end;
}
.jrtn-preview-index-meta span {
padding: 5px 8px;
color: #435268;
background: #ffffff;
border: 1px solid #d2dde7;
border-radius: 4px;
font-size: 0.67rem;
font-weight: 700;
letter-spacing: 0.035em;
text-transform: uppercase;
}
/* --------------------------------------------------------------------------
PAGE GROUP
-------------------------------------------------------------------------- */
.jrtn-preview-page-group {
display: grid;
grid-template-columns: minmax(220px, 0.32fr) minmax(0, 0.68fr);
gap: 42px;
align-items: start;
}
.jrtn-preview-group-heading {
position: sticky;
top: 24px;
}
.jrtn-preview-group-number {
margin: 0 0 6px;
color: #1762b7;
font-size: 0.66rem;
font-weight: 800;
letter-spacing: 0.07em;
line-height: 1.4;
text-transform: uppercase;
}
.jrtn-preview-group-heading h2,
.jrtn-preview-production h2 {
margin: 0 0 8px;
color: #172033;
font-size: 1.3rem;
line-height: 1.35;
}
.jrtn-preview-group-heading p,
.jrtn-preview-production p {
margin: 0;
color: #637083;
font-size: 0.88rem;
line-height: 1.6;
}
/* --------------------------------------------------------------------------
PAGE LIST
-------------------------------------------------------------------------- */
.jrtn-preview-page-list {
display: block;
margin: 0;
padding: 0;
background: #ffffff;
border: 1px solid #d3dee8;
border-radius: 8px;
}
.jrtn-preview-page-link {
display: grid;
grid-template-columns: 38px minmax(0, 1fr) auto;
gap: 14px;
align-items: center;
min-height: 76px;
padding: 13px 16px;
color: #172033;
text-decoration: none;
border-bottom: 1px solid #e0e7ed;
transition:
background-color 150ms ease,
padding-left 150ms ease;
}
.jrtn-preview-page-link:first-child {
border-radius: 8px 8px 0 0;
}
.jrtn-preview-page-link:last-child {
border-bottom: 0;
border-radius: 0 0 8px 8px;
}
.jrtn-preview-page-link:hover,
.jrtn-preview-page-link:focus-visible {
padding-left: 21px;
background: #f3f7fa;
}
.jrtn-preview-page-link:focus-visible {
outline: 3px solid rgba(23, 98, 183, 0.22);
outline-offset: 2px;
}
.jrtn-preview-page-number {
display: inline-flex;
width: 34px;
height: 34px;
align-items: center;
justify-content: center;
color: #1762b7;
background: #edf4fa;
border: 1px solid #c7d8e7;
border-radius: 5px;
font-size: 0.67rem;
font-weight: 800;
}
.jrtn-preview-page-content {
display: block;
min-width: 0;
}
.jrtn-preview-page-content strong {
display: block;
margin: 0 0 3px;
color: #172033;
font-size: 0.93rem;
line-height: 1.4;
}
.jrtn-preview-page-content small {
display: block;
color: #6a7789;
font-size: 0.78rem;
line-height: 1.45;
}
.jrtn-preview-page-state {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 7px;
border-radius: 4px;
font-size: 0.61rem;
font-weight: 800;
letter-spacing: 0.045em;
line-height: 1.2;
text-transform: uppercase;
}
.jrtn-preview-state-complete {
color: #28683d;
background: #e9f4ec;
border: 1px solid #bbd9c3;
}
.jrtn-preview-state-review {
color: #70551e;
background: #fff7e7;
border: 1px solid #e7d4a5;
}
.jrtn-preview-state-planned {
color: #667487;
background: #f1f4f7;
border: 1px solid #d7dfe7;
}
/* --------------------------------------------------------------------------
PRODUCTION LINKS
-------------------------------------------------------------------------- */
.jrtn-preview-production {
display: grid;
grid-template-columns: minmax(220px, 0.32fr) minmax(0, 0.68fr);
gap: 42px;
align-items: start;
padding-top: 36px;
border-top: 1px solid #ced9e3;
}
.jrtn-preview-production-links {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px;
}
.jrtn-preview-production-links a {
display: flex;
min-height: 48px;
align-items: center;
justify-content: center;
padding: 10px 12px;
color: #1762b7;
text-align: center;
text-decoration: none;
background: #ffffff;
border: 1px solid #cfdbe6;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 700;
line-height: 1.4;
}
.jrtn-preview-production-links a:hover,
.jrtn-preview-production-links a:focus-visible {
color: #ffffff;
background: #1762b7;
border-color: #1762b7;
}
/* --------------------------------------------------------------------------
WORKFLOW NOTE
-------------------------------------------------------------------------- */
.jrtn-preview-workflow-note {
display: grid;
grid-template-columns: minmax(180px, 0.28fr) minmax(0, 0.72fr);
gap: 24px;
padding: 17px 19px;
background: #edf4fa;
border: 1px solid #c7d8e7;
border-left: 4px solid #1762b7;
border-radius: 0 7px 7px 0;
}
.jrtn-preview-workflow-note strong {
color: #172033;
font-size: 0.88rem;
line-height: 1.5;
}
.jrtn-preview-workflow-note span {
color: #637083;
font-size: 0.86rem;
line-height: 1.58;
}
/* --------------------------------------------------------------------------
FOOTER
-------------------------------------------------------------------------- */
.jrtn-preview-index-footer {
display: flex;
width: min(1120px, calc(100% - 48px));
justify-content: space-between;
gap: 24px;
margin: 0 auto;
padding: 22px 0 34px;
border-top: 1px solid #ced9e3;
color: #728094;
font-size: 0.74rem;
line-height: 1.5;
}
.jrtn-preview-index-footer p {
margin: 0;
}
/* --------------------------------------------------------------------------
RESPONSIVE
-------------------------------------------------------------------------- */
@media (max-width: 820px) {
.jrtn-preview-index-header-inner {
min-height: 220px;
align-items: flex-start;
flex-direction: column;
justify-content: center;
gap: 22px;
}
.jrtn-preview-index-intro,
.jrtn-preview-page-group,
.jrtn-preview-production {
grid-template-columns: 1fr;
}
.jrtn-preview-index-intro {
align-items: flex-start;
flex-direction: column;
}
.jrtn-preview-index-meta {
justify-content: flex-start;
}
.jrtn-preview-group-heading {
position: static;
}
.jrtn-preview-production-links {
grid-template-columns: 1fr;
}
}
@media (max-width: 560px) {
.jrtn-preview-index-header-inner,
.jrtn-preview-index-main,
.jrtn-preview-index-footer {
width: min(100% - 30px, 1120px);
}
.jrtn-preview-index-header-inner {
padding: 32px 0;
}
.jrtn-preview-index-main {
padding-top: 32px;
}
.jrtn-preview-index-main > * + * {
margin-top: 34px;
}
.jrtn-preview-page-link {
grid-template-columns: 34px minmax(0, 1fr);
}
.jrtn-preview-page-state {
grid-column: 2;
justify-self: start;
}
.jrtn-preview-workflow-note {
grid-template-columns: 1fr;
gap: 5px;
}
.jrtn-preview-index-footer {
flex-direction: column;
gap: 6px;
}
}
@media (prefers-reduced-motion: reduce) {
.jrtn-preview-page-link,
.jrtn-preview-production-links a {
transition: none;
}
}
/* ==========================================================================
30. APC ZERO-FEE BANNER
========================================================================== */
.jrtn-page .jrtn-apc-zero-banner {
background:
linear-gradient(
140deg,
rgba(238, 245, 251, 0.96),
rgba(255, 255, 255, 1)
) !important;
border: 1px solid #bfd1df !important;
border-top: 4px solid var(--jrtn-accent, #1e4b7a) !important;
}
.jrtn-page .jrtn-apc-zero-inner {
display: grid !important;
grid-template-columns: auto minmax(0, 1fr) !important;
gap: 32px !important;
align-items: center !important;
margin: 0 0 18px !important;
}
.jrtn-page .jrtn-apc-zero-amount {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
min-width: 130px !important;
padding: 18px 20px !important;
background: var(--jrtn-accent, #1e4b7a) !important;
border-radius: 10px !important;
text-align: center !important;
}
.jrtn-page .jrtn-apc-zero-currency {
display: block !important;
color: rgba(255,255,255,0.72) !important;
font-size: 0.68rem !important;
font-weight: 800 !important;
letter-spacing: 0.07em !important;
text-transform: uppercase !important;
margin: 0 0 2px !important;
}
.jrtn-page .jrtn-apc-zero-number {
display: block !important;
color: #ffffff !important;
font-size: 3.8rem !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: -0.04em !important;
}
.jrtn-page .jrtn-apc-zero-label {
display: block !important;
color: rgba(255,255,255,0.82) !important;
font-size: 0.62rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
margin-top: 4px !important;
}
.jrtn-page .jrtn-apc-zero-stages {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 10px !important;
}
.jrtn-page .jrtn-apc-zero-stage {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 6px !important;
padding: 12px 8px !important;
background: #ffffff !important;
border: 1px solid var(--jrtn-line, #d9e2ea) !important;
border-radius: 6px !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
color: var(--jrtn-ink, #172033) !important;
text-align: center !important;
}
.jrtn-page .jrtn-apc-zero-stage-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 22px !important;
height: 22px !important;
background: #e8f4eb !important;
color: #287642 !important;
border: 1px solid #afd1b8 !important;
border-radius: 50% !important;
font-size: 0.72rem !important;
font-weight: 800 !important;
}
.jrtn-page .jrtn-apc-zero-note {
margin: 0 !important;
color: var(--jrtn-muted, #637083) !important;
font-size: 0.89rem !important;
line-height: 1.6 !important;
}
@media (max-width: 780px) {
.jrtn-page .jrtn-apc-zero-inner {
grid-template-columns: 1fr !important;
gap: 18px !important;
}
.jrtn-page .jrtn-apc-zero-amount {
flex-direction: row !important;
align-items: center !important;
gap: 16px !important;
padding: 14px 18px !important;
min-width: 0 !important;
width: 100% !important;
}
.jrtn-page .jrtn-apc-zero-number {
font-size: 2.8rem !important;
}
}
@media (max-width: 480px) {
.jrtn-page .jrtn-apc-zero-stages {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
/* ==========================================================================
31. ARCHIVING INFRASTRUCTURE GRID
========================================================================== */
.jrtn-page .jrtn-archiving-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 12px !important;
margin: 18px 0 0 !important;
}
.jrtn-page .jrtn-archiving-node {
display: grid !important;
grid-template-columns: 28px minmax(0, 1fr) !important;
gap: 12px !important;
align-items: start !important;
padding: 16px !important;
background: var(--jrtn-white, #ffffff) !important;
border: 1px solid var(--jrtn-line, #d9e2ea) !important;
border-radius: 7px !important;
}
.jrtn-page .jrtn-archiving-node-primary {
background: var(--jrtn-accent-soft, #eef5fb) !important;
border-color: #bfd1df !important;
border-top: 3px solid var(--jrtn-accent, #1e4b7a) !important;
}
.jrtn-page .jrtn-archiving-node-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
color: var(--jrtn-accent, #1e4b7a) !important;
font-size: 0.55rem !important;
margin-top: 2px !important;
}
.jrtn-page .jrtn-archiving-node-name {
display: block !important;
color: var(--jrtn-ink, #172033) !important;
font-size: 0.94rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
margin: 0 0 3px !important;
}
.jrtn-page .jrtn-archiving-node-type {
display: inline-block !important;
padding: 2px 7px !important;
background: rgba(30, 75, 122, 0.07) !important;
border: 1px solid rgba(30, 75, 122, 0.14) !important;
border-radius: 3px !important;
color: var(--jrtn-accent-dark, #153a60) !important;
font-size: 0.63rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
margin: 0 0 8px !important;
}
.jrtn-page .jrtn-archiving-node-desc {
margin: 0 !important;
color: var(--jrtn-muted, #637083) !important;
font-size: 0.84rem !important;
line-height: 1.56 !important;
}
@media (max-width: 900px) {
.jrtn-page .jrtn-archiving-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
}
@media (max-width: 560px) {
.jrtn-page .jrtn-archiving-grid {
grid-template-columns: 1fr !important;
}
}
/* ==========================================================================
32. PLAGIARISM — TURNITIN BLOCK AND THRESHOLD CARDS
========================================================================== */
.jrtn-page .jrtn-plagiarism-tool-block {
display: grid !important;
grid-template-columns: 180px minmax(0, 1fr) !important;
gap: 24px !important;
align-items: start !important;
margin: 18px 0 0 !important;
padding: 22px !important;
background: var(--jrtn-white, #ffffff) !important;
border: 1px solid var(--jrtn-line, #d9e2ea) !important;
border-radius: 8px !important;
}
.jrtn-page .jrtn-plagiarism-tool-logo {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
min-height: 84px !important;
height: auto !important;
padding: 14px 12px !important;
gap: 8px !important;
background: #1d6fa4 !important;
border-radius: 7px !important;
text-align: center !important;
}
.jrtn-page .jrtn-plagiarism-tool-logo-media {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
color: rgba(255, 255, 255, 0.92) !important;
font-size: 0.82rem !important;
font-weight: 600 !important;
line-height: 1.3 !important;
letter-spacing: 0.01em !important;
}
.jrtn-page .jrtn-plagiarism-tool-logo-media img,
.jrtn-page .jrtn-plagiarism-tool-logo img {
max-width: 140px !important;
max-height: 52px !important;
width: auto !important;
height: auto !important;
display: block !important;
object-fit: contain !important;
}
.jrtn-page .jrtn-plagiarism-tool-logo-text {
color: #ffffff !important;
font-size: 1.35rem !important;
font-weight: 800 !important;
letter-spacing: -0.02em !important;
}
.jrtn-page .jrtn-plagiarism-tool-info p {
margin: 0 0 10px !important;
color: var(--jrtn-muted, #637083) !important;
font-size: 0.91rem !important;
line-height: 1.62 !important;
}
.jrtn-page .jrtn-plagiarism-tool-info p:last-child {
margin-bottom: 0 !important;
}
/* Threshold cards */
.jrtn-page .jrtn-plagiarism-thresholds {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 12px !important;
margin: 18px 0 0 !important;
}
.jrtn-page .jrtn-plagiarism-threshold {
padding: 18px !important;
border: 1px solid var(--jrtn-line, #d9e2ea) !important;
border-radius: 7px !important;
border-top-width: 4px !important;
}
.jrtn-page .jrtn-plagiarism-threshold-pass {
background: #f9fefc !important;
border-color: #9fcdb0 !important;
border-top-color: #2e8049 !important;
}
.jrtn-page .jrtn-plagiarism-threshold-review {
background: #fffdf5 !important;
border-color: #e0cc8a !important;
border-top-color: #b38a2f !important;
}
.jrtn-page .jrtn-plagiarism-threshold-reject {
background: #fffafa !important;
border-color: #e0b0b0 !important;
border-top-color: #a33a3a !important;
}
.jrtn-page .jrtn-plagiarism-threshold-range {
display: block !important;
font-size: 1.15rem !important;
font-weight: 800 !important;
line-height: 1.2 !important;
margin: 0 0 4px !important;
color: var(--jrtn-ink, #172033) !important;
}
.jrtn-page .jrtn-plagiarism-threshold-label {
display: block !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.04em !important;
text-transform: uppercase !important;
margin: 0 0 10px !important;
color: var(--jrtn-muted, #637083) !important;
}
.jrtn-page .jrtn-plagiarism-threshold-pass .jrtn-plagiarism-threshold-label {
color: #2e8049 !important;
}
.jrtn-page .jrtn-plagiarism-threshold-review .jrtn-plagiarism-threshold-label {
color: #8a6100 !important;
}
.jrtn-page .jrtn-plagiarism-threshold-reject .jrtn-plagiarism-threshold-label {
color: #a33a3a !important;
}
.jrtn-page .jrtn-plagiarism-threshold-desc {
margin: 0 !important;
color: var(--jrtn-muted, #637083) !important;
font-size: 0.87rem !important;
line-height: 1.58 !important;
}
@media (max-width: 780px) {
.jrtn-page .jrtn-plagiarism-tool-block {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.jrtn-page .jrtn-plagiarism-tool-logo {
min-height: 60px !important;
height: auto !important;
padding: 12px !important;
}
.jrtn-page .jrtn-plagiarism-thresholds {
grid-template-columns: 1fr !important;
}
}
/* ==========================================================================
33. OPEN ACCESS POLICY — STATEMENT BLOCK AND LICENSE BADGE
========================================================================== */
/* OA statement block */
.jrtn-page .jrtn-oa-statement-block {
display: grid !important;
grid-template-columns: 64px minmax(0, 1fr) !important;
gap: 20px !important;
align-items: start !important;
margin: 0 0 22px !important;
padding: 22px !important;
background: var(--jrtn-accent, #1e4b7a) !important;
border-radius: 8px !important;
color: #ffffff !important;
}
.jrtn-page .jrtn-oa-statement-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 52px !important;
height: 52px !important;
background: rgba(255,255,255,0.12) !important;
border: 1px solid rgba(255,255,255,0.22) !important;
border-radius: 50% !important;
}
.jrtn-page .jrtn-oa-dot {
display: block !important;
width: 26px !important;
height: 26px !important;
background: #ffffff !important;
border-radius: 50% !important;
box-shadow: inset 0 0 0 5px var(--jrtn-accent, #1e4b7a) !important;
border: 3px solid rgba(255,255,255,0.9) !important;
}
.jrtn-page .jrtn-oa-statement-title {
margin: 0 0 8px !important;
color: #ffffff !important;
font-size: 1.18rem !important;
font-weight: 700 !important;
line-height: 1.35 !important;
}
.jrtn-page .jrtn-oa-statement-body p {
margin: 0 !important;
color: rgba(255,255,255,0.88) !important;
font-size: 0.92rem !important;
line-height: 1.62 !important;
}
/* OA pillars */
.jrtn-page .jrtn-oa-pillars {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 12px !important;
margin: 0 !important;
}
.jrtn-page .jrtn-oa-pillar {
padding: 16px !important;
background: var(--jrtn-white, #ffffff) !important;
border: 1px solid var(--jrtn-line, #d9e2ea) !important;
border-radius: 6px !important;
}
.jrtn-page .jrtn-oa-pillar-icon {
display: block !important;
color: var(--jrtn-accent, #1e4b7a) !important;
font-size: 0.6rem !important;
margin: 0 0 6px !important;
}
.jrtn-page .jrtn-oa-pillar-label {
display: block !important;
color: var(--jrtn-ink, #172033) !important;
font-size: 0.92rem !important;
font-weight: 700 !important;
margin: 0 0 6px !important;
line-height: 1.35 !important;
}
.jrtn-page .jrtn-oa-pillar-desc {
margin: 0 !important;
color: var(--jrtn-muted, #637083) !important;
font-size: 0.84rem !important;
line-height: 1.55 !important;
}
/* CC license badge */
.jrtn-page .jrtn-oa-license-block {
display: grid !important;
grid-template-columns: 200px minmax(0, 1fr) !important;
gap: 28px !important;
align-items: start !important;
margin: 18px 0 0 !important;
}
.jrtn-page .jrtn-oa-license-badge-wrap {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 10px !important;
}
.jrtn-page .jrtn-oa-license-badge {
display: flex !important;
align-items: center !important;
gap: 6px !important;
padding: 10px 14px !important;
background: #f5f9fc !important;
border: 2px solid #9fb5c5 !important;
border-radius: 7px !important;
}
.jrtn-page .jrtn-oa-license-badge-cc {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
background: #252525 !important;
color: #ffffff !important;
border-radius: 50% !important;
font-size: 0.72rem !important;
font-weight: 800 !important;
}
.jrtn-page .jrtn-oa-license-badge-type {
font-size: 1.1rem !important;
font-weight: 800 !important;
color: var(--jrtn-ink, #172033) !important;
letter-spacing: -0.01em !important;
}
.jrtn-page .jrtn-oa-license-badge-version {
font-size: 0.75rem !important;
font-weight: 700 !important;
color: var(--jrtn-muted, #637083) !important;
}
.jrtn-page .jrtn-oa-license-badge-caption {
margin: 0 !important;
color: var(--jrtn-muted, #637083) !important;
font-size: 0.73rem !important;
text-align: center !important;
line-height: 1.4 !important;
}
.jrtn-page .jrtn-oa-license-details p {
margin: 0 0 10px !important;
color: var(--jrtn-muted, #637083) !important;
font-size: 0.91rem !important;
line-height: 1.62 !important;
}
.jrtn-page .jrtn-oa-license-details p:last-child {
margin-bottom: 0 !important;
}
@media (max-width: 780px) {
.jrtn-page .jrtn-oa-statement-block {
grid-template-columns: 1fr !important;
gap: 14px !important;
}
.jrtn-page .jrtn-oa-pillars {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-oa-license-block {
grid-template-columns: 1fr !important;
gap: 18px !important;
}
.jrtn-page .jrtn-oa-license-badge-wrap {
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
}
.jrtn-page .jrtn-oa-license-badge-caption {
text-align: left !important;
}
}
/* ==========================================================================
SECTION 13 — FOR AUTHORS: BATCH 1 PAGES
Article Processing Charges, Submission Checklist, Reporting Guidelines
Page-specific components that extend shared patterns.
========================================================================== */
/* --------------------------------------------------------------------------
APC STATEMENT — zero-fee callout on the Article Processing Charges page
-------------------------------------------------------------------------- */
.jrtn-page .jrtn-apc-statement {
display: grid !important;
grid-template-columns: 56px minmax(0, 1fr) !important;
gap: 20px !important;
align-items: start !important;
padding: 24px !important;
background: var(--jrtn-accent-soft, #eef5fb) !important;
border: 1px solid #bfd1df !important;
border-left: 4px solid var(--jrtn-accent, #1e4b7a) !important;
border-radius: 8px !important;
}
.jrtn-page .jrtn-apc-statement-mark {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 48px !important;
height: 48px !important;
background: var(--jrtn-accent, #1e4b7a) !important;
color: #fff !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
border-radius: 50% !important;
flex-shrink: 0 !important;
line-height: 1 !important;
}
.jrtn-page .jrtn-apc-statement-body h4 {
display: block !important;
margin: 0 0 8px !important;
font-size: 1rem !important;
font-weight: 700 !important;
color: var(--jrtn-ink, #172033) !important;
}
.jrtn-page .jrtn-apc-statement-body p {
margin: 0 !important;
font-size: 0.94rem !important;
}
.jrtn-page .jrtn-apc-statement-body p + p {
margin-top: 8px !important;
}
@media (max-width: 480px) {
.jrtn-page .jrtn-apc-statement {
grid-template-columns: 1fr !important;
gap: 14px !important;
padding: 18px !important;
}
}
/* ==========================================================================
OJS MAIN CONTENT / RIGHT SIDEBAR GAP FIX
Keeps a deliberate 32px gutter between the main content column and sidebar
on ALL OJS pages (article detail, issue TOC, static pages, homepage, etc.)
The aggressive width:0 override in Section 35 remains scoped to .jrtn-page.
========================================================================== */
@media (min-width: 992px) {
.pkp_structure_content {
display: flex !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
column-gap: 32px !important;
}
.pkp_structure_main {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
margin: 0 !important;
float: none !important;
}
.pkp_structure_sidebar {
flex: 0 0 310px !important;
width: 310px !important;
max-width: 310px !important;
min-width: 0 !important;
margin: 0 !important;
padding-left: 0 !important;
float: none !important;
}
/* In preview.html the loader slot, not the inserted aside, is the flex item. */
.jrtn-preview-ojs-body #jrtn-preview-sidebar {
flex: 0 0 310px !important;
width: 310px !important;
max-width: 310px !important;
min-width: 0 !important;
margin: 0 !important;
}
.jrtn-preview-ojs-body
#jrtn-preview-sidebar
> .pkp_structure_sidebar {
width: 100% !important;
max-width: none !important;
margin: 0 !important;
}
}
@media (max-width: 991px) {
.pkp_structure_content {
display: block !important;
}
.pkp_structure_main,
.pkp_structure_sidebar,
.jrtn-preview-ojs-body #jrtn-preview-sidebar {
width: 100% !important;
max-width: none !important;
margin-right: 0 !important;
margin-left: 0 !important;
float: none !important;
}
.pkp_structure_sidebar,
.jrtn-preview-ojs-body #jrtn-preview-sidebar {
margin-top: 28px !important;
}
}
/* ==========================================================================
OJS EMBEDDED CONTENT WIDTH FIX
Removes duplicate horizontal padding from homepage Additional Content.
========================================================================== */
.page_index_journal .additional_content {
display: block !important;
width: 100% !important;
max-width: none !important;
margin-right: 0 !important;
margin-left: 0 !important;
padding-right: 0 !important;
padding-left: 0 !important;
}
.page_index_journal .additional_content > .jrtn-page {
width: 100% !important;
max-width: none !important;
margin-right: 0 !important;
margin-left: 0 !important;
}
/* ==========================================================================
ARTICLE DETAIL PAGE — 2-COLUMN LAYOUT FIX
OJS default uses fixed-width floats for the article detail 2-column:
.main_entry → float:left; width:352px (992px) / 560px (1200px)
.entry_details → float:left; width:300px
These fixed widths may not fit when .pkp_structure_main is sized by our
global flexbox. We convert .row to a flex container so both columns
adapt fluidly to any parent width.
========================================================================== */
@media (min-width: 768px) {
body.pkp_page_article .obj_article_details .row {
display: flex !important;
flex-wrap: nowrap !important;
align-items: stretch !important;
/* Reset OJS negative margins designed for float layout */
margin-left: 0 !important;
margin-right: 0 !important;
}
body.pkp_page_article .obj_article_details .main_entry {
flex: 1 1 auto !important;
width: auto !important;
min-width: 0 !important;
float: none !important;
}
body.pkp_page_article .obj_article_details .entry_details {
flex: 0 0 300px !important;
width: 300px !important;
min-width: 0 !important;
float: none !important;
/* Reset float-specific margin OJS sets */
margin-left: 0 !important;
margin-top: 0 !important;
border-top: none !important;
}
/* Reduce OJS default item padding (2.143rem ≈ 30px each side was too much
once we removed the compensating negative margins from .row) */
body.pkp_page_article .obj_article_details .item {
padding-top: 1.2rem !important;
padding-bottom: 1.2rem !important;
padding-left: 1.2rem !important;
padding-right: 1.2rem !important;
}
/* Remove outer-edge padding so content sits flush with column edges */
body.pkp_page_article .obj_article_details .main_entry .item {
padding-left: 0 !important;
}
body.pkp_page_article .obj_article_details .entry_details .item {
padding-right: 0 !important;
padding-left: 1.4rem !important; /* keep gap between the two columns */
}
}
/* ==========================================================================
34. MOBILE RESPONSIVENESS HARDENING — APPEND AT THE VERY END
Corrects late cascade overrides and improves narrow-screen layouts.
========================================================================== */
/* --------------------------------------------------------------------------
TABLET AND NARROW DESKTOP
-------------------------------------------------------------------------- */
@media (max-width: 780px) {
/* Prevent nested grid/flex children from forcing horizontal overflow. */
.jrtn-page,
.jrtn-page > *,
.jrtn-page section,
.jrtn-page article,
.jrtn-page aside,
.jrtn-page div {
min-width: 0 !important;
max-width: 100% !important;
}
.jrtn-page img,
.jrtn-page svg {
max-width: 100% !important;
height: auto !important;
}
.jrtn-page a,
.jrtn-page code,
.jrtn-page .jrtn-contact-detail-value,
.jrtn-page .jrtn-publisher-identity-value {
overflow-wrap: anywhere !important;
word-break: normal !important;
}
/* Keep wide data tables readable by scrolling instead of crushing columns. */
.jrtn-page [class*="table-wrap"] {
width: 100% !important;
max-width: 100% !important;
overflow-x: auto !important;
overflow-y: hidden !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior-inline: contain;
}
.jrtn-page .jrtn-types-table {
min-width: 680px !important;
}
/* Section 29 aliases are declared after earlier mobile rules.
Reassert the one-column CTA layout at the end of the stylesheet. */
.jrtn-page .jrtn-author-final-action,
.jrtn-page .jrtn-types-final-action {
grid-template-columns: 1fr !important;
gap: 16px !important;
}
.jrtn-page .jrtn-author-final-buttons,
.jrtn-page .jrtn-types-final-buttons {
justify-content: flex-start !important;
}
/* APC and policy-specific layouts. */
.jrtn-page .jrtn-apc-zero-inner,
.jrtn-page .jrtn-oa-license-block {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-apc-zero-inner {
gap: 16px !important;
}
.jrtn-page .jrtn-apc-zero-amount {
width: 100% !important;
min-width: 0 !important;
}
}
/* --------------------------------------------------------------------------
MOBILE
-------------------------------------------------------------------------- */
@media (max-width: 680px) {
/* Section 29's late aliases otherwise restore desktop title sizing. */
.jrtn-page .jrtn-page-hero-title,
.jrtn-page .jrtn-hero-title,
.jrtn-page .jrtn-about-title {
width: 100% !important;
max-width: 100% !important;
font-size: clamp(1.65rem, 7vw, 1.78rem) !important;
line-height: 1.18 !important;
overflow-wrap: break-word !important;
}
.jrtn-page .jrtn-page-lead,
.jrtn-page .jrtn-hero-lead,
.jrtn-page .jrtn-about-lead {
width: 100% !important;
max-width: 100% !important;
}
/* Slightly tighter cards without making the page feel cramped. */
.jrtn-page .jrtn-section,
.jrtn-page .jrtn-panel,
.jrtn-page .jrtn-notice,
.jrtn-page .jrtn-about-panel,
.jrtn-page .jrtn-contact-card,
.jrtn-page .jrtn-page-action,
.jrtn-page .jrtn-author-final-action,
.jrtn-page .jrtn-types-final-action {
padding: 17px !important;
}
/* APC stages remain compact but readable on ordinary mobile screens. */
.jrtn-page .jrtn-apc-zero-stages {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
.jrtn-page .jrtn-apc-zero-stage {
min-width: 0 !important;
padding: 11px 7px !important;
overflow-wrap: anywhere !important;
}
/* Avoid fixed two-column content surviving in newer policy pages. */
.jrtn-page .jrtn-archiving-grid,
.jrtn-page .jrtn-plagiarism-thresholds,
.jrtn-page .jrtn-oa-pillars {
grid-template-columns: 1fr !important;
}
}
/* --------------------------------------------------------------------------
SMALL MOBILE
-------------------------------------------------------------------------- */
@media (max-width: 480px) {
/* APC: the horizontal amount strip and two stage columns are too tight
inside OJS's mobile content padding. */
.jrtn-page .jrtn-apc-zero-amount {
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 2px !important;
padding: 15px 16px !important;
text-align: center !important;
}
.jrtn-page .jrtn-apc-zero-number {
font-size: 2.55rem !important;
}
.jrtn-page .jrtn-apc-zero-stages {
grid-template-columns: 1fr !important;
}
.jrtn-page .jrtn-apc-zero-stage {
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
padding: 11px 12px !important;
text-align: left !important;
}
.jrtn-page .jrtn-apc-statement,
.jrtn-page .jrtn-plagiarism-tool-block,
.jrtn-page .jrtn-oa-statement-block {
padding: 16px !important;
}
/* Open Access: undo the tablet row layout on very narrow screens. */
.jrtn-page .jrtn-oa-license-badge-wrap {
flex-direction: column !important;
align-items: flex-start !important;
justify-content: flex-start !important;
width: 100% !important;
}
.jrtn-page .jrtn-oa-license-badge {
max-width: 100% !important;
flex-wrap: wrap !important;
}
.jrtn-page .jrtn-oa-license-badge-caption {
width: 100% !important;
text-align: left !important;
}
/* Buttons and CTA panels become full-width touch targets. */
.jrtn-page .jrtn-author-final-buttons,
.jrtn-page .jrtn-types-final-buttons,
.jrtn-page .jrtn-page-action-buttons {
display: grid !important;
grid-template-columns: 1fr !important;
width: 100% !important;
}
.jrtn-page .jrtn-author-final-buttons .jrtn-button,
.jrtn-page .jrtn-types-final-buttons .jrtn-button,
.jrtn-page .jrtn-page-action-buttons .jrtn-button {
width: 100% !important;
justify-content: center !important;
text-align: center !important;
}
.jrtn-page .jrtn-type-word-limit {
width: 100% !important;
max-width: 170px !important;
}
.jrtn-page pre {
max-width: 100% !important;
overflow-x: auto !important;
white-space: pre-wrap !important;
overflow-wrap: anywhere !important;
}
}
/* --------------------------------------------------------------------------
VERY SMALL MOBILE
-------------------------------------------------------------------------- */
@media (max-width: 380px) {
/* The original 70px right reserve can leave too little room for metadata. */
.jrtn-page .jrtn-meta {
padding-right: 0 !important;
}
.jrtn-page .jrtn-section,
.jrtn-page .jrtn-panel,
.jrtn-page .jrtn-notice,
.jrtn-page .jrtn-about-panel,
.jrtn-page .jrtn-contact-card,
.jrtn-page .jrtn-page-action,
.jrtn-page .jrtn-author-final-action,
.jrtn-page .jrtn-types-final-action {
padding: 15px !important;
}
}
/* ==========================================================================
35. EMBEDDED JRTN PAGE WIDTH — PRODUCTION OJS DESKTOP FIX
Removes the remaining right-side dead space created by the OJS main-column
flex basis, main padding, and nested page/additional-content wrappers.
Scoped only to production pages that actually contain .jrtn-page.
========================================================================== */
@media (min-width: 992px) {
body:not(.jrtn-preview-ojs-body):has(.jrtn-page)
.pkp_structure_content {
display: flex !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
column-gap: 32px !important;
}
body:not(.jrtn-preview-ojs-body):has(.jrtn-page)
.pkp_structure_main {
flex: 1 1 0 !important;
width: 0 !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
padding-right: 0 !important;
float: none !important;
box-sizing: border-box !important;
}
body:not(.jrtn-preview-ojs-body):has(.jrtn-page)
.pkp_structure_sidebar {
flex: 0 0 310px !important;
width: 310px !important;
max-width: 310px !important;
min-width: 0 !important;
margin: 0 !important;
padding-left: 0 !important;
float: none !important;
box-sizing: border-box !important;
}
body:not(.jrtn-preview-ojs-body):has(.jrtn-page)
.pkp_structure_main > .page:has(.jrtn-page),
body:not(.jrtn-preview-ojs-body):has(.jrtn-page)
.pkp_structure_main .additional_content,
body:not(.jrtn-preview-ojs-body):has(.jrtn-page)
.pkp_structure_main .jrtn-page {
width: 100% !important;
max-width: none !important;
min-width: 0 !important;
margin-right: 0 !important;
margin-left: 0 !important;
box-sizing: border-box !important;
}
body:not(.jrtn-preview-ojs-body):has(.jrtn-page)
.pkp_structure_main > .page:has(.jrtn-page),
body:not(.jrtn-preview-ojs-body):has(.jrtn-page)
.pkp_structure_main .additional_content {
padding-right: 0 !important;
padding-left: 0 !important;
}
}
/* =========================================================
JRTN EDITORIAL DIRECTORY — FINAL
Two primary sections:
1. Editorial Team
2. Reviewers
========================================================= */
.jrtn-directory {
width: 100%;
margin: 0;
color: #172033;
font-family: Inter, Arial, Helvetica, sans-serif;
font-size: 15px;
line-height: 1.6;
text-align: left;
}
.jrtn-directory,
.jrtn-directory * {
box-sizing: border-box;
}
.jrtn-directory a {
color: inherit;
text-decoration: none;
}
.jrtn-directory-intro {
max-width: 860px;
margin: 0 0 34px !important;
padding: 0 !important;
color: #5b6473;
font-size: 14.5px;
line-height: 1.65;
}
/* =========================================================
PRIMARY SECTION
========================================================= */
.jrtn-directory-group {
margin: 0 !important;
padding: 0 !important;
}
.jrtn-directory-group + .jrtn-directory-group {
margin-top: 52px !important;
}
.jrtn-directory-heading {
display: grid;
grid-template-columns: 56px minmax(0, 1fr);
gap: 14px;
align-items: center;
margin: 0 !important;
padding: 15px 17px !important;
border: 1px solid #d7e0ec;
border-left: 5px solid #174a8b;
background: #f5f8fc;
}
.jrtn-directory-heading-icon {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
color: #174a8b;
border-right: 1px solid #cbd7e6;
}
.jrtn-directory-heading-icon svg {
display: block;
width: 25px;
height: 25px;
}
.jrtn-directory-heading-copy {
min-width: 0;
}
.jrtn-directory-title {
margin: 0 !important;
padding: 0 !important;
color: #153d73;
font-size: 20px;
font-weight: 800;
letter-spacing: -0.2px;
line-height: 1.3;
}
.jrtn-directory-description {
margin: 3px 0 0 !important;
padding: 0 !important;
color: #64748b;
font-size: 13px;
line-height: 1.5;
}
/* =========================================================
NUMBERED PERSON LIST
========================================================= */
.jrtn-directory-list {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
counter-reset: jrtn-directory-item;
}
.jrtn-directory-person {
display: grid;
grid-template-columns: 38px minmax(0, 1fr);
gap: 16px;
margin: 0 !important;
padding: 20px 0 !important;
border-bottom: 1px solid #e6ebf1;
counter-increment: jrtn-directory-item;
}
.jrtn-directory-person::before {
content: counter(jrtn-directory-item, decimal-leading-zero);
display: block;
padding-top: 1px;
color: #768397;
font-size: 12px;
font-weight: 750;
line-height: 1.5;
text-align: right;
font-variant-numeric: tabular-nums;
}
.jrtn-directory-person:last-child {
padding-bottom: 0 !important;
border-bottom: 0;
}
.jrtn-directory-person-body {
min-width: 0;
padding-left: 16px;
border-left: 1px solid #dfe6ef;
}
.jrtn-directory-role {
display: block;
margin: 0 0 3px !important;
padding: 0 !important;
color: #174a8b;
font-size: 11.5px;
font-weight: 800;
letter-spacing: 0.45px;
line-height: 1.4;
text-transform: uppercase;
}
.jrtn-directory-name {
margin: 0 !important;
padding: 0 !important;
color: #101828;
font-size: 16.5px;
font-weight: 700;
line-height: 1.38;
}
.jrtn-directory-affiliation {
max-width: 980px;
margin: 5px 0 0 !important;
padding: 0 !important;
color: #667085;
font-size: 13.5px;
line-height: 1.55;
}
/* =========================================================
ACADEMIC IDENTITIES
========================================================= */
.jrtn-directory-identities {
display: flex;
flex-wrap: wrap;
gap: 8px 15px;
margin: 12px 0 0 !important;
padding: 0 !important;
}
.jrtn-directory-identity {
display: inline-flex;
align-items: center;
min-height: 26px;
color: #344054;
font-size: 12.5px;
font-weight: 650;
line-height: 1.35;
}
.jrtn-directory-identity:hover,
.jrtn-directory-identity:focus {
color: #174a8b;
text-decoration: underline;
text-underline-offset: 3px;
outline: 0;
}
.jrtn-directory-identity:focus-visible {
border-radius: 3px;
box-shadow: 0 0 0 3px rgba(23, 74, 139, 0.14);
}
.jrtn-directory-icon-wrap {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
margin-right: 7px;
overflow: hidden;
flex: 0 0 24px;
}
.jrtn-directory-icon {
display: block;
max-width: 21px;
max-height: 21px;
object-fit: contain;
}
.jrtn-directory-icon-scopus {
width: 19px;
height: 19px;
}
.jrtn-directory-icon-sinta {
max-width: 24px;
max-height: 15px;
}
.jrtn-directory-identity-value {
overflow-wrap: anywhere;
}
/* =========================================================
MOBILE
========================================================= */
@media (max-width: 640px) {
.jrtn-directory-group + .jrtn-directory-group {
margin-top: 40px !important;
}
.jrtn-directory-heading {
grid-template-columns: 44px minmax(0, 1fr);
gap: 11px;
padding: 12px !important;
}
.jrtn-directory-heading-icon {
width: 36px;
height: 38px;
}
.jrtn-directory-heading-icon svg {
width: 22px;
height: 22px;
}
.jrtn-directory-title {
font-size: 18px;
}
.jrtn-directory-person {
grid-template-columns: 28px minmax(0, 1fr);
gap: 10px;
padding: 18px 0 !important;
}
.jrtn-directory-person-body {
padding-left: 12px;
}
.jrtn-directory-identities {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 8px;
}
}
/* =========================================================
PRINT
========================================================= */
@media print {
.jrtn-directory-person {
break-inside: avoid;
}
.jrtn-directory-heading {
background: #ffffff;
}
}
/* ==========================================================================
FIX 1: ARTICLE REFERENCE URL OVERFLOW
Forces long unbroken URLs in the references section to wrap instead of
overflowing the main column boundary. Targets the native OJS article
detail page (.obj_article_details).
========================================================================== */
.obj_article_details .item.references,
.obj_article_details .item.references .value,
.obj_article_details .item.references p {
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
.obj_article_details .item.references a {
overflow-wrap: anywhere !important;
word-break: break-all !important;
}
/* ==========================================================================
FIX 2: MOBILE — REORDER PDF DOWNLOAD ABOVE REFERENCES
On small screens the article page collapses to a single column.
By default the right-column galleys (PDF download) appear after all
left-column content (including references). This fix uses
display:contents to flatten .main_entry and .entry_details children
into the parent .row flex container, then uses CSS order to place
the galley/PDF download section right after the abstract.
DOM structure:
article.obj_article_details
h1.page_title (outside .row)
div.row
div.main_entry
section.item.authors
section.item.keywords
section.item.abstract
section.item.references
div.entry_details
div.item.cover_image
div.item.galleys ← want this after abstract on mobile
div.item.published
div.item.issue
div.item.copyright
div.item.citation
========================================================================== */
@media (max-width: 767px) {
.obj_article_details .row {
display: flex !important;
flex-direction: column !important;
}
.obj_article_details .row > .main_entry,
.obj_article_details .row > .entry_details {
display: contents !important;
}
/* --- Default ordering: left-column items first --- */
.obj_article_details .item.authors { order: 1 !important; }
.obj_article_details .item.keywords { order: 2 !important; }
.obj_article_details .item.abstract { order: 3 !important; }
/* --- Insert right-column galleys here (PDF download) --- */
.obj_article_details .item.cover_image { order: 4 !important; }
.obj_article_details .item.galleys { order: 5 !important; }
/* --- Then references and remaining left-column items --- */
.obj_article_details .item.references { order: 10 !important; }
/* --- Remaining right-column metadata below references --- */
.obj_article_details .item.published { order: 20 !important; }
.obj_article_details .item.issue { order: 21 !important; }
.obj_article_details .item.copyright { order: 22 !important; }
.obj_article_details .item.citation { order: 23 !important; }
/* Ensure each item spans full width */
.obj_article_details .row > .main_entry > *,
.obj_article_details .row > .entry_details > * {
width: 100% !important;
max-width: none !important;
}
/* Subtle separator above the promoted PDF section */
.obj_article_details .item.cover_image {
margin-top: 24px !important;
padding-top: 20px !important;
border-top: 1px solid #e5e7eb !important;
}
/* Separator below galleys before references resume */
.obj_article_details .item.galleys:last-of-type {
margin-bottom: 24px !important;
padding-bottom: 20px !important;
border-bottom: 1px solid #e5e7eb !important;
}
}
/* ==========================================================================
SECTION 3: HOMEPAGE — CURRENT ISSUE & ARTICLE LIST HARMONIZATION
Restores the current issue article list and galleys on the journal homepage,
harmonized with the detailed issue styling and the website design system.
Scoped to .pkp_page_index.
========================================================================== */
/* Current Issue Section Title & Subtitle on Homepage */
body.pkp_page_index .pkp_structure_main .current_issue > h2,
.pkp_page_index .page_index_journal .current_issue > h2 {
display: block !important;
margin: 2rem 0 0.5rem !important;
padding-bottom: 0.5rem !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
color: #172033 !important;
line-height: 1.35 !important;
border-bottom: 2px solid #e5e7eb !important;
}
body.pkp_page_index .pkp_structure_main .current_issue .current_issue_title,
.pkp_page_index .page_index_journal .current_issue .current_issue_title {
font-size: 1.1rem !important;
font-weight: 600 !important;
color: #1e4b7a !important;
margin: 0.75rem 0 1.25rem !important;
}
/* Restyle the "View All Issues" link into a clean archive button below article list */
body.pkp_page_index .pkp_structure_main .current_issue > a.read_more,
.pkp_page_index .page_index_journal .current_issue > a.read_more {
display: inline-block !important;
margin-top: 2rem !important;
margin-bottom: 1.5rem !important;
padding: 10px 22px !important; /* symmetric — › is now inline, no reserved right space */
background-color: #174a8b !important;
color: #ffffff !important;
font-size: 14px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
letter-spacing: 0.2px !important;
text-decoration: none !important;
border: 2px solid #174a8b !important;
border-radius: 6px !important;
white-space: nowrap !important;
box-sizing: border-box !important;
overflow: visible !important;
position: relative !important;
transition: all 0.2s ease !important;
}
/* Replace OJS FontAwesome absolute chevron with a plain inline text character.
Reset all FontAwesome & absolute-position properties so › sits inline. */
body.pkp_page_index .pkp_structure_main .current_issue > a.read_more::after,
.pkp_page_index .page_index_journal .current_issue > a.read_more::after {
content: " ›" !important; /* plain text, not FontAwesome \f054 */
display: inline !important; /* inline, not absolute */
position: static !important; /* cancel OJS absolute positioning */
font-family: inherit !important; /* cancel FontAwesome font */
font-size: inherit !important;
font-weight: 700 !important;
line-height: inherit !important;
color: #ffffff !important;
width: auto !important;
height: auto !important;
text-align: inherit !important;
transform: none !important;
margin-left: 4px !important;
top: auto !important;
right: auto !important;
-webkit-font-smoothing: inherit !important;
-moz-osx-font-smoothing: inherit !important;
}
body.pkp_page_index .pkp_structure_main .current_issue > a.read_more:hover,
body.pkp_page_index .pkp_structure_main .current_issue > a.read_more:focus,
.pkp_page_index .page_index_journal .current_issue > a.read_more:hover,
.pkp_page_index .page_index_journal .current_issue > a.read_more:focus {
background-color: #0f3571 !important;
border-color: #0f3571 !important;
color: #ffffff !important;
text-decoration: none !important;
}
body.pkp_page_index .pkp_structure_main .current_issue > a.read_more:focus-visible,
.pkp_page_index .page_index_journal .current_issue > a.read_more:focus-visible {
outline: 3px solid rgba(23, 74, 139, 0.4) !important;
outline-offset: 2px !important;
}
/* Ensure parent containers don't clip the button */
body.pkp_page_index .pkp_structure_main .current_issue,
.pkp_page_index .page_index_journal .current_issue,
body.pkp_page_index .pkp_structure_main .current_issue .obj_issue_toc,
.pkp_page_index .page_index_journal .current_issue .obj_issue_toc {
overflow: visible !important;
}
/* Fix spacing between .current_issue and the .additional_content block below */
body.pkp_page_index .pkp_structure_main .current_issue,
.pkp_page_index .page_index_journal .current_issue {
margin-bottom: 2.5rem !important;
}
/* ==========================================================================
OJS HEADER LOGO OVERFLOW FIX
The journal header logo has a hardcoded HTML attribute width="2294"
which causes horizontal overflow on mobile and narrow screens.
We constrain it with max-width and prevent the header wrapper from
overflowing the viewport.
========================================================================== */
/* Constrain the header logo image */
.pkp_site_name img,
.pkp_site_name a.is_img img,
.pkp_head_wrapper img {
max-width: 100% !important;
height: auto !important;
display: block !important;
}
/* Prevent the logo wrapper from overflowing — NOT the head wrapper
(overflow:hidden on pkp_head_wrapper clips the nav dropdown!) */
.pkp_site_name,
.pkp_site_name_wrapper {
overflow: hidden !important;
max-width: 100% !important;
}
/* Explicitly allow head wrapper to show dropdown nav */
.pkp_head_wrapper {
overflow: visible !important;
}
/* Prevent horizontal scroll at the body/page level */
.pkp_structure_page {
overflow-x: clip !important; /* clip doesn't affect position:absolute descendants */
max-width: 100vw !important;
}
/* ==========================================================================
OJS CONTENT AREA TOP SPACING REDUCTION
OJS default: .pkp_structure_content { padding-top: 2.143rem }
This creates ~30px gap between navbar and content on all pages.
Additionally, .pkp_block inside sidebar adds another 2.143rem padding,
making the sidebar appear ~60px from the navbar vs ~30px for main content.
We reduce the overall top padding and compensate inside the sidebar block.
========================================================================== */
@media (min-width: 992px) {
/* Reduce overall content area top gap */
.pkp_structure_content {
padding-top: 1rem !important;
}
/* Remove top padding from the first sidebar block so it sits flush */
.pkp_structure_sidebar .pkp_block:first-child {
padding-top: 0 !important;
margin-top: 0 !important;
}
/* Also remove top gap from the jrtn-sidebar container itself */
.pkp_structure_sidebar .pkp_block .content {
padding-top: 0 !important;
margin-top: 0 !important;
}
}
@media (max-width: 991px) {
/* On mobile, keep a small top gap */
.pkp_structure_content {
padding-top: 0.75rem !important;
}
}
/* ==========================================================================
HOMEPAGE UI IMPROVEMENTS
1. Navbar menu icons (FontAwesome, via ::before on each nav link)
2. Homepage image top spacing (breathing room between navbar and image)
3. Announcements section title (show OJS h2 that is hidden by default)
========================================================================== */
/* --------------------------------------------------------------------------
1. NAVBAR MENU ICONS
Target each nav item by its href. OJS already loads FontAwesome 4.x,
so we use FA4 unicode characters via ::before pseudo-element.
Current → \f02d book
Archives → \f187 archive
Announcements → \f0a1 bullhorn
For Authors → \f007 user (profile orang)
Submit → \f044 pencil (edit/write)
About → \f05a info-circle
-------------------------------------------------------------------------- */
.pkp_navigation_primary a::before {
display: inline-block;
margin-right: 6px;
font-family: FontAwesome, "Font Awesome 4", sans-serif;
font-size: 0.85em;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* TOP-LEVEL nav icons only (> li > a pattern — excludes dropdown submenu items) */
.pkp_navigation_primary > li > a[href*="/issue/current"]::before {
content: "\f02d"; /* book */
}
.pkp_navigation_primary > li > a[href*="/issue/archive"]::before {
content: "\f187"; /* archive */
}
.pkp_navigation_primary > li > a[href*="/announcement"]::before {
content: "\f0a1"; /* bullhorn */
}
.pkp_navigation_primary > li > a[href*="authors-gmenu" i]::before,
.pkp_navigation_primary > li > a[href*="gmenu" i]::before,
.pkp_navigation_primary > li.authors-gmenu > a::before,
.pkp_navigation_primary > li[class*="authors-gmenu"] > a::before,
.pkp_navigation_primary > li[class*="gmenu"] > a::before,
.pkp_navigation_primary > li > a[href*="author" i]::before,
.pkp_navigation_primary > li > a[href*="guideline" i]::before,
.pkp_navigation_primary > li > a[href*="penulis" i]::before,
.pkp_navigation_primary > li > a[href*="pedoman" i]::before,
.pkp_navigation_primary > li:has(ul a[href*="author" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="guideline" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="article-types" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="submission-checklist" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="reporting-guideline" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="apc" i]) > a::before,
#navigationPrimary a#pkpDropdown0::before,
.pkp_navigation_primary a#pkpDropdown0::before,
.pkp_navigation_primary > li:has(a#pkpDropdown0) > a::before,
.pkp_navigation_primary > li:has(ul[aria-labelledby="pkpDropdown0"]) > a::before {
content: "\f007"; /* user (profile orang) */
}
.pkp_navigation_primary > li > a[href*="/submission"]::before {
content: "\f044"; /* pencil/write */
}
.pkp_navigation_primary > li > a[href*="/about"]::before,
.pkp_navigation_primary > li > a[href*="about-journal"]::before,
.pkp_navigation_primary > li:has(ul a[href*="aim-focus" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="editor" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="reviewer" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="publisher" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="/privacy" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="/about" i]) > a::before,
#navigationPrimary a#pkpDropdown1::before,
.pkp_navigation_primary a#pkpDropdown1::before,
.pkp_navigation_primary > li:has(a#pkpDropdown1) > a::before,
.pkp_navigation_primary > li:has(ul[aria-labelledby="pkpDropdown1"]) > a::before {
content: "\f05a"; /* info-circle */
}
/* Suppress icons on ALL dropdown submenu items */
.pkp_navigation_primary li li a::before,
.pkp_navigation_primary li ul a::before {
content: none !important;
display: none !important;
}
/* --------------------------------------------------------------------------
2. HOMEPAGE IMAGE TOP SPACING
Add breathing room between the navbar/header and the homepage banner image.
-------------------------------------------------------------------------- */
.pkp_page_index .homepage_image,
.page_index_journal .homepage_image {
margin-top: 1.2rem !important;
border-radius: 6px !important; /* optional: subtle rounding */
overflow: hidden !important;
}
/* --------------------------------------------------------------------------
3. ANNOUNCEMENTS SECTION TITLE
- Add gap between homepage image and announcements section
- Align left indentation to match .current_issue h2 below it
- OJS generates Announcements
inside .cmp_announcements but
hides it aggressively — we restore and style it.
-------------------------------------------------------------------------- */
/* Section gap from homepage image + left alignment reset */
.pkp_page_index .cmp_announcements,
.page_index_journal .cmp_announcements {
margin-top: 1.5rem !important;
margin-left: 0 !important;
padding-left: 0 !important;
}
.pkp_page_index .cmp_announcements > h2,
.page_index_journal .cmp_announcements > h2 {
display: block !important;
margin: 0 0 1rem !important;
padding-bottom: 0.5rem !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
color: #172033 !important;
line-height: 1.35 !important;
border-bottom: 2px solid #e5e7eb !important;
}
/* ==========================================================================
ANNOUNCEMENTS SECTION — TITLE FIX
OJS aggressively hides .cmp_announcements h2 with multiple rules:
display:none, position:absolute, left:-2000px, clip:rect(1px,1px,1px,1px)
We must override ALL of them to show the title on the homepage.
========================================================================== */
.pkp_page_index .cmp_announcements > h2 {
display: block !important;
position: static !important;
left: auto !important;
right: auto !important;
clip: auto !important;
-webkit-clip-path: none !important;
clip-path: none !important;
height: auto !important;
width: auto !important;
overflow: visible !important;
margin: 0 0 1rem !important;
padding: 0 0 0.5rem !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
color: #172033 !important;
line-height: 1.35 !important;
border-bottom: 2px solid #e5e7eb !important;
}
/* ==========================================================================
NAVBAR ICONS — SUBMENU PARENT FIX (ABOUT & FOR AUTHORS)
OJS runs jQuery dropdown in main.js, which sets the parent href="#"
and adds id="pkpDropdown0" / id="pkpDropdown1" and .dropdown-menu to .
We explicitly override and lock the icons for both dropdowns so they
NEVER disappear after main.js executes.
========================================================================== */
/* Override for About nav item with submenu */
.pkp_navigation_primary li.has_submenu > a[href*="about" i]::before,
.pkp_navigation_primary li:has(> ul) > a[href*="about" i]::before,
.pkp_navigation_primary > li:has(ul a[href*="aim-focus" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="editor" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="reviewer" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="publisher" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="/privacy" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="/about" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="about-journal" i]) > a::before,
#navigationPrimary a#pkpDropdown1::before,
.pkp_navigation_primary a#pkpDropdown1::before,
.pkp_navigation_primary > li:has(a#pkpDropdown1) > a::before,
.pkp_navigation_primary > li:has(ul[aria-labelledby="pkpDropdown1"]) > a::before {
content: "\f05a" !important; /* info-circle */
display: inline-block !important;
margin-right: 6px !important;
font-family: FontAwesome, "Font Awesome 4", sans-serif !important;
font-size: 0.85em !important;
font-style: normal !important;
font-weight: normal !important;
line-height: 1 !important;
-webkit-font-smoothing: antialiased !important;
}
/* Override for For Author nav item with submenu (authors-gmenu group dropdown) */
.pkp_navigation_primary li.has_submenu > a[href*="authors-gmenu" i]::before,
.pkp_navigation_primary li.has_submenu > a[href*="gmenu" i]::before,
.pkp_navigation_primary li.has_submenu.authors-gmenu > a::before,
.pkp_navigation_primary li.has_submenu[class*="authors-gmenu"] > a::before,
.pkp_navigation_primary li.has_submenu[class*="gmenu"] > a::before,
.pkp_navigation_primary li.has_submenu > a[href*="author" i]::before,
.pkp_navigation_primary li.has_submenu > a[href*="guideline" i]::before,
.pkp_navigation_primary li.has_submenu > a[href*="penulis" i]::before,
.pkp_navigation_primary li.has_submenu > a[href*="pedoman" i]::before,
.pkp_navigation_primary li:has(> ul) > a[href*="authors-gmenu" i]::before,
.pkp_navigation_primary li:has(> ul) > a[href*="gmenu" i]::before,
.pkp_navigation_primary li:has(> ul).authors-gmenu > a::before,
.pkp_navigation_primary li:has(> ul)[class*="authors-gmenu"] > a::before,
.pkp_navigation_primary li:has(> ul)[class*="gmenu"] > a::before,
.pkp_navigation_primary li:has(> ul) > a[href*="author" i]::before,
.pkp_navigation_primary li:has(> ul) > a[href*="guideline" i]::before,
.pkp_navigation_primary li:has(> ul) > a[href*="penulis" i]::before,
.pkp_navigation_primary li:has(> ul) > a[href*="pedoman" i]::before,
.pkp_navigation_primary > li:has(ul a[href*="author" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="guideline" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="article-types" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="submission-checklist" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="reporting-guideline" i]) > a::before,
.pkp_navigation_primary > li:has(ul a[href*="apc" i]) > a::before,
#navigationPrimary a#pkpDropdown0::before,
.pkp_navigation_primary a#pkpDropdown0::before,
.pkp_navigation_primary > li:has(a#pkpDropdown0) > a::before,
.pkp_navigation_primary > li:has(ul[aria-labelledby="pkpDropdown0"]) > a::before {
content: "\f007" !important; /* user (profile orang) */
display: inline-block !important;
margin-right: 6px !important;
font-family: FontAwesome, "Font Awesome 4", sans-serif !important;
font-size: 0.85em !important;
font-style: normal !important;
font-weight: normal !important;
line-height: 1 !important;
-webkit-font-smoothing: antialiased !important;
}
/* ==========================================================================
SEARCH BUTTON — ICON SPACING FIX
OJS search toggle button renders the FA magnifier icon directly adjacent
to "Search" text without spacing. Fix with margin on the icon element.
========================================================================== */
/* If icon is a inside the button */
.pkp_search_toggle .fa,
.pkp_search_toggle .fas,
.pkp_search_desktop .fa,
.pkp_search_desktop .fas,
[class*="search_toggle"] .fa,
[class*="search_toggle"] .fas {
margin-right: 5px !important;
}
/* If search button uses ::before for the icon */
.pkp_search_toggle::before,
.pkp_search_desktop button::before,
.pkp_navigation_search button::before {
margin-right: 5px !important;
}
/* Ensure the toggle button itself can handle the spacing */
.pkp_search_toggle,
.pkp_search_desktop button[type="submit"],
.pkp_navigation_search button[type="submit"] {
letter-spacing: 0 !important;
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
}
/* ==========================================================================
ISSUE TABLE OF CONTENTS — UI OVERHAUL
1. Desktop section gap reduction (OJS default: margin:2.143rem, too large)
2. Section headers: bold + dark on desktop (OJS defaults to gray + normal weight)
3. "Full Issue" label → "Information" (CSS text replacement via ::before)
4. "Issue Information" button → plain text title + [PDF] button below
========================================================================== */
/* --------------------------------------------------------------------------
1 & 2. SECTION GAP REDUCTION + HEADER STYLING (desktop)
OJS at 768px+: sections have margin:2.143rem -1.43rem, padding:2.143rem
and h2 with position:relative, left:-15px, bg:#fff, gray color, normal weight.
We remove the complex float-over-line design and use clean bold headers.
-------------------------------------------------------------------------- */
@media (min-width: 768px) {
/* Consistent gap for both .galleys and each .section div */
.obj_issue_toc .galleys,
.obj_issue_toc .section {
margin-top: 2.5rem !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding: 0 !important;
}
/* OJS adds margin-top:4.286rem to the .sections CONTAINER via
.obj_issue_toc .sections:not(:first-child) — this causes the large
gap before Perspective. Reset it to 0 so spacing is controlled
only by the .section children above. */
.obj_issue_toc .sections {
margin-top: 0 !important;
}
/* First section inside .sections needs the same gap from galleys above */
.obj_issue_toc .sections .section:first-child {
margin-top: 2.5rem !important;
}
/* Remove OJS ::before horizontal line (replaced by border-bottom on h2) */
.obj_issue_toc .galleys::before,
.obj_issue_toc .section::before {
display: none !important;
content: none !important;
}
/* Section headers: bold + dark + border-bottom as separator */
.obj_issue_toc .galleys > h2,
.obj_issue_toc .galleys > h3,
.obj_issue_toc .section > h2,
.obj_issue_toc .section > h3 {
display: block !important;
position: static !important;
left: auto !important;
padding: 0 0 0.5rem !important;
background: transparent !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
line-height: 1.35 !important;
color: #172033 !important;
margin: 0 0 0.75rem !important;
border-bottom: 1.5px solid #d9e2ea !important;
}
}
@media (min-width: 992px) {
/* Remove OJS 992px negative side margin override */
.obj_issue_toc .galleys,
.obj_issue_toc .section {
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* --------------------------------------------------------------------------
3. "Full Issue" → "Information" (all viewports)
CSS text replacement: set font-size:0 on h2/h3 to hide "Full Issue",
then show "Information" via ::before with explicit font sizing.
-------------------------------------------------------------------------- */
.obj_issue_toc .galleys > h2,
.obj_issue_toc .galleys > h3 {
font-size: 0 !important;
line-height: 0 !important;
}
.obj_issue_toc .galleys > h2::before,
.obj_issue_toc .galleys > h3::before {
content: "Information" !important;
display: block !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
line-height: 1.35 !important;
color: #172033 !important;
}
/* --------------------------------------------------------------------------
4. "Issue Information" button → plain text title + [PDF] button below
Original: Issue Information
Result:
Issue Information ← blue title-style text link
[PDF] ← small bordered label below
-------------------------------------------------------------------------- */
/* - is flex container: title block on left, page numbers on right */
.obj_issue_toc .galleys .galleys_links {
display: block !important;
margin-top: 0.5rem !important;
}
.obj_issue_toc .galleys .galleys_links li {
display: flex !important;
flex-direction: row !important;
justify-content: space-between !important;
align-items: flex-start !important;
margin: 0 !important;
}
/* "i–iii" page numbers — right side of the row */
.obj_issue_toc .galleys .galleys_links li::after {
content: "i\2013iii" !important; /* i–iii */
font-size: 0.9rem !important;
color: #637083 !important;
white-space: nowrap !important;
padding-top: 3px !important;
flex-shrink: 0 !important;
margin-left: 1rem !important;
}
.obj_issue_toc .galleys .galleys_links li::before {
display: none !important;
content: none !important;
}
/* is a column flex container so we can order its children:
text "Issue Information" (order 0) → ::before volume label (order 1) → ::after PDF button (order 2) */
.obj_issue_toc .galleys .galleys_links .obj_galley_link {
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
flex: 1 1 auto !important;
/* Remove button appearance — title text styling */
background: transparent !important;
border: none !important;
border-radius: 0 !important;
padding: 0 !important;
min-height: 0 !important;
font-size: 1rem !important;
font-weight: 700 !important;
color: #1e4b7a !important;
text-decoration: none !important;
letter-spacing: normal !important;
text-transform: none !important;
}
/* Volume / Issue label — appears AFTER "Issue Information" title via order:1
⚠ UPDATE "Vol. 1 No. 1 (2026): September" when a new issue is published */
.obj_issue_toc .galleys .galleys_links .obj_galley_link::before {
content: "Vol. 1 No. 1 (2026): September" !important;
order: 1 !important;
display: block !important;
margin-top: 3px !important;
font-size: 0.85rem !important;
font-weight: 400 !important;
color: #637083 !important;
letter-spacing: normal !important;
text-transform: none !important;
}
/* PDF button — appears LAST via order:2
Styled to exactly match OJS article PDF button:
background:#fff; border:1px solid #006798; color:#006798 */
.obj_issue_toc .galleys .galleys_links .obj_galley_link.pdf::after {
content: "PDF" !important;
order: 2 !important;
display: inline-block !important;
align-self: flex-start !important;
margin-top: 8px !important;
/* OJS default .obj_galley_link exact values: */
padding: 0 1em !important;
background: #fff !important;
border: 1px solid #006798 !important;
border-radius: 3px !important;
font-size: .93rem !important;
line-height: calc(2.143rem - 2px) !important;
color: #006798 !important;
text-decoration: none !important;
font-weight: normal !important;
letter-spacing: normal !important;
text-transform: none !important;
}
.obj_issue_toc .galleys .galleys_links .obj_galley_link:hover {
color: #163a5d !important;
text-decoration: none !important;
background: transparent !important;
}
/* PDF button hover: matches OJS article PDF hover */
.obj_issue_toc .galleys .galleys_links .obj_galley_link.pdf:hover::after,
.obj_issue_toc .galleys .galleys_links .obj_galley_link.pdf:focus::after {
background: #006798 !important;
color: #fff !important;
}
/* ==========================================================================
ISSUE TOC SECTION HEADER — MOBILE SEPARATOR
On mobile, the OJS section h2/h3 doesn't have the desktop separator styling.
We add a border-bottom to match the desktop design consistently.
========================================================================== */
@media (max-width: 767px) {
.obj_issue_toc .section > h2,
.obj_issue_toc .section > h3,
.obj_issue_toc .galleys > h2,
.obj_issue_toc .galleys > h3 {
padding-bottom: 0.4rem !important;
border-bottom: 1.5px solid #d9e2ea !important;
margin-bottom: 0.6rem !important;
}
}
/* ==========================================================================
ARTICLE SUMMARY & CARD STYLING (TOC & HOMEPAGE UNIFICATION)
Standardizes typography, colors, divider lines, and button styling
across detailed issue (h3) and homepage index (h4).
========================================================================== */
/* Divider between articles within the same section */
.obj_issue_toc .cmp_article_list > li:not(:last-child) {
border-bottom: 1px solid #edf2f7 !important;
padding-bottom: 1.5rem !important;
margin-bottom: 1.5rem !important;
}
/* Article Title: consistent sizing and brand navy color */
.obj_article_summary > .title,
.obj_article_summary > h3.title,
.obj_article_summary > h4.title {
font-family: inherit !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
line-height: 1.38 !important;
margin: 0 0 0.35rem 0 !important;
}
.obj_article_summary > .title a,
.obj_article_summary > h3.title a,
.obj_article_summary > h4.title a {
color: #1e4b7a !important;
text-decoration: none !important;
transition: color 0.15s ease !important;
}
.obj_article_summary > .title a:hover,
.obj_article_summary > h3.title a:hover,
.obj_article_summary > h4.title a:hover {
color: #0f3571 !important;
text-decoration: underline !important;
}
/* Subtitle */
.obj_article_summary .subtitle {
display: block !important;
font-size: 0.92rem !important;
font-weight: 400 !important;
color: #4b5563 !important;
margin-top: 0.25rem !important;
margin-bottom: 0.4rem !important;
line-height: 1.4 !important;
}
/* Article Meta: Authors & Pages */
.obj_article_summary .meta {
position: relative !important;
padding-top: 0.25rem !important;
font-size: 0.88rem !important;
line-height: 1.4 !important;
}
.obj_article_summary .authors {
color: #4b5563 !important;
font-size: 0.88rem !important;
line-height: 1.4 !important;
}
.obj_article_summary .pages {
color: #637083 !important;
font-size: 0.88rem !important;
font-weight: 600 !important;
}
/* PDF Galley button: clean brand-aligned border button */
.obj_article_summary .galleys_links {
margin-top: 0.75rem !important;
display: inline-flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 8px !important;
}
.obj_article_summary .galleys_links .obj_galley_link.pdf {
display: inline-block !important;
padding: 0 1em !important;
background: #ffffff !important;
border: 1px solid #174a8b !important;
border-radius: 4px !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
line-height: calc(2.143rem - 2px) !important;
color: #174a8b !important;
text-decoration: none !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
transition: all 0.2s ease !important;
}
.obj_article_summary .galleys_links .obj_galley_link.pdf:hover {
background: #174a8b !important;
color: #ffffff !important;
border-color: #174a8b !important;
}
/* ==========================================================================
KEYWORD CLOUD PLUGIN — SIDEBAR INTEGRATION
The OJS Keyword Cloud plugin (block_keyword_cloud) renders as a SIBLING
pkp_block inside aside.pkp_structure_sidebar, BELOW our custom block.
We cannot move it inside the custom block div via CSS alone, but we can
style it to look exactly like a jrtn-sidebar-block section, making it
visually part of the same sidebar design system.
========================================================================== */
/* --------------------------------------------------------------------------
1. CARD CONTAINER — match jrtn-sidebar-block card style
-------------------------------------------------------------------------- */
.pkp_block.block_keyword_cloud {
/* Match the custom sidebar card appearance */
background: #ffffff !important;
border: 1px solid var(--jrtn-sidebar-line, #d9e2ea) !important;
border-radius: 7px !important;
padding: 0 !important; /* heading + content have their own padding */
margin-top: 16px !important; /* same gap as between jrtn-sidebar-block sections */
overflow: hidden !important;
}
/* --------------------------------------------------------------------------
2. HEADING — match jrtn-sidebar-heading style
The plugin renders
Keywords
.
We restyle it to match jrtn-sidebar-eyebrow + jrtn-sidebar-title pattern.
-------------------------------------------------------------------------- */
.block_keyword_cloud .title {
/* Remove default OJS block title styling */
display: block !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
/* Heading wrapper area — same as .jrtn-sidebar-heading */
background: #f8fafc !important;
border-bottom: 1px solid var(--jrtn-sidebar-line, #d9e2ea) !important;
padding: 10px 14px 10px !important;
}
/* Add eyebrow label "Keywords" via ::before */
.block_keyword_cloud .title::before {
content: "Research Topics" !important;
display: block !important;
font-size: 0.65rem !important;
font-weight: 700 !important;
letter-spacing: 0.09em !important;
text-transform: uppercase !important;
color: var(--jrtn-sidebar-muted, #637083) !important;
margin-bottom: 3px !important;
font-family: inherit !important;
}
/* Make the h2 text look like jrtn-sidebar-title */
.block_keyword_cloud .title {
font-size: 1rem !important;
font-weight: 700 !important;
color: var(--jrtn-sidebar-ink, #172033) !important;
line-height: 1.3 !important;
font-family: inherit !important;
}
/* --------------------------------------------------------------------------
3. WORD CLOUD SVG CONTAINER
-------------------------------------------------------------------------- */
.block_keyword_cloud .content {
padding: 10px 8px !important;
margin: 0 !important;
}
.block_keyword_cloud #wordcloud {
width: 100% !important;
overflow: hidden !important;
}
.block_keyword_cloud #wordcloud svg {
display: block !important;
width: 100% !important;
height: auto !important;
}
/* --------------------------------------------------------------------------
4. KEYWORD TEXT ELEMENTS
Override serif font, improve readability, match brand feel.
Colors come from the plugin (randomColor function) — we keep them colorful
but change font and improve hover state styling.
-------------------------------------------------------------------------- */
.block_keyword_cloud .keyword {
font-family: "Noto Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
sans-serif !important;
cursor: pointer !important;
opacity: 0.75 !important;
transition: opacity 0.2s ease !important;
}
/* Hover is handled by D3.js — CSS hover as fallback */
.block_keyword_cloud .keyword:hover {
opacity: 1 !important;
}
/* --------------------------------------------------------------------------
5. POSITIONING — ensure the keyword cloud block sits inside the sidebar
visual flow, matching the flex layout of our sidebar column
-------------------------------------------------------------------------- */
/* Sidebar already has flex: 0 0 310px from our global fix.
Make sure the keyword cloud block doesn't break out of the column. */
.pkp_structure_sidebar .block_keyword_cloud {
width: 100% !important;
box-sizing: border-box !important;
flex-shrink: 0 !important;
}
/* ==========================================================================
KEYWORD CLOUD — UPDATED INTEGRATION (v2)
Plugin block.tpl now renders into #jrtn-wordcloud inside our custom block.
Hide the default .block_keyword_cloud wrapper (kept for OJS hook only).
========================================================================== */
/* Hide the default OJS keyword cloud wrapper — it's aria-hidden and empty */
.pkp_block.block_keyword_cloud {
display: none !important;
}
/* Style the keyword cloud container inside our custom sidebar section */
.jrtn-wordcloud-container {
width: 100% !important;
padding: 4px 0 !important;
overflow: hidden !important;
}
.jrtn-wordcloud-container svg {
display: block !important;
width: 100% !important;
height: auto !important;
}
/* Keywords in the word cloud — font already set in block.tpl JS,
CSS override for opacity transition smoothness */
.jrtn-wordcloud-container .keyword {
transition: opacity 0.2s ease, font-size 0.2s ease !important;
}
/* ==========================================================================
REVIEWER NOTICE MODAL — CSS :target approach
Appears when URL contains #notice (linked from sidebar Review Form link).
No JavaScript required. Close button (href="#") removes hash → hides modal.
========================================================================== */
/* Hidden by default */
.jrtn-reviewer-notice {
display: none;
position: fixed;
inset: 0; /* top/right/bottom/left: 0 */
z-index: 9999;
background: rgba(23, 32, 51, 0.6);
backdrop-filter: blur(3px);
align-items: center;
justify-content: center;
padding: 1rem;
}
/* Show when URL hash matches #notice */
.jrtn-reviewer-notice:target {
display: flex;
}
/* Dialog card */
.jrtn-reviewer-notice-dialog {
position: relative;
background: #ffffff;
border-radius: 12px;
padding: 2.25rem 2rem 1.75rem;
max-width: 440px;
width: 100%;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
text-align: center;
animation: jrtn-notice-in 0.25s ease;
}
/* Close (X) button in top-right */
.jrtn-reviewer-notice-close {
position: absolute;
top: 12px;
right: 16px;
font-size: 1.5rem;
line-height: 1;
color: #94a3b8 !important;
text-decoration: none !important;
transition: color 0.15s ease;
}
.jrtn-reviewer-notice-close:hover {
color: #172033 !important;
}
@keyframes jrtn-notice-in {
from { opacity: 0; transform: scale(0.93) translateY(-12px); }
to { opacity: 1; transform: scale(1) translateY(0); }
}
.jrtn-reviewer-notice-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 60px !important;
height: 60px !important;
margin: 0 auto 1rem !important;
border-radius: 50% !important;
background: #eff6ff !important;
color: #1e4b7a !important;
}
.jrtn-reviewer-notice-icon svg {
display: block !important;
margin: auto !important;
}
.jrtn-reviewer-notice-icon::before {
display: none !important;
content: none !important;
}
.jrtn-reviewer-notice-title {
font-size: 1.25rem !important;
font-weight: 700 !important;
color: #172033 !important;
margin: 0 0 0.75rem !important;
line-height: 1.3 !important;
}
.jrtn-reviewer-notice-message {
font-size: 0.95rem;
color: #374151;
line-height: 1.6;
margin: 0 0 0.5rem;
}
.jrtn-reviewer-notice-sub {
font-size: 0.85rem;
color: #637083;
margin: 0 0 1.5rem;
}
.jrtn-reviewer-notice-sub a {
color: #1e4b7a;
text-decoration: underline;
}
/* Close / Understood button */
.jrtn-reviewer-notice-btn {
display: inline-block;
padding: 0.6rem 2rem;
background: #1e4b7a;
color: #ffffff !important;
border-radius: 6px;
font-size: 0.9rem;
font-weight: 600;
text-decoration: none;
transition: background 0.2s ease;
}
.jrtn-reviewer-notice-btn:hover,
.jrtn-reviewer-notice-btn:focus {
background: #163a5d;
text-decoration: none;
}
/* ==========================================================================
JRTN ARTICLE COUNTER / STATS BADGES (VIEWCOUNTER PLUGIN STYLING)
Supports 3 selectable modes configured directly in OJS Plugin Settings:
- Style 1: beside_pdf (Outlined box senada tombol PDF) [Default]
- Style 2: beside_title (Di sisi kanan sejajar judul manuskrip)
- Style 3: under_pdf (Teks metadata bersih tanpa box tebal)
========================================================================== */
/* Base common elements */
.viewcounter-stats {
font-family: inherit !important;
vertical-align: middle !important;
}
.viewcounter-icon {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.viewcounter-icon-img {
width: 17px !important;
height: 17px !important;
object-fit: contain !important;
vertical-align: middle !important;
display: inline-block !important;
flex-shrink: 0 !important;
transition: transform 0.2s ease !important;
}
/* ==========================================================================
STYLE 1: BESIDE PDF BUTTON (viewcounter-style--beside_pdf) [DEFAULT]
Clean outlined boxes matching OJS PDF button design (white bg, border, radius 3px)
========================================================================== */
.viewcounter-style--beside_pdf {
display: inline-flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
/* Sits on the same horizontal row beside PDF in summary list */
.obj_article_summary .viewcounter-style--beside_pdf.viewcounter-stats--in-galleys,
.obj_article_summary .viewcounter-style--beside_pdf {
display: inline-flex !important;
vertical-align: middle !important;
margin-left: 10px !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
/* Sits neatly in right column on article details */
.obj_article_details .item.galleys .viewcounter-style--beside_pdf.viewcounter-stats--in-galleys {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-top: 10px !important;
width: 100% !important;
}
.viewcounter-style--beside_pdf .viewcounter-badge {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
background: #ffffff !important;
border: 1px solid #006798 !important; /* Senada dengan tombol PDF OJS */
border-radius: 3px !important; /* Kotak ujung lengkung tipis */
color: #006798 !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
line-height: 1.4 !important;
padding: 4px 10px !important;
text-decoration: none !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
cursor: default !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) !important;
}
.viewcounter-style--beside_pdf .viewcounter-badge .viewcounter-label {
color: #006798 !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
transition: color 0.2s ease !important;
}
.viewcounter-style--beside_pdf .viewcounter-badge .viewcounter-count {
color: #006798 !important;
font-size: 0.82rem !important;
font-weight: 700 !important;
transition: color 0.2s ease !important;
}
/* Hover: fills with primary blue/navy, white text, gold count */
.viewcounter-style--beside_pdf .viewcounter-badge:hover {
background: #1e4b7a !important;
border-color: #1e4b7a !important;
color: #ffffff !important;
transform: translateY(-1px) !important;
box-shadow: 0 3px 6px rgba(30, 75, 122, 0.2) !important;
}
.viewcounter-style--beside_pdf .viewcounter-badge:hover .viewcounter-label {
color: #ffffff !important;
}
.viewcounter-style--beside_pdf .viewcounter-badge:hover .viewcounter-count {
color: #f8d96b !important; /* Gold on hover */
}
.viewcounter-style--beside_pdf .viewcounter-badge:hover .viewcounter-icon-img {
transform: scale(1.1) !important;
}
/* ==========================================================================
STYLE 2: BESIDE TITLE (viewcounter-style--beside_title)
Right-aligned at header level (balanced horizontal layout)
========================================================================== */
.viewcounter-style--beside_title {
display: inline-flex !important;
align-items: center !important;
gap: 8px !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
.viewcounter-title-host {
display: flex !important;
flex-wrap: wrap !important;
align-items: flex-start !important;
justify-content: space-between !important;
gap: 14px !important;
}
.viewcounter-title-host > .viewcounter-title-text,
.viewcounter-title-host > a {
flex: 1 1 65% !important;
min-width: 240px !important;
}
.viewcounter-title-host > .viewcounter-stats {
flex: 0 0 auto !important;
margin: 0 !important;
}
.viewcounter-style--beside_title .viewcounter-badge {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
background: #ffffff !important;
border: 1px solid #d9e2ea !important;
border-radius: 3px !important;
color: #1e4b7a !important;
font-size: 0.8rem !important;
font-weight: 500 !important;
padding: 3px 8px !important;
text-decoration: none !important;
transition: all 0.2s ease !important;
cursor: default !important;
}
.viewcounter-style--beside_title .viewcounter-badge:hover {
background: #1e4b7a !important;
border-color: #1e4b7a !important;
color: #ffffff !important;
}
.viewcounter-style--beside_title .viewcounter-badge:hover .viewcounter-label {
color: #ffffff !important;
}
.viewcounter-style--beside_title .viewcounter-badge:hover .viewcounter-count {
color: #f8d96b !important;
}
/* ==========================================================================
STYLE 3: UNDER PDF BUTTON (viewcounter-style--under_pdf)
Clean academic metadata text without heavy boxes
========================================================================== */
.viewcounter-style--under_pdf {
display: inline-flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 12px 16px !important;
margin-top: 8px !important;
margin-bottom: 6px !important;
padding: 2px 0 !important;
background: transparent !important;
border: none !important;
box-shadow: none !important;
clear: both !important;
}
.obj_article_details .item.galleys .viewcounter-style--under_pdf.viewcounter-stats--in-galleys {
display: flex !important;
margin-top: 10px !important;
padding-top: 8px !important;
border-top: 1px dashed #d9e2ea !important;
width: 100% !important;
}
.viewcounter-style--under_pdf .viewcounter-badge {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
background: transparent !important;
border: none !important;
color: #4b5563 !important; /* Neutral slate text */
font-size: 0.82rem !important;
font-weight: 500 !important;
padding: 2px 4px !important;
text-decoration: none !important;
cursor: default !important;
transition: all 0.15s ease !important;
}
.viewcounter-style--under_pdf .viewcounter-badge .viewcounter-label {
color: #4b5563 !important;
font-size: 0.82rem !important;
}
.viewcounter-style--under_pdf .viewcounter-badge .viewcounter-count {
color: #163a5d !important;
font-weight: 700 !important;
font-size: 0.82rem !important;
}
.viewcounter-style--under_pdf .viewcounter-badge:hover {
color: #1e4b7a !important;
}
.viewcounter-style--under_pdf .viewcounter-badge:hover .viewcounter-label,
.viewcounter-style--under_pdf .viewcounter-badge:hover .viewcounter-count {
color: #1e4b7a !important;
}
.viewcounter-style--under_pdf .viewcounter-badge:hover .viewcounter-icon-img {
transform: scale(1.1) !important;
}
/* ==========================================================================
CHEVRON ARROW BREADCRUMBS NAVIGATION (JRTN THEME)
Transforms default OJS text breadcrumbs (Home / Archives / Issue / Article)
into modern interactive ribbon chevrons matching academic journal standards.
========================================================================== */
.cmp_breadcrumbs {
display: block !important;
margin: 0 0 1.5rem !important;
padding: 0.25rem 0 0.5rem !important;
}
.cmp_breadcrumbs ol {
list-style: none !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
margin: 0 !important;
padding: 0 !important;
gap: 0 !important;
}
/* Individual chevron ribbon item */
.cmp_breadcrumbs ol li {
display: inline-flex !important;
align-items: stretch !important;
background: #eef2f6 !important;
color: #1e3a5f !important;
height: 38px !important;
margin: 0 5px 8px 0 !important;
padding: 0 !important;
position: relative !important;
user-select: none !important;
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%, 12px 50%);
transition: background-color 0.2s ease, color 0.2s ease !important;
}
/* Content link / span filling full clickable area */
.cmp_breadcrumbs ol li a,
.cmp_breadcrumbs ol li > span:not(.separator) {
display: inline-flex !important;
align-items: center !important;
height: 100% !important;
font-size: 0.84rem !important;
font-weight: 600 !important;
color: inherit !important;
text-decoration: none !important;
padding: 0 18px 0 24px !important;
white-space: nowrap !important;
max-width: 320px !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
transition: color 0.2s ease !important;
}
/* Hide OJS native slash separator */
.cmp_breadcrumbs ol li span.separator {
display: none !important;
}
/* First chevron: Flat left edge */
.cmp_breadcrumbs ol li:first-child {
border-top-left-radius: 4px !important;
border-bottom-left-radius: 4px !important;
clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%) !important;
}
.cmp_breadcrumbs ol li:first-child a,
.cmp_breadcrumbs ol li:first-child > span:not(.separator) {
padding-left: 16px !important;
}
/* Last chevron (Current Page): Flat right edge */
.cmp_breadcrumbs ol li:last-child {
border-top-right-radius: 4px !important;
border-bottom-right-radius: 4px !important;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 12px 50%) !important;
}
.cmp_breadcrumbs ol li:last-child a,
.cmp_breadcrumbs ol li:last-child > span:not(.separator) {
padding-right: 18px !important;
}
/* Single item edge case */
.cmp_breadcrumbs ol li:only-child {
border-radius: 4px !important;
clip-path: none !important;
padding: 0 !important;
}
.cmp_breadcrumbs ol li:only-child a,
.cmp_breadcrumbs ol li:only-child > span:not(.separator) {
padding: 0 16px !important;
}
/* Hover state on inactive links: JRTN Navy */
.cmp_breadcrumbs ol li:not(.current):hover {
background: #1e4b7a !important;
color: #ffffff !important;
cursor: pointer !important;
}
.cmp_breadcrumbs ol li:not(.current):hover a {
color: #ffffff !important;
}
/* Active / Current Page: Solid JRTN Navy with bold white text */
.cmp_breadcrumbs ol li.current {
background: #1e4b7a !important;
color: #ffffff !important;
font-weight: 700 !important;
cursor: default !important;
}
.cmp_breadcrumbs ol li.current > span {
color: #ffffff !important;
}
/* Mobile responsive adjustments */
@media (max-width: 640px) {
.cmp_breadcrumbs ol li {
height: 34px !important;
margin-right: 4px !important;
margin-bottom: 6px !important;
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%, 10px 50%);
}
.cmp_breadcrumbs ol li:first-child {
clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 50%, calc(100% - 10px) 100%, 0 100%) !important;
}
.cmp_breadcrumbs ol li:last-child {
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, 10px 50%) !important;
}
.cmp_breadcrumbs ol li a,
.cmp_breadcrumbs ol li > span:not(.separator) {
font-size: 0.78rem !important;
padding: 0 14px 0 18px !important;
max-width: 200px !important;
}
.cmp_breadcrumbs ol li:first-child a,
.cmp_breadcrumbs ol li:first-child > span:not(.separator) {
padding-left: 12px !important;
}
.cmp_breadcrumbs ol li:last-child a,
.cmp_breadcrumbs ol li:last-child > span:not(.separator) {
padding-right: 14px !important;
}
}
/* ==========================================================================
36. SIDEBAR DOCUMENT SHOWCASES (MOU & ESTABLISHMENT DECREE)
Editorial document showcase cards displaying Page 1 previews of institutional
MoUs and Publisher Establishment Decrees with A4 proportions, bottom fade vignette,
hover actions, and accessible direct links.
========================================================================== */
.jrtn-sidebar-block-mou .jrtn-sidebar-heading::before {
background: #0d9488 !important;
}
.jrtn-sidebar-block-decree .jrtn-sidebar-heading::before {
background: #0f2d59 !important;
}
.jrtn-sidebar-doc-intro {
display: block !important;
margin: 0 0 12px !important;
font-size: 0.77rem !important;
color: #64748b !important;
line-height: 1.45 !important;
}
.jrtn-sidebar-doc-card {
position: relative !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
text-decoration: none !important;
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 6px !important;
box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04) !important;
overflow: hidden !important;
transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease !important;
}
.jrtn-sidebar-doc-card:hover {
transform: translateY(-2px) !important;
border-color: #cbd5e1 !important;
box-shadow: 0 8px 20px rgba(15, 45, 92, 0.1) !important;
}
.jrtn-sidebar-doc-card:focus-visible {
outline: 2px solid #1e4b7a !important;
outline-offset: 2px !important;
}
/* Document sheet wrapper */
.jrtn-sidebar-doc-sheet {
position: relative !important;
display: block !important;
width: 100% !important;
background: #f1f5f9 !important;
}
/* Header badge bar floating above preview */
.jrtn-sidebar-doc-badge-wrap {
position: absolute !important;
top: 8px !important;
left: 8px !important;
right: 8px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
z-index: 5 !important;
pointer-events: none !important;
}
.jrtn-sidebar-doc-badge {
display: inline-flex !important;
align-items: center !important;
padding: 3px 8px !important;
font-size: 0.65rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
border-radius: 4px !important;
line-height: 1.2 !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08) !important;
}
.jrtn-sidebar-doc-badge--active {
background: #ecfdf5 !important;
color: #047857 !important;
border: 1px solid #a7f3d0 !important;
}
.jrtn-sidebar-doc-badge--decree {
background: #eff6ff !important;
color: #1e40af !important;
border: 1px solid #bfdbfe !important;
}
.jrtn-sidebar-doc-format {
display: inline-flex !important;
align-items: center !important;
padding: 2px 6px !important;
font-size: 0.62rem !important;
font-weight: 800 !important;
color: #ffffff !important;
background: #e11d48 !important;
border-radius: 3px !important;
text-transform: uppercase !important;
letter-spacing: 0.05em !important;
line-height: 1.2 !important;
box-shadow: 0 1px 3px rgba(225, 29, 72, 0.3) !important;
}
/* Document preview viewport with A4 feel */
.jrtn-sidebar-doc-viewport {
position: relative !important;
display: flex !important;
justify-content: center !important;
align-items: flex-start !important;
width: 100% !important;
height: 220px !important;
overflow: hidden !important;
background: #f8fafc !important;
}
.jrtn-sidebar-doc-thumb {
display: block !important;
width: 100% !important;
height: auto !important;
max-width: 100% !important;
object-fit: cover !important;
object-position: top center !important;
transform-origin: top center !important;
transition: transform 0.25s ease !important;
}
.jrtn-sidebar-doc-card:hover .jrtn-sidebar-doc-thumb {
transform: scale(1.025) !important;
}
/* Soft bottom fade-out vignette */
.jrtn-sidebar-doc-gradient {
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
height: 65px !important;
background: linear-gradient(
to bottom,
rgba(248, 250, 252, 0) 0%,
rgba(248, 250, 252, 0.6) 45%,
rgba(255, 255, 255, 0.98) 95%,
#ffffff 100%
) !important;
pointer-events: none !important;
z-index: 2 !important;
}
/* Hover action overlay with glassmorphism */
.jrtn-sidebar-doc-hover-overlay {
position: absolute !important;
inset: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: rgba(15, 45, 92, 0.42) !important;
backdrop-filter: blur(2px) !important;
-webkit-backdrop-filter: blur(2px) !important;
opacity: 0 !important;
transition: opacity 0.22s ease !important;
z-index: 4 !important;
}
.jrtn-sidebar-doc-card:hover .jrtn-sidebar-doc-hover-overlay {
opacity: 1 !important;
}
.jrtn-sidebar-doc-hover-pill {
display: inline-flex !important;
align-items: center !important;
gap: 7px !important;
padding: 8px 16px !important;
font-size: 0.74rem !important;
font-weight: 700 !important;
color: #0f2d59 !important;
background: #ffffff !important;
border-radius: 20px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
transform: translateY(5px) !important;
transition: transform 0.22s ease !important;
}
.jrtn-sidebar-doc-card:hover .jrtn-sidebar-doc-hover-pill {
transform: translateY(0) !important;
}
/* Document number bar */
.jrtn-sidebar-doc-meta {
position: relative !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 8px 12px !important;
background: #ffffff !important;
border-top: 1px solid #edf2f7 !important;
z-index: 3 !important;
transition: background-color 0.18s ease !important;
}
.jrtn-sidebar-doc-card:hover .jrtn-sidebar-doc-meta {
background: #f8fafc !important;
}
.jrtn-sidebar-doc-number {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 0.73rem !important;
font-weight: 600 !important;
color: #475569 !important;
line-height: 1.35 !important;
margin: 0 !important;
font-family: inherit !important;
letter-spacing: 0.015em !important;
text-align: center !important;
transition: color 0.18s ease !important;
}
.jrtn-sidebar-doc-card:hover .jrtn-sidebar-doc-number {
color: #1e4b7a !important;
}
@media (prefers-reduced-motion: reduce) {
.jrtn-sidebar-doc-card,
.jrtn-sidebar-doc-thumb,
.jrtn-sidebar-doc-hover-overlay,
.jrtn-sidebar-doc-hover-pill {
transition: none !important;
transform: none !important;
}
}