/* JOIN Theme v1.1 — Header Logo Enhanced — OJS 3.3.x */
/* JOIN Theme v1.0 — OJS 3.3.x */
:root{
--join-blue:#0b5fa5;
--join-dark:#073b66;
--join-green:#59a844;
--join-orange:#f28b2b;
--join-light:#f7fafc;
--join-text:#233746;
--join-muted:#667785;
--join-border:#dbe6ed;
--join-white:#fff;
--join-shadow:0 8px 24px rgba(7,59,102,.10);
--join-radius:12px;
}
/* ==========================================================
JOIN HEADER v1.1 — Logo-enhanced header for OJS 3.3
Upload the JOIN logo through:
Settings > Website > Appearance > Setup > Journal Logo
========================================================== */
.pkp_structure_head{position:relative;background:radial-gradient(circle at 92% 15%,rgba(11,95,165,.08),transparent 28%),linear-gradient(135deg,#ffffff 0%,#f7fbfe 65%,#eef7fb 100%);border-bottom:5px solid var(--join-blue);box-shadow:0 5px 20px rgba(7,59,102,.10);overflow:visible}
.pkp_structure_head::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:5px;background:linear-gradient(90deg,var(--join-blue) 0 55%,var(--join-green) 55% 78%,var(--join-orange) 78% 100%)}
.pkp_head_wrapper{padding-top:14px;padding-bottom:14px}
.pkp_site_name{display:flex;align-items:center;justify-content:flex-start;min-height:112px;margin:0;padding:0}
.pkp_site_name .is_img{display:flex;align-items:center;width:100%;min-height:112px}
.pkp_site_name .is_img img{display:block;width:auto;max-width:min(100%,1050px);max-height:118px;object-fit:contain;object-position:left center;filter:drop-shadow(0 3px 5px rgba(7,59,102,.10))}
.pkp_site_name .is_text{display:flex;flex-direction:column;justify-content:center;color:var(--join-blue);font-size:38px;line-height:1.08;font-weight:800;letter-spacing:-.6px;min-height:105px;padding-left:128px;position:relative}
.pkp_site_name .is_text::before{content:"JOIN";position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:104px;height:104px;border:5px solid var(--join-blue);border-radius:50%;background:radial-gradient(circle at 50% 44%,rgba(11,95,165,.14) 0 20%,transparent 21%),conic-gradient(from 205deg,var(--join-green) 0 28%,var(--join-blue) 28% 67%,var(--join-orange) 67% 100%);color:#fff;font-size:20px;font-weight:900;text-shadow:0 1px 3px rgba(0,0,0,.15);box-shadow:0 5px 14px rgba(7,59,102,.16)}
.pkp_site_name .is_text:hover{color:var(--join-green)}
.pkp_navigation_primary_row{margin-top:0;background:linear-gradient(90deg,var(--join-dark),#0a4b80);border-radius:10px 10px 0 0;box-shadow:0 4px 10px rgba(7,59,102,.10)}
.pkp_navigation_primary>li>a{position:relative}
.pkp_navigation_primary>li>a::after{content:"";position:absolute;left:17px;right:17px;bottom:8px;height:3px;border-radius:999px;background:var(--join-orange);transform:scaleX(0);transform-origin:left;transition:transform .2s ease}
.pkp_navigation_primary>li>a:hover::after,.pkp_navigation_primary>li>a:focus::after,.pkp_navigation_primary>li.current>a::after{transform:scaleX(1)}
.pkp_navigation_user{top:18px}
.pkp_navigation_user>li>a,.pkp_search_desktop .search_prompt{color:var(--join-dark);font-weight:700}
@media(max-width:991px){.pkp_site_name{min-height:90px}.pkp_site_name .is_img{min-height:90px}.pkp_site_name .is_img img{max-height:94px;max-width:100%}.pkp_site_name .is_text{min-height:88px;padding-left:104px;font-size:30px}.pkp_site_name .is_text::before{width:82px;height:82px;border-width:4px;font-size:17px}}
@media(max-width:767px){.pkp_head_wrapper{padding-top:8px;padding-bottom:8px}.pkp_site_name{min-height:70px}.pkp_site_name .is_img{min-height:70px}.pkp_site_name .is_img img{max-height:72px;max-width:100%}.pkp_site_name .is_text{min-height:68px;padding-left:78px;font-size:22px;letter-spacing:-.2px}.pkp_site_name .is_text::before{width:62px;height:62px;border-width:3px;font-size:14px}.pkp_navigation_primary_row{border-radius:0}}
html{scroll-behavior:smooth}
body{background:var(--join-light);color:var(--join-text);font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.7}
a{color:var(--join-blue);text-decoration:none;transition:.2s}
a:hover,a:focus{color:var(--join-green);text-decoration:none}
img{max-width:100%;height:auto}
.pkp_structure_page{background:var(--join-white);box-shadow:0 0 30px rgba(25,50,70,.08)}
.pkp_structure_content{padding-top:28px;padding-bottom:40px}
.pkp_navigation_primary_row{background:var(--join-dark);border-radius:8px 8px 0 0}
.pkp_navigation_primary>li>a{color:#fff;font-weight:700;padding:15px 17px;border-bottom:3px solid transparent}
.pkp_navigation_primary>li>a:hover,.pkp_navigation_primary>li>a:focus{background:var(--join-green);color:#fff;border-bottom-color:var(--join-orange)}
.pkp_navigation_primary>li.current>a{background:var(--join-blue);color:#fff;border-bottom-color:var(--join-orange)}
.pkp_navigation_primary ul{background:#fff;border:1px solid var(--join-border);border-radius:0 0 8px 8px;box-shadow:var(--join-shadow)}
.pkp_navigation_primary ul a{color:var(--join-text)}
.pkp_navigation_primary ul a:hover{background:var(--join-blue);color:#fff}
.pkp_navigation_user>li>a,.pkp_search_desktop .search_prompt{color:var(--join-dark);font-weight:600}
.pkp_page_index .homepage_image{margin:0 0 28px}
.pkp_page_index .homepage_image img{display:block;width:100%;border-radius:var(--join-radius);box-shadow:var(--join-shadow)}
.pkp_page_index .additional_content{margin:24px 0 30px;padding:24px 26px;background:linear-gradient(135deg,#eaf4fb,#fff);border-left:5px solid var(--join-green);border-radius:var(--join-radius);box-shadow:var(--join-shadow)}
.page_title,.current_issue_title,.obj_issue_toc .heading,.pkp_page_index .current_issue>h2,.pkp_page_index .cmp_announcements>h2{color:var(--join-dark);font-weight:800}
.page_title:after,.current_issue_title:after,.obj_issue_toc .heading:after{content:"";display:block;width:62px;height:4px;margin-top:10px;background:linear-gradient(90deg,var(--join-blue),var(--join-green),var(--join-orange));border-radius:999px}
.cmp_button,.pkp_button,button,input[type=button],input[type=submit],a.cmp_button{background:var(--join-blue);color:#fff!important;border:0;border-radius:7px;padding:11px 18px;font-weight:700;box-shadow:0 4px 12px rgba(11,95,165,.18)}
.cmp_button:hover,.pkp_button:hover,button:hover,input[type=button]:hover,input[type=submit]:hover,a.cmp_button:hover{background:var(--join-green);color:#fff!important;transform:translateY(-1px)}
.block_make_submission{border:0!important;background:transparent!important;padding:0!important}
.block_make_submission a{display:block;background:linear-gradient(135deg,var(--join-orange),#cf6f13);color:#fff!important;padding:15px 18px;text-align:center;border-radius:7px;font-weight:800;box-shadow:0 7px 18px rgba(242,139,43,.26)}
.block_make_submission a:hover{background:linear-gradient(135deg,var(--join-green),#3f8d31)}
.pkp_structure_sidebar .pkp_block{background:#fff;border:1px solid var(--join-border);border-left:5px solid var(--join-blue);border-radius:var(--join-radius);padding:18px;margin-bottom:22px;box-shadow:0 5px 18px rgba(7,59,102,.08)}
.pkp_structure_sidebar .pkp_block:nth-child(3n+2){border-left-color:var(--join-green)}
.pkp_structure_sidebar .pkp_block:nth-child(3n+3){border-left-color:var(--join-orange)}
.pkp_structure_sidebar .pkp_block .title{color:var(--join-dark);font-weight:800;font-size:18px;border-bottom:1px solid var(--join-border);padding-bottom:10px;margin-bottom:12px}
.pkp_page_index .current_issue{background:#fff;border:1px solid var(--join-border);border-radius:var(--join-radius);padding:24px;margin-bottom:28px;box-shadow:var(--join-shadow)}
.obj_issue_toc .cover img,.current_issue .cover img{border-radius:8px;box-shadow:0 7px 18px rgba(7,59,102,.15)}
.obj_article_summary{background:#fff;border:1px solid var(--join-border);border-radius:10px;padding:20px;margin-bottom:16px;box-shadow:0 4px 15px rgba(7,59,102,.06);transition:.2s}
.obj_article_summary:hover{transform:translateY(-2px);box-shadow:var(--join-shadow)}
.obj_article_summary .title a{color:var(--join-dark);font-weight:800;line-height:1.4}
.obj_article_summary .title a:hover{color:var(--join-green)}
.obj_article_summary .authors,.obj_article_summary .pages,.obj_article_summary .published{color:var(--join-muted)}
.obj_article_details .abstract,.obj_article_details .item{background:#fff;border:1px solid var(--join-border);border-radius:var(--join-radius);padding:22px;margin-top:18px}
.obj_article_details .entry_details{background:#eaf4fb;border-radius:var(--join-radius);padding:18px}
.obj_article_details .galley_link{background:var(--join-blue);color:#fff!important;border-radius:6px;font-weight:700}
.obj_article_details .galley_link:hover{background:var(--join-green)}
.cmp_announcements .obj_announcement_summary{background:#fff;border:1px solid var(--join-border);border-left:5px solid var(--join-orange);border-radius:10px;padding:18px;margin-bottom:16px}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=search],select,textarea{border:1px solid #cbd9e2;border-radius:6px;padding:10px 12px;background:#fff;color:var(--join-text)}
input:focus,select:focus,textarea:focus{border-color:var(--join-blue);box-shadow:0 0 0 3px rgba(11,95,165,.12);outline:none}
table{width:100%;border-collapse:collapse;background:#fff}
table th{background:var(--join-dark);color:#fff;font-weight:700}
table th,table td{padding:11px 12px;border:1px solid var(--join-border)}
table tr:nth-child(even) td{background:#f9fbfc}
.pkp_structure_footer_wrapper{background:var(--join-dark);border-top:5px solid var(--join-green);color:#fff}
.pkp_structure_footer{color:#fff;padding-top:28px;padding-bottom:28px}
.pkp_structure_footer a{color:#d9efff}
.pkp_structure_footer a:hover{color:#c8efba}
.pkp_brand_footer img{max-width:130px;opacity:.92}
.join-card{background:#fff;border:1px solid var(--join-border);border-radius:var(--join-radius);padding:22px;margin:18px 0;box-shadow:0 5px 18px rgba(7,59,102,.07)}
.join-highlight{background:linear-gradient(135deg,#eaf4fb,#eef8ea);border-left:5px solid var(--join-green);border-radius:var(--join-radius);padding:20px 22px;margin:20px 0}
.join-cta{display:inline-block;background:var(--join-orange);color:#fff!important;border-radius:7px;padding:12px 18px;font-weight:800}
.join-cta:hover{background:var(--join-green)}
.join-badge{display:inline-block;padding:5px 10px;border-radius:999px;background:#eaf4fb;color:var(--join-dark);font-size:13px;font-weight:700;margin:3px 4px 3px 0}
a:focus,button:focus,input:focus,select:focus,textarea:focus{outline:3px solid rgba(242,139,43,.45);outline-offset:2px}
@media(max-width:991px){.pkp_navigation_primary_row{border-radius:0}.pkp_structure_content{padding-top:20px}}
@media(max-width:767px){body{font-size:15px}.pkp_page_index .additional_content,.pkp_page_index .current_issue,.obj_article_summary,.obj_article_details .abstract,.obj_article_details .item{padding:17px}.pkp_structure_sidebar .pkp_block{padding:15px}.page_title,.current_issue_title{font-size:26px}}
@media print{.pkp_structure_head,.pkp_structure_sidebar,.pkp_structure_footer_wrapper,.block_make_submission{display:none!important}body,.pkp_structure_page,.pkp_structure_content{background:#fff!important;box-shadow:none!important}a{color:#000!important}}
/* ==========================================================
JOIN THEME v1.2 — MOBILE HEADER FIX
Fixes logo clipping/overlap on narrow screens in OJS 3.3
========================================================== */
@media (max-width: 767px) {
/* Let the header grow naturally and prevent clipping */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name,
.pkp_site_name .is_img {
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
.pkp_structure_head {
padding: 0 !important;
border-bottom: 0 !important;
}
.pkp_structure_head::after {
bottom: 0 !important;
height: 4px !important;
}
.pkp_head_wrapper {
padding: 10px 16px 12px !important;
}
/* Keep the full JOIN logo inside the visible header */
.pkp_site_name {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
line-height: 1 !important;
}
.pkp_site_name .is_img {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.pkp_site_name .is_img img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 78vw !important;
max-height: 64px !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
object-position: left center !important;
transform: none !important;
filter: none !important;
}
/* Text-title fallback */
.pkp_site_name .is_text {
display: block !important;
min-height: 0 !important;
padding: 0 !important;
font-size: 20px !important;
line-height: 1.2 !important;
}
.pkp_site_name .is_text::before {
display: none !important;
}
/* Keep user controls from covering the logo */
.pkp_navigation_user {
position: static !important;
display: flex !important;
justify-content: flex-end !important;
flex-wrap: wrap !important;
width: 100% !important;
margin: 6px 0 0 !important;
padding: 0 !important;
}
.pkp_navigation_user > li > a {
padding: 6px 8px !important;
font-size: 13px !important;
}
/* Mobile primary navigation should not overlap the header */
.pkp_navigation_primary_row {
position: relative !important;
clear: both !important;
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
}
.pkp_navigation_primary {
width: 100% !important;
}
/* Give content appropriate breathing room */
.pkp_structure_content {
padding-top: 18px !important;
}
.pkp_structure_main {
min-width: 0 !important;
width: 100% !important;
}
.pkp_structure_sidebar {
min-width: 0 !important;
width: 100% !important;
margin-top: 24px !important;
}
/* Prevent long text and links from overflowing */
.pkp_structure_main,
.pkp_structure_sidebar,
.pkp_block,
.obj_article_summary,
.page_about {
overflow-wrap: anywhere !important;
word-break: normal !important;
}
}
/* Extra-small phones */
@media (max-width: 420px) {
.pkp_head_wrapper {
padding-left: 12px !important;
padding-right: 12px !important;
}
.pkp_site_name .is_img img {
max-width: 74vw !important;
max-height: 56px !important;
}
.pkp_structure_main {
padding-left: 18px !important;
padding-right: 18px !important;
}
.pkp_structure_sidebar {
padding-left: 18px !important;
padding-right: 18px !important;
}
}
/* ==========================================================
JOIN THEME v1.3 — WIDE HEADER IMAGE FIX
Use JOIN_Header_Logo_v1.3.jpg as the Journal Logo in:
Settings > Website > Appearance > Setup > Journal Logo
Compatible with OJS 3.3.0-22
========================================================== */
/* Reset prior header constraints */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name,
.pkp_site_name .is_img {
height: auto !important;
min-height: 0 !important;
overflow: visible !important;
}
.pkp_structure_head {
position: relative !important;
background: #ffffff !important;
border-bottom: 0 !important;
box-shadow: 0 4px 18px rgba(7,59,102,.10) !important;
}
.pkp_structure_head::after {
content: "" !important;
position: absolute !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
height: 5px !important;
background: linear-gradient(
90deg,
var(--join-blue) 0 55%,
var(--join-green) 55% 78%,
var(--join-orange) 78% 100%
) !important;
z-index: 4 !important;
}
.pkp_head_wrapper {
padding: 0 !important;
max-width: none !important;
}
/* Full-width journal logo container */
.pkp_site_name {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
.pkp_site_name .is_img {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
/* The uploaded banner itself */
.pkp_site_name .is_img img {
display: block !important;
width: 100% !important;
max-width: 1280px !important;
height: auto !important;
max-height: none !important;
margin: 0 auto !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
filter: none !important;
}
/* Hide text fallback when an image logo is used */
.pkp_site_name .is_text {
display: none !important;
}
/* Keep the user navigation from covering the banner */
.pkp_navigation_user {
position: absolute !important;
top: 12px !important;
right: 20px !important;
z-index: 10 !important;
}
.pkp_navigation_user > li > a,
.pkp_search_desktop .search_prompt {
color: var(--join-dark) !important;
font-weight: 700 !important;
}
/* Main navigation */
.pkp_navigation_primary_row {
position: relative !important;
z-index: 5 !important;
margin: 0 !important;
background: linear-gradient(90deg,var(--join-dark),#0a4b80) !important;
border-radius: 0 !important;
box-shadow: none !important;
}
/* Tablet */
@media (max-width: 991px) {
.pkp_site_name .is_img img {
width: 100% !important;
max-width: 100% !important;
}
.pkp_navigation_user {
top: 8px !important;
right: 12px !important;
}
}
/* Mobile */
@media (max-width: 767px) {
.pkp_structure_head {
padding: 0 !important;
}
.pkp_head_wrapper {
padding: 0 !important;
}
.pkp_site_name {
width: 100% !important;
padding: 0 !important;
}
.pkp_site_name .is_img {
width: 100% !important;
justify-content: center !important;
}
.pkp_site_name .is_img img {
width: 100% !important;
max-width: 100% !important;
max-height: none !important;
margin: 0 !important;
object-fit: contain !important;
}
/* Place account controls below the header image */
.pkp_navigation_user {
position: static !important;
display: flex !important;
justify-content: flex-end !important;
flex-wrap: wrap !important;
width: 100% !important;
margin: 0 !important;
padding: 5px 12px !important;
background: #ffffff !important;
}
.pkp_navigation_user > li > a {
padding: 5px 7px !important;
font-size: 13px !important;
}
.pkp_navigation_primary_row {
clear: both !important;
width: 100% !important;
margin: 0 !important;
border-radius: 0 !important;
}
.pkp_structure_content {
padding-top: 18px !important;
}
}
/* Extra-small phones */
@media (max-width: 420px) {
.pkp_site_name .is_img img {
width: 100% !important;
max-width: 100% !important;
}
.pkp_navigation_user {
padding-left: 8px !important;
padding-right: 8px !important;
}
}
/* ==========================================================
JOIN THEME v1.4 — DEFINITIVE MOBILE HEADER FIX
Fixes:
- Header banner shifted to the right
- Colored line crossing through the banner
- Banner overflowing into page content
- OJS default absolute positioning on small screens
========================================================== */
@media (max-width: 767px) {
/* Fully reset OJS header positioning */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_name,
.pkp_site_name .is_img,
.pkp_site_name a {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
float: none !important;
clear: both !important;
width: 100% !important;
max-width: none !important;
height: auto !important;
min-height: 0 !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* The header should end exactly after the banner */
.pkp_structure_head {
display: block !important;
background: #ffffff !important;
border: 0 !important;
box-shadow: 0 3px 12px rgba(7,59,102,.10) !important;
}
/* Disable the earlier pseudo-element that crossed the image */
.pkp_structure_head::after {
display: none !important;
content: none !important;
}
/* Remove OJS desktop wrapper width and offsets */
.pkp_head_wrapper {
display: block !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
}
/* Full-width responsive banner container */
.pkp_site_name {
display: block !important;
line-height: 0 !important;
background: #ffffff !important;
}
.pkp_site_name .is_img,
.pkp_site_name .is_img a {
display: block !important;
line-height: 0 !important;
}
/* Scale entire banner proportionally — never crop it */
.pkp_site_name .is_img img {
position: static !important;
display: block !important;
width: 100vw !important;
max-width: 100vw !important;
height: auto !important;
max-height: none !important;
aspect-ratio: auto !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
filter: none !important;
vertical-align: top !important;
}
/* Hide text title when image logo is active */
.pkp_site_name .is_text {
display: none !important;
}
/* Put the brand stripe after the complete banner */
.pkp_site_name::after {
content: "" !important;
display: block !important;
position: static !important;
width: 100% !important;
height: 4px !important;
margin: 0 !important;
background: linear-gradient(
90deg,
var(--join-blue) 0 55%,
var(--join-green) 55% 78%,
var(--join-orange) 78% 100%
) !important;
}
/* Account controls must not overlay the banner */
.pkp_navigation_user {
position: static !important;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
flex-wrap: wrap !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 5px 12px !important;
background: #ffffff !important;
box-sizing: border-box !important;
overflow: visible !important;
}
.pkp_navigation_user > li {
float: none !important;
margin: 0 !important;
}
.pkp_navigation_user > li > a {
padding: 5px 7px !important;
font-size: 13px !important;
line-height: 1.3 !important;
}
/* Mobile menu follows the header normally */
.pkp_navigation_primary_row {
position: relative !important;
top: auto !important;
left: auto !important;
clear: both !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
.pkp_navigation_primary {
width: 100% !important;
max-width: 100% !important;
}
/* Prevent page title from colliding with the header */
.pkp_structure_content {
position: relative !important;
clear: both !important;
padding-top: 24px !important;
}
.pkp_structure_main {
position: relative !important;
clear: both !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
.pkp_structure_sidebar {
position: relative !important;
clear: both !important;
width: 100% !important;
min-width: 0 !important;
margin-top: 28px !important;
box-sizing: border-box !important;
}
}
/* Narrow iPhones and similar devices */
@media (max-width: 420px) {
.pkp_head_wrapper,
.pkp_site_name .is_img img {
width: 100vw !important;
max-width: 100vw !important;
}
.pkp_navigation_user {
padding-left: 8px !important;
padding-right: 8px !important;
}
.pkp_structure_content {
padding-top: 22px !important;
}
}
/* ==========================================================
JOIN THEME v1.5 — MOBILE NO-CROP HEADER OVERRIDE
This final override removes all inherited desktop offsets,
pseudo-lines, and absolute positioning on mobile.
========================================================== */
@media screen and (max-width: 767px) {
/* Remove every inherited header offset */
body .pkp_structure_head,
body .pkp_structure_head .pkp_head_wrapper,
body .pkp_structure_head .pkp_site_name,
body .pkp_structure_head .pkp_site_name_wrapper,
body .pkp_structure_head .pkp_site_name .is_img,
body .pkp_structure_head .pkp_site_name .is_img a {
position: static !important;
inset: auto !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
float: none !important;
clear: both !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
min-height: 0 !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
transform: none !important;
overflow: visible !important;
box-sizing: border-box !important;
}
/* Remove every decorative line that may cross the image */
body .pkp_structure_head::before,
body .pkp_structure_head::after,
body .pkp_site_name::before,
body .pkp_site_name::after,
body .pkp_head_wrapper::before,
body .pkp_head_wrapper::after {
content: none !important;
display: none !important;
width: 0 !important;
height: 0 !important;
background: none !important;
border: 0 !important;
}
body .pkp_structure_head {
background: #ffffff !important;
border: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
}
/* Keep the banner entirely inside the screen */
body .pkp_structure_head .pkp_site_name .is_img img {
position: static !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
height: auto !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: contain !important;
object-position: center center !important;
transform: none !important;
filter: none !important;
clip: auto !important;
clip-path: none !important;
border: 0 !important;
vertical-align: top !important;
}
/* Avoid text fallback beside or beneath the image */
body .pkp_structure_head .pkp_site_name .is_text {
display: none !important;
}
/* Keep account controls and navigation in normal flow */
body .pkp_structure_head .pkp_navigation_user {
position: static !important;
inset: auto !important;
float: none !important;
clear: both !important;
display: flex !important;
justify-content: flex-end !important;
flex-wrap: wrap !important;
width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 4px 10px !important;
background: #ffffff !important;
box-sizing: border-box !important;
}
body .pkp_structure_head .pkp_navigation_primary_row {
position: static !important;
inset: auto !important;
float: none !important;
clear: both !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
/* Prevent content from sliding underneath the header */
body .pkp_structure_content,
body .pkp_structure_main,
body .pkp_structure_sidebar {
position: static !important;
top: auto !important;
left: auto !important;
right: auto !important;
clear: both !important;
min-width: 0 !important;
box-sizing: border-box !important;
}
body .pkp_structure_content {
padding-top: 22px !important;
}
}
/* Extra narrow phones */
@media screen and (max-width: 420px) {
body .pkp_structure_head .pkp_site_name .is_img img {
width: 100% !important;
max-width: 100% !important;
}
}
/* ==========================================================
JOIN THEME v1.6 — FULL-WIDTH FOOTER
Compatible with OJS 3.3.0-22
========================================================== */
/* Break the footer out of the centered OJS page container */
.pkp_structure_footer_wrapper {
position: relative !important;
left: 50% !important;
right: 50% !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
padding: 0 !important;
background:
radial-gradient(circle at 88% 20%, rgba(255,255,255,.05), transparent 24%),
linear-gradient(135deg, var(--join-dark) 0%, #0a4b80 58%, #08345a 100%) !important;
color: #ffffff !important;
border-top: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
/* JOIN colour strip above the footer */
.pkp_structure_footer_wrapper::before {
content: "" !important;
display: block !important;
width: 100% !important;
height: 6px !important;
background: linear-gradient(
90deg,
var(--join-blue) 0 50%,
var(--join-green) 50% 76%,
var(--join-orange) 76% 100%
) !important;
}
/* Inner footer content remains readable on very wide screens */
.pkp_structure_footer {
width: 100% !important;
max-width: 1400px !important;
margin: 0 auto !important;
padding: 42px 40px 34px !important;
color: #ffffff !important;
box-sizing: border-box !important;
}
/* Footer text and links */
.pkp_structure_footer,
.pkp_structure_footer p,
.pkp_structure_footer li,
.pkp_structure_footer span,
.pkp_structure_footer strong,
.pkp_structure_footer h1,
.pkp_structure_footer h2,
.pkp_structure_footer h3,
.pkp_structure_footer h4 {
color: #ffffff !important;
}
.pkp_structure_footer a {
color: #d9efff !important;
text-decoration: none !important;
transition: color .2s ease, opacity .2s ease !important;
}
.pkp_structure_footer a:hover,
.pkp_structure_footer a:focus {
color: #c8efba !important;
text-decoration: underline !important;
}
/* Footer logo / PKP brand */
.pkp_brand_footer {
margin-top: 22px !important;
padding-top: 18px !important;
border-top: 1px solid rgba(255,255,255,.16) !important;
}
.pkp_brand_footer img {
max-width: 130px !important;
height: auto !important;
opacity: .9 !important;
filter: brightness(0) invert(1) !important;
}
/* Optional custom footer classes for Additional Content / Page Footer */
.join-footer-grid {
display: grid !important;
grid-template-columns: 1.25fr 1fr 1fr 1.1fr !important;
gap: 30px !important;
align-items: start !important;
}
.join-footer-column h3 {
margin: 0 0 12px !important;
padding-bottom: 8px !important;
font-size: 18px !important;
line-height: 1.3 !important;
border-bottom: 2px solid rgba(255,255,255,.18) !important;
}
.join-footer-column ul {
margin: 0 !important;
padding: 0 !important;
list-style: none !important;
}
.join-footer-column li {
margin: 7px 0 !important;
}
.join-footer-tagline {
margin-top: 24px !important;
padding-top: 18px !important;
border-top: 1px solid rgba(255,255,255,.16) !important;
text-align: center !important;
font-weight: 700 !important;
letter-spacing: .3px !important;
}
.join-footer-keywords {
margin-top: 16px !important;
text-align: center !important;
font-size: 13px !important;
letter-spacing: .9px !important;
text-transform: uppercase !important;
}
.join-footer-keywords span {
display: inline-block !important;
margin: 3px 7px !important;
}
.join-footer-keywords span:nth-child(1) { color: #8fc8ff !important; }
.join-footer-keywords span:nth-child(2) { color: #a7df91 !important; }
.join-footer-keywords span:nth-child(3) { color: #ffb66f !important; }
.join-footer-keywords span:nth-child(4) { color: #cab2ef !important; }
.join-footer-keywords span:nth-child(5) { color: #ffd26f !important; }
/* Tablet */
@media (max-width: 991px) {
.pkp_structure_footer {
padding: 34px 26px 28px !important;
}
.join-footer-grid {
grid-template-columns: 1fr 1fr !important;
gap: 24px !important;
}
}
/* Mobile */
@media (max-width: 767px) {
.pkp_structure_footer_wrapper {
left: 50% !important;
right: 50% !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
}
.pkp_structure_footer {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 30px 20px 24px !important;
}
.join-footer-grid {
display: block !important;
}
.join-footer-column {
margin-bottom: 24px !important;
}
.join-footer-column:last-child {
margin-bottom: 0 !important;
}
.join-footer-tagline {
text-align: left !important;
}
.join-footer-keywords {
text-align: left !important;
line-height: 1.8 !important;
}
}
/* Extra-small phones */
@media (max-width: 420px) {
.pkp_structure_footer {
padding-left: 16px !important;
padding-right: 16px !important;
}
}
/* ==========================================================
JOIN THEME v1.7 — MOBILE TOP DRAWER
Compatible with OJS 3.3.0-22
Features:
- Mobile menu opens as a fixed top drawer
- Menu button remains easy to reach
- About submenu remains inside the drawer
- Drawer scrolls when content is long
- Drawer overlays and does not push page content
- Search, Register, and Login remain at the bottom
========================================================== */
@media screen and (max-width: 767px) {
html,
body,
.pkp_structure_page {
width: 100% !important;
max-width: 100% !important;
overflow-x: hidden !important;
}
/* Keep mobile menu button visible and reachable */
.pkp_site_nav_toggle {
position: fixed !important;
top: max(12px, env(safe-area-inset-top)) !important;
left: 12px !important;
z-index: 10050 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 46px !important;
height: 46px !important;
margin: 0 !important;
padding: 0 !important;
background: var(--join-dark) !important;
border: 0 !important;
border-radius: 7px !important;
box-shadow: 0 4px 14px rgba(0,0,0,.28) !important;
}
.pkp_site_nav_toggle > span,
.pkp_site_nav_toggle > span::before,
.pkp_site_nav_toggle > span::after {
background: #ffffff !important;
}
/* Expanded menu becomes a fixed top drawer */
body .pkp_navigation_primary_row {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: auto !important;
left: 0 !important;
z-index: 10020 !important;
display: block;
width: 100vw !important;
max-width: 100vw !important;
height: auto !important;
max-height: 100dvh !important;
margin: 0 !important;
padding:
calc(72px + env(safe-area-inset-top))
18px
calc(20px + env(safe-area-inset-bottom)) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch !important;
background: linear-gradient(180deg, var(--join-dark), #0a4b80) !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: 0 10px 28px rgba(0,0,0,.32) !important;
box-sizing: border-box !important;
}
/* Preserve OJS hidden state */
body .pkp_navigation_primary_row[aria-hidden="true"],
body .pkp_navigation_primary_row[style*="display: none"] {
display: none !important;
}
.pkp_navigation_primary_wrapper {
position: static !important;
display: flex !important;
flex-direction: column !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
}
.pkp_navigation_primary {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.pkp_navigation_primary > li {
display: block !important;
float: none !important;
width: 100% !important;
margin: 0 !important;
border-bottom: 1px solid rgba(255,255,255,.13) !important;
}
.pkp_navigation_primary > li > a {
display: block !important;
width: 100% !important;
padding: 14px 12px !important;
color: #ffffff !important;
background: transparent !important;
font-size: 18px !important;
line-height: 1.3 !important;
font-weight: 700 !important;
text-transform: none !important;
box-sizing: border-box !important;
}
.pkp_navigation_primary > li > a:hover,
.pkp_navigation_primary > li > a:focus,
.pkp_navigation_primary > li.current > a {
color: #ffffff !important;
background: rgba(255,255,255,.10) !important;
text-decoration: none !important;
}
/* Keep About submenu inside the same drawer */
.pkp_navigation_primary ul {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
display: block !important;
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 10px !important;
padding: 0 !important;
overflow: hidden !important;
background: #ffffff !important;
border: 0 !important;
border-radius: 0 0 7px 7px !important;
box-shadow: none !important;
}
.pkp_navigation_primary ul li {
display: block !important;
float: none !important;
width: 100% !important;
margin: 0 !important;
}
.pkp_navigation_primary ul a {
display: block !important;
width: 100% !important;
padding: 12px 15px !important;
color: var(--join-text) !important;
background: #ffffff !important;
border-bottom: 1px solid var(--join-border) !important;
font-size: 16px !important;
line-height: 1.35 !important;
text-transform: none !important;
box-sizing: border-box !important;
}
.pkp_navigation_primary ul li:last-child a {
border-bottom: 0 !important;
}
.pkp_navigation_primary ul a:hover,
.pkp_navigation_primary ul a:focus {
color: var(--join-dark) !important;
background: #eef5f1 !important;
text-decoration: none !important;
}
/* Search stays near bottom of drawer */
.pkp_search_mobile {
order: 90 !important;
display: block !important;
width: 100% !important;
margin: 14px 0 0 !important;
padding: 14px 0 0 !important;
border-top: 1px solid rgba(255,255,255,.16) !important;
}
.pkp_search_mobile a,
.pkp_search_mobile .search_prompt {
color: #ffffff !important;
font-size: 17px !important;
}
/* Register and Login remain at the bottom */
body .pkp_navigation_user {
order: 100 !important;
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
flex-wrap: wrap !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin: 14px 0 0 !important;
padding: 10px 0 0 !important;
background: #ffffff !important;
border-radius: 0 !important;
box-sizing: border-box !important;
}
.pkp_navigation_user > li {
display: block !important;
float: none !important;
margin: 0 !important;
}
.pkp_navigation_user > li > a {
display: block !important;
padding: 10px 12px !important;
color: var(--join-dark) !important;
font-size: 15px !important;
line-height: 1.3 !important;
font-weight: 700 !important;
}
/* Drawer overlays page instead of pushing it */
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar {
position: relative !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
margin-top: 0 !important;
transform: none !important;
}
}
@media screen and (max-width: 420px) {
.pkp_site_nav_toggle {
top: max(10px, env(safe-area-inset-top)) !important;
left: 10px !important;
width: 44px !important;
height: 44px !important;
}
body .pkp_navigation_primary_row {
padding-left: 14px !important;
padding-right: 14px !important;
}
.pkp_navigation_primary > li > a {
font-size: 17px !important;
}
.pkp_navigation_primary ul a {
font-size: 15px !important;
}
}
/* ==========================================================
JOIN THEME v1.8 — TRUE TOP MOBILE DRAWER FIX
OJS 3.3.0-22
This version targets the actual OJS mobile menu container:
.pkp_site_nav_menu
so the drawer starts at the very top of the viewport.
========================================================== */
@media screen and (max-width: 767px) {
/* The entire OJS mobile navigation container becomes the drawer */
body .pkp_site_nav_menu {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: auto !important;
left: 0 !important;
z-index: 10040 !important;
display: block;
width: 100vw !important;
max-width: 100vw !important;
height: auto !important;
max-height: 100dvh !important;
margin: 0 !important;
padding:
calc(70px + env(safe-area-inset-top))
18px
calc(18px + env(safe-area-inset-bottom)) !important;
overflow-x: hidden !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch !important;
overscroll-behavior: contain !important;
background: linear-gradient(180deg, var(--join-dark), #0a4b80) !important;
border: 0 !important;
box-shadow: 0 10px 28px rgba(0,0,0,.34) !important;
box-sizing: border-box !important;
}
/* Respect the closed state controlled by OJS */
body .pkp_site_nav_menu[aria-hidden="true"],
body .pkp_site_nav_menu[style*="display: none"] {
display: none !important;
}
/* Reset children so they do not inherit page-flow offsets */
body .pkp_site_nav_menu .pkp_navigation_primary_row,
body .pkp_site_nav_menu .pkp_navigation_primary_wrapper,
body .pkp_site_nav_menu .pkp_navigation_primary,
body .pkp_site_nav_menu .pkp_navigation_user,
body .pkp_site_nav_menu .pkp_search_mobile {
position: static !important;
top: auto !important;
right: auto !important;
bottom: auto !important;
left: auto !important;
float: none !important;
clear: both !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
margin-left: 0 !important;
margin-right: 0 !important;
transform: none !important;
}
/* Primary navigation area */
body .pkp_site_nav_menu .pkp_navigation_primary_row {
display: block !important;
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-radius: 0 !important;
box-shadow: none !important;
overflow: visible !important;
}
body .pkp_site_nav_menu .pkp_navigation_primary_wrapper {
display: flex !important;
flex-direction: column !important;
padding: 0 !important;
overflow: visible !important;
}
body .pkp_site_nav_menu .pkp_navigation_primary {
display: block !important;
margin: 0 !important;
padding: 0 !important;
}
body .pkp_site_nav_menu .pkp_navigation_primary > li {
display: block !important;
float: none !important;
width: 100% !important;
margin: 0 !important;
border-bottom: 1px solid rgba(255,255,255,.14) !important;
}
body .pkp_site_nav_menu .pkp_navigation_primary > li > a {
display: block !important;
width: 100% !important;
padding: 14px 12px !important;
color: #ffffff !important;
background: transparent !important;
font-size: 18px !important;
line-height: 1.3 !important;
font-weight: 700 !important;
text-transform: none !important;
box-sizing: border-box !important;
}
/* About submenu stays in the drawer */
body .pkp_site_nav_menu .pkp_navigation_primary ul {
position: static !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 10px !important;
padding: 0 !important;
overflow: hidden !important;
background: #ffffff !important;
border: 0 !important;
border-radius: 0 0 7px 7px !important;
box-shadow: none !important;
}
body .pkp_site_nav_menu .pkp_navigation_primary ul li {
display: block !important;
float: none !important;
width: 100% !important;
margin: 0 !important;
}
body .pkp_site_nav_menu .pkp_navigation_primary ul a {
display: block !important;
width: 100% !important;
padding: 12px 15px !important;
color: var(--join-text) !important;
background: #ffffff !important;
border-bottom: 1px solid var(--join-border) !important;
font-size: 16px !important;
line-height: 1.35 !important;
box-sizing: border-box !important;
}
/* Search at lower area */
body .pkp_site_nav_menu .pkp_search_mobile {
order: 90 !important;
display: block !important;
margin: 14px 0 0 !important;
padding: 14px 0 0 !important;
border-top: 1px solid rgba(255,255,255,.16) !important;
background: transparent !important;
}
body .pkp_site_nav_menu .pkp_search_mobile a,
body .pkp_site_nav_menu .pkp_search_mobile .search_prompt {
color: #ffffff !important;
font-size: 17px !important;
}
/* Register/Login at the bottom */
body .pkp_site_nav_menu .pkp_navigation_user {
order: 100 !important;
display: flex !important;
justify-content: flex-end !important;
align-items: center !important;
flex-wrap: wrap !important;
margin: 14px 0 0 !important;
padding: 10px 0 0 !important;
background: #ffffff !important;
}
body .pkp_site_nav_menu .pkp_navigation_user > li {
display: block !important;
float: none !important;
margin: 0 !important;
}
body .pkp_site_nav_menu .pkp_navigation_user > li > a {
display: block !important;
padding: 10px 12px !important;
color: var(--join-dark) !important;
font-size: 15px !important;
font-weight: 700 !important;
}
/* Keep toggle above the drawer */
body .pkp_site_nav_toggle {
position: fixed !important;
top: max(12px, env(safe-area-inset-top)) !important;
left: 12px !important;
z-index: 10060 !important;
}
/* Ensure the drawer overlays instead of pushing page content */
body .pkp_structure_content,
body .pkp_structure_main,
body .pkp_structure_sidebar {
position: relative !important;
top: auto !important;
margin-top: 0 !important;
transform: none !important;
}
}
@media screen and (max-width: 420px) {
body .pkp_site_nav_menu {
padding-left: 14px !important;
padding-right: 14px !important;
}
body .pkp_site_nav_menu .pkp_navigation_primary > li > a {
font-size: 17px !important;
}
body .pkp_site_nav_menu .pkp_navigation_primary ul a {
font-size: 15px !important;
}
}
/* ==========================================================
JOIN THEME v1.9 — MOBILE DRAWER TOGGLE FIX
Compatible with OJS 3.3.0-22
The drawer is hidden by default and only appears when OJS
adds its open-state class. It can then be hidden again by
pressing the same menu button.
========================================================== */
@media screen and (max-width: 767px) {
/* Hidden state: default condition */
body .pkp_site_nav_menu {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
transform: translateY(-12px) !important;
transition:
opacity .20s ease,
transform .20s ease,
visibility .20s ease !important;
}
/* OJS 3.3 standard open-state class */
body .pkp_site_nav_menu.pkp_site_nav_menu--isOpen,
/* Additional fallback classes for customised OJS installs */
body .pkp_site_nav_menu.is_open,
body .pkp_site_nav_menu.is-open,
body .pkp_site_nav_menu.open,
/* Accessibility-state fallback */
body .pkp_site_nav_menu[aria-hidden="false"] {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
transform: translateY(0) !important;
}
/* Ensure explicit closed state always wins */
body .pkp_site_nav_menu[aria-hidden="true"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Menu button always remains available */
body .pkp_site_nav_toggle {
display: flex !important;
position: fixed !important;
top: max(12px, env(safe-area-inset-top)) !important;
left: 12px !important;
z-index: 10070 !important;
align-items: center !important;
justify-content: center !important;
width: 46px !important;
height: 46px !important;
margin: 0 !important;
padding: 0 !important;
background: var(--join-dark) !important;
border: 0 !important;
border-radius: 7px !important;
box-shadow: 0 4px 14px rgba(0,0,0,.28) !important;
cursor: pointer !important;
}
/* Visual feedback when the drawer is open */
body .pkp_site_nav_toggle.pkp_site_nav_toggle--transform,
body .pkp_site_nav_toggle[aria-expanded="true"] {
background: var(--join-orange) !important;
}
/* Keep hamburger/close icon visible */
body .pkp_site_nav_toggle > span,
body .pkp_site_nav_toggle > span::before,
body .pkp_site_nav_toggle > span::after {
background: #ffffff !important;
}
}
@media screen and (max-width: 420px) {
body .pkp_site_nav_toggle {
top: max(10px, env(safe-area-inset-top)) !important;
left: 10px !important;
width: 44px !important;
height: 44px !important;
}
}
/* ==========================================================
JOIN THEME v2.0 — FULL-BLEED HEADER & FOOTER
Compatible with OJS 3.3.0-22
========================================================== */
.pkp_structure_head {
position: relative !important;
left: 50% !important;
right: 50% !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
padding: 0 !important;
background: #ffffff !important;
border: 0 !important;
box-shadow: none !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
.pkp_structure_head::before,
.pkp_structure_head::after,
.pkp_head_wrapper::before,
.pkp_head_wrapper::after,
.pkp_site_name::before,
.pkp_site_name::after {
display: none !important;
content: none !important;
}
.pkp_head_wrapper {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.pkp_site_name,
.pkp_site_name .is_img,
.pkp_site_name .is_img a {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
}
.pkp_site_name .is_img img {
display: block !important;
width: 100vw !important;
max-width: 100vw !important;
height: auto !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
object-position: center center !important;
transform: none !important;
filter: none !important;
border: 0 !important;
}
.pkp_site_name .is_text { display: none !important; }
.pkp_navigation_user { z-index: 50 !important; }
.pkp_navigation_primary_row {
width: 100vw !important;
max-width: 100vw !important;
margin-left: calc(50% - 50vw) !important;
margin-right: calc(50% - 50vw) !important;
border-radius: 0 !important;
}
.pkp_structure_footer_wrapper {
position: relative !important;
left: 50% !important;
right: 50% !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
padding: 0 !important;
background: #073b66 !important;
border: 0 !important;
box-sizing: border-box !important;
overflow: hidden !important;
}
.pkp_structure_footer {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.pkp_structure_footer img,
.pkp_structure_footer .footer_image img,
.pkp_structure_footer .page_footer img,
.pkp_structure_footer p img {
display: block !important;
width: 100vw !important;
max-width: 100vw !important;
height: auto !important;
max-height: none !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
object-position: center center !important;
border: 0 !important;
}
.pkp_structure_footer p,
.pkp_structure_footer div {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.pkp_brand_footer {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
padding: 12px 20px 16px !important;
text-align: center !important;
background: #052f54 !important;
border-top: 1px solid rgba(255,255,255,.12) !important;
}
.pkp_brand_footer img {
width: auto !important;
max-width: 120px !important;
height: auto !important;
margin: 0 auto !important;
filter: brightness(0) invert(1) !important;
opacity: .9 !important;
}
@media screen and (max-width: 767px) {
.pkp_structure_head,
.pkp_structure_footer_wrapper {
left: 50% !important;
right: 50% !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: -50vw !important;
margin-right: -50vw !important;
}
.pkp_site_name .is_img img,
.pkp_structure_footer img,
.pkp_structure_footer .footer_image img,
.pkp_structure_footer .page_footer img,
.pkp_structure_footer p img {
width: 100vw !important;
max-width: 100vw !important;
height: auto !important;
object-fit: contain !important;
}
.pkp_navigation_primary_row {
width: 100vw !important;
max-width: 100vw !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
}
/* ==========================================================
JOIN THEME v2.1 — SIDEBAR CUSTOM BLOCK SYSTEM
OJS 3.3.x
Adds consistent titled blocks for MENU / TOOLS / INDEXING / VISITOR
========================================================== */
/* ---------- Sidebar layout ---------- */
.pkp_structure_sidebar {
font-size: 13px;
}
.pkp_structure_sidebar .pkp_block {
position: relative;
overflow: hidden;
margin: 0 0 22px !important;
padding: 0 !important;
background: var(--join-white) !important;
border: 1px solid var(--join-border) !important;
border-left: 1px solid var(--join-border) !important;
border-radius: 10px !important;
box-shadow: 0 5px 18px rgba(7,59,102,.08) !important;
}
/* Neutralize the older nth-child alternating left borders */
.pkp_structure_sidebar .pkp_block:nth-child(3n+2),
.pkp_structure_sidebar .pkp_block:nth-child(3n+3) {
border-left-color: var(--join-border) !important;
}
/* ---------- Block title/header ---------- */
.pkp_structure_sidebar .pkp_block .title,
.pkp_structure_sidebar .pkp_block > h2,
.pkp_structure_sidebar .pkp_block > h3 {
display: block !important;
width: 100%;
box-sizing: border-box;
margin: 0 !important;
padding: 11px 14px !important;
color: #ffffff !important;
background: linear-gradient(90deg, var(--join-dark), var(--join-blue)) !important;
border: 0 !important;
border-bottom: 4px solid var(--join-orange) !important;
font-size: 14px !important;
line-height: 1.3 !important;
font-weight: 800 !important;
letter-spacing: .65px !important;
text-transform: uppercase !important;
}
/* Custom Block Manager often wraps contents in .content */
.pkp_structure_sidebar .pkp_block .content {
padding: 12px 14px 14px !important;
background: var(--join-white) !important;
}
/* Prevent unwanted margins at edges of custom block content */
.pkp_structure_sidebar .pkp_block .content > :first-child {
margin-top: 0 !important;
}
.pkp_structure_sidebar .pkp_block .content > :last-child {
margin-bottom: 0 !important;
}
/* ==========================================================
MENU BLOCK
HTML wrapper:
========================================================== */
.join-sidebar-menu {
width: 100%;
margin: 0;
padding: 0;
}
.join-sidebar-menu a {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
box-sizing: border-box;
margin: 0;
padding: 10px 6px;
color: var(--join-text) !important;
background: transparent !important;
border-bottom: 1px solid #edf2f5;
font-size: 13px;
line-height: 1.45;
font-weight: 600;
text-decoration: none !important;
transition: background .2s ease, color .2s ease, padding-left .2s ease;
}
.join-sidebar-menu a:last-child {
border-bottom: 0;
}
.join-sidebar-menu a span {
flex: 0 0 auto;
color: var(--join-orange) !important;
font-size: 18px;
line-height: 1;
font-weight: 900;
transition: transform .2s ease;
}
.join-sidebar-menu a:hover,
.join-sidebar-menu a:focus {
padding-left: 11px;
color: var(--join-dark) !important;
background: #f3f8fc !important;
outline: 0;
}
.join-sidebar-menu a:hover span,
.join-sidebar-menu a:focus span {
transform: translateX(2px);
}
/* ==========================================================
TOOLS BLOCK
HTML wrapper: ...
========================================================== */
.join-tools {
width: 100%;
margin: 0;
padding: 0;
}
.join-tools a {
display: block;
width: 100%;
box-sizing: border-box;
margin: 0 0 9px;
padding: 10px 12px;
color: var(--join-dark) !important;
background: #f6f9fb !important;
border: 1px solid var(--join-border) !important;
border-radius: 6px;
font-size: 13px;
line-height: 1.4;
font-weight: 700;
text-align: center;
text-decoration: none !important;
box-shadow: none !important;
transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.join-tools a:last-child {
margin-bottom: 0;
}
.join-tools a:hover,
.join-tools a:focus {
color: #ffffff !important;
background: var(--join-blue) !important;
border-color: var(--join-blue) !important;
transform: translateY(-1px);
outline: 0;
}
/* ==========================================================
INDEXING BLOCK
HTML wrapper: ...
========================================================== */
.join-indexing {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
width: 100%;
margin: 0;
padding: 0;
}
.join-indexing a {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
min-height: 58px;
box-sizing: border-box;
padding: 7px;
background: #ffffff !important;
border: 1px solid #e5edf2 !important;
border-radius: 6px;
text-decoration: none !important;
transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.join-indexing a:hover,
.join-indexing a:focus {
border-color: var(--join-orange) !important;
box-shadow: 0 4px 10px rgba(7,59,102,.10) !important;
transform: translateY(-2px);
outline: 0;
}
.join-indexing img {
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: 42px;
margin: 0 auto;
object-fit: contain;
}
/* Text fallback for indexing services without logos */
.join-indexing a:not(:has(img)) {
color: var(--join-dark) !important;
font-size: 12px;
line-height: 1.3;
font-weight: 700;
text-align: center;
}
/* ==========================================================
VISITOR BLOCK
HTML wrapper: ...
========================================================== */
.join-visitor {
width: 100%;
margin: 0;
padding: 2px 0;
text-align: center;
}
.join-visitor img,
.join-visitor iframe,
.join-visitor object {
display: block;
max-width: 100% !important;
height: auto;
margin: 0 auto !important;
border: 0 !important;
}
/* Generic iframe safety for counters/widgets */
.join-visitor iframe {
width: 100%;
min-height: 110px;
}
/* ==========================================================
OPTIONAL INFO / CONTACT BLOCK
========================================================== */
.join-info {
color: var(--join-text);
font-size: 13px;
line-height: 1.65;
}
.join-info p {
margin: 0 0 10px;
}
.join-info p:last-child {
margin-bottom: 0;
}
/* ---------- OJS built-in Make a Submission block ---------- */
.pkp_structure_sidebar .block_make_submission {
overflow: visible !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
box-shadow: none !important;
}
.pkp_structure_sidebar .block_make_submission .content {
padding: 0 !important;
background: transparent !important;
}
.pkp_structure_sidebar .block_make_submission a {
display: block;
padding: 13px 16px !important;
color: #ffffff !important;
background: linear-gradient(135deg, var(--join-orange), #cf6f13) !important;
border: 0 !important;
border-radius: 7px !important;
font-weight: 800 !important;
text-align: center;
box-shadow: 0 7px 18px rgba(242,139,43,.24) !important;
}
.pkp_structure_sidebar .block_make_submission a:hover,
.pkp_structure_sidebar .block_make_submission a:focus {
background: linear-gradient(135deg, var(--join-green), #3f8d31) !important;
}
/* ---------- Responsive sidebar blocks ---------- */
@media screen and (max-width: 767px) {
.pkp_structure_sidebar .pkp_block {
margin-bottom: 16px !important;
border-radius: 8px !important;
}
.pkp_structure_sidebar .pkp_block .title,
.pkp_structure_sidebar .pkp_block > h2,
.pkp_structure_sidebar .pkp_block > h3 {
padding: 10px 12px !important;
font-size: 13px !important;
letter-spacing: .5px !important;
}
.pkp_structure_sidebar .pkp_block .content {
padding: 10px 12px 12px !important;
}
.join-sidebar-menu a,
.join-tools a {
font-size: 13px;
}
.join-indexing {
gap: 8px;
}
.join-indexing a {
min-height: 52px;
}
}
@media screen and (max-width: 420px) {
.join-indexing {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ==========================================================
END JOIN THEME v2.1 — SIDEBAR CUSTOM BLOCK SYSTEM
========================================================== */
/* ==========================================================
JOIN THEME v2.2 — CUSTOM BLOCK TITLE + ABOUT DROPDOWN FIX
OJS 3.3.x
Final override: place at END of stylesheet.
========================================================== */
/* ----------------------------------------------------------
A. CUSTOM BLOCK MANAGER — FORCED VISIBLE TITLES
Some OJS 3.3 Custom Block Manager versions do not output
.title inside the block. These rules create the title bar
directly from the block ID/name.
---------------------------------------------------------- */
/* Keep custom blocks card-like and title-ready */
.pkp_structure_sidebar .block_custom,
.pkp_structure_sidebar [id^="customblock-"] {
position: relative !important;
overflow: hidden !important;
padding: 0 !important;
background: #ffffff !important;
border: 1px solid var(--join-border) !important;
border-radius: 10px !important;
box-shadow: 0 5px 18px rgba(7,59,102,.08) !important;
}
/* Shared generated-title appearance */
.pkp_structure_sidebar .block_custom::before,
.pkp_structure_sidebar [id^="customblock-"]::before {
display: none;
width: 100%;
box-sizing: border-box;
margin: 0 !important;
padding: 11px 14px !important;
color: #ffffff !important;
background: linear-gradient(90deg,var(--join-dark),var(--join-blue)) !important;
border: 0 !important;
border-bottom: 4px solid var(--join-orange) !important;
font-size: 14px !important;
line-height: 1.3 !important;
font-weight: 800 !important;
letter-spacing: .65px !important;
text-transform: uppercase !important;
text-align: left !important;
}
/* MENU — works with block IDs such as customblock-MENU / menu */
.pkp_structure_sidebar .block_custom[id*="menu" i]::before,
.pkp_structure_sidebar [id^="customblock-"][id*="menu" i]::before {
content: "MENU" !important;
display: block !important;
}
/* TOOLS — block may be named tools, tool, template, article-template */
.pkp_structure_sidebar .block_custom[id*="tool" i]::before,
.pkp_structure_sidebar [id^="customblock-"][id*="tool" i]::before,
.pkp_structure_sidebar .block_custom[id*="template" i]::before,
.pkp_structure_sidebar [id^="customblock-"][id*="template" i]::before {
content: "TOOLS" !important;
display: block !important;
}
/* INDEXING */
.pkp_structure_sidebar .block_custom[id*="index" i]::before,
.pkp_structure_sidebar [id^="customblock-"][id*="index" i]::before {
content: "INDEXING" !important;
display: block !important;
}
/* VISITOR / STATISTICS */
.pkp_structure_sidebar .block_custom[id*="visitor" i]::before,
.pkp_structure_sidebar [id^="customblock-"][id*="visitor" i]::before,
.pkp_structure_sidebar .block_custom[id*="stat" i]::before,
.pkp_structure_sidebar [id^="customblock-"][id*="stat" i]::before {
content: "VISITOR" !important;
display: block !important;
}
/* CONTACT / JOURNAL INFORMATION (optional) */
.pkp_structure_sidebar .block_custom[id*="contact" i]::before,
.pkp_structure_sidebar [id^="customblock-"][id*="contact" i]::before {
content: "CONTACT" !important;
display: block !important;
}
/* If OJS DOES output a real title, keep it visually identical and
suppress generated pseudo-title to avoid duplicate titles. */
.pkp_structure_sidebar .block_custom:has(.title)::before,
.pkp_structure_sidebar [id^="customblock-"]:has(.title)::before {
display: none !important;
}
.pkp_structure_sidebar .block_custom .title,
.pkp_structure_sidebar [id^="customblock-"] .title {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 11px 14px !important;
color: #ffffff !important;
background: linear-gradient(90deg,var(--join-dark),var(--join-blue)) !important;
border: 0 !important;
border-bottom: 4px solid var(--join-orange) !important;
font-size: 14px !important;
line-height: 1.3 !important;
font-weight: 800 !important;
letter-spacing: .65px !important;
text-transform: uppercase !important;
}
/* Give direct custom-block contents consistent inner spacing.
Images still stay centred and responsive. */
.pkp_structure_sidebar .block_custom > :not(.title),
.pkp_structure_sidebar [id^="customblock-"] > :not(.title) {
box-sizing: border-box;
}
.pkp_structure_sidebar .block_custom img,
.pkp_structure_sidebar [id^="customblock-"] img {
display: block;
max-width: 100% !important;
height: auto !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Prevent paragraph margins from creating a white gap immediately
below generated title bars. */
.pkp_structure_sidebar .block_custom > p:first-of-type,
.pkp_structure_sidebar [id^="customblock-"] > p:first-of-type {
margin-top: 0 !important;
}
/* ----------------------------------------------------------
B. DESKTOP ABOUT DROPDOWN — RESTORE SUBMENU
Only applies above mobile breakpoint. This intentionally
overrides previous theme rules which could leave the OJS
submenu inaccessible/invisible.
---------------------------------------------------------- */
@media screen and (min-width: 768px) {
.pkp_navigation_primary > li {
position: relative !important;
}
/* Closed by default */
.pkp_navigation_primary > li > ul {
position: absolute !important;
top: 100% !important;
left: 0 !important;
right: auto !important;
z-index: 99999 !important;
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
min-width: 245px !important;
width: max-content !important;
max-width: 340px !important;
margin: 0 !important;
padding: 6px 0 !important;
background: #ffffff !important;
border: 1px solid var(--join-border) !important;
border-top: 4px solid var(--join-orange) !important;
border-radius: 0 0 8px 8px !important;
box-shadow: 0 10px 28px rgba(7,59,102,.18) !important;
transform: translateY(4px) !important;
transition: opacity .16s ease, transform .16s ease, visibility .16s ease !important;
overflow: visible !important;
}
/* Show on mouse hover AND keyboard focus */
.pkp_navigation_primary > li:hover > ul,
.pkp_navigation_primary > li:focus-within > ul,
.pkp_navigation_primary > li > a:focus + ul {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
transform: translateY(0) !important;
}
.pkp_navigation_primary > li > ul > li {
display: block !important;
float: none !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.pkp_navigation_primary > li > ul > li > a {
display: block !important;
width: 100% !important;
box-sizing: border-box !important;
padding: 11px 16px !important;
color: var(--join-text) !important;
background: #ffffff !important;
border: 0 !important;
border-bottom: 1px solid #edf2f5 !important;
font-size: 14px !important;
line-height: 1.35 !important;
font-weight: 600 !important;
white-space: normal !important;
text-decoration: none !important;
}
.pkp_navigation_primary > li > ul > li:last-child > a {
border-bottom: 0 !important;
}
.pkp_navigation_primary > li > ul > li > a:hover,
.pkp_navigation_primary > li > ul > li > a:focus {
color: var(--join-dark) !important;
background: #eef6fb !important;
padding-left: 20px !important;
outline: 0 !important;
}
/* Make sure header/nav containers do not clip the dropdown */
.pkp_structure_head,
.pkp_head_wrapper,
.pkp_site_nav_menu,
.pkp_navigation_primary_row,
.pkp_navigation_primary_wrapper,
.pkp_navigation_primary {
overflow: visible !important;
}
}
/* ----------------------------------------------------------
C. MOBILE: retain OJS drawer behaviour, but make nested menu
readable whenever the drawer is open.
---------------------------------------------------------- */
@media screen and (max-width: 767px) {
body .pkp_site_nav_menu.pkp_site_nav_menu--isOpen .pkp_navigation_primary ul,
body .pkp_site_nav_menu.is_open .pkp_navigation_primary ul,
body .pkp_site_nav_menu.is-open .pkp_navigation_primary ul,
body .pkp_site_nav_menu.open .pkp_navigation_primary ul,
body .pkp_site_nav_menu[aria-hidden="false"] .pkp_navigation_primary ul {
position: static !important;
display: block !important;
visibility: visible !important;
opacity: 1 !important;
width: 100% !important;
max-width: 100% !important;
margin: 0 0 10px !important;
padding: 0 !important;
transform: none !important;
}
.pkp_structure_sidebar .block_custom::before,
.pkp_structure_sidebar [id^="customblock-"]::before,
.pkp_structure_sidebar .block_custom .title,
.pkp_structure_sidebar [id^="customblock-"] .title {
padding: 10px 12px !important;
font-size: 13px !important;
letter-spacing: .5px !important;
}
}
/* ==========================================================
END JOIN THEME v2.2
========================================================== */
/* ==========================================================
JOIN THEME v2.3 — HEADER CENTERING / PRECISION OVERRIDE
Fixes horizontal shift caused by nested 100vw + breakout rules.
========================================================== */
/* Header itself remains full viewport width, but without double offset. */
html, body {
margin-left: 0 !important;
margin-right: 0 !important;
}
body .pkp_structure_head {
position: relative !important;
left: 50% !important;
right: auto !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: -50vw !important;
margin-right: 0 !important;
padding: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
/* Do NOT apply a second viewport breakout inside the header. */
body .pkp_structure_head .pkp_head_wrapper,
body .pkp_structure_head .pkp_site_name,
body .pkp_structure_head .pkp_site_name .is_img,
body .pkp_structure_head .pkp_site_name .is_img a {
position: relative !important;
left: auto !important;
right: auto !important;
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
padding-left: 0 !important;
padding-right: 0 !important;
box-sizing: border-box !important;
}
/* Banner is centred exactly inside the full-width header.
contain prevents either edge from being cropped. */
body .pkp_structure_head .pkp_site_name .is_img img {
position: relative !important;
left: auto !important;
right: auto !important;
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
max-height: none !important;
margin-left: auto !important;
margin-right: auto !important;
padding: 0 !important;
object-fit: contain !important;
object-position: 50% 50% !important;
transform: none !important;
box-sizing: border-box !important;
}
/* Navigation spans the same centred width as the header, without
another calc(50% - 50vw) shift. */
body .pkp_structure_head .pkp_navigation_primary_row {
position: relative !important;
left: auto !important;
right: auto !important;
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
box-sizing: border-box !important;
}
/* Desktop: keep nav content visually centred while dropdown remains usable. */
@media screen and (min-width: 768px) {
body .pkp_structure_head .pkp_navigation_primary_wrapper {
width: 100% !important;
max-width: 1400px !important;
margin-left: auto !important;
margin-right: auto !important;
box-sizing: border-box !important;
}
body .pkp_structure_head .pkp_site_name .is_img img {
margin-left: auto !important;
margin-right: auto !important;
}
}
/* Mobile: neutralise all historical 100vw rules on nested banner nodes.
The viewport-width breakout belongs only to .pkp_structure_head. */
@media screen and (max-width: 767px) {
body .pkp_structure_head {
left: 50% !important;
right: auto !important;
width: 100vw !important;
max-width: 100vw !important;
margin-left: -50vw !important;
margin-right: 0 !important;
overflow-x: hidden !important;
}
body .pkp_structure_head .pkp_head_wrapper,
body .pkp_structure_head .pkp_site_name,
body .pkp_structure_head .pkp_site_name .is_img,
body .pkp_structure_head .pkp_site_name .is_img a,
body .pkp_structure_head .pkp_site_name .is_img img {
position: relative !important;
left: auto !important;
right: auto !important;
width: 100% !important;
max-width: 100% !important;
margin-left: auto !important;
margin-right: auto !important;
transform: none !important;
box-sizing: border-box !important;
}
body .pkp_structure_head .pkp_site_name .is_img img {
height: auto !important;
object-fit: contain !important;
object-position: center center !important;
}
}
/* ==========================================================
END JOIN THEME v2.3
========================================================== */
/* ==========================================================
JOIN THEME v2.4 — FINAL SIDEBAR MENU + BLOCK TITLES
OJS 3.3.x
Purpose:
- Make Custom Block titles visible and consistent
- Make MENU links fully clickable and readable
- Keep sidebar visible on About and other standard pages
- Keep desktop About dropdown usable
- Preserve centred header rules from v2.3
========================================================== */
/* ---------- SIDEBAR CONTAINER ---------- */
body .pkp_structure_sidebar {
position: relative !important;
z-index: 2 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
@media screen and (min-width: 768px) {
body .pkp_structure_sidebar {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
}
/* ---------- GENERIC CUSTOM BLOCK CARD ---------- */
body .pkp_structure_sidebar .pkp_block {
position: relative !important;
display: block !important;
width: 100% !important;
margin: 0 0 22px !important;
padding: 0 !important;
overflow: hidden !important;
background: #ffffff !important;
border: 1px solid var(--join-border) !important;
border-left: 1px solid var(--join-border) !important;
border-radius: 10px !important;
box-shadow: 0 5px 18px rgba(7,59,102,.08) !important;
box-sizing: border-box !important;
}
/* OJS-generated block title, when present */
body .pkp_structure_sidebar .pkp_block > .title,
body .pkp_structure_sidebar .pkp_block .title:first-child,
body .pkp_structure_sidebar .pkp_block > h2:first-child,
body .pkp_structure_sidebar .pkp_block > h3:first-child {
display: block !important;
margin: 0 !important;
padding: 12px 15px !important;
color: #ffffff !important;
background: linear-gradient(90deg, var(--join-dark), var(--join-blue)) !important;
border: 0 !important;
border-bottom: 3px solid var(--join-orange) !important;
font-size: 14px !important;
line-height: 1.3 !important;
font-weight: 800 !important;
letter-spacing: .55px !important;
text-transform: uppercase !important;
box-sizing: border-box !important;
}
/* Manual title: recommended for Custom Block Manager */
body .pkp_structure_sidebar .join-block-title {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 12px 15px !important;
color: #ffffff !important;
background: linear-gradient(90deg, var(--join-dark), var(--join-blue)) !important;
border: 0 !important;
border-bottom: 3px solid var(--join-orange) !important;
font-size: 14px !important;
line-height: 1.3 !important;
font-weight: 800 !important;
letter-spacing: .55px !important;
text-transform: uppercase !important;
box-sizing: border-box !important;
}
/* Avoid duplicate title spacing when manual title sits inside .content */
body .pkp_structure_sidebar .pkp_block .content {
position: relative !important;
z-index: 1 !important;
margin: 0 !important;
padding: 14px !important;
background: #ffffff !important;
overflow: visible !important;
box-sizing: border-box !important;
}
body .pkp_structure_sidebar .pkp_block .content > .join-block-title:first-child {
margin: -14px -14px 12px !important;
width: calc(100% + 28px) !important;
}
/* ---------- JOIN SIDEBAR MENU ---------- */
body .join-sidebar-menu {
position: relative !important;
z-index: 5 !important;
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
overflow: visible !important;
box-sizing: border-box !important;
}
body .join-sidebar-menu a {
position: relative !important;
z-index: 6 !important;
display: flex !important;
align-items: center !important;
gap: 9px !important;
width: 100% !important;
min-height: 42px !important;
margin: 0 !important;
padding: 10px 10px !important;
color: var(--join-text) !important;
background: #ffffff !important;
border: 0 !important;
border-bottom: 1px solid #e7eef3 !important;
border-radius: 0 !important;
font-size: 13.5px !important;
line-height: 1.45 !important;
font-weight: 600 !important;
text-align: left !important;
text-decoration: none !important;
cursor: pointer !important;
pointer-events: auto !important;
box-sizing: border-box !important;
transition: background .18s ease, color .18s ease, padding-left .18s ease !important;
}
body .join-sidebar-menu a:last-child {
border-bottom: 0 !important;
}
body .join-sidebar-menu a span {
flex: 0 0 auto !important;
display: inline-block !important;
width: 12px !important;
color: var(--join-orange) !important;
font-size: 18px !important;
line-height: 1 !important;
font-weight: 900 !important;
text-align: center !important;
}
body .join-sidebar-menu a:hover,
body .join-sidebar-menu a:focus,
body .join-sidebar-menu a:focus-visible {
padding-left: 15px !important;
color: var(--join-dark) !important;
background: #f1f7fb !important;
text-decoration: none !important;
outline: none !important;
}
body .join-sidebar-menu a:focus-visible {
box-shadow: inset 0 0 0 2px rgba(242,139,43,.55) !important;
}
/* ---------- TOOLS BLOCK ---------- */
body .join-tools {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 9px !important;
width: 100% !important;
}
body .join-tools a {
display: block !important;
width: 100% !important;
padding: 10px 12px !important;
color: var(--join-dark) !important;
background: #f7fafc !important;
border: 1px solid var(--join-border) !important;
border-radius: 6px !important;
font-size: 13px !important;
font-weight: 700 !important;
line-height: 1.4 !important;
text-align: center !important;
text-decoration: none !important;
box-sizing: border-box !important;
}
body .join-tools a:hover,
body .join-tools a:focus {
color: #ffffff !important;
background: var(--join-blue) !important;
border-color: var(--join-blue) !important;
}
/* ---------- INDEXING BLOCK ---------- */
body .join-indexing {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 12px !important;
align-items: center !important;
width: 100% !important;
}
body .join-indexing a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 100% !important;
min-height: 58px !important;
padding: 8px !important;
background: #ffffff !important;
border: 1px solid #edf1f4 !important;
border-radius: 6px !important;
box-sizing: border-box !important;
}
body .join-indexing img {
display: block !important;
width: auto !important;
max-width: 100% !important;
max-height: 64px !important;
height: auto !important;
margin: 0 auto !important;
object-fit: contain !important;
}
/* ---------- VISITOR BLOCK ---------- */
body .join-visitor {
display: block !important;
width: 100% !important;
text-align: center !important;
}
body .join-visitor img,
body .join-visitor iframe {
display: block !important;
max-width: 100% !important;
height: auto !important;
margin: 0 auto !important;
border: 0 !important;
}
/* ---------- DESKTOP ABOUT DROPDOWN ---------- */
@media screen and (min-width: 768px) {
body .pkp_structure_head,
body .pkp_structure_head .pkp_head_wrapper,
body .pkp_structure_head .pkp_site_nav_menu,
body .pkp_structure_head .pkp_navigation_primary_row,
body .pkp_structure_head .pkp_navigation_primary_wrapper,
body .pkp_structure_head .pkp_navigation_primary {
overflow: visible !important;
}
body .pkp_navigation_primary > li {
position: relative !important;
}
body .pkp_navigation_primary > li > ul {
position: absolute !important;
top: 100% !important;
left: 0 !important;
z-index: 9999 !important;
min-width: 230px !important;
margin: 0 !important;
padding: 6px 0 !important;
background: #ffffff !important;
border: 1px solid var(--join-border) !important;
border-radius: 0 0 8px 8px !important;
box-shadow: 0 10px 24px rgba(7,59,102,.16) !important;
}
/* OJS controls visibility; these selectors ensure hover/focus always works */
body .pkp_navigation_primary > li:hover > ul,
body .pkp_navigation_primary > li:focus-within > ul {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
pointer-events: auto !important;
}
body .pkp_navigation_primary > li > ul > li > a {
display: block !important;
width: 100% !important;
padding: 10px 14px !important;
white-space: normal !important;
box-sizing: border-box !important;
}
}
/* ---------- MOBILE SIDEBAR ---------- */
@media screen and (max-width: 767px) {
body .pkp_structure_sidebar {
display: block !important;
width: 100% !important;
max-width: 100% !important;
margin-top: 24px !important;
}
body .pkp_structure_sidebar .pkp_block {
width: 100% !important;
margin-bottom: 16px !important;
}
body .join-sidebar-menu a {
min-height: 44px !important;
padding: 11px 10px !important;
font-size: 14px !important;
}
body .join-sidebar-menu a:hover,
body .join-sidebar-menu a:focus {
padding-left: 14px !important;
}
}
/* ---------- SAFETY: LINKS MUST STAY INTERACTIVE ---------- */
body .pkp_structure_sidebar,
body .pkp_structure_sidebar .pkp_block,
body .pkp_structure_sidebar .pkp_block .content,
body .join-sidebar-menu,
body .join-sidebar-menu a {
pointer-events: auto !important;
}
/* ==========================================================
END JOIN THEME v2.4
========================================================== */
/* ==========================================================
JOIN THEME v2.5 — MAKE A SUBMISSION + MOBILE SIDEBAR FIX
OJS 3.3.x — FINAL OVERRIDE
========================================================== */
body .pkp_structure_sidebar .block_make_submission {
display:block!important;width:100%!important;margin:0 0 22px!important;padding:0!important;
background:#fff!important;border:1px solid var(--join-border)!important;border-radius:10px!important;
box-shadow:0 5px 18px rgba(7,59,102,.08)!important;overflow:hidden!important;box-sizing:border-box!important;
}
body .pkp_structure_sidebar .block_make_submission .content {
display:block!important;width:100%!important;margin:0!important;padding:14px!important;background:#fff!important;box-sizing:border-box!important;
}
body .pkp_structure_sidebar .block_make_submission a {
position:relative!important;display:flex!important;align-items:center!important;justify-content:flex-start!important;
width:100%!important;min-height:54px!important;margin:0!important;padding:14px 18px!important;color:#fff!important;
background:linear-gradient(135deg,var(--join-orange),#d87420)!important;border:0!important;border-radius:7px!important;
font-size:13px!important;line-height:1.3!important;font-weight:800!important;letter-spacing:.65px!important;
text-transform:uppercase!important;text-align:left!important;text-decoration:none!important;
box-shadow:0 6px 15px rgba(242,139,43,.22)!important;box-sizing:border-box!important;
transition:background .20s ease,transform .20s ease,box-shadow .20s ease!important;
}
body .pkp_structure_sidebar .block_make_submission a::before {
content:"›"!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;
flex:0 0 auto!important;margin-right:10px!important;color:#fff!important;font-size:22px!important;line-height:1!important;font-weight:900!important;
}
body .pkp_structure_sidebar .block_make_submission a:hover,
body .pkp_structure_sidebar .block_make_submission a:focus {
color:#fff!important;background:linear-gradient(135deg,var(--join-green),#3f8d31)!important;
transform:translateY(-1px)!important;box-shadow:0 8px 18px rgba(89,168,68,.24)!important;text-decoration:none!important;
}
body .pkp_structure_sidebar .block_make_submission a:focus-visible {outline:3px solid rgba(242,139,43,.35)!important;outline-offset:3px!important;}
body .pkp_structure_sidebar {box-sizing:border-box!important;overflow-wrap:anywhere!important;word-wrap:break-word!important;}
body .pkp_structure_sidebar *,body .pkp_structure_sidebar *::before,body .pkp_structure_sidebar *::after {box-sizing:border-box!important;}
body .pkp_structure_sidebar .pkp_block,body .pkp_structure_sidebar .pkp_block .content,
body .join-sidebar-menu,body .join-tools,body .join-indexing,body .join-visitor {max-width:100%!important;}
body .pkp_structure_sidebar img {max-width:100%!important;height:auto!important;}
@media screen and (max-width:991px) {
body .pkp_structure_sidebar .block_make_submission a {min-height:52px!important;padding:13px 16px!important;font-size:12.5px!important;letter-spacing:.55px!important;}
}
@media screen and (max-width:767px) {
body .pkp_structure_sidebar {display:block!important;width:100%!important;max-width:100%!important;min-width:0!important;margin:28px 0 0!important;padding:0 18px!important;box-sizing:border-box!important;}
body .pkp_structure_sidebar .pkp_block {width:100%!important;max-width:100%!important;margin:0 0 16px!important;border-radius:8px!important;box-sizing:border-box!important;}
body .pkp_structure_sidebar .block_make_submission {width:100%!important;max-width:100%!important;margin-bottom:16px!important;}
body .pkp_structure_sidebar .block_make_submission .content {padding:12px!important;}
body .pkp_structure_sidebar .block_make_submission a {display:flex!important;align-items:center!important;justify-content:flex-start!important;width:100%!important;min-height:50px!important;padding:13px 15px!important;font-size:12.5px!important;line-height:1.35!important;letter-spacing:.55px!important;text-transform:uppercase!important;text-align:left!important;white-space:normal!important;border-radius:6px!important;}
body .pkp_structure_sidebar .block_make_submission a::before {margin-right:9px!important;font-size:20px!important;}
body .join-sidebar-menu a {min-height:46px!important;padding:11px 10px!important;font-size:14px!important;}
body .join-tools a {min-height:44px!important;padding:11px 12px!important;font-size:13px!important;}
body .join-indexing {width:100%!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important;}
body .join-indexing a {min-width:0!important;min-height:58px!important;padding:8px!important;}
body .join-indexing img {max-width:100%!important;max-height:50px!important;object-fit:contain!important;}
body .join-visitor {width:100%!important;overflow:hidden!important;}
body .join-visitor iframe {display:block!important;width:100%!important;max-width:100%!important;margin:0 auto!important;border:0!important;}
}
@media screen and (max-width:480px) {
body .pkp_structure_sidebar {padding-left:14px!important;padding-right:14px!important;}
body .pkp_structure_sidebar .block_make_submission a {min-height:48px!important;padding:12px 14px!important;font-size:12px!important;letter-spacing:.45px!important;}
body .join-sidebar-menu a {font-size:13.5px!important;}
body .join-indexing {grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important;}
}
@media screen and (max-width:360px) {
body .pkp_structure_sidebar {padding-left:10px!important;padding-right:10px!important;}
body .pkp_structure_sidebar .block_make_submission a {padding:11px 12px!important;font-size:11.5px!important;letter-spacing:.35px!important;}
body .join-indexing {grid-template-columns:1fr!important;}
}
/* ==========================================================
END JOIN THEME v2.5
========================================================== */
/* ==========================================================
JOIN THEME v2.6 — NO SUBMISSION ARROW + COMPACT INDEXING
OJS 3.3.0-22
========================================================== */
/* Remove the > / chevron before MAKE A SUBMISSION */
body .pkp_structure_sidebar .block_make_submission a::before {
content: none !important;
display: none !important;
margin: 0 !important;
}
/* Keep submission text clean, uppercase and left aligned */
body .pkp_structure_sidebar .block_make_submission a {
justify-content: flex-start !important;
text-align: left !important;
text-transform: uppercase !important;
padding-left: 18px !important;
}
/* Compact indexing card / logos */
body .pkp_structure_sidebar .join-indexing {
display: grid !important;
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 10px !important;
align-items: center !important;
width: 100% !important;
}
body .pkp_structure_sidebar .join-indexing a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
min-height: 54px !important;
padding: 7px 9px !important;
overflow: hidden !important;
}
body .pkp_structure_sidebar .join-indexing img {
display: block !important;
width: auto !important;
height: auto !important;
max-width: 112px !important;
max-height: 42px !important;
margin: 0 auto !important;
object-fit: contain !important;
}
/* Also constrain images when indexing logos are inside a generic custom block */
body .pkp_structure_sidebar .pkp_block .content .join-indexing img,
body .pkp_structure_sidebar .pkp_block .content a img[alt*="Scopus" i],
body .pkp_structure_sidebar .pkp_block .content a img[alt*="Garuda" i],
body .pkp_structure_sidebar .pkp_block .content a img[alt*="Sinta" i],
body .pkp_structure_sidebar .pkp_block .content a img[alt*="Google Scholar" i],
body .pkp_structure_sidebar .pkp_block .content a img[alt*="Crossref" i],
body .pkp_structure_sidebar .pkp_block .content a img[alt*="DOAJ" i] {
width: auto !important;
height: auto !important;
max-width: 112px !important;
max-height: 42px !important;
object-fit: contain !important;
}
@media screen and (max-width: 767px) {
body .pkp_structure_sidebar .block_make_submission a {
padding-left: 15px !important;
}
body .pkp_structure_sidebar .join-indexing {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
gap: 8px !important;
}
body .pkp_structure_sidebar .join-indexing a {
min-height: 50px !important;
padding: 6px 8px !important;
}
body .pkp_structure_sidebar .join-indexing img {
max-width: 96px !important;
max-height: 36px !important;
}
}
@media screen and (max-width: 360px) {
body .pkp_structure_sidebar .join-indexing {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body .pkp_structure_sidebar .join-indexing img {
max-width: 82px !important;
max-height: 32px !important;
}
}
/* ==========================================================
END JOIN THEME v2.6
========================================================== */