/* =========================================================
IJELS CUSTOM THEME CSS
OJS 3.5.x - responsive journal header
Header behavior : follows the uploaded image's natural ratio
Recommended image : 3125 x 625 px (OJS may display it as 1260 x 252 px)
Primary palette : blue-violet gradient sampled from IJELS artwork
========================================================= */
/* === GLOBAL VARIABLES === */
:root {
--ijels-primary: #2A2BA5;
--ijels-primary-dark: #212292;
--ijels-primary-light: #3737C1;
--ijels-sky: #6868E8;
--ijels-navy: #19195F;
--ijels-green: #3737C1;
--ijels-soft-bg: #F4F9FC;
--ijels-card-soft: #F6F7FE;
--ijels-border: #D9DBFF;
--ijels-text: #292A42;
--ijels-muted: #696A85;
--ijels-white: #ffffff;
--ijels-shadow: 0 6px 18px rgba(33, 34, 146, 0.09);
--ijels-shadow-hover: 0 10px 26px rgba(33, 34, 146, 0.15);
--ijels-radius: 14px;
}
/* === PAGE HEADER === */
.pkp_structure_head {
width: 100%;
height: auto !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
background: var(--ijels-white) !important;
border: 0 !important;
box-shadow: none !important;
}
.pkp_head_wrapper {
width: 100%;
max-width: none !important;
height: auto !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
/* === OJS 3.5 HEADER IMAGE / LOGO: NATURAL-RATIO FIT === */
.pkp_site_name_wrapper {
display: block !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
line-height: 0 !important;
background: var(--ijels-white) !important;
box-sizing: border-box;
}
.pkp_site_name {
display: block !important;
position: static !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
text-align: center;
}
.pkp_site_name > a,
.pkp_site_name .is_img {
display: block !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
.pkp_site_name .is_img img,
.pkp_site_name > a > img,
.pkp_site_name img {
display: block !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
max-height: none !important;
aspect-ratio: auto !important;
margin: 0 auto !important;
padding: 0 !important;
border: 0 !important;
object-fit: contain !important;
object-position: center center !important;
background: var(--ijels-white);
box-sizing: border-box;
}
/* Inspect-specific rule for OJS 3.5 output:
... ![]()
*/
body.has_site_logo .pkp_structure_head .pkp_head_wrapper,
body.has_site_logo .pkp_structure_head .pkp_site_name_wrapper,
body.has_site_logo .pkp_structure_head .pkp_site_name,
body.has_site_logo .pkp_structure_head .pkp_site_name > a.is_img {
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
body.has_site_logo .pkp_structure_head .pkp_site_name > a.is_img > img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 !important;
aspect-ratio: auto !important;
object-fit: contain !important;
object-position: center !important;
}
/* === PRIMARY NAVIGATION === */
.pkp_navigation_primary_row {
width: 100%;
margin: 0 !important;
padding: 0 24px !important;
box-sizing: border-box;
background: linear-gradient(
135deg,
var(--ijels-primary-dark),
var(--ijels-primary),
var(--ijels-primary-light)
) !important;
box-shadow: var(--ijels-shadow);
}
.pkp_navigation_primary_wrapper {
max-width: 1200px;
margin: 0 auto;
}
.pkp_navigation_primary > li > a {
color: var(--ijels-white) !important;
font-weight: 600;
letter-spacing: 0.2px;
border-radius: 8px;
transition: background-color 0.2s ease, color 0.2s ease;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li > a[aria-current="page"] {
color: var(--ijels-white) !important;
background: rgba(255, 255, 255, 0.16) !important;
}
.pkp_nav_list ul {
margin: 0 !important;
overflow: hidden;
background: var(--ijels-white) !important;
border: 1px solid var(--ijels-border) !important;
border-radius: 10px;
box-shadow: var(--ijels-shadow);
}
.pkp_nav_list ul a {
color: var(--ijels-navy) !important;
}
.pkp_nav_list ul a:hover,
.pkp_nav_list ul a:focus {
color: var(--ijels-white) !important;
background: var(--ijels-primary) !important;
}
/* === PAGE STRUCTURE === */
.pkp_structure_page {
margin-top: 0 !important;
background: var(--ijels-soft-bg);
}
.pkp_structure_content {
background: transparent !important;
}
/* === LINKS AND BUTTONS === */
a {
color: var(--ijels-primary-dark);
}
a:hover,
a:focus {
color: var(--ijels-primary);
}
.cmp_button,
.pkp_button,
button,
input[type="submit"] {
border-color: var(--ijels-primary) !important;
background: linear-gradient(
135deg,
var(--ijels-primary-dark),
var(--ijels-primary-light)
) !important;
color: var(--ijels-white) !important;
border-radius: 8px;
}
.cmp_button:hover,
.pkp_button:hover,
button:hover,
input[type="submit"]:hover {
border-color: var(--ijels-primary-dark) !important;
background: var(--ijels-primary-dark) !important;
}
/* === TABLE OF CONTENTS / ARTICLE CARDS === */
.obj_issue_toc .articles > li {
margin-bottom: 22px;
padding: 20px;
background: var(--ijels-white) !important;
border: 1px solid var(--ijels-border);
border-left: 5px solid var(--ijels-primary);
border-radius: var(--ijels-radius);
box-shadow: var(--ijels-shadow);
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.obj_issue_toc .articles > li:hover {
transform: translateY(-2px);
box-shadow: var(--ijels-shadow-hover);
}
.obj_issue_toc .articles > li .title a {
color: var(--ijels-navy) !important;
font-weight: 700;
text-decoration: none;
}
.obj_issue_toc .articles > li .title a:hover,
.obj_issue_toc .articles > li .title a:focus {
color: var(--ijels-primary) !important;
}
.obj_issue_toc .section h2,
.obj_issue_toc .section h3 {
color: var(--ijels-navy);
border-bottom-color: var(--ijels-primary-light);
}
/* === ARTICLE DETAILS PAGE === */
.obj_article_details .main_entry,
.obj_article_details .entry_details {
background: var(--ijels-white);
border: 1px solid var(--ijels-border);
border-radius: var(--ijels-radius);
box-shadow: var(--ijels-shadow);
}
.obj_article_details .main_entry {
padding: 20px;
}
.obj_article_details .entry_details {
padding: 18px;
}
.obj_article_details .page_title,
.obj_article_details h2,
.obj_article_details h3 {
color: var(--ijels-navy);
}
/* === TEXT FORMATTING === */
.description,
.abstract > p,
.obj_article_details .abstract p {
color: var(--ijels-text);
line-height: 1.75;
text-align: justify;
}
p {
line-height: 1.7;
}
/* === ANNOUNCEMENTS === */
.pkp_block.block_announcements,
.obj_announcement_summary,
.obj_announcement_full {
margin-bottom: 20px;
padding: 18px;
background: var(--ijels-white);
border: 1px solid var(--ijels-border);
border-left: 5px solid var(--ijels-green);
border-radius: 12px;
box-shadow: var(--ijels-shadow);
}
.obj_announcement_summary .title a,
.obj_announcement_full h1 {
color: var(--ijels-navy) !important;
font-size: 16px;
font-weight: 700;
text-decoration: none;
}
.obj_announcement_summary .title a:hover {
color: var(--ijels-primary) !important;
}
.obj_announcement_summary p,
.obj_announcement_full p {
color: var(--ijels-text);
line-height: 1.7;
text-align: justify;
}
.obj_announcement_summary .date {
color: var(--ijels-muted);
font-size: 13px;
}
/* === ISSUE CARDS === */
.obj_issue_summary {
margin-bottom: 20px;
padding: 20px;
background: var(--ijels-white);
border: 1px solid var(--ijels-border);
border-radius: var(--ijels-radius);
box-shadow: var(--ijels-shadow);
}
.obj_issue_summary .title,
.obj_issue_summary .title a {
color: var(--ijels-navy) !important;
font-weight: 700;
}
.obj_issue_summary .cover img {
border: 1px solid var(--ijels-border);
border-radius: 10px;
box-shadow: var(--ijels-shadow);
}
.obj_issue_summary .description {
color: var(--ijels-text);
text-align: justify;
}
/* === SIDEBAR BLOCKS === */
.pkp_block {
border-radius: 12px;
}
.pkp_block .title {
color: var(--ijels-navy);
}
.pkp_block .content {
color: var(--ijels-text);
}
/* === IJELS SUBMISSION BLOCK === */
.pkp_block.block_make_submission {
overflow: hidden;
padding: 0 !important;
background: var(--ijels-white) !important;
border: 1px solid var(--ijels-border);
border-radius: var(--ijels-radius);
box-shadow: var(--ijels-shadow);
}
.pkp_block.block_make_submission .title {
display: block;
margin: 0 !important;
padding: 18px 20px;
color: var(--ijels-white) !important;
background: linear-gradient(
135deg,
var(--ijels-primary-dark),
var(--ijels-primary-light)
) !important;
font-size: 20px;
font-weight: 700;
line-height: 1.2;
text-align: center;
text-transform: uppercase;
}
.pkp_block.block_make_submission .content {
padding: 20px 18px;
background: var(--ijels-white);
}
.pkp_block.block_make_submission .content a {
display: block;
padding: 14px 16px;
color: var(--ijels-primary-dark) !important;
background: var(--ijels-card-soft) !important;
border: 1px solid var(--ijels-border);
border-radius: 9px;
font-size: 16px;
font-weight: 700;
text-decoration: none;
transition: color 0.2s ease, background-color 0.2s ease,
border-color 0.2s ease;
}
.pkp_block.block_make_submission .content a:hover,
.pkp_block.block_make_submission .content a:focus {
color: var(--ijels-white) !important;
background: var(--ijels-primary) !important;
border-color: var(--ijels-primary) !important;
}
/* === GALLEY LINKS (PDF / HTML DOWNLOAD BUTTONS) ===
Fix: on hover, the generic "a:hover { color: var(--ijels-primary); }"
rule was overriding the white text on the blue PDF box, making the
label blend into the background. These rules force the label to stay
white on the blue background in all states (normal, hover, focus). */
.obj_galley_link,
.galleys_links .obj_galley_link,
.entry_details .galleys_links a,
.obj_article_details .galleys_links a,
a.obj_galley_link.pdf,
a.obj_galley_link.file,
a.obj_galley_link.remote {
display: inline-block;
padding: 6px 14px;
color: var(--ijels-white) !important;
background: linear-gradient(
135deg,
var(--ijels-primary-dark),
var(--ijels-primary-light)
) !important;
border: 1px solid var(--ijels-primary-dark);
border-radius: 8px;
font-weight: 700;
text-decoration: none !important;
}
.obj_galley_link:hover,
.obj_galley_link:focus,
.galleys_links .obj_galley_link:hover,
.galleys_links .obj_galley_link:focus,
.entry_details .galleys_links a:hover,
.entry_details .galleys_links a:focus,
.obj_article_details .galleys_links a:hover,
.obj_article_details .galleys_links a:focus,
a.obj_galley_link.pdf:hover,
a.obj_galley_link.pdf:focus,
a.obj_galley_link.file:hover,
a.obj_galley_link.file:focus,
a.obj_galley_link.remote:hover,
a.obj_galley_link.remote:focus {
color: var(--ijels-white) !important;
background: var(--ijels-primary-dark) !important;
border-color: var(--ijels-navy);
}
/* === TURNITIN SIMILARITY BADGE ===
Reusable box for custom links such as "Similarity by Turnitin"
shown in entry_details / sidebar. Attach class="ijels-turnitin-badge"
(or the alternate selectors below) to the tag in the HTML/plugin
where this label is placed. Same visual language as the PDF button,
with text forced white so it never disappears on hover. */
.ijels-turnitin-badge,
.entry_details a.turnitin,
.entry_details a[href*="turnitin" i],
.obj_article_details a.turnitin,
.obj_article_details a[href*="turnitin" i],
.pkp_block a.turnitin {
display: inline-block;
margin: 4px 0;
padding: 6px 14px;
color: var(--ijels-white) !important;
background: linear-gradient(
135deg,
var(--ijels-primary-dark),
var(--ijels-primary-light)
) !important;
border: 1px solid var(--ijels-primary-dark);
border-radius: 8px;
font-weight: 700;
text-decoration: none !important;
}
.ijels-turnitin-badge:hover,
.ijels-turnitin-badge:focus,
.entry_details a.turnitin:hover,
.entry_details a.turnitin:focus,
.entry_details a[href*="turnitin" i]:hover,
.entry_details a[href*="turnitin" i]:focus,
.obj_article_details a.turnitin:hover,
.obj_article_details a.turnitin:focus,
.obj_article_details a[href*="turnitin" i]:hover,
.obj_article_details a[href*="turnitin" i]:focus,
.pkp_block a.turnitin:hover,
.pkp_block a.turnitin:focus {
color: var(--ijels-white) !important;
background: var(--ijels-primary-dark) !important;
border-color: var(--ijels-navy);
}
/* === FACEBOOK IFRAME PLUGIN === */
._5pat {
background-color: var(--ijels-white) !important;
border-radius: 10px;
}
/* === COOKIE BANNER === */
.ce-banner {
position: fixed;
z-index: 9999;
top: 0;
right: 0;
left: 0;
padding: 14px 20px;
color: var(--ijels-white);
background: var(--ijels-navy);
box-shadow: var(--ijels-shadow);
font-family: Arial, sans-serif;
}
a.ce-accept:link,
a.ce-accept:visited {
color: var(--ijels-white);
text-decoration: none;
}
.ce-accept {
float: right;
margin: 6px 12px;
padding: 8px 14px;
color: var(--ijels-white) !important;
background: linear-gradient(
135deg,
var(--ijels-primary),
var(--ijels-primary-light)
);
border-radius: 8px;
font-style: normal;
font-weight: 600;
}
/* === REMOVE OJS FOOTER BRANDING === */
.pkp_brand_footer {
display: none;
}
/* === DESKTOP ARTICLE LAYOUT === */
@media (min-width: 751px) {
.obj_article_details .main_entry {
float: right;
width: 60%;
border-right: none;
}
.obj_article_details .entry_details {
float: left;
width: 30%;
margin-left: 30px;
border-top: none;
border-left: none;
}
}
@media (min-width: 992px) {
.obj_article_details .main_entry {
width: 60%;
}
.obj_article_details .entry_details {
width: 260px;
}
}
/* === TABLET AND MOBILE === */
@media (max-width: 768px) {
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name_wrapper,
.pkp_site_name {
width: 100% !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
}
.pkp_site_name .is_img img,
.pkp_site_name > a > img,
.pkp_site_name img {
width: 100% !important;
height: auto !important;
max-height: none !important;
aspect-ratio: auto !important;
object-fit: contain !important;
object-position: center !important;
}
.pkp_navigation_primary_row {
padding: 0 16px !important;
}
.obj_issue_toc .articles > li {
padding: 16px;
border-radius: 12px;
}
.obj_article_details .main_entry,
.obj_article_details .entry_details {
float: none;
width: 100%;
margin: 0 0 18px;
box-sizing: border-box;
}
}
/* === SMALL MOBILE: KEEP THE COMPLETE BANNER VISIBLE === */
@media (max-width: 480px) {
.pkp_site_name .is_img img,
.pkp_site_name > a > img,
.pkp_site_name img {
min-height: 0 !important;
object-fit: contain !important;
}
.pkp_navigation_primary_row {
padding: 0 12px !important;
}
}