/*
╔══════════════════════════════════════════════════════════════╗
║ OJS 3.4 — Reformed Church University Custom Theme ║
║ Journal of Inclusive & Innovative Practice (JIIP) ║
║ Version : 2.0 ║
║ Colours : Sky Blue (#0ea5e9) · Navy (#075985) · White ║
║ Fonts : Playfair Display (headings) · Inter (body) ║
╠══════════════════════════════════════════════════════════════╣
║ HOW TO INSTALL ║
║ 1. Log in to OJS as Journal Manager / Admin ║
║ 2. Go to Website Settings → Appearance → Advanced ║
║ 3. Upload this file under "Journal Stylesheet" ║
║ 4. Click Save — changes apply immediately ║
╠══════════════════════════════════════════════════════════════╣
║ SECTIONS IN THIS FILE ║
║ • Design Tokens (CSS variables) ║
║ • Vertical border line removal ║
║ • Top bar · Header · Primary nav · Breadcrumbs ║
║ • Homepage hero · Article cards · Sidebar blocks ║
║ • Article detail · Issue TOC · Archives ║
║ • Login · Register · Search (all centred) ║
║ • Lost password · Contact · Static pages ║
║ • Author submission wizard · User dashboard ║
║ • Reviewer / Editor interface · User profile ║
║ • Announcements · Statistics · Admin panel ║
║ • Vue.js component overrides (modals, lists, dropdowns) ║
║ • TinyMCE editor · File manager · Email composer ║
║ • Language toggle · Reader toolbar · Accessibility ║
║ • Dark mode (prefers-color-scheme: dark) ║
║ • Responsive: tablet + mobile · Print stylesheet ║
║ • Safety-net dropdown text fix (always last) ║
╚══════════════════════════════════════════════════════════════╝
*/
/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Inter:wght@300;400;500;600&display=swap');
/* ── Design Tokens ── */
:root {
--sky: #0ea5e9; /* primary sky blue */
--sky-dark: #0284c7; /* hover / active */
--sky-deeper: #0c5f8f; /* nav background */
--sky-nav: #075985; /* sticky nav */
--sky-light: #e0f2fe; /* tint backgrounds */
--sky-pale: #f0f9ff; /* page background */
--white: #ffffff;
--slate: #1e293b; /* headings */
--body: #334155; /* body text */
--muted: #64748b; /* secondary text */
--border: #e2e8f0; /* dividers */
--light: #f8fafc; /* card backgrounds */
--gold: #f59e0b; /* accent — dates, badges */
--radius: 8px;
--font-head: 'Playfair Display', Georgia, serif;
--font-body: 'Inter', system-ui, sans-serif;
--shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
--shadow-md: 0 4px 16px rgba(0,0,0,0.1);
--transition: all 0.18s ease;
}
/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; }
body {
font-family: var(--font-body);
font-size: 15px;
line-height: 1.7;
color: var(--body);
background: var(--sky-pale);
-webkit-font-smoothing: antialiased;
}
a { color: var(--sky-dark); text-decoration: none; transition: var(--transition); }
a:hover { color: var(--sky); }
h1,h2,h3,h4,h5,h6 { font-family: var(--font-head); color: var(--slate); line-height: 1.3; }
/* ═══════════════════════════════════════
KILL THE VERTICAL BORDER LINES
These are the column dividers OJS adds
to the content/sidebar wrapper
═══════════════════════════════════════ */
.pkp_structure_page,
.pkp_structure_content,
.pkp_structure_sidebar,
.pkp_structure_main,
.pkp_structure_content > *,
.pkp_helpers_clear::before,
.pkp_helpers_clear::after,
[class*="pkp_structure"]::before,
[class*="pkp_structure"]::after {
border-left: none !important;
border-right: none !important;
outline: none !important;
}
/* Remove the grey column background that OJS adds */
.pkp_structure_page {
background: transparent !important;
}
/* The vertical line often comes from a pseudo-element or inner div */
#pkp_content_main::before,
#pkp_content_main::after,
.pkp_structure_page > .pkp_helpers_clear > div {
border: none !important;
box-shadow: none !important;
}
/* ═══════════════════════════════════════
TOP BAR (Register / Login links)
═══════════════════════════════════════ */
.pkp_structure_top {
background: var(--sky-deeper) !important;
padding: 6px 28px !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 0;
}
.pkp_structure_top ul {
list-style: none;
margin: 0; padding: 0;
display: flex; gap: 0;
}
.pkp_structure_top li a,
.pkp_structure_top a {
font-size: 12px !important;
color: rgba(255,255,255,0.65) !important;
padding: 4px 14px !important;
letter-spacing: 0.3px;
border-right: 1px solid rgba(255,255,255,0.12);
transition: var(--transition);
}
.pkp_structure_top li:last-child a { border-right: none !important; }
.pkp_structure_top li a:hover { color: #ffffff !important; }
/* ═══════════════════════════════════════
HEADER / MASTHEAD
═══════════════════════════════════════ */
.pkp_structure_head {
background: var(--sky-nav) !important;
border-bottom: none !important;
box-shadow: 0 2px 12px rgba(0,0,0,0.2) !important;
position: sticky !important;
top: 0 !important;
z-index: 999 !important;
}
/* Journal name / logo area */
.pkp_site_name {
padding: 14px 28px !important;
}
.pkp_site_name a,
.pkp_site_name_logo,
.pkp_site_name > a {
font-family: var(--font-head) !important;
font-size: 22px !important;
font-weight: 700 !important;
color: #ffffff !important;
text-decoration: none !important;
letter-spacing: 0.2px !important;
}
.pkp_site_name a:hover { color: var(--sky-light) !important; }
/* Tagline under journal name */
.pkp_site_name_tagline {
font-family: var(--font-body) !important;
font-size: 11px !important;
letter-spacing: 1.2px !important;
text-transform: uppercase !important;
color: rgba(255,255,255,0.5) !important;
font-weight: 300 !important;
display: block !important;
}
/* RCU logo image */
.pkp_site_name img {
max-height: 56px !important;
width: auto !important;
}
/* ═══════════════════════════════════════
PRIMARY NAVIGATION
═══════════════════════════════════════ */
.pkp_navigation_primary,
.pkp_site_nav_menu {
background: var(--sky) !important;
border-top: 1px solid rgba(255,255,255,0.15) !important;
padding: 0 20px !important;
border-bottom: none !important;
}
.pkp_navigation_primary ul,
.pkp_site_nav_menu ul {
list-style: none;
margin: 0; padding: 0;
display: flex; align-items: center;
}
.pkp_navigation_primary li a,
.pkp_site_nav_menu li a {
display: block !important;
color: rgba(255,255,255,0.88) !important;
font-size: 13px !important;
font-weight: 500 !important;
padding: 13px 18px !important;
letter-spacing: 0.2px !important;
text-decoration: none !important;
border-bottom: 3px solid transparent !important;
transition: var(--transition) !important;
}
.pkp_navigation_primary li a:hover,
.pkp_site_nav_menu li a:hover {
color: #ffffff !important;
background: rgba(255,255,255,0.12) !important;
border-bottom-color: rgba(255,255,255,0.6) !important;
}
.pkp_navigation_primary li.current > a,
.pkp_site_nav_menu li.current > a,
.pkp_navigation_primary li.active > a {
color: #ffffff !important;
border-bottom-color: #ffffff !important;
background: rgba(255,255,255,0.15) !important;
}
/* Search in nav */
.pkp_navigation_primary .search,
.search_toggle_btn {
margin-left: auto !important;
color: rgba(255,255,255,0.8) !important;
font-size: 13px !important;
display: flex; align-items: center; gap: 6px;
padding: 8px 16px !important;
border: 1px solid rgba(255,255,255,0.25) !important;
border-radius: 4px !important;
cursor: pointer !important;
background: transparent !important;
transition: var(--transition) !important;
}
.search_toggle_btn:hover {
background: rgba(255,255,255,0.15) !important;
color: #fff !important;
}
/* Dropdown menu — container */
.pkp_navigation_primary .children,
.pkp_site_nav_menu .sub-menu,
.pkp_navigation_primary li ul,
.pkp_site_nav_menu li ul,
nav ul ul,
.nav_menu ul ul {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-top: 3px solid var(--sky) !important;
border-radius: 0 0 var(--radius) var(--radius) !important;
box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
min-width: 210px !important;
}
/* Dropdown items — force dark text with maximum specificity */
.pkp_navigation_primary .children li a,
.pkp_navigation_primary li ul li a,
.pkp_navigation_primary ul ul li a,
.pkp_site_nav_menu .sub-menu li a,
.pkp_site_nav_menu li ul li a,
.pkp_site_nav_menu ul ul li a,
nav ul ul li a,
.nav_menu ul ul li a {
color: var(--slate) !important; /* dark slate — visible on white */
background: transparent !important;
padding: 10px 18px !important;
font-size: 13px !important;
font-weight: 400 !important;
border-bottom: 1px solid var(--border) !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
border-bottom-color: var(--border) !important; /* override the 3px transparent bottom */
display: block !important;
line-height: 1.4 !important;
text-decoration: none !important;
}
.pkp_navigation_primary .children li:last-child a,
.pkp_site_nav_menu .sub-menu li:last-child a,
nav ul ul li:last-child a {
border-bottom: none !important;
}
/* Dropdown hover */
.pkp_navigation_primary .children li a:hover,
.pkp_navigation_primary ul ul li a:hover,
.pkp_site_nav_menu .sub-menu li a:hover,
.pkp_site_nav_menu ul ul li a:hover,
nav ul ul li a:hover {
color: var(--sky-nav) !important;
background: var(--sky-pale) !important;
padding-left: 22px !important; /* subtle indent on hover */
}
/* ═══════════════════════════════════════
BREADCRUMBS
═══════════════════════════════════════ */
.cmp_breadcrumbs,
.pkp_structure_breadcrumbs,
nav.cmp_breadcrumbs,
ol.cmp_breadcrumbs,
.breadcrumbs {
background: #ffffff !important;
background-color: #ffffff !important;
border-bottom: 1px solid #e2e8f0 !important;
border-top: none !important;
padding: 10px 28px !important;
font-size: 12px !important;
color: #64748b !important;
}
.cmp_breadcrumbs *,
.pkp_structure_breadcrumbs * {
color: #64748b !important;
}
.cmp_breadcrumbs a,
.pkp_structure_breadcrumbs a { color: #64748b !important; }
.cmp_breadcrumbs a:hover { color: #0ea5e9 !important; }
.cmp_breadcrumbs .separator { color: #e2e8f0 !important; margin: 0 6px; }
.cmp_breadcrumbs .current,
li[aria-current="page"] { color: #0284c7 !important; font-weight: 500 !important; }
/* ═══════════════════════════════════════
PAGE BACKGROUND — NUKE THE DARK THEME
The OJS default theme sets dark navy on
body and every structural wrapper.
These rules override all of them.
═══════════════════════════════════════ */
/* 1 — body and root */
html,
body,
body.pkp_page_index,
body.pkp_page_issue,
body.pkp_page_article,
body.pkp_page_catalog,
body.pkp_page_search,
body.pkp_page_login,
body.pkp_page_register,
body.pkp_page_about,
body.pkp_page_announcement,
body.pkp_page_announcements,
body.pkp_page_submissions,
body.pkp_page_dashboard,
body.pkp_page_submission,
body.pkp_page_reviewer,
body.pkp_page_workflow,
body.pkp_page_profile,
body.pkp_page_admin,
body.pkp_page_stats,
body[class*="pkp_page_"] {
background-color: #f0f9ff !important; /* --sky-pale */
background-image: none !important;
}
/* 2 — every structural wrapper */
.pkp_structure_page,
#pkp_page,
.pkp_structure_page > *,
.pkp_structure_content,
.pkp_structure_main,
.pkp_structure_sidebar,
#pkp_content_main,
#pkp_content_sidebar,
#main-grid,
.pkp_main_wrapper,
.pkp_page_content,
.pkp_page_wrapper,
[id^="pkp_"],
[class^="pkp_structure_"] {
background-color: transparent !important;
background-image: none !important;
border-left: none !important;
border-right: none !important;
box-shadow: none !important;
}
/* 3 — the inner content column that OJS makes dark */
#pkp_content_main {
background-color: transparent !important;
}
/* 4 — OJS default theme uses .pkp_structure_page with a
coloured background; nuke it directly */
.pkp_structure_page {
background: #f0f9ff !important;
background-color: #f0f9ff !important;
}
/* 5 — The scrollable page area (some OJS builds use this) */
.app__page,
.pkp_app,
#app {
background: #f0f9ff !important;
}
/* 6 — Content wrapper max-width and padding */
.pkp_structure_main {
max-width: 1120px !important;
margin: 0 auto !important;
padding: 36px 28px !important;
border: none !important;
background: transparent !important;
}
/* 7 — Remove ALL remaining border lines on wrappers */
#pkp_content_main,
#pkp_content_sidebar,
.pkp_structure_content,
.pkp_structure_sidebar {
border: none !important;
border-left: none !important;
border-right: none !important;
background-color: transparent !important;
box-shadow: none !important;
outline: none !important;
}
/* 8 — Breadcrumb region sometimes carries the dark bg */
.pkp_structure_head ~ div,
.pkp_structure_breadcrumbs ~ div,
.pkp_structure_body {
background-color: #f0f9ff !important;
}
/* 9 — Article / issue content area specifically */
.pkp_page_issue .pkp_structure_main,
.pkp_page_article .pkp_structure_main,
.pkp_page_catalog .pkp_structure_main {
background: transparent !important;
}
/* 10 — OJS wraps everything in a region div; light it up */
[role="region"],
[role="main"],
main {
background: transparent !important;
}
/* Page title — always dark slate */
h1.page_title,
.page_title,
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3 {
font-family: var(--font-head) !important;
font-weight: 700 !important;
color: #1e293b !important; /* --slate, hardcoded for specificity */
line-height: 1.25 !important;
}
h1.page_title,
.page_title {
font-size: 28px !important;
margin-bottom: 6px !important;
}
/* Body text in content area — always readable dark */
.pkp_structure_main p,
.pkp_structure_main li,
.pkp_structure_main td,
.pkp_structure_main span:not([class*="badge"]):not([class*="type"]) {
color: #334155 !important; /* --body */
}
/* Published date, meta info */
.pkp_structure_main .published,
.pkp_structure_main .date,
.pkp_structure_main .numArticles {
color: #64748b !important; /* --muted */
}
/* Article title links in TOC / listings */
.obj_article_summary h3 a,
.obj_article_summary .title a,
.pkp_structure_main h3 a,
.pkp_structure_main h2 a {
color: #1e293b !important;
}
.obj_article_summary h3 a:hover,
.obj_article_summary .title a:hover {
color: #0284c7 !important; /* --sky-dark */
}
/* Author names */
.obj_article_summary .authors,
.pkp_structure_main .authors {
color: #64748b !important;
}
/* ═══════════════════════════════════════
HOMEPAGE — Journal description
═══════════════════════════════════════ */
.journal_description,
.journal_summary_section,
.pkp_page_index .description {
background: var(--sky-nav) !important;
color: rgba(255,255,255,0.8) !important;
padding: 40px 44px !important;
border-radius: var(--radius) !important;
margin-bottom: 36px !important;
font-size: 15px !important;
line-height: 1.75 !important;
font-weight: 300 !important;
border: none !important;
position: relative;
overflow: hidden;
}
.journal_description::after {
content: '';
position: absolute;
right: -40px; bottom: -40px;
width: 200px; height: 200px;
border: 1px solid rgba(255,255,255,0.08);
border-radius: 50%;
pointer-events: none;
}
.journal_description h2,
.journal_summary_section h2 {
color: #ffffff !important;
font-size: 22px !important;
margin-bottom: 12px !important;
}
/* Current issue heading on homepage */
.current_issue_title,
.pkp_page_index .issue_header h2,
.issue_header h2 {
font-family: var(--font-head) !important;
font-size: 20px !important;
font-weight: 700 !important;
color: var(--slate) !important;
padding-bottom: 10px !important;
border-bottom: 2px solid var(--sky) !important;
margin-bottom: 24px !important;
}
/* "No Current Issue" state */
.pkp_page_index .no_issues,
.pkp_page_current .no_issues {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-left: 4px solid var(--sky) !important;
border-radius: 0 var(--radius) var(--radius) 0 !important;
padding: 20px 24px !important;
font-size: 14px !important;
color: var(--muted) !important;
}
/* ═══════════════════════════════════════
ARTICLE CARDS / LISTINGS
All colours hardcoded (no CSS variables)
so they beat the OJS default theme's
white-text-on-dark rules.
═══════════════════════════════════════ */
.obj_article_summary {
padding: 22px 0 !important;
border-bottom: 1px solid #e2e8f0 !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
background: transparent !important;
}
.obj_article_summary:last-child { border-bottom: none !important; }
/* ── Article title (every possible selector OJS uses) ── */
.obj_article_summary .title,
.obj_article_summary .title a,
.obj_article_summary h3.title,
.obj_article_summary h3.title a,
.obj_article_summary h3 a,
.obj_article_summary > h3 a,
.obj_article_summary .obj_article_summary_title,
.obj_article_summary .obj_article_summary_title a,
body .obj_article_summary a,
body .obj_article_summary h3 a {
font-family: 'Playfair Display', Georgia, serif !important;
font-size: 17px !important;
font-weight: 600 !important;
color: #1e293b !important;
line-height: 1.35 !important;
text-decoration: none !important;
}
.obj_article_summary .title a:hover,
.obj_article_summary h3.title a:hover,
.obj_article_summary h3 a:hover,
body .obj_article_summary a:hover {
color: #0284c7 !important;
text-decoration: none !important;
}
/* ── Authors ── */
.obj_article_summary .authors,
.obj_article_summary .authors *,
body .obj_article_summary .authors {
font-size: 13px !important;
color: #64748b !important;
margin: 5px 0 8px !important;
}
/* ── Abstract ── */
.obj_article_summary .abstract,
.obj_article_summary .abstract *,
body .obj_article_summary .abstract {
font-size: 13.5px !important;
color: #334155 !important;
line-height: 1.65 !important;
margin-bottom: 12px !important;
}
/* ── Section / issue heading inside listing ── */
.obj_article_summary .section,
.obj_article_summary .issue,
.obj_article_summary .published {
font-size: 12px !important;
color: #64748b !important;
}
/* ── DOI ── */
.obj_article_summary .doi,
.obj_article_summary .doi a {
font-size: 12px !important;
color: #64748b !important;
}
/* ── PDF / HTML galley buttons ── */
.obj_article_summary .galleys_links a,
.obj_article_summary .obj_galley_link,
body .obj_article_summary .galleys_links a {
display: inline-block !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
color: #075985 !important;
background: #e0f2fe !important;
border: 1px solid rgba(14,165,233,0.3) !important;
padding: 4px 12px !important;
border-radius: 4px !important;
text-decoration: none !important;
margin-right: 6px !important;
transition: all 0.18s ease !important;
}
.obj_article_summary .galleys_links a:hover,
.obj_article_summary .obj_galley_link:hover {
background: #0ea5e9 !important;
color: #ffffff !important;
border-color: #0ea5e9 !important;
}
/* ═══════════════════════════════════════
ARTICLE DETAIL PAGE
All backgrounds hardcoded white/light.
All text hardcoded dark.
═══════════════════════════════════════ */
.obj_article_details,
#pkp_content_main .obj_article_details {
background: #ffffff !important;
background-color: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important;
padding: 36px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
color: #334155 !important;
}
/* Force ALL text inside article details to be dark */
.obj_article_details *,
#pkp_content_main .obj_article_details * {
color: #334155 !important;
}
/* Article page title */
.obj_article_details h1.page_title,
#pkp_content_main .obj_article_details h1 {
color: #1e293b !important;
font-family: 'Playfair Display', Georgia, serif !important;
font-size: 26px !important;
font-weight: 700 !important;
line-height: 1.3 !important;
margin-bottom: 16px !important;
}
/* Authors — re-apply after wildcard override */
.obj_article_details .authors,
.obj_article_details .authors *,
#pkp_content_main .obj_article_details .authors {
font-size: 14px !important;
color: #64748b !important;
margin-bottom: 8px !important;
}
/* Author name links */
.obj_article_details .authors a,
#pkp_content_main .obj_article_details .authors a {
color: #0284c7 !important;
font-weight: 500 !important;
}
/* Keywords section */
.obj_article_details .keywords,
.obj_article_details .keywords *,
#pkp_content_main .obj_article_details .keywords {
font-size: 13px !important;
color: #334155 !important;
margin: 10px 0 !important;
}
.obj_article_details .keywords .label,
.obj_article_details .keywords strong {
font-weight: 600 !important;
color: #1e293b !important;
font-size: 12px !important;
}
.obj_article_details .keywords .value,
.obj_article_details .keywords .value a,
.obj_article_details .keywords a {
color: #0284c7 !important;
}
/* Abstract — white/light background, dark text */
.obj_article_details .abstract,
.obj_article_details section.abstract,
.obj_article_details .article-abstract,
#pkp_content_main .obj_article_details .abstract,
#pkp_content_main .abstract {
background: #f0f9ff !important;
background-color: #f0f9ff !important;
border-left: 3px solid #0ea5e9 !important;
border-radius: 0 8px 8px 0 !important;
padding: 18px 22px !important;
margin: 22px 0 !important;
font-size: 14px !important;
line-height: 1.75 !important;
color: #334155 !important;
}
.obj_article_details .abstract *,
#pkp_content_main .abstract * {
color: #334155 !important;
background: transparent !important;
}
/* Abstract heading (ABSTRACT label) */
.obj_article_details .abstract h2,
.obj_article_details .abstract h3,
.obj_article_details .abstract .label,
#pkp_content_main .abstract h2,
#pkp_content_main .abstract h3 {
font-size: 10px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
color: #0284c7 !important;
margin-bottom: 10px !important;
font-family: 'Inter', system-ui, sans-serif !important;
}
/* DOI */
.obj_article_details .doi,
.obj_article_details .doi *,
.obj_article_details .doi a {
font-size: 12px !important;
color: #64748b !important;
word-break: break-all !important;
}
/* Published / section / issue meta */
.obj_article_details .published,
.obj_article_details .section,
.obj_article_details .issue,
.obj_article_details .citation_format_pick {
font-size: 12px !important;
color: #64748b !important;
}
/* Galley download buttons — keep white text on blue bg */
.obj_article_details .galleys_links a,
.obj_article_details .obj_galley_link,
#pkp_content_main .obj_article_details .galleys_links a {
display: inline-block !important;
background: #075985 !important;
background-color: #075985 !important;
color: #ffffff !important;
font-size: 12px !important;
font-weight: 600 !important;
padding: 9px 22px !important;
border-radius: 5px !important;
margin-right: 8px !important;
letter-spacing: 0.3px !important;
text-decoration: none !important;
border: none !important;
transition: all 0.18s ease !important;
}
.obj_article_details .galleys_links a:hover,
#pkp_content_main .obj_article_details .galleys_links a:hover {
background: #0ea5e9 !important;
background-color: #0ea5e9 !important;
color: #ffffff !important;
}
/* References section */
.obj_article_details .references,
.obj_article_details .references * {
color: #334155 !important;
}
.obj_article_details .references h2 {
color: #1e293b !important;
font-size: 16px !important;
margin-bottom: 12px !important;
}
.obj_article_details .references li {
font-size: 13px !important;
line-height: 1.65 !important;
margin-bottom: 10px !important;
padding-bottom: 10px !important;
border-bottom: 1px solid #e2e8f0 !important;
}
.obj_article_details .references li:last-child { border-bottom: none !important; }
/* ═══════════════════════════════════════
ISSUE TOC
═══════════════════════════════════════ */
.obj_issue_toc .section > h2,
.issue_toc .section_title {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
color: var(--sky-dark) !important;
padding: 8px 0 8px 12px !important;
border-left: 3px solid var(--sky) !important;
border-bottom: 1px solid var(--border) !important;
margin: 28px 0 14px !important;
background: var(--sky-pale) !important;
border-radius: 0 4px 4px 0 !important;
}
/* ═══════════════════════════════════════
ARCHIVES PAGE — Issue cards
OJS renders these with dark navy bg;
force them all white with dark text.
═══════════════════════════════════════ */
.obj_issue_summary,
.pkp_page_catalog .obj_issue_summary,
.pkp_page_archive .obj_issue_summary,
.issue_entry,
.pkp_catalog_issue,
.issues_archive .issue,
/* Vue ListPanel issue rows */
.listPanel__item,
.pkpListPanel .listPanel__item,
.pkp_catalog_issue_btn,
/* the accordion-style issue rows in OJS 3.4 */
.pkp_page_catalog .pkp_controllers_grid .pkp_row,
.pkp_page_catalog button.accordion,
.accordion {
background: #ffffff !important;
background-color: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important;
color: #1e293b !important;
margin-bottom: 12px !important;
box-shadow: 0 1px 4px rgba(0,0,0,0.06) !important;
}
/* All text inside issue cards */
.obj_issue_summary *,
.issue_entry *,
.listPanel__item *,
.pkp_catalog_issue * {
color: #1e293b !important;
}
/* Issue title links */
.obj_issue_summary h2 a,
.obj_issue_summary .title a,
.obj_issue_summary a,
.issue_entry a,
.listPanel__item a,
.pkp_page_catalog a {
color: #1e293b !important;
text-decoration: none !important;
font-family: 'Playfair Display', Georgia, serif !important;
font-weight: 600 !important;
}
.obj_issue_summary h2 a:hover,
.obj_issue_summary a:hover,
.issue_entry a:hover,
.listPanel__item a:hover {
color: #0284c7 !important;
}
/* Issue badges / series labels */
.obj_issue_summary .series,
.obj_issue_summary .pkp_issue_series {
background: #e0f2fe !important;
color: #075985 !important;
border: 1px solid rgba(14,165,233,0.2) !important;
font-size: 10px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
padding: 2px 8px !important;
border-radius: 3px !important;
}
/* ── Homepage: Current Issue heading + issue title ── */
/* These are white-on-white on the homepage */
.pkp_page_index .current_issue_title,
.pkp_page_index h2,
.pkp_page_index h3,
.pkp_page_index .issue_title,
.pkp_page_index .pkp_structure_main h2,
.pkp_page_index .pkp_structure_main h3,
.pkp_page_index .pkp_structure_main a {
color: #1e293b !important;
}
/* "Current Issue" label */
.pkp_page_index .label,
.pkp_page_index .current_issue_label,
.current_issue_title {
color: #075985 !important;
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
}
/* Published date on homepage */
.pkp_page_index .published,
.pkp_page_index .pkp_structure_main .published,
.pkp_page_index .date {
color: #64748b !important;
font-size: 13px !important;
}
/* "View All Issues" link */
.pkp_page_index a[href*="issue"],
.pkp_page_index .pkp_structure_main a {
color: #0284c7 !important;
}
.pkp_page_index a[href*="issue"]:hover { color: #0ea5e9 !important; }
/* ═══════════════════════════════════════
SIDEBAR BLOCKS
═══════════════════════════════════════ */
.pkp_block,
#pkp_content_sidebar .pkp_block,
.pkp_structure_sidebar .pkp_block {
background: #ffffff !important;
background-color: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 8px !important;
padding: 18px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
margin-bottom: 20px !important;
color: #334155 !important;
}
/* Block title */
.pkp_block h2,
.pkp_block .title,
.pkp_block > h2,
#pkp_content_sidebar .pkp_block h2,
#pkp_content_sidebar h2 {
font-family: 'Inter', system-ui, sans-serif !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
color: #0284c7 !important;
margin-bottom: 14px !important;
padding-bottom: 10px !important;
border-bottom: 1px solid #e2e8f0 !important;
border-left: none !important;
border-right: none !important;
border-top: none !important;
background: transparent !important;
}
/* All text inside sidebar blocks */
.pkp_block *,
#pkp_content_sidebar .pkp_block * {
color: #334155 !important;
}
.pkp_block ul { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.pkp_block ul li { padding: 6px 0 !important; border-bottom: 1px solid #e2e8f0 !important; }
.pkp_block ul li:last-child { border-bottom: none !important; }
.pkp_block ul li a,
#pkp_content_sidebar .pkp_block a {
font-size: 13px !important;
color: #64748b !important;
text-decoration: none !important;
display: block !important;
transition: all 0.18s ease !important;
}
.pkp_block ul li a:hover,
#pkp_content_sidebar .pkp_block a:hover {
color: #0ea5e9 !important;
padding-left: 3px !important;
}
/* Search block input */
.pkp_block input[type="text"],
.pkp_block input[type="search"] {
width: 100% !important;
border: 1px solid #e2e8f0 !important;
border-radius: 5px !important;
padding: 9px 12px !important;
font-size: 13px !important;
font-family: 'Inter', system-ui, sans-serif !important;
color: #334155 !important;
background: #f0f9ff !important;
transition: all 0.18s ease !important;
}
.pkp_block input[type="search"]:focus {
outline: none !important;
border-color: #0ea5e9 !important;
background: #ffffff !important;
box-shadow: 0 0 0 3px rgba(14,165,233,0.15) !important;
}
/* ═══════════════════════════════════════
LOGIN PAGE — Centred card layout
═══════════════════════════════════════ */
/* Full-width centred wrapper */
.pkp_page_login #pkp_content_main,
.pkp_page_login .pkp_structure_content,
.pkp_page_login #main-content {
width: 100% !important;
max-width: 100% !important;
float: none !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.pkp_page_login .pkp_structure_main {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 60px 24px !important;
min-height: 70vh !important;
width: 100% !important;
}
/* Centred page title */
.pkp_page_login h1.page_title {
font-size: 26px !important;
color: var(--slate) !important;
text-align: center !important;
margin-bottom: 4px !important;
}
/* Subtitle / sub-label under title */
.pkp_page_login .subtitle,
.pkp_page_login .description {
text-align: center !important;
font-size: 13px !important;
color: var(--muted) !important;
margin-bottom: 28px !important;
}
/* The actual form card */
.pkp_page_login .login_form,
.pkp_page_login #login,
.pkp_page_login form[id*="login"],
.pkp_page_login .pkp_form {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-top: 4px solid var(--sky) !important;
border-radius: var(--radius) !important;
padding: 36px 40px !important;
width: 100% !important;
max-width: 440px !important;
box-shadow: var(--shadow-md) !important;
margin: 0 auto !important;
float: none !important;
}
/* Fields inside login form */
.pkp_page_login input[type="text"],
.pkp_page_login input[type="email"],
.pkp_page_login input[type="password"] {
width: 100% !important;
border: 1px solid var(--border) !important;
border-radius: 5px !important;
padding: 10px 14px !important;
font-size: 14px !important;
font-family: var(--font-body) !important;
color: var(--body) !important;
background: var(--sky-pale) !important;
transition: var(--transition) !important;
margin-top: 4px !important;
display: block !important;
}
.pkp_page_login input[type="text"]:focus,
.pkp_page_login input[type="email"]:focus,
.pkp_page_login input[type="password"]:focus {
outline: none !important;
border-color: var(--sky) !important;
background: var(--white) !important;
box-shadow: 0 0 0 3px rgba(14,165,233,0.15) !important;
}
.pkp_page_login label {
font-size: 13px !important;
font-weight: 500 !important;
color: var(--slate) !important;
display: block !important;
margin-bottom: 4px !important;
margin-top: 16px !important;
}
/* Submit button — full width in login */
.pkp_page_login button[type="submit"],
.pkp_page_login input[type="submit"] {
width: 100% !important;
margin-top: 20px !important;
padding: 11px !important;
font-size: 14px !important;
font-weight: 600 !important;
letter-spacing: 0.3px !important;
}
/* Forgot password / register links */
.pkp_page_login a[href*="lostPassword"],
.pkp_page_login a[href*="reset-password"],
.pkp_page_login a.forgot_password {
font-size: 12px !important;
color: var(--sky) !important;
display: block !important;
text-align: right !important;
margin-top: 6px !important;
}
.pkp_page_login .register,
.pkp_page_login a[href*="register"] {
color: var(--sky-dark) !important;
font-size: 13px !important;
}
.pkp_page_login .remember_label,
.pkp_page_login label[for="rememberPassword"] {
font-size: 13px !important;
color: var(--muted) !important;
font-weight: 400 !important;
margin-top: 12px !important;
}
/* RCU branding above login card */
.pkp_page_login::before {
content: 'Reformed Church University';
display: block;
font-family: var(--font-head);
font-size: 15px;
font-weight: 700;
color: var(--sky-nav);
text-align: center;
letter-spacing: 0.3px;
margin-bottom: 6px;
}
/* ═══════════════════════════════════════
REGISTER PAGE — Centred card layout
═══════════════════════════════════════ */
.pkp_page_register #pkp_content_main,
.pkp_page_register .pkp_structure_content {
width: 100% !important;
max-width: 100% !important;
float: none !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
}
.pkp_page_register .pkp_structure_main {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
padding: 48px 24px !important;
width: 100% !important;
}
.pkp_page_register h1.page_title {
text-align: center !important;
font-size: 24px !important;
margin-bottom: 24px !important;
}
.pkp_page_register .pkp_form,
.pkp_page_register form {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-top: 4px solid var(--sky) !important;
border-radius: var(--radius) !important;
padding: 36px 40px !important;
width: 100% !important;
max-width: 640px !important;
box-shadow: var(--shadow-md) !important;
margin: 0 auto !important;
float: none !important;
}
.pkp_page_register input[type="text"],
.pkp_page_register input[type="email"],
.pkp_page_register input[type="password"],
.pkp_page_register select,
.pkp_page_register textarea {
width: 100% !important;
border: 1px solid var(--border) !important;
border-radius: 5px !important;
padding: 10px 14px !important;
font-size: 14px !important;
font-family: var(--font-body) !important;
color: var(--body) !important;
background: var(--sky-pale) !important;
transition: var(--transition) !important;
margin-top: 4px !important;
}
.pkp_page_register input:focus,
.pkp_page_register select:focus,
.pkp_page_register textarea:focus {
outline: none !important;
border-color: var(--sky) !important;
background: var(--white) !important;
box-shadow: 0 0 0 3px rgba(14,165,233,0.15) !important;
}
.pkp_page_register button[type="submit"],
.pkp_page_register input[type="submit"] {
margin-top: 24px !important;
}
/* ═══════════════════════════════════════
SEARCH PAGE — Centred layout
═══════════════════════════════════════ */
.pkp_page_search #pkp_content_main,
.pkp_page_search .pkp_structure_content {
width: 100% !important;
max-width: 100% !important;
float: none !important;
}
.pkp_page_search .pkp_structure_main {
max-width: 780px !important;
margin: 0 auto !important;
padding: 48px 24px !important;
}
.pkp_page_search h1.page_title {
text-align: center !important;
margin-bottom: 24px !important;
}
.pkp_page_search .search_form,
.pkp_page_search form[id*="search"] {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-top: 4px solid var(--sky) !important;
border-radius: var(--radius) !important;
padding: 28px 32px !important;
margin-bottom: 28px !important;
box-shadow: var(--shadow-sm) !important;
width: 100% !important;
}
/* Search input + button inline row */
.pkp_page_search .search_form .queryInput,
.pkp_page_search input[type="text"],
.pkp_page_search input[name="query"] {
width: calc(100% - 110px) !important;
border: 1px solid var(--border) !important;
border-right: none !important;
border-radius: 5px 0 0 5px !important;
padding: 11px 16px !important;
font-size: 14px !important;
font-family: var(--font-body) !important;
color: var(--body) !important;
background: var(--sky-pale) !important;
vertical-align: middle !important;
display: inline-block !important;
}
.pkp_page_search input[type="text"]:focus,
.pkp_page_search input[name="query"]:focus {
outline: none !important;
border-color: var(--sky) !important;
background: var(--white) !important;
}
.pkp_page_search button[type="submit"],
.pkp_page_search input[type="submit"] {
width: 108px !important;
border-radius: 0 5px 5px 0 !important;
padding: 11px 16px !important;
vertical-align: middle !important;
margin-top: 0 !important;
}
/* Search results */
.pkp_page_search .search_results .obj_article_summary {
margin-bottom: 0 !important;
}
/* "No results" message */
.pkp_page_search .pkp_helpers_noResult {
text-align: center !important;
padding: 40px 24px !important;
color: var(--muted) !important;
font-size: 14px !important;
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
}
/* ═══════════════════════════════════════
GLOBAL FORMS
═══════════════════════════════════════ */
.pkp_form input[type="text"],
.pkp_form input[type="email"],
.pkp_form input[type="password"],
.pkp_form input[type="url"],
.pkp_form textarea,
.pkp_form select {
border: 1px solid var(--border) !important;
border-radius: 5px !important;
padding: 9px 13px !important;
font-size: 14px !important;
font-family: var(--font-body) !important;
color: var(--body) !important;
background: var(--white) !important;
transition: var(--transition) !important;
width: 100%;
}
.pkp_form input:focus,
.pkp_form textarea:focus,
.pkp_form select:focus {
outline: none !important;
border-color: var(--sky) !important;
box-shadow: 0 0 0 3px rgba(14,165,233,0.15) !important;
}
.pkp_form label {
font-size: 13px !important;
font-weight: 500 !important;
color: var(--slate) !important;
margin-bottom: 5px !important;
display: block !important;
}
/* ═══════════════════════════════════════
BUTTONS
═══════════════════════════════════════ */
.pkp_button,
.button,
input[type="submit"],
button[type="submit"],
.pkp_page_login button,
.submit {
background: var(--sky-nav) !important;
color: #ffffff !important;
border: none !important;
border-radius: 5px !important;
padding: 10px 24px !important;
font-size: 13px !important;
font-family: var(--font-body) !important;
font-weight: 600 !important;
letter-spacing: 0.3px !important;
cursor: pointer !important;
transition: var(--transition) !important;
display: inline-block !important;
text-decoration: none !important;
}
.pkp_button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover {
background: var(--sky) !important;
color: #ffffff !important;
}
/* Ghost / secondary button */
.pkp_button.pkp_button_offset {
background: transparent !important;
color: var(--sky-nav) !important;
border: 1px solid var(--border) !important;
}
.pkp_button.pkp_button_offset:hover {
background: var(--sky-light) !important;
border-color: var(--sky) !important;
}
/* search page styles handled in the LOGIN/REGISTER/SEARCH block above */
/* ═══════════════════════════════════════
ANNOUNCEMENTS
═══════════════════════════════════════ */
.obj_announcement_summary {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-left: 3px solid var(--sky) !important;
border-radius: 0 var(--radius) var(--radius) 0 !important;
padding: 18px 22px !important;
margin-bottom: 14px !important;
}
.obj_announcement_summary .title a {
font-family: var(--font-head);
font-size: 16px;
color: var(--slate);
}
.obj_announcement_summary .date { font-size: 12px; color: var(--muted); }
/* ═══════════════════════════════════════
PAGINATION
═══════════════════════════════════════ */
.pkp_pagination,
.cmp_pagination {
display: flex !important;
gap: 5px !important;
align-items: center !important;
margin-top: 28px !important;
flex-wrap: wrap !important;
}
.pkp_pagination a,
.pkp_pagination span,
.cmp_pagination a,
.cmp_pagination span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 36px !important;
height: 36px !important;
padding: 0 12px !important;
font-size: 13px !important;
border: 1px solid var(--border) !important;
border-radius: 5px !important;
color: var(--muted) !important;
background: var(--white) !important;
transition: var(--transition) !important;
text-decoration: none !important;
}
.pkp_pagination a:hover { background: var(--sky-light) !important; border-color: var(--sky) !important; color: var(--sky-nav) !important; }
.pkp_pagination .current, .cmp_pagination .current {
background: var(--sky-nav) !important;
color: #fff !important;
border-color: var(--sky-nav) !important;
font-weight: 600 !important;
}
/* ═══════════════════════════════════════
TABLES
═══════════════════════════════════════ */
.pkp_helpers_table,
table.pkp_table {
width: 100%;
border-collapse: collapse;
font-size: 13px;
background: var(--white);
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--border);
}
.pkp_helpers_table th,
table.pkp_table th {
background: var(--sky-nav) !important;
color: rgba(255,255,255,0.9) !important;
font-size: 11px !important;
font-weight: 600 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
padding: 11px 14px !important;
text-align: left !important;
border: none !important;
}
.pkp_helpers_table td,
table.pkp_table td {
padding: 10px 14px !important;
border-bottom: 1px solid var(--border) !important;
border-left: none !important;
border-right: none !important;
color: var(--body) !important;
}
.pkp_helpers_table tr:hover td { background: var(--sky-pale) !important; }
/* ═══════════════════════════════════════
NOTIFICATIONS
═══════════════════════════════════════ */
.notifySuccess { background: #f0fdf4 !important; border-left: 3px solid #16a34a !important; color: #166534 !important; padding: 12px 18px !important; border-radius: 0 var(--radius) var(--radius) 0 !important; font-size: 13px !important; }
.notifyError { background: #fef2f2 !important; border-left: 3px solid #dc2626 !important; color: #991b1b !important; padding: 12px 18px !important; border-radius: 0 var(--radius) var(--radius) 0 !important; font-size: 13px !important; }
.notifyWarning { background: #fffbeb !important; border-left: 3px solid #d97706 !important; color: #92400e !important; padding: 12px 18px !important; border-radius: 0 var(--radius) var(--radius) 0 !important; font-size: 13px !important; }
/* ═══════════════════════════════════════
FOOTER
═══════════════════════════════════════ */
.pkp_structure_footer,
footer.pkp_structure_footer {
background: var(--sky-nav) !important;
border-top: none !important;
padding: 44px 28px 20px !important;
margin-top: 60px !important;
}
.pkp_structure_footer * {
color: rgba(255,255,255,0.6) !important;
}
.pkp_structure_footer h3,
.pkp_structure_footer h4 {
color: rgba(255,255,255,0.4) !important;
font-family: var(--font-body) !important;
font-size: 10px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
margin-bottom: 12px !important;
}
.pkp_structure_footer a:hover { color: rgba(255,255,255,1) !important; }
/* Powered by PKP */
.pkp_powered_by,
.pkp_footer_links .about_site {
border-top: 1px solid rgba(255,255,255,0.1) !important;
padding-top: 16px !important;
font-size: 12px !important;
max-width: 1120px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.pkp_powered_by a { color: var(--sky-light) !important; font-size: 12px !important; }
/* ═══════════════════════════════════════
ABOUT / EDITORIAL BOARD
═══════════════════════════════════════ */
.pkp_page_about .pkp_structure_main,
.pkp_page_editorialteam .pkp_structure_main {
max-width: 820px !important;
}
.pkp_page_about p,
.pkp_page_editorialteam p {
font-size: 15px;
line-height: 1.75;
color: var(--body);
margin-bottom: 14px;
}
/* ═══════════════════════════════════════
RESPONSIVE — Tablet
═══════════════════════════════════════ */
@media (max-width: 900px) {
.pkp_structure_content {
grid-template-columns: 1fr !important;
}
.pkp_site_nav_menu { padding: 0 12px !important; }
.pkp_site_nav_menu ul { flex-wrap: wrap !important; }
.pkp_structure_footer { padding: 32px 20px 16px !important; }
.pkp_powered_by { flex-direction: column; gap: 8px; text-align: center; }
}
/* ═══════════════════════════════════════
RESPONSIVE — Mobile
═══════════════════════════════════════ */
@media (max-width: 600px) {
.pkp_structure_main { padding: 20px 16px !important; }
.pkp_structure_head { position: relative !important; }
.pkp_site_nav_menu {
overflow-x: auto !important;
padding: 0 8px !important;
}
.pkp_site_nav_menu ul { flex-wrap: nowrap !important; min-width: max-content !important; }
.pkp_site_nav_menu li a { padding: 10px 12px !important; font-size: 12px !important; }
h1.page_title { font-size: 22px !important; }
.pkp_page_login .login_form,
.pkp_page_login .pkp_form {
padding: 24px 20px !important;
}
.obj_article_details { padding: 20px !important; }
}
/* ═══════════════════════════════════════
PRINT
═══════════════════════════════════════ */
@media print {
.pkp_structure_head,
.pkp_navigation_primary,
.pkp_navigation_user,
.pkp_structure_sidebar,
.pkp_structure_footer,
.pkp_structure_top { display: none !important; }
body { background: white !important; }
.pkp_structure_main { padding: 0 !important; max-width: 100% !important; }
.obj_article_details { border: none !important; box-shadow: none !important; padding: 0 !important; }
}
/* ═══════════════════════════════════════
ARCHIVES PAGE
═══════════════════════════════════════ */
.pkp_page_catalog .pkp_structure_main,
.pkp_page_archive .pkp_structure_main,
.pkp_page_issue .pkp_structure_main {
max-width: 1000px !important;
margin: 0 auto !important;
padding: 36px 28px !important;
}
/* Archive grid — issue cards */
.obj_issue_summary {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
padding: 20px 22px !important;
margin-bottom: 16px !important;
display: flex !important;
gap: 18px !important;
align-items: flex-start !important;
transition: var(--transition) !important;
box-shadow: var(--shadow-sm) !important;
}
.obj_issue_summary:hover {
border-color: var(--sky) !important;
box-shadow: 0 4px 16px rgba(14,165,233,0.1) !important;
}
/* Issue cover thumbnail */
.obj_issue_summary .cover {
flex-shrink: 0 !important;
width: 72px !important;
border-radius: 4px !important;
overflow: hidden !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
}
.obj_issue_summary .cover img {
width: 100% !important;
display: block !important;
}
/* Issue title */
.obj_issue_summary h2,
.obj_issue_summary .title {
font-family: var(--font-head) !important;
font-size: 17px !important;
font-weight: 600 !important;
color: var(--slate) !important;
margin-bottom: 4px !important;
line-height: 1.3 !important;
}
.obj_issue_summary h2 a,
.obj_issue_summary .title a {
color: var(--slate) !important;
text-decoration: none !important;
}
.obj_issue_summary h2 a:hover,
.obj_issue_summary .title a:hover {
color: var(--sky) !important;
}
/* Issue meta: volume, date, article count */
.obj_issue_summary .series,
.obj_issue_summary .published,
.obj_issue_summary .numArticles {
font-size: 12px !important;
color: var(--muted) !important;
margin-top: 2px !important;
}
.obj_issue_summary .series {
display: inline-block !important;
background: var(--sky-light) !important;
color: var(--sky-nav) !important;
border: 1px solid rgba(14,165,233,0.2) !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.8px !important;
text-transform: uppercase !important;
padding: 2px 8px !important;
border-radius: 3px !important;
margin-bottom: 6px !important;
}
/* Archive year grouping header */
.pkp_page_archive .pkp_structure_main > h2,
.pkp_page_catalog .year_heading,
.archives_year {
font-family: var(--font-body) !important;
font-size: 11px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
color: var(--muted) !important;
border-bottom: 1px solid var(--border) !important;
padding: 6px 0 8px !important;
margin: 28px 0 16px !important;
}
/* ═══════════════════════════════════════
ISSUE DETAIL / TABLE OF CONTENTS
═══════════════════════════════════════ */
.pkp_page_issue .issue_header {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-left: 4px solid var(--sky) !important;
border-radius: 0 var(--radius) var(--radius) 0 !important;
padding: 22px 26px !important;
margin-bottom: 28px !important;
display: flex !important;
gap: 20px !important;
align-items: flex-start !important;
box-shadow: var(--shadow-sm) !important;
}
.pkp_page_issue .issue_header .cover img {
width: 80px !important;
border-radius: 4px !important;
flex-shrink: 0 !important;
}
.pkp_page_issue .issue_header h1,
.pkp_page_issue .issue_header .title {
font-family: var(--font-head) !important;
font-size: 22px !important;
color: var(--slate) !important;
margin-bottom: 6px !important;
}
.pkp_page_issue .issue_header .published,
.pkp_page_issue .issue_header .numArticles {
font-size: 13px !important;
color: var(--muted) !important;
}
.pkp_page_issue .issue_header .description {
font-size: 14px !important;
color: var(--body) !important;
line-height: 1.65 !important;
margin-top: 10px !important;
}
/* TOC section divider */
.pkp_page_issue .section_heading,
.table_of_contents .section_title,
.obj_issue_toc .section h2 {
font-family: var(--font-body) !important;
font-size: 10px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.5px !important;
color: var(--sky-dark) !important;
background: var(--sky-pale) !important;
padding: 7px 12px !important;
border-left: 3px solid var(--sky) !important;
border-radius: 0 4px 4px 0 !important;
margin: 24px 0 12px !important;
border-bottom: none !important;
}
/* ═══════════════════════════════════════
ARTICLE GALLEY / FULL-TEXT READER
═══════════════════════════════════════ */
.pkp_page_article .pkp_structure_main,
.pkp_page_view_article .pkp_structure_main {
max-width: 860px !important;
margin: 0 auto !important;
padding: 36px 28px !important;
}
/* Article header card */
.obj_article_details .article_header,
.obj_article_details .article-details-header {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-top: 4px solid var(--sky) !important;
border-radius: var(--radius) !important;
padding: 28px 32px !important;
margin-bottom: 24px !important;
box-shadow: var(--shadow-sm) !important;
}
/* DOI display */
.obj_article_details .doi,
.doi_field {
font-size: 12px !important;
color: var(--muted) !important;
margin: 6px 0 !important;
word-break: break-all !important;
}
.obj_article_details .doi a,
.doi_field a {
color: var(--sky-dark) !important;
}
/* Publication date & section label */
.obj_article_details .published,
.obj_article_details .section,
.obj_article_details .issue {
font-size: 12px !important;
color: var(--muted) !important;
margin: 4px 0 !important;
}
/* Citation info */
.obj_article_details .citation,
.pkp_citation {
background: var(--sky-pale) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
padding: 14px 18px !important;
font-size: 12px !important;
color: var(--body) !important;
line-height: 1.65 !important;
font-family: var(--font-body) !important;
margin: 16px 0 !important;
}
/* How to cite block */
.pkp_page_article .how_to_cite,
.obj_article_details .how_to_cite {
background: var(--sky-pale) !important;
border: 1px solid var(--border) !important;
border-left: 3px solid var(--sky) !important;
border-radius: 0 var(--radius) var(--radius) 0 !important;
padding: 14px 18px !important;
margin: 16px 0 !important;
}
.how_to_cite h3 {
font-size: 10px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.2px !important;
color: var(--sky-dark) !important;
font-family: var(--font-body) !important;
margin-bottom: 6px !important;
}
/* Author bios */
.obj_article_details .author_bios,
.author_biography {
border-top: 1px solid var(--border) !important;
padding-top: 20px !important;
margin-top: 20px !important;
}
.author_biography .author_name {
font-weight: 600 !important;
color: var(--slate) !important;
font-size: 14px !important;
margin-bottom: 4px !important;
}
.author_biography .author_affil {
font-size: 12px !important;
color: var(--muted) !important;
margin-bottom: 8px !important;
}
/* References / bibliography */
.obj_article_details .references,
.obj_article_details .article_references {
border-top: 1px solid var(--border) !important;
padding-top: 20px !important;
margin-top: 20px !important;
}
.obj_article_details .references h2 {
font-size: 14px !important;
font-weight: 600 !important;
color: var(--slate) !important;
margin-bottom: 12px !important;
font-family: var(--font-head) !important;
}
.obj_article_details .references ol,
.obj_article_details .references ul {
padding-left: 20px !important;
}
.obj_article_details .references li {
font-size: 13px !important;
color: var(--body) !important;
line-height: 1.65 !important;
margin-bottom: 10px !important;
padding-bottom: 10px !important;
border-bottom: 1px solid var(--border) !important;
}
.obj_article_details .references li:last-child {
border-bottom: none !important;
}
/* Supplementary files / data */
.obj_article_details .supplementary_files,
.supplementary_galley {
background: var(--light) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
padding: 14px 18px !important;
margin: 12px 0 !important;
font-size: 13px !important;
}
/* ═══════════════════════════════════════
AUTHOR SUBMISSION WORKFLOW
═══════════════════════════════════════ */
/* Submission landing / start page */
.pkp_page_submission .pkp_structure_main {
max-width: 820px !important;
margin: 0 auto !important;
padding: 36px 28px !important;
}
/* Step indicator */
.pkp_submission_wizard .pkp_steps,
.submission_wizard_steps,
.pkp_page_submission .steps {
display: flex !important;
align-items: center !important;
margin-bottom: 28px !important;
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
padding: 16px 20px !important;
box-shadow: var(--shadow-sm) !important;
overflow-x: auto !important;
gap: 0 !important;
}
.pkp_submission_wizard .pkp_step,
.submission_wizard_step {
display: flex !important;
align-items: center !important;
font-size: 12px !important;
font-weight: 500 !important;
color: var(--muted) !important;
white-space: nowrap !important;
gap: 6px !important;
}
.pkp_submission_wizard .pkp_step .step_num,
.submission_wizard_step .step_number {
width: 24px !important;
height: 24px !important;
border-radius: 50% !important;
background: var(--border) !important;
color: var(--muted) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 11px !important;
font-weight: 600 !important;
flex-shrink: 0 !important;
}
.pkp_submission_wizard .pkp_step.current .step_num,
.submission_wizard_step.current .step_number {
background: var(--sky-nav) !important;
color: #ffffff !important;
}
.pkp_submission_wizard .pkp_step.completed .step_num,
.submission_wizard_step.completed .step_number {
background: var(--sky-light) !important;
color: var(--sky-dark) !important;
}
.pkp_submission_wizard .pkp_step.current {
color: var(--sky-nav) !important;
font-weight: 600 !important;
}
.pkp_submission_wizard .step_connector,
.submission_wizard_step .connector {
flex: 1 !important;
height: 1px !important;
background: var(--border) !important;
margin: 0 8px !important;
}
/* Submission form panels */
.pkp_submission_wizard .pkp_form,
.submission_wizard_form {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
padding: 28px 32px !important;
margin-bottom: 16px !important;
box-shadow: var(--shadow-sm) !important;
}
/* Upload area */
.pkp_page_submission .pkp_dropzone,
.submission_file_upload,
.file_upload_area {
border: 2px dashed var(--sky) !important;
border-radius: var(--radius) !important;
background: var(--sky-pale) !important;
padding: 32px !important;
text-align: center !important;
cursor: pointer !important;
transition: var(--transition) !important;
}
.pkp_page_submission .pkp_dropzone:hover {
background: var(--sky-light) !important;
border-color: var(--sky-nav) !important;
}
.pkp_page_submission .pkp_dropzone .upload_icon {
font-size: 32px !important;
color: var(--sky) !important;
margin-bottom: 8px !important;
}
.pkp_page_submission .pkp_dropzone p {
font-size: 13px !important;
color: var(--muted) !important;
}
/* Submission checklist items */
.submission_checklist li,
.pkp_page_submission .checklist li {
display: flex !important;
align-items: flex-start !important;
gap: 10px !important;
font-size: 13px !important;
color: var(--body) !important;
line-height: 1.6 !important;
padding: 8px 0 !important;
border-bottom: 1px solid var(--border) !important;
}
.submission_checklist li:last-child { border-bottom: none !important; }
.submission_checklist li input[type="checkbox"] {
margin-top: 3px !important;
flex-shrink: 0 !important;
accent-color: var(--sky-nav) !important;
}
/* ═══════════════════════════════════════
USER DASHBOARD (My Submissions etc.)
═══════════════════════════════════════ */
.pkp_page_dashboard .pkp_structure_main,
.pkp_page_submissions .pkp_structure_main {
max-width: 1100px !important;
margin: 0 auto !important;
padding: 28px !important;
}
/* Dashboard header strip */
.pkp_page_dashboard .page_header,
.pkp_page_submissions .page_header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
margin-bottom: 24px !important;
padding-bottom: 16px !important;
border-bottom: 2px solid var(--sky-nav) !important;
}
/* Dashboard tab bar */
.pkp_page_dashboard .pkp_nav_tabs,
.pkp_submissions_list_tabs,
.nav_tabs {
display: flex !important;
gap: 0 !important;
border-bottom: 1px solid var(--border) !important;
margin-bottom: 20px !important;
overflow-x: auto !important;
}
.pkp_page_dashboard .pkp_nav_tabs li a,
.nav_tabs li a,
.nav_tabs a {
display: block !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--muted) !important;
padding: 10px 18px !important;
border-bottom: 2px solid transparent !important;
text-decoration: none !important;
transition: var(--transition) !important;
white-space: nowrap !important;
}
.pkp_page_dashboard .pkp_nav_tabs li a:hover,
.nav_tabs li a:hover {
color: var(--sky-nav) !important;
border-bottom-color: var(--sky) !important;
}
.pkp_page_dashboard .pkp_nav_tabs li.active a,
.nav_tabs li.active a,
.nav_tabs a.active {
color: var(--sky-nav) !important;
border-bottom-color: var(--sky-nav) !important;
font-weight: 600 !important;
}
/* Submission status badges */
.pkp_submission_status,
.status_badge,
.submission_status {
display: inline-block !important;
font-size: 10px !important;
font-weight: 600 !important;
letter-spacing: 0.6px !important;
text-transform: uppercase !important;
padding: 3px 9px !important;
border-radius: 3px !important;
}
.status_submitted, .status_queued {
background: var(--sky-light) !important;
color: var(--sky-nav) !important;
border: 1px solid rgba(14,165,233,0.25) !important;
}
.status_review, .status_inreview {
background: #fff7ed !important;
color: #9a3412 !important;
border: 1px solid rgba(234,88,12,0.2) !important;
}
.status_revision {
background: #fffbeb !important;
color: #92400e !important;
border: 1px solid rgba(217,119,6,0.2) !important;
}
.status_accepted, .status_copyediting, .status_production {
background: #f0fdf4 !important;
color: #166534 !important;
border: 1px solid rgba(22,163,74,0.2) !important;
}
.status_declined, .status_incomplete {
background: #fef2f2 !important;
color: #991b1b !important;
border: 1px solid rgba(220,38,38,0.2) !important;
}
/* Submission list table */
.pkp_controllers_grid .pkp_row,
.submissions_list_item {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
padding: 14px 18px !important;
margin-bottom: 8px !important;
display: flex !important;
align-items: center !important;
gap: 16px !important;
transition: var(--transition) !important;
box-shadow: var(--shadow-sm) !important;
}
.pkp_controllers_grid .pkp_row:hover,
.submissions_list_item:hover {
border-color: var(--sky) !important;
box-shadow: 0 2px 12px rgba(14,165,233,0.08) !important;
}
/* Dashboard stats overview */
.pkp_dashboard_stats,
.dashboard_overview {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)) !important;
gap: 12px !important;
margin-bottom: 24px !important;
}
.pkp_stat_card {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
padding: 16px 18px !important;
text-align: center !important;
box-shadow: var(--shadow-sm) !important;
}
.pkp_stat_card .stat_number {
font-family: var(--font-head) !important;
font-size: 28px !important;
font-weight: 700 !important;
color: var(--sky-nav) !important;
display: block !important;
}
.pkp_stat_card .stat_label {
font-size: 11px !important;
color: var(--muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
margin-top: 2px !important;
}
/* ═══════════════════════════════════════
REVIEWER / EDITOR INTERFACE
═══════════════════════════════════════ */
/* Review assignment panel */
.pkp_page_reviewer .review_assignment,
.review_assignment_summary {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-top: 4px solid var(--sky) !important;
border-radius: var(--radius) !important;
padding: 24px 28px !important;
margin-bottom: 20px !important;
box-shadow: var(--shadow-sm) !important;
}
/* Review form */
.pkp_page_reviewer .review_form_fields,
.review_form {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
padding: 24px 28px !important;
box-shadow: var(--shadow-sm) !important;
}
/* Recommendation dropdown */
.pkp_page_reviewer select[name="recommendation"],
#recommendation {
width: 100% !important;
border: 1px solid var(--border) !important;
border-radius: 5px !important;
padding: 10px 14px !important;
font-size: 14px !important;
font-family: var(--font-body) !important;
color: var(--body) !important;
background: var(--sky-pale) !important;
accent-color: var(--sky-nav) !important;
}
/* Editor decision panel */
.pkp_page_workflow .decision_options,
.editor_decision {
background: var(--sky-pale) !important;
border: 1px solid var(--border) !important;
border-left: 3px solid var(--sky) !important;
border-radius: 0 var(--radius) var(--radius) 0 !important;
padding: 16px 20px !important;
margin: 16px 0 !important;
}
/* Activity log / discussion threads */
.pkp_page_workflow .pkp_grid_action_note,
.activity_log_entry,
.discussion_entry {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
padding: 14px 18px !important;
margin-bottom: 10px !important;
font-size: 13px !important;
color: var(--body) !important;
line-height: 1.6 !important;
}
.activity_log_entry .author,
.discussion_entry .author {
font-weight: 600 !important;
color: var(--slate) !important;
font-size: 13px !important;
}
.activity_log_entry .date,
.discussion_entry .date {
font-size: 11px !important;
color: var(--muted) !important;
}
/* ═══════════════════════════════════════
USER PROFILE PAGE
═══════════════════════════════════════ */
.pkp_page_profile .pkp_structure_main,
.pkp_page_user .pkp_structure_main {
max-width: 740px !important;
margin: 0 auto !important;
padding: 36px 28px !important;
}
.pkp_page_profile .pkp_form,
.pkp_page_user .pkp_form {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-top: 4px solid var(--sky) !important;
border-radius: var(--radius) !important;
padding: 28px 32px !important;
box-shadow: var(--shadow-sm) !important;
}
/* Profile avatar area */
.pkp_page_profile .profile_image,
.user_avatar {
width: 72px !important;
height: 72px !important;
border-radius: 50% !important;
background: var(--sky-light) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-family: var(--font-head) !important;
font-size: 24px !important;
font-weight: 700 !important;
color: var(--sky-nav) !important;
margin-bottom: 16px !important;
}
/* Form section grouping */
.pkp_page_profile .form_section_heading,
.profile_section_title {
font-size: 10px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.4px !important;
color: var(--sky-dark) !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin: 24px 0 14px !important;
}
.pkp_page_profile .form_section_heading::after {
content: '' !important;
flex: 1 !important;
height: 1px !important;
background: var(--border) !important;
}
/* ═══════════════════════════════════════
LOST PASSWORD / RESET PAGE
═══════════════════════════════════════ */
.pkp_page_login.pkp_page_lostPassword .pkp_structure_main,
.pkp_page_password .pkp_structure_main {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
padding: 60px 24px !important;
min-height: 60vh !important;
}
.pkp_page_lostPassword .pkp_form,
.pkp_page_password .pkp_form,
form[id*="lostPassword"],
form[id*="reset"] {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-top: 4px solid var(--sky) !important;
border-radius: var(--radius) !important;
padding: 32px 36px !important;
width: 100% !important;
max-width: 420px !important;
box-shadow: var(--shadow-md) !important;
margin: 0 auto !important;
text-align: left !important;
}
.pkp_page_lostPassword h1.page_title,
.pkp_page_password h1.page_title {
text-align: center !important;
font-size: 22px !important;
margin-bottom: 6px !important;
}
.pkp_page_lostPassword .description,
.pkp_page_password .description {
font-size: 13px !important;
color: var(--muted) !important;
text-align: center !important;
margin-bottom: 20px !important;
line-height: 1.6 !important;
}
/* ═══════════════════════════════════════
ANNOUNCEMENTS LIST & DETAIL
═══════════════════════════════════════ */
.pkp_page_announcement .pkp_structure_main,
.pkp_page_announcements .pkp_structure_main {
max-width: 860px !important;
margin: 0 auto !important;
padding: 36px 28px !important;
}
.pkp_page_announcements .obj_announcement_summary {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-left: 3px solid var(--sky) !important;
border-radius: 0 var(--radius) var(--radius) 0 !important;
padding: 18px 22px !important;
margin-bottom: 14px !important;
transition: var(--transition) !important;
box-shadow: var(--shadow-sm) !important;
}
.pkp_page_announcements .obj_announcement_summary:hover {
border-left-color: var(--sky-nav) !important;
box-shadow: 0 4px 14px rgba(14,165,233,0.08) !important;
}
.obj_announcement_summary .title a {
font-family: var(--font-head) !important;
font-size: 17px !important;
font-weight: 600 !important;
color: var(--slate) !important;
text-decoration: none !important;
}
.obj_announcement_summary .title a:hover { color: var(--sky) !important; }
.obj_announcement_summary .date {
font-size: 11px !important;
color: var(--muted) !important;
margin-top: 4px !important;
display: flex !important;
align-items: center !important;
gap: 4px !important;
}
.obj_announcement_summary .description {
font-size: 13px !important;
color: var(--body) !important;
line-height: 1.6 !important;
margin-top: 8px !important;
}
/* Announcement detail page */
.pkp_page_announcement .pkp_structure_main > .obj_announcement {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
padding: 32px 36px !important;
box-shadow: var(--shadow-sm) !important;
}
.obj_announcement h1.page_title {
font-size: 26px !important;
margin-bottom: 8px !important;
}
.obj_announcement .date {
font-size: 12px !important;
color: var(--muted) !important;
margin-bottom: 20px !important;
padding-bottom: 16px !important;
border-bottom: 1px solid var(--border) !important;
}
.obj_announcement .description {
font-size: 15px !important;
line-height: 1.75 !important;
color: var(--body) !important;
}
/* ═══════════════════════════════════════
MOBILE NAV IMPROVEMENTS
═══════════════════════════════════════ */
@media (max-width: 768px) {
/* Nav brand font sizes */
.pkp_site_name a,
.pkp_site_name_logo { font-size: 16px !important; }
.pkp_site_name_tagline { font-size: 9px !important; }
/* Primary nav scrolls horizontally */
.pkp_navigation_primary,
.pkp_site_nav_menu {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
}
.pkp_navigation_primary::-webkit-scrollbar,
.pkp_site_nav_menu::-webkit-scrollbar { display: none !important; }
.pkp_navigation_primary ul,
.pkp_site_nav_menu ul {
flex-wrap: nowrap !important;
min-width: max-content !important;
}
.pkp_navigation_primary li a,
.pkp_site_nav_menu li a {
padding: 10px 14px !important;
font-size: 12px !important;
white-space: nowrap !important;
}
/* Stack main + sidebar */
.pkp_structure_content {
grid-template-columns: 1fr !important;
gap: 24px !important;
}
/* Sidebar goes below content on mobile */
.pkp_structure_sidebar {
order: 2 !important;
}
/* Submission wizard steps compact */
.pkp_submission_wizard .pkp_steps,
.submission_wizard_steps {
padding: 10px 14px !important;
gap: 0 !important;
}
.pkp_submission_wizard .pkp_step span,
.submission_wizard_step .step_label {
display: none !important;
}
/* Archive issue cards stack */
.obj_issue_summary {
flex-direction: column !important;
}
.obj_issue_summary .cover {
width: 100% !important;
max-height: 120px !important;
overflow: hidden !important;
}
.obj_issue_summary .cover img {
width: 100% !important;
object-fit: cover !important;
object-position: top !important;
}
/* Dashboard stats 2 columns on mobile */
.pkp_dashboard_stats {
grid-template-columns: 1fr 1fr !important;
}
}
/* ═══════════════════════════════════════
CONTACT PAGE
═══════════════════════════════════════ */
.pkp_page_contact .pkp_structure_main {
max-width: 700px !important;
margin: 0 auto !important;
padding: 36px 28px !important;
}
.pkp_page_contact .pkp_form {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-top: 4px solid var(--sky) !important;
border-radius: var(--radius) !important;
padding: 28px 32px !important;
box-shadow: var(--shadow-sm) !important;
}
/* Contact info block above form */
.pkp_page_contact .contact_info {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
gap: 16px !important;
margin-bottom: 24px !important;
}
.contact_info_item {
background: var(--sky-pale) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
padding: 14px 16px !important;
font-size: 13px !important;
color: var(--body) !important;
}
.contact_info_item .label {
font-size: 10px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1px !important;
color: var(--sky-dark) !important;
margin-bottom: 4px !important;
}
/* ═══════════════════════════════════════
STATIC PAGES (Privacy, Terms etc.)
═══════════════════════════════════════ */
.pkp_page_privacy .pkp_structure_main,
.pkp_page_terms .pkp_structure_main,
.pkp_page_static .pkp_structure_main {
max-width: 820px !important;
margin: 0 auto !important;
padding: 36px 28px !important;
}
.pkp_page_privacy .pkp_structure_main > *,
.pkp_page_static .pkp_structure_main > * {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
padding: 32px 36px !important;
box-shadow: var(--shadow-sm) !important;
font-size: 15px !important;
line-height: 1.75 !important;
color: var(--body) !important;
}
.pkp_page_privacy h2,
.pkp_page_static h2 {
font-size: 18px !important;
margin: 24px 0 10px !important;
color: var(--slate) !important;
}
.pkp_page_privacy p,
.pkp_page_static p {
margin-bottom: 14px !important;
}
/* ═══════════════════════════════════════
READER TOOLBAR (PDF / HTML galley)
═══════════════════════════════════════ */
.pkp_reader_toolbar,
.galley_toolbar {
background: var(--sky-nav) !important;
padding: 10px 20px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
.pkp_reader_toolbar a,
.galley_toolbar a {
color: rgba(255,255,255,0.8) !important;
font-size: 12px !important;
font-weight: 500 !important;
padding: 5px 12px !important;
border: 1px solid rgba(255,255,255,0.2) !important;
border-radius: 4px !important;
transition: var(--transition) !important;
text-decoration: none !important;
}
.pkp_reader_toolbar a:hover { background: rgba(255,255,255,0.12) !important; color: #fff !important; }
/* ═══════════════════════════════════════
ACCESSIBILITY HELPERS
═══════════════════════════════════════ */
/* Skip to content link */
.pkp_skip_to_content a,
a.skip-to-content {
position: absolute !important;
top: -100px !important;
left: 20px !important;
background: var(--sky-nav) !important;
color: #ffffff !important;
padding: 8px 16px !important;
border-radius: 0 0 var(--radius) var(--radius) !important;
font-size: 13px !important;
font-weight: 600 !important;
z-index: 9999 !important;
transition: top 0.2s ease !important;
text-decoration: none !important;
}
.pkp_skip_to_content a:focus,
a.skip-to-content:focus {
top: 0 !important;
}
/* Focus ring for keyboard navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--sky) !important;
outline-offset: 2px !important;
}
/* ═══════════════════════════════════════
RCU INSTITUTIONAL BANNER
Shows a branded strip above the topbar
to reinforce university identity.
Toggle visibility with display:none if
you prefer to hide it.
═══════════════════════════════════════ */
.pkp_structure_page::before {
content: 'Reformed Church University · Masvingo, Zimbabwe · est. 2012';
display: block;
background: #053f5e;
color: rgba(255,255,255,0.45);
font-family: var(--font-body);
font-size: 10px;
font-weight: 400;
letter-spacing: 1.5px;
text-transform: uppercase;
text-align: center;
padding: 5px 20px;
border-bottom: 1px solid rgba(255,255,255,0.06);
}
/* Open-access badge in top bar */
.pkp_structure_top::before {
content: '✦ Open Access Journal';
font-size: 10px;
font-weight: 600;
color: var(--sky-light);
letter-spacing: 0.8px;
margin-right: auto;
padding-right: 20px;
border-right: 1px solid rgba(255,255,255,0.12);
}
/* ═══════════════════════════════════════
SCROLL-TO-TOP BUTTON
Pure CSS trick — shows after page
scrolls past the fold via :target hack.
For a fully working version, add this
JS snippet to OJS custom header HTML:
↑
═══════════════════════════════════════ */
#rcu-top {
position: fixed !important;
bottom: 28px !important;
right: 28px !important;
width: 40px !important;
height: 40px !important;
background: var(--sky-nav) !important;
color: #ffffff !important;
border-radius: 50% !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 18px !important;
font-weight: 700 !important;
text-decoration: none !important;
box-shadow: 0 4px 14px rgba(7,89,133,0.35) !important;
transition: opacity 0.25s ease, background 0.18s ease, transform 0.18s ease !important;
z-index: 9990 !important;
line-height: 1 !important;
pointer-events: none;
opacity: 0;
}
#rcu-top:hover {
background: var(--sky) !important;
transform: translateY(-3px) !important;
}
/* ═══════════════════════════════════════
DARK MODE
Respects the user's OS preference.
Automatically activated when the reader
has "dark mode" enabled on their device.
═══════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
:root {
--sky: #38bdf8;
--sky-dark: #0ea5e9;
--sky-deeper: #082f49;
--sky-nav: #0c4a6e;
--sky-light: #0c4a6e;
--sky-pale: #0f172a;
--white: #1e293b;
--slate: #f1f5f9;
--body: #cbd5e1;
--muted: #94a3b8;
--border: #334155;
--light: #1e293b;
--cream: #0f172a;
}
/* Page background */
body { background: #0f172a !important; color: #cbd5e1 !important; }
/* Header stays dark-on-dark (looks great) */
.pkp_structure_head { background: #0c4a6e !important; }
.pkp_navigation_primary,
.pkp_site_nav_menu { background: #075985 !important; }
/* Cards and panels */
.pkp_block,
.obj_article_details,
.pkp_page_login .login_form,
.pkp_page_register .pkp_form,
.search_box_wrap,
.search_results,
.settings_section_card,
.pkpListPanel,
.pkp_file_manager,
.pkp_email_compose,
.pkp_stats_chart,
.obj_announcement_summary,
.obj_issue_summary,
.pkp_form,
.pkp_submission_wizard .pkp_form {
background: #1e293b !important;
border-color: #334155 !important;
color: #cbd5e1 !important;
}
/* Sidebar current issue — keep dark but adjust shade */
.pkp_block.block_current_issue,
.curr-issue {
background: #0c4a6e !important;
}
/* Form inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="url"],
input[type="date"],
textarea,
select {
background: #0f172a !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
input:focus,
textarea:focus,
select:focus {
border-color: var(--sky) !important;
background: #1e293b !important;
box-shadow: 0 0 0 3px rgba(56,189,248,0.15) !important;
}
/* Article abstract strip */
.obj_article_details .abstract {
background: #0f172a !important;
border-left-color: var(--sky) !important;
color: #cbd5e1 !important;
}
/* Tables */
.pkp_helpers_table th,
table.pkp_table th,
.pkp_stats_table th {
background: #0c4a6e !important;
color: rgba(255,255,255,0.85) !important;
}
.pkp_helpers_table td,
table.pkp_table td,
.pkp_stats_table td {
border-color: #334155 !important;
color: #cbd5e1 !important;
}
.pkp_helpers_table tr:hover td,
.pkp_stats_table tr:hover td { background: #0f172a !important; }
/* Sidebar blocks */
.pkp_block h2,
.pkp_block .title { border-bottom-color: #334155 !important; }
.pkp_block ul li { border-bottom-color: #334155 !important; }
/* Keyword pills */
.kw {
background: #1e293b !important;
border-color: #334155 !important;
color: #94a3b8 !important;
}
.kw:hover { background: #0c4a6e !important; color: #fff !important; }
/* Journal description hero */
.journal_description,
.journal_summary_section {
background: #082f49 !important;
}
/* Breadcrumbs */
.cmp_breadcrumbs,
.pkp_structure_breadcrumbs {
background: #1e293b !important;
border-bottom-color: #334155 !important;
}
/* Galley (PDF/HTML) buttons */
.obj_article_summary .galleys_links a,
.obj_article_summary .obj_galley_link {
background: #0c4a6e !important;
color: #38bdf8 !important;
border-color: rgba(56,189,248,0.25) !important;
}
/* Pagination */
.pkp_pagination a,
.pkp_pagination span {
background: #1e293b !important;
border-color: #334155 !important;
color: #94a3b8 !important;
}
.pkp_pagination .current {
background: #0c4a6e !important;
border-color: #0c4a6e !important;
color: #fff !important;
}
/* Footer keeps deep navy — looks natural in dark mode */
.pkp_structure_footer { background: #082f49 !important; }
/* Modal */
.pkp_modal,
.pkpModal { background: #1e293b !important; border-color: #334155 !important; }
.pkp_modal .pkp_modal_footer { background: #0f172a !important; }
.pkp_modal .pkp_modal_panel { color: #cbd5e1 !important; }
/* Vue ListPanel */
.pkpListPanel__header { background: #0f172a !important; }
.pkpListPanel__item:hover { background: #0f172a !important; }
/* Vue Dropdown */
.pkpDropdown__content,
.pkp_dropdown_menu {
background: #1e293b !important;
border-color: #334155 !important;
}
.pkpDropdown__content a,
.pkpDropdown__content button {
color: #cbd5e1 !important;
border-bottom-color: #334155 !important;
}
.pkpDropdown__content a:hover,
.pkpDropdown__content button:hover {
background: #0f172a !important;
color: #38bdf8 !important;
}
/* Dropdown nav items in dark mode */
.pkp_navigation_primary .children,
.pkp_site_nav_menu .sub-menu,
nav li ul {
background: #1e293b !important;
border-color: #334155 !important;
}
.pkp_navigation_primary .children li a,
.pkp_site_nav_menu .sub-menu li a,
nav li ul li a {
color: #cbd5e1 !important;
border-bottom-color: #334155 !important;
}
.pkp_navigation_primary .children li a:hover,
nav li ul li a:hover {
background: #0f172a !important;
color: #38bdf8 !important;
}
/* Notifications */
.notifySuccess { background: #052e16 !important; color: #86efac !important; }
.notifyError { background: #450a0a !important; color: #fca5a5 !important; }
.notifyWarning { background: #422006 !important; color: #fcd34d !important; }
/* Vue Notification toasts */
.pkpNotification--success { background: #052e16 !important; color: #86efac !important; }
.pkpNotification--error { background: #450a0a !important; color: #fca5a5 !important; }
.pkpNotification--warning { background: #422006 !important; color: #fcd34d !important; }
.pkpNotification--info { background: #082f49 !important; color: #7dd3fc !important; }
/* Stat boxes */
.stat_b,
.pkp_stat_card { background: #0f172a !important; }
.stat_n,
.pkp_stat_card .stat_number { color: #38bdf8 !important; }
/* Skeleton loader */
.pkp_skeleton {
background: linear-gradient(90deg, #334155 25%, #475569 50%, #334155 75%) !important;
}
/* TinyMCE */
.tox .tox-toolbar,
.tox .tox-toolbar__primary { background: #1e293b !important; border-bottom-color: #334155 !important; }
/* Section TOC dividers */
.obj_issue_toc .section > h2,
.issue_toc .section_title {
background: #0f172a !important;
color: #38bdf8 !important;
}
/* Issue header */
.pkp_page_issue .issue_header {
background: #1e293b !important;
border-color: #334155 !important;
}
/* How to cite */
.how_to_cite {
background: #0f172a !important;
border-color: #334155 !important;
}
/* RCU institutional banner */
.pkp_structure_page::before { background: #020f1a !important; }
/* Scroll-to-top button */
#rcu-top { box-shadow: 0 4px 14px rgba(0,0,0,0.5) !important; }
}
/* ═══════════════════════════════════════
NUCLEAR TEXT OVERRIDE
Catches any remaining white-on-white
text from the OJS default theme.
Targets every link and text node inside
the main content column.
═══════════════════════════════════════ */
/* All links inside content — dark by default */
#pkp_content_main a,
.pkp_structure_main a,
.pkp_structure_content a {
color: #0284c7 !important;
}
#pkp_content_main a:hover,
.pkp_structure_main a:hover {
color: #0ea5e9 !important;
}
/* All plain text nodes — dark body colour */
#pkp_content_main,
.pkp_structure_main {
color: #334155 !important;
}
/* headings */
#pkp_content_main h1,
#pkp_content_main h2,
#pkp_content_main h3,
#pkp_content_main h4,
#pkp_content_main h5,
.pkp_structure_main h1,
.pkp_structure_main h2,
.pkp_structure_main h3,
.pkp_structure_main h4 {
color: #1e293b !important;
}
/* Article title links — must be darker than generic link colour */
#pkp_content_main .obj_article_summary a,
.pkp_structure_main .obj_article_summary a,
#pkp_content_main .obj_article_summary h3 a,
#pkp_content_main .obj_article_summary .title a {
color: #1e293b !important;
text-decoration: none !important;
}
#pkp_content_main .obj_article_summary a:hover,
.pkp_structure_main .obj_article_summary a:hover {
color: #0284c7 !important;
}
/* Author and meta text */
#pkp_content_main .obj_article_summary .authors,
#pkp_content_main .obj_article_summary .published,
#pkp_content_main .obj_article_summary .section {
color: #64748b !important;
}
/* Galley buttons override — keep them styled not generic-link blue */
#pkp_content_main .obj_galley_link,
#pkp_content_main .galleys_links a,
.pkp_structure_main .obj_galley_link,
.pkp_structure_main .galleys_links a {
color: #075985 !important;
background: #e0f2fe !important;
text-decoration: none !important;
}
#pkp_content_main .obj_galley_link:hover,
#pkp_content_main .galleys_links a:hover {
color: #ffffff !important;
background: #0ea5e9 !important;
}
/* Issue TOC section label */
#pkp_content_main .section_title,
#pkp_content_main .obj_issue_toc .section h2 {
color: #0284c7 !important;
background: #f0f9ff !important;
}
/* Published date on issue page */
#pkp_content_main .published {
color: #64748b !important;
}
/* ═══════════════════════════════════════
SAFETY NET — DROPDOWN TEXT VISIBILITY
Catches any OJS dropdown regardless of
class name variant or theme override.
Must stay at the bottom of this file so
it wins the cascade.
═══════════════════════════════════════ */
/* Every anchor that lives inside a nested gets dark text */
nav li ul a,
nav li ol a,
ul.pkp_nav li ul li a,
.pkp_navigation_primary li > ul a,
.pkp_site_nav_menu li > ul a,
.pkp_navigation_primary li > ul > li > a,
.pkp_site_nav_menu li > ul > li > a {
color: #1e293b !important; /* --slate: always readable on white */
background-color: #ffffff !important;
font-weight: 400 !important;
}
/* Keep hover readable too */
nav li ul a:hover,
.pkp_navigation_primary li > ul a:hover,
.pkp_site_nav_menu li > ul a:hover {
color: #075985 !important; /* --sky-nav */
background-color: #f0f9ff !important; /* --sky-pale */
}
/* ═══════════════════════════════════════
STATISTICS / METRICS PAGE
═══════════════════════════════════════ */
.pkp_page_stats .pkp_structure_main,
.pkp_page_metrics .pkp_structure_main {
max-width: 1100px !important;
margin: 0 auto !important;
padding: 32px 28px !important;
}
/* Stats summary cards row */
.pkp_stats_summary,
.stats_overview_row {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
gap: 14px !important;
margin-bottom: 28px !important;
}
.pkp_stat_summary_card {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
padding: 18px 20px !important;
box-shadow: var(--shadow-sm) !important;
position: relative !important;
overflow: hidden !important;
}
/* Accent stripe on stat cards */
.pkp_stat_summary_card::before {
content: '' !important;
position: absolute !important;
top: 0 !important; left: 0 !important;
width: 100% !important; height: 3px !important;
background: var(--sky) !important;
}
.pkp_stat_summary_card .stat_value {
font-family: var(--font-head) !important;
font-size: 30px !important;
font-weight: 700 !important;
color: var(--sky-nav) !important;
line-height: 1 !important;
margin-bottom: 4px !important;
display: block !important;
}
.pkp_stat_summary_card .stat_label {
font-size: 11px !important;
color: var(--muted) !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
}
.pkp_stat_summary_card .stat_change {
font-size: 11px !important;
margin-top: 6px !important;
font-weight: 500 !important;
}
.stat_change.up { color: #16a34a !important; }
.stat_change.down { color: #dc2626 !important; }
/* Stats chart container */
.pkp_stats_chart,
.stats_chart_container {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
padding: 22px 24px !important;
margin-bottom: 20px !important;
box-shadow: var(--shadow-sm) !important;
}
.pkp_stats_chart h3,
.stats_chart_container .chart_title {
font-family: var(--font-body) !important;
font-size: 12px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 1.2px !important;
color: var(--muted) !important;
margin-bottom: 16px !important;
padding-bottom: 10px !important;
border-bottom: 1px solid var(--border) !important;
}
/* Stats table */
.pkp_stats_table,
.stats_data_table {
width: 100% !important;
border-collapse: collapse !important;
font-size: 13px !important;
}
.pkp_stats_table th {
background: var(--sky-pale) !important;
color: var(--sky-nav) !important;
font-size: 10px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
padding: 10px 14px !important;
border-bottom: 2px solid var(--sky-light) !important;
text-align: left !important;
}
.pkp_stats_table td {
padding: 10px 14px !important;
border-bottom: 1px solid var(--border) !important;
color: var(--body) !important;
}
.pkp_stats_table tr:hover td { background: var(--sky-pale) !important; }
/* Date range picker */
.pkp_stats_date_range,
.date_range_filter {
display: flex !important;
align-items: center !important;
gap: 10px !important;
margin-bottom: 20px !important;
flex-wrap: wrap !important;
}
.pkp_stats_date_range input[type="date"],
.date_range_filter input[type="date"] {
border: 1px solid var(--border) !important;
border-radius: 5px !important;
padding: 7px 12px !important;
font-size: 13px !important;
font-family: var(--font-body) !important;
color: var(--body) !important;
background: var(--white) !important;
}
.pkp_stats_date_range input[type="date"]:focus,
.date_range_filter input[type="date"]:focus {
outline: none !important;
border-color: var(--sky) !important;
box-shadow: 0 0 0 3px rgba(14,165,233,0.15) !important;
}
/* ═══════════════════════════════════════
ADMIN PANEL OVERRIDES
═══════════════════════════════════════ */
/* Admin top bar */
.pkp_page_admin .pkp_structure_head,
.pkp_page_admin .pkp_structure_top {
background: var(--sky-nav) !important;
}
/* Admin sidebar nav */
.pkp_page_admin .pkp_structure_sidebar .pkp_block {
background: var(--white) !important;
border: 1px solid var(--border) !important;
}
/* Admin settings grid */
.pkp_page_admin .settings_section,
.admin_settings_grid {
display: grid !important;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)) !important;
gap: 16px !important;
margin-bottom: 24px !important;
}
.settings_section_card {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
padding: 20px 22px !important;
box-shadow: var(--shadow-sm) !important;
transition: var(--transition) !important;
}
.settings_section_card:hover {
border-color: var(--sky) !important;
box-shadow: 0 4px 14px rgba(14,165,233,0.1) !important;
}
.settings_section_card h3 {
font-size: 15px !important;
font-weight: 600 !important;
color: var(--slate) !important;
margin-bottom: 6px !important;
}
.settings_section_card p {
font-size: 13px !important;
color: var(--muted) !important;
line-height: 1.55 !important;
}
/* Admin page title bar */
.pkp_page_admin h1.page_title {
font-size: 24px !important;
padding-bottom: 12px !important;
border-bottom: 2px solid var(--sky-nav) !important;
margin-bottom: 24px !important;
}
/* ═══════════════════════════════════════
VUE.JS COMPONENT OVERRIDES
(OJS 3.4 uses Vue for modals, tables,
file managers and form components)
═══════════════════════════════════════ */
/* Vue modal backdrop */
.pkp_modal_bg,
.modal-backdrop {
background: rgba(7, 89, 133, 0.5) !important;
backdrop-filter: blur(2px) !important;
}
/* Vue modal container */
.pkp_modal,
.pkpModal,
.modal-dialog,
[class*="pkp-modal"] {
background: var(--white) !important;
border-radius: var(--radius) !important;
border: 1px solid var(--border) !important;
box-shadow: 0 20px 60px rgba(0,0,0,0.2) !important;
overflow: hidden !important;
}
/* Modal header */
.pkp_modal .pkp_modal_header,
.pkpModal .pkp_modal_header,
[class*="pkp-modal"] .modal-header {
background: var(--sky-nav) !important;
color: #ffffff !important;
padding: 16px 22px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.pkp_modal .pkp_modal_header h2,
.pkp_modal .pkp_modal_header .title {
color: #ffffff !important;
font-size: 16px !important;
font-weight: 600 !important;
font-family: var(--font-head) !important;
}
/* Modal close button */
.pkp_modal .pkp_modal_close,
button.modal-close,
[class*="pkp-modal"] .close {
background: rgba(255,255,255,0.15) !important;
border: none !important;
color: rgba(255,255,255,0.8) !important;
width: 28px !important;
height: 28px !important;
border-radius: 50% !important;
cursor: pointer !important;
font-size: 16px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: var(--transition) !important;
}
.pkp_modal .pkp_modal_close:hover { background: rgba(255,255,255,0.25) !important; }
/* Modal body */
.pkp_modal .pkp_modal_panel,
[class*="pkp-modal"] .modal-body {
padding: 22px 24px !important;
}
/* Modal footer */
.pkp_modal .pkp_modal_footer,
[class*="pkp-modal"] .modal-footer {
padding: 14px 22px !important;
border-top: 1px solid var(--border) !important;
display: flex !important;
gap: 10px !important;
justify-content: flex-end !important;
background: var(--light) !important;
}
/* Vue ListPanel (submission lists, file managers) */
.pkpListPanel,
.pkp_list_panel {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
overflow: hidden !important;
box-shadow: var(--shadow-sm) !important;
}
/* ListPanel header */
.pkpListPanel__header,
.pkp_list_panel_header {
background: var(--sky-pale) !important;
padding: 14px 18px !important;
border-bottom: 1px solid var(--border) !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
}
.pkpListPanel__header h2,
.pkpListPanel__title {
font-family: var(--font-body) !important;
font-size: 13px !important;
font-weight: 600 !important;
color: var(--slate) !important;
}
/* ListPanel rows */
.pkpListPanel__item,
.pkp_list_panel_item {
padding: 14px 18px !important;
border-bottom: 1px solid var(--border) !important;
transition: var(--transition) !important;
}
.pkpListPanel__item:last-child { border-bottom: none !important; }
.pkpListPanel__item:hover {
background: var(--sky-pale) !important;
}
/* ListPanel search/filter bar */
.pkpListPanel__search input,
.pkpSearch__input {
border: 1px solid var(--border) !important;
border-radius: 5px !important;
padding: 8px 12px !important;
font-size: 13px !important;
font-family: var(--font-body) !important;
background: var(--white) !important;
color: var(--body) !important;
transition: var(--transition) !important;
width: 100% !important;
}
.pkpListPanel__search input:focus,
.pkpSearch__input:focus {
outline: none !important;
border-color: var(--sky) !important;
box-shadow: 0 0 0 3px rgba(14,165,233,0.15) !important;
}
/* Vue Tabs (pkpTabs component) */
.pkpTabs,
.pkp_tabs {
border-bottom: 1px solid var(--border) !important;
display: flex !important;
gap: 0 !important;
overflow-x: auto !important;
}
.pkpTabs__tab,
.pkp_tab {
font-size: 13px !important;
font-weight: 500 !important;
color: var(--muted) !important;
padding: 10px 18px !important;
border-bottom: 2px solid transparent !important;
cursor: pointer !important;
white-space: nowrap !important;
transition: var(--transition) !important;
background: transparent !important;
border-top: none !important;
border-left: none !important;
border-right: none !important;
}
.pkpTabs__tab:hover { color: var(--sky-nav) !important; }
.pkpTabs__tab--isActive,
.pkp_tab.active {
color: var(--sky-nav) !important;
border-bottom-color: var(--sky-nav) !important;
font-weight: 600 !important;
}
/* Vue Badge */
.pkpBadge,
.pkp_badge {
display: inline-block !important;
font-size: 10px !important;
font-weight: 600 !important;
padding: 2px 7px !important;
border-radius: 10px !important;
background: var(--sky-light) !important;
color: var(--sky-nav) !important;
letter-spacing: 0.3px !important;
}
/* Vue Spinner / loader */
.pkpSpinner,
.pkp_spinner,
[class*="spinner"] {
border-color: var(--sky-light) !important;
border-top-color: var(--sky-nav) !important;
}
/* Vue Dropdown button */
.pkpDropdown__button,
.pkp_dropdown_toggle {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 13px !important;
font-weight: 500 !important;
color: var(--sky-nav) !important;
background: var(--sky-pale) !important;
border: 1px solid var(--border) !important;
border-radius: 5px !important;
padding: 7px 14px !important;
cursor: pointer !important;
transition: var(--transition) !important;
}
.pkpDropdown__button:hover {
background: var(--sky-light) !important;
border-color: var(--sky) !important;
}
/* Vue Dropdown menu panel */
.pkpDropdown__content,
.pkp_dropdown_menu {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-top: 2px solid var(--sky) !important;
border-radius: 0 0 var(--radius) var(--radius) !important;
box-shadow: var(--shadow-md) !important;
min-width: 180px !important;
z-index: 200 !important;
}
.pkpDropdown__content a,
.pkpDropdown__content button,
.pkp_dropdown_menu li a {
display: block !important;
font-size: 13px !important;
color: var(--body) !important;
padding: 9px 16px !important;
border-bottom: 1px solid var(--border) !important;
background: transparent !important;
cursor: pointer !important;
transition: var(--transition) !important;
text-align: left !important;
width: 100% !important;
border-left: none !important;
border-right: none !important;
border-top: none !important;
}
.pkpDropdown__content a:hover,
.pkpDropdown__content button:hover,
.pkp_dropdown_menu li a:hover {
background: var(--sky-pale) !important;
color: var(--sky-nav) !important;
}
.pkpDropdown__content > *:last-child,
.pkp_dropdown_menu li:last-child a {
border-bottom: none !important;
}
/* Vue Notification toast */
.pkpNotification,
.pkp_notification_toast {
border-radius: var(--radius) !important;
padding: 12px 18px !important;
font-size: 13px !important;
box-shadow: var(--shadow-md) !important;
display: flex !important;
align-items: center !important;
gap: 10px !important;
max-width: 380px !important;
}
.pkpNotification--success { background: #f0fdf4 !important; border-left: 3px solid #16a34a !important; color: #166534 !important; }
.pkpNotification--error { background: #fef2f2 !important; border-left: 3px solid #dc2626 !important; color: #991b1b !important; }
.pkpNotification--warning { background: #fffbeb !important; border-left: 3px solid #d97706 !important; color: #92400e !important; }
.pkpNotification--info { background: var(--sky-pale) !important; border-left: 3px solid var(--sky) !important; color: var(--sky-nav) !important; }
/* ═══════════════════════════════════════
LANGUAGE TOGGLE (Multilingual journals)
═══════════════════════════════════════ */
.pkp_language_toggle,
.language_selector,
.locale_switcher {
display: flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 12px !important;
}
.pkp_language_toggle a,
.language_selector a,
.locale_switcher a {
color: rgba(255,255,255,0.6) !important;
font-size: 11px !important;
font-weight: 500 !important;
padding: 3px 8px !important;
border: 1px solid rgba(255,255,255,0.15) !important;
border-radius: 3px !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
transition: var(--transition) !important;
}
.pkp_language_toggle a:hover,
.locale_switcher a:hover { color: #fff !important; border-color: rgba(255,255,255,0.4) !important; }
.pkp_language_toggle a.selected,
.locale_switcher a.active {
background: rgba(255,255,255,0.15) !important;
color: #fff !important;
border-color: rgba(255,255,255,0.3) !important;
}
/* ═══════════════════════════════════════
RICH TEXT EDITOR (TinyMCE) IN FORMS
═══════════════════════════════════════ */
/* TinyMCE toolbar */
.tox .tox-toolbar,
.tox .tox-toolbar__primary {
background: var(--sky-pale) !important;
border-bottom: 1px solid var(--border) !important;
}
/* TinyMCE editor area wrapper */
.tox .tox-edit-area__iframe {
border: none !important;
}
/* TinyMCE container border */
.tox.tox-tinymce {
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
overflow: hidden !important;
transition: var(--transition) !important;
}
.tox.tox-tinymce:focus-within {
border-color: var(--sky) !important;
box-shadow: 0 0 0 3px rgba(14,165,233,0.15) !important;
}
/* TinyMCE toolbar buttons */
.tox .tox-tbtn {
border-radius: 3px !important;
transition: var(--transition) !important;
}
.tox .tox-tbtn:hover { background: var(--sky-light) !important; }
.tox .tox-tbtn--enabled { background: var(--sky-light) !important; color: var(--sky-nav) !important; }
/* ═══════════════════════════════════════
FILE MANAGER / GALLEY UPLOADER
═══════════════════════════════════════ */
.pkp_file_manager,
.galley_file_manager {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
overflow: hidden !important;
}
/* File list item */
.pkp_file_manager .file_item,
.galley_file {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 12px 16px !important;
border-bottom: 1px solid var(--border) !important;
transition: var(--transition) !important;
}
.pkp_file_manager .file_item:hover { background: var(--sky-pale) !important; }
.pkp_file_manager .file_item:last-child { border-bottom: none !important; }
/* File icon placeholder */
.pkp_file_manager .file_icon,
.file_type_icon {
width: 36px !important;
height: 36px !important;
border-radius: 5px !important;
background: var(--sky-light) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 11px !important;
font-weight: 700 !important;
color: var(--sky-nav) !important;
flex-shrink: 0 !important;
text-transform: uppercase !important;
letter-spacing: 0.3px !important;
}
.file_type_icon.pdf { background: #fee2e2 !important; color: #dc2626 !important; }
.file_type_icon.docx { background: #dbeafe !important; color: #1d4ed8 !important; }
.file_type_icon.xlsx { background: #dcfce7 !important; color: #16a34a !important; }
/* File name and meta */
.pkp_file_manager .file_name {
font-size: 13px !important;
font-weight: 500 !important;
color: var(--slate) !important;
}
.pkp_file_manager .file_meta {
font-size: 11px !important;
color: var(--muted) !important;
margin-top: 2px !important;
}
/* File action buttons */
.pkp_file_manager .file_actions {
margin-left: auto !important;
display: flex !important;
gap: 6px !important;
}
.pkp_file_manager .file_actions a,
.pkp_file_manager .file_actions button {
font-size: 11px !important;
color: var(--muted) !important;
background: transparent !important;
border: 1px solid var(--border) !important;
border-radius: 4px !important;
padding: 4px 10px !important;
cursor: pointer !important;
transition: var(--transition) !important;
text-decoration: none !important;
}
.pkp_file_manager .file_actions a:hover,
.pkp_file_manager .file_actions button:hover {
background: var(--sky-pale) !important;
color: var(--sky-nav) !important;
border-color: var(--sky) !important;
}
/* ═══════════════════════════════════════
EMAIL / DISCUSSION COMPOSER
═══════════════════════════════════════ */
/* Email/message compose panel */
.pkp_email_compose,
.discussion_compose,
.pkp_message_form {
background: var(--white) !important;
border: 1px solid var(--border) !important;
border-radius: var(--radius) !important;
overflow: hidden !important;
box-shadow: var(--shadow-sm) !important;
}
/* Compose header */
.pkp_email_compose .compose_header,
.discussion_compose .compose_header {
background: var(--sky-pale) !important;
padding: 12px 18px !important;
border-bottom: 1px solid var(--border) !important;
font-size: 12px !important;
font-weight: 600 !important;
color: var(--sky-nav) !important;
text-transform: uppercase !important;
letter-spacing: 0.8px !important;
}
/* To/Subject fields */
.pkp_email_compose .compose_field {
display: flex !important;
align-items: center !important;
border-bottom: 1px solid var(--border) !important;
padding: 10px 16px !important;
}
.pkp_email_compose .compose_field label {
font-size: 12px !important;
font-weight: 600 !important;
color: var(--muted) !important;
width: 60px !important;
flex-shrink: 0 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
margin: 0 !important;
}
.pkp_email_compose .compose_field input {
flex: 1 !important;
border: none !important;
background: transparent !important;
font-size: 13px !important;
color: var(--body) !important;
padding: 0 !important;
}
.pkp_email_compose .compose_field input:focus { outline: none !important; }
/* Compose body */
.pkp_email_compose .compose_body {
padding: 16px !important;
min-height: 160px !important;
}
/* Compose footer / actions */
.pkp_email_compose .compose_actions,
.discussion_compose .compose_actions {
padding: 12px 16px !important;
border-top: 1px solid var(--border) !important;
background: var(--light) !important;
display: flex !important;
justify-content: flex-end !important;
gap: 8px !important;
}
/* ═══════════════════════════════════════
INLINE LOADING STATES
═══════════════════════════════════════ */
/* Skeleton loader bars */
.pkp_skeleton,
.loading_placeholder {
background: linear-gradient(90deg, var(--border) 25%, var(--light) 50%, var(--border) 75%) !important;
background-size: 200% 100% !important;
animation: pkp_shimmer 1.4s infinite !important;
border-radius: 4px !important;
}
@keyframes pkp_shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* Progress bar (e.g. file upload) */
.pkp_progress_bar,
progress {
appearance: none !important;
-webkit-appearance: none !important;
height: 6px !important;
border-radius: 3px !important;
background: var(--border) !important;
border: none !important;
overflow: hidden !important;
width: 100% !important;
}
.pkp_progress_bar::-webkit-progress-bar,
progress::-webkit-progress-bar { background: var(--border) !important; }
.pkp_progress_bar::-webkit-progress-value,
progress::-webkit-progress-value { background: var(--sky) !important; border-radius: 3px !important; }
.pkp_progress_bar::-moz-progress-bar,
progress::-moz-progress-bar { background: var(--sky) !important; border-radius: 3px !important; }
/* ═══════════════════════════════════════
COOKIES / CONSENT BANNER
═══════════════════════════════════════ */
.pkp_cookie_banner,
.cookie_consent,
[class*="cookie-banner"] {
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
right: 0 !important;
background: var(--slate) !important;
color: rgba(255,255,255,0.8) !important;
padding: 14px 28px !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
gap: 20px !important;
z-index: 9998 !important;
font-size: 13px !important;
box-shadow: 0 -4px 20px rgba(0,0,0,0.2) !important;
flex-wrap: wrap !important;
}
.pkp_cookie_banner a { color: var(--sky-light) !important; }
.pkp_cookie_banner .accept_btn {
background: var(--sky) !important;
color: #fff !important;
border: none !important;
border-radius: 4px !important;
padding: 7px 18px !important;
font-size: 12px !important;
font-weight: 600 !important;
cursor: pointer !important;
flex-shrink: 0 !important;
}
/* ═══════════════════════════════════════
PRINT STYLESHEET (comprehensive)
═══════════════════════════════════════ */
@media print {
/* Hide all navigation and UI chrome */
.pkp_structure_head,
.pkp_structure_top,
.pkp_navigation_primary,
.pkp_navigation_user,
.pkp_structure_sidebar,
.pkp_structure_footer,
.pkp_structure_breadcrumbs,
.pkp_pagination,
.galleys_links,
.pkp_block,
.search_toggle_btn,
.pkp_cookie_banner,
.pkp_reader_toolbar,
button,
.pkp_button,
nav {
display: none !important;
}
/* Clean page */
body {
background: #ffffff !important;
font-size: 11pt !important;
line-height: 1.6 !important;
color: #000000 !important;
font-family: Georgia, serif !important;
}
/* Full width content */
.pkp_structure_main,
.pkp_structure_content {
max-width: 100% !important;
padding: 0 !important;
display: block !important;
}
/* Article details */
.obj_article_details {
border: none !important;
box-shadow: none !important;
padding: 0 !important;
}
/* Article title */
.obj_article_details h1.page_title {
font-size: 18pt !important;
margin-bottom: 12pt !important;
}
/* Abstract */
.obj_article_details .abstract {
border-left: 2pt solid #cccccc !important;
background: #f9f9f9 !important;
padding: 10pt 14pt !important;
margin: 12pt 0 !important;
font-size: 10pt !important;
}
/* References */
.obj_article_details .references li {
font-size: 10pt !important;
border-bottom: none !important;
padding-bottom: 6pt !important;
}
/* Page breaks */
h1, h2, h3 { page-break-after: avoid !important; }
.obj_article_details .references { page-break-before: always !important; }
img { page-break-inside: avoid !important; max-width: 100% !important; }
/* URLs in print */
a[href]::after {
content: " (" attr(href) ")" !important;
font-size: 9pt !important;
color: #555555 !important;
}
a[href^="#"]::after { content: "" !important; }
}