/*
* header-layout.css — SINGLE SOURCE OF TRUTH for Ascarya header
* Loaded last to override all base.less conflicts
* Noble-inspired: topbar + navbar layout
*/
/* =========================================================
TOPBAR (white row: logo | search | login)
========================================================= */
.acs_topbar {
background: #ffffff;
border-bottom: 1px solid #e5e7eb;
position: relative;
overflow: visible;
}
.acs_container.acs_topbar_inner,
.acs_topbar_inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
height: 80px;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
/* vertical center EVERYTHING */
justify-content: space-between;
gap: 16px;
overflow: visible !important;
}
/* Brand: logo on far left, takes remaining space */
.acs_brand_link {
flex: 0 0 auto;
display: flex;
align-items: center;
text-decoration: none !important;
margin-right: auto;
/* push search+login to right */
}
.acs_logo_img {
max-height: 60px !important;
width: auto !important;
max-width: 320px !important;
height: auto !important;
display: block;
object-fit: contain;
}
.acs_journal_name_text {
font-family: 'Rubik', sans-serif;
font-size: 22px;
font-weight: 700;
color: #111827;
}
/* Search box — right of brand, left of login */
.acs_topbar_search {
flex: 0 0 auto;
align-self: center !important;
margin-right: 12px;
}
.acs_topbar_search form {
display: flex !important;
align-items: center !important;
height: 40px !important;
border: 1.5px solid #d1d5db !important;
border-radius: 24px !important;
overflow: hidden !important;
background: #ffffff !important;
}
input.acs_tsearch_input {
height: 40px !important;
line-height: 40px !important;
width: 190px !important;
padding: 0 16px !important;
border: none !important;
outline: none !important;
background: transparent !important;
font-size: 14px !important;
color: #374151 !important;
box-shadow: none !important;
}
button.acs_tsearch_btn {
height: 40px !important;
width: 40px !important;
border: none !important;
background: transparent !important;
color: #6b7280 !important;
font-size: 14px !important;
cursor: pointer;
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 0 !important;
opacity: 1 !important;
}
button.acs_tsearch_btn:hover {
color: var(--acs-accent, #1a2a4a) !important;
}
/* User menu — far right */
.acs_topbar_user {
flex: 0 0 auto;
align-self: center !important;
position: relative;
overflow: visible !important;
}
.acs_topbar_user ul.acs_user_menu,
.acs_topbar_user .pkp_nav_list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
gap: 8px;
position: static;
overflow: visible !important;
}
.acs_topbar_user ul.acs_user_menu>li {
position: relative !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
}
/* Top-level link (Login / Register / Username) */
.acs_topbar_user ul.acs_user_menu>li>a {
display: inline-flex !important;
align-items: center !important;
height: 40px !important;
padding: 0 18px !important;
border: 1.5px solid var(--acs-accent, #1a2a4a) !important;
border-radius: 24px !important;
color: var(--acs-accent, #1a2a4a) !important;
font-family: 'Rubik', sans-serif;
font-size: 14px !important;
font-weight: 600 !important;
text-decoration: none !important;
white-space: nowrap;
background: #fff !important;
transition: background .2s, color .2s;
gap: 8px;
}
.acs_topbar_user ul.acs_user_menu>li>a:hover {
background: var(--acs-accent, #1a2a4a) !important;
color: #fff !important;
text-decoration: none !important;
}
/* Dropdown submenu — HIDDEN */
.acs_topbar_user ul.acs_user_menu>li>ul {
display: none !important;
position: absolute !important;
top: 100% !important;
/* NO gap — langsung menempel */
right: 0 !important;
left: auto !important;
min-width: 200px !important;
background: #fff !important;
border-top: 3px solid var(--acs-accent, #1a2a4a) !important;
border-radius: 0 0 8px 8px !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, .14) !important;
z-index: 99999 !important;
list-style: none !important;
margin: 0 !important;
padding: 6px 0 !important;
overflow: visible !important;
}
/* Bridge transparan mencegah flicker saat kursor bergerak dari trigger ke dropdown */
.acs_topbar_user ul.acs_user_menu>li>ul::before {
content: '' !important;
position: absolute !important;
top: -8px !important;
left: 0 !important;
right: 0 !important;
height: 8px !important;
background: transparent !important;
}
.acs_topbar_user ul.acs_user_menu>li:hover>ul,
.acs_topbar_user ul.acs_user_menu>li:focus-within>ul {
display: block !important;
}
.acs_topbar_user ul.acs_user_menu>li>ul>li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
border-bottom: 1px solid #f1f5f9 !important;
display: block !important;
}
.acs_topbar_user ul.acs_user_menu>li>ul>li:last-child {
border-bottom: none !important;
}
.acs_topbar_user ul.acs_user_menu>li>ul>li>a {
display: block !important;
padding: 10px 20px !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #374151 !important;
border: none !important;
border-radius: 0 !important;
background: transparent !important;
text-decoration: none !important;
white-space: nowrap;
height: auto !important;
}
.acs_topbar_user ul.acs_user_menu>li>ul>li>a:hover {
background: #f1f5f9 !important;
color: var(--acs-accent, #1a2a4a) !important;
}
.task_count {
background: var(--acs-accent, #1a2a4a);
color: #fff;
border-radius: 10px;
font-size: 11px;
font-weight: 700;
padding: 1px 7px;
min-width: 18px;
text-align: center;
display: inline-block;
}
/* =========================================================
NAVBAR (dark row: menu items | ISSN) — normal position
========================================================= */
.acs_navbar {
background: var(--acs-accent, #1a2a4a);
position: relative;
border-bottom: 3px solid rgba(255, 255, 255, .15);
}
/* ── GHOST STICKY NAV — smooth slide with transform+opacity ── */
.acs_ghost_nav {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 9995 !important;
/* Gradient: accent-light → accent → accent-dark */
background: linear-gradient(135deg,
color-mix(in srgb, var(--acs-accent, #1a2a4a) 80%, white 20%) 0%,
var(--acs-accent, #1a2a4a) 45%,
color-mix(in srgb, var(--acs-accent, #1a2a4a) 78%, black 22%) 100%) !important;
box-shadow: 0 4px 20px rgba(0, 0, 0, .32), inset 0 -1px 0 rgba(255, 255, 255, .12) !important;
border-bottom: none !important;
/* Smooth animation — slow, elegant */
transform: translateY(-110%) !important;
opacity: 0 !important;
transition:
transform 1s cubic-bezier(.16, 1, .3, 1),
opacity .8s cubic-bezier(.16, 1, .3, 1) !important;
display: flex !important;
align-items: center !important;
height: 50px !important;
padding: 0 !important;
pointer-events: none !important;
}
.acs_ghost_nav.acs_ghost_visible {
transform: translateY(0) !important;
opacity: 1 !important;
pointer-events: auto !important;
transition:
transform 1s cubic-bezier(.16, 1, .3, 1) .1s,
opacity .75s cubic-bezier(.16, 1, .3, 1) .05s !important;
}
/* Saat menghilang: cepat, tidak perlu animasi panjang */
.acs_ghost_nav:not(.acs_ghost_visible) {
transition:
transform .4s cubic-bezier(.4, 0, 1, 1),
opacity .3s ease !important;
}
.acs_ghost_nav_inner {
max-width: 1200px;
margin: 0 auto;
width: 100%;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
height: 100%;
box-sizing: border-box;
}
/* Menu items di ghost nav */
.acs_ghost_nav ul.acs_primary_menu {
display: flex !important;
flex-wrap: nowrap !important;
gap: 0 !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
height: 100% !important;
align-items: center !important;
}
.acs_ghost_nav ul.acs_primary_menu>li>a {
color: rgba(255, 255, 255, .82) !important;
font-size: 12px !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
padding: 0 14px !important;
text-decoration: none !important;
display: flex !important;
align-items: center !important;
gap: 5px !important;
height: 50px !important;
transition: background .15s, color .15s !important;
}
.acs_ghost_nav ul.acs_primary_menu>li>a:hover,
.acs_ghost_nav ul.acs_primary_menu>li.current>a {
color: #fff !important;
background: rgba(255, 255, 255, .11) !important;
}
/* User dropdown di kanan ghost nav */
.acs_ghost_user {
display: flex !important;
align-items: center !important;
flex-shrink: 0 !important;
position: relative !important;
overflow: visible !important;
}
/* Pastikan cloned user menu tetap berfungsi di ghost nav */
.acs_ghost_user ul.acs_user_menu {
display: flex !important;
align-items: center !important;
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
gap: 4px !important;
}
.acs_ghost_user ul.acs_user_menu>li>a,
.acs_ghost_user ul.acs_user_menu>li>button {
color: rgba(255, 255, 255, .88) !important;
font-size: 12px !important;
font-weight: 600 !important;
background: rgba(255, 255, 255, .1) !important;
border: 1px solid rgba(255, 255, 255, .2) !important;
border-radius: 20px !important;
padding: 4px 14px !important;
text-decoration: none !important;
cursor: pointer !important;
transition: background .15s !important;
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
}
.acs_ghost_user ul.acs_user_menu>li>a:hover,
.acs_ghost_user ul.acs_user_menu>li>button:hover {
background: rgba(255, 255, 255, .22) !important;
color: #fff !important;
}
.acs_container.acs_navbar_inner,
.acs_navbar_inner {
max-width: 1200px;
margin: 0 auto;
padding: 0 24px;
height: 52px !important;
/* fixed single height, no conflicts */
display: flex !important;
flex-direction: row !important;
align-items: center !important;
/* vertical center items */
justify-content: flex-start;
overflow: visible !important;
}
/* Mobile toggle */
.acs_mobile_toggle {
display: none;
background: transparent;
border: none;
color: #fff;
padding: 8px;
border-radius: 6px;
cursor: pointer;
font-size: 20px;
margin-right: 8px;
line-height: 1;
transition: background .15s;
}
.acs_mobile_toggle:hover {
background: rgba(255, 255, 255, .15);
}
/* Drawer-only elements: hidden on desktop */
.acs_drawer_close,
.acs_drawer_search {
display: none !important;
}
/* Nav menu wrap */
.acs_nav_menu_wrap {
flex: 1 1 auto;
display: flex !important;
align-items: center !important;
height: 52px !important;
overflow: visible !important;
}
/* Primary UL */
ul.acs_primary_menu {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: center !important;
height: 52px !important;
gap: 0 !important;
overflow: visible !important;
}
/* Each LI */
ul.acs_primary_menu>li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
height: 52px !important;
display: flex !important;
align-items: center !important;
position: relative;
}
/* Each link */
ul.acs_primary_menu>li>a {
display: flex !important;
align-items: center !important;
height: 52px !important;
padding: 0 20px !important;
font-size: 15px !important;
font-weight: 500 !important;
color: rgba(255, 255, 255, .9) !important;
text-decoration: none !important;
white-space: nowrap;
gap: 6px;
border-bottom: 3px solid transparent;
transition: background .15s, color .15s;
font-family: 'Rubik', sans-serif;
}
ul.acs_primary_menu>li>a:hover,
ul.acs_primary_menu>li.current>a {
background: rgba(255, 255, 255, .12) !important;
color: #fff !important;
border-bottom-color: #fff;
}
/* Nav icons */
ul.acs_primary_menu>li>a::before {
font-family: 'Font Awesome 6 Free' !important;
font-weight: 900 !important;
font-size: 13px;
opacity: .85;
}
ul.acs_primary_menu>li:first-child>a::before {
content: '\f015';
}
ul.acs_primary_menu>li>a[href*="current"]::before {
content: '\f15b';
}
ul.acs_primary_menu>li>a[href*="archive"]::before {
content: '\f187';
}
ul.acs_primary_menu>li>a[href*="announcement"]::before {
content: '\f0f3';
}
ul.acs_primary_menu>li>a[href*="about"]::before {
content: '\f05a';
}
ul.acs_primary_menu>li>a[href*="editorial"]::before {
content: '\f0c0';
}
ul.acs_primary_menu>li>a[href*="contact"]::before {
content: '\f0e0';
}
/* Dropdown submenu in navbar */
ul.acs_primary_menu>li>ul {
display: none !important;
position: absolute !important;
top: 100% !important;
left: 0 !important;
min-width: 200px !important;
background: #fff !important;
border-top: 3px solid var(--acs-accent, #1a2a4a) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, .15) !important;
z-index: 99999 !important;
list-style: none !important;
padding: 6px 0 !important;
margin: 0 !important;
}
ul.acs_primary_menu>li:hover>ul {
display: block !important;
}
ul.acs_primary_menu>li>ul>li {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
ul.acs_primary_menu>li>ul>li>a {
display: block !important;
padding: 10px 18px !important;
color: #374151 !important;
font-size: 13px !important;
text-decoration: none !important;
border: none !important;
background: transparent !important;
}
ul.acs_primary_menu>li>ul>li>a:hover {
background: #f1f5f9 !important;
color: var(--acs-accent, #1a2a4a) !important;
}
/* ISSN — right side of navbar */
.acs_navbar_issn {
flex: 0 0 auto;
margin-left: auto;
display: flex !important;
align-items: center !important;
gap: 20px !important;
color: rgba(255, 255, 255, .85) !important;
font-family: 'Karla', sans-serif;
font-size: 13px !important;
white-space: nowrap;
height: 52px !important;
padding-right: 4px;
}
.acs_navbar_issn span {
display: inline-block;
}
.acs_navbar_issn strong {
font-weight: 700;
color: #fff !important;
}
/* Responsive */
/* =========================================================
MOBILE RESPONSIVE — Full slide-in drawer
========================================================= */
@media (max-width: 900px) {
/* ── Ghost nav: hide on mobile ── */
.acs_ghost_nav {
display: none !important;
}
/* ── Topbar: compact single-row ── */
.acs_topbar_inner {
height: 60px !important;
padding: 0 16px !important;
flex-wrap: nowrap !important;
gap: 8px !important;
}
/* Logo: smaller on mobile */
.acs_logo_img {
max-height: 40px !important;
max-width: 180px !important;
}
.acs_journal_name_text {
font-size: 16px !important;
}
/* Search: hide text input, show icon only */
.acs_topbar_search {
display: none !important;
}
/* User buttons: compact pill */
.acs_topbar_user ul.acs_user_menu>li>a {
height: 34px !important;
padding: 0 12px !important;
font-size: 12px !important;
}
/* ── Navbar: compact ── */
.acs_navbar_inner {
height: 46px !important;
padding: 0 12px !important;
}
/* ── Mobile toggle: visible ── */
.acs_mobile_toggle {
display: flex !important;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
padding: 0;
margin-right: 4px;
}
/* ── Nav menu: hidden by default, full-width slide-down ── */
.acs_nav_menu_wrap {
display: block !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
bottom: 0 !important;
width: 100% !important;
height: 100% !important;
background: var(--acs-accent, #1a2a4a) !important;
z-index: 99990 !important;
overflow-y: auto !important;
transform: translateX(-100%) !important;
transition: transform .3s cubic-bezier(.4, 0, .2, 1) !important;
padding-top: 60px !important;
box-sizing: border-box !important;
}
/* ── Open state: slide in ── */
.acs_nav_menu_wrap.is_open {
transform: translateX(0) !important;
}
/* ── Primary menu: stacked list ── */
ul.acs_primary_menu {
flex-direction: column !important;
height: auto !important;
width: 100% !important;
padding: 12px 0 !important;
gap: 0 !important;
}
ul.acs_primary_menu>li {
height: auto !important;
width: 100% !important;
display: block !important;
border-bottom: 1px solid rgba(255, 255, 255, .08) !important;
}
ul.acs_primary_menu>li>a {
height: 52px !important;
padding: 0 24px !important;
width: 100% !important;
font-size: 15px !important;
border-bottom: none !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
}
ul.acs_primary_menu>li>a::before {
font-size: 15px !important;
width: 20px !important;
text-align: center;
}
ul.acs_primary_menu>li>a:hover,
ul.acs_primary_menu>li.current>a {
background: rgba(255, 255, 255, .12) !important;
border-bottom: none !important;
}
/* ── Sub-dropdown in mobile: expand inline ── */
ul.acs_primary_menu>li>ul {
display: none !important;
position: static !important;
box-shadow: none !important;
border-top: none !important;
border-radius: 0 !important;
background: rgba(0, 0, 0, .2) !important;
padding: 4px 0 !important;
width: 100% !important;
min-width: unset !important;
}
ul.acs_primary_menu>li.mob_sub_open>ul {
display: block !important;
}
ul.acs_primary_menu>li>ul>li>a {
color: rgba(255, 255, 255, .8) !important;
padding: 10px 24px 10px 52px !important;
font-size: 13px !important;
background: transparent !important;
border-bottom: 1px solid rgba(255, 255, 255, .06) !important;
}
ul.acs_primary_menu>li>ul>li>a:hover {
background: rgba(255, 255, 255, .1) !important;
color: #fff !important;
}
/* ── Close button inside drawer ── */
.acs_drawer_close {
display: flex !important;
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 60px !important;
align-items: center !important;
padding: 0 16px !important;
background: color-mix(in srgb, var(--acs-accent, #1a2a4a) 90%, black 10%) !important;
z-index: 100 !important;
border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
gap: 12px;
box-sizing: border-box;
}
.acs_drawer_close_btn {
background: transparent !important;
border: none !important;
color: #fff !important;
font-size: 20px !important;
cursor: pointer !important;
padding: 8px !important;
border-radius: 6px !important;
display: flex !important;
align-items: center !important;
transition: background .15s !important;
flex-shrink: 0;
}
.acs_drawer_close_btn:hover {
background: rgba(255, 255, 255, .15) !important;
}
.acs_drawer_title {
color: #fff !important;
font-family: 'Rubik', sans-serif !important;
font-size: 15px !important;
font-weight: 600 !important;
flex: 1;
}
/* Search inside drawer */
.acs_drawer_search {
padding: 16px 20px !important;
border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
}
.acs_drawer_search form {
display: flex !important;
align-items: center !important;
background: rgba(255, 255, 255, .12) !important;
border-radius: 8px !important;
overflow: hidden !important;
border: 1px solid rgba(255, 255, 255, .2) !important;
}
.acs_drawer_search input {
flex: 1 !important;
background: transparent !important;
border: none !important;
color: #fff !important;
padding: 10px 16px !important;
font-size: 14px !important;
outline: none !important;
}
.acs_drawer_search input::placeholder {
color: rgba(255, 255, 255, .5) !important;
}
.acs_drawer_search button {
background: transparent !important;
border: none !important;
color: rgba(255, 255, 255, .7) !important;
padding: 10px 14px !important;
cursor: pointer !important;
font-size: 14px !important;
}
/* Body overlay when drawer open */
body.acs_drawer_open {
overflow: hidden !important;
}
/* ── ISSN: hide on mobile ── */
.acs_navbar_issn {
display: none !important;
}
/* ── Hide the "has sub" arrow indicator on mobile items ── */
ul.acs_primary_menu>li.has_children>a::after {
content: '\f107' !important;
font-family: 'Font Awesome 6 Free' !important;
font-weight: 900 !important;
margin-left: auto !important;
font-size: 12px !important;
transition: transform .2s !important;
}
ul.acs_primary_menu>li.has_children.mob_sub_open>a::after {
transform: rotate(180deg) !important;
}
}
/* =========================================================
PAGE LAYOUT — Complete override of base.less float system
Uses flexbox instead of float: left / float: right
========================================================= */
/* Page background */
body,
.pkp_structure_page {
background: #f0f2f5 !important;
}
/* ── FULL FLOAT RESET — override base.less completely ── */
.pkp_structure_content {
display: flex !important;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: flex-start !important;
gap: 24px !important;
max-width: 1200px !important;
width: 100% !important;
margin: 0 auto !important;
padding: 24px 24px 32px !important;
box-sizing: border-box !important;
overflow: visible !important;
/* kill clearfix overflow:hidden from base.less */
}
/* Kill the clearfix pseudo-element from base.less */
.pkp_structure_content::after {
display: none !important;
}
/* Main content — fill remaining space */
.pkp_structure_main {
float: none !important;
/* kill base.less float:left */
flex: 1 1 0 !important;
width: auto !important;
min-width: 0 !important;
box-sizing: border-box !important;
order: 1 !important;
}
body:not([data-theme="dark"]) .pkp_structure_main {
background: #ffffff !important;
border-radius: 4px !important;
padding: 28px 28px 36px !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, .06) !important;
}
body[data-theme="dark"] .pkp_structure_main {
background: #1e293b !important;
border-radius: 4px !important;
padding: 28px 28px 36px !important;
}
/* Sidebar — fixed 280px column */
.pkp_structure_sidebar {
float: none !important;
/* kill base.less float:right */
flex: 0 0 280px !important;
width: 280px !important;
min-width: 0 !important;
box-sizing: border-box !important;
order: 2 !important;
margin-top: 0 !important;
/* kill base.less margin-top:16px */
}
/* Ensure sidebar toggle header hidden on desktop */
.acs_sidebar_toggle_header {
display: none;
}
/* Sidebar body always visible on desktop */
.acs_sidebar_body {
display: block;
}
/* =========================================================
MOBILE RESPONSIVE — ≤ 900px: stacked column layout
========================================================= */
@media (max-width: 900px) {
.pkp_structure_content {
flex-direction: column !important;
padding: 12px !important;
gap: 0 !important;
overflow: visible !important;
}
/* Main always FIRST */
.pkp_structure_main {
order: 1 !important;
width: 100% !important;
flex: none !important;
margin-bottom: 0 !important;
}
body:not([data-theme="dark"]) .pkp_structure_main,
body[data-theme="dark"] .pkp_structure_main {
padding: 16px 14px 24px !important;
border-radius: 4px !important;
}
/* Sidebar always SECOND — below all main content */
.pkp_structure_sidebar {
order: 2 !important;
float: none !important;
width: 100% !important;
flex: none !important;
margin-top: 12px !important;
}
/* ── Sidebar toggle header (mobile only) ── */
.acs_sidebar_toggle_header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: var(--acs-accent, #1a2a4a) !important;
color: #fff !important;
padding: 12px 16px !important;
border-radius: 4px !important;
cursor: pointer !important;
font-family: 'Rubik', sans-serif !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
user-select: none !important;
margin-bottom: 0 !important;
}
.acs_sidebar_toggle_header .acs_sidebar_chevron {
transition: transform .25s !important;
font-size: 12px !important;
}
.acs_sidebar_toggle_header.acs_sidebar_open .acs_sidebar_chevron {
transform: rotate(180deg) !important;
}
/* ── Sidebar body: collapsed by default ── */
.acs_sidebar_body {
display: none !important;
padding-top: 12px !important;
}
.acs_sidebar_body.acs_sidebar_expanded {
display: block !important;
}
}
/* =========================================================
SIDEBAR BLOCKS
========================================================= */
/* Sidebar toggle header: only visible on mobile (hidden on desktop) */
.acs_sidebar_toggle_header {
display: none;
}
/* Sidebar body: always visible on desktop */
.acs_sidebar_body {
display: block;
}
/* Each block card */
.pkp_structure_sidebar .pkp_block {
background: #fff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
margin-bottom: 20px;
overflow: hidden;
}
/* Block title */
.pkp_structure_sidebar .pkp_block h2,
.pkp_structure_sidebar .pkp_block .title {
font-family: 'Rubik', sans-serif;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: #fff;
background: var(--acs-accent, #1a2a4a);
margin: 0;
padding: 10px 16px;
}
/* screen-reader-only h2 — hide ONLY for Make a Submission, not all blocks */
.pkp_structure_sidebar .block_make_submission h2.pkp_screen_reader,
.pkp_structure_sidebar .block_make_submission h2 {
display: none !important;
}
/* Show & style h2 title for custom blocks (including pkp_screen_reader variant) */
.pkp_structure_sidebar .block_custom h2,
.pkp_structure_sidebar .block_custom h2.pkp_screen_reader,
.pkp_structure_sidebar .block_custom .title,
.pkp_structure_sidebar .block_custom h2.title {
display: block !important;
position: static !important;
width: auto !important;
height: auto !important;
overflow: visible !important;
clip: auto !important;
clip-path: none !important;
white-space: normal !important;
/* Title styling */
background: var(--acs-accent, #1a2a4a) !important;
color: #ffffff !important;
font-family: 'Rubik', 'Segoe UI', sans-serif !important;
font-size: 14px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
text-align: center !important;
padding: 11px 16px !important;
margin: 0 !important;
border: none !important;
}
/* Block content area */
.pkp_structure_sidebar .pkp_block .content {
padding: 16px;
}
/* ── Make a Submission button ── */
.block_make_submission_link {
display: block !important;
text-align: center !important;
padding: 12px 20px !important;
background: var(--acs-accent, #1a2a4a) !important;
color: #fff !important;
border-radius: 4px !important;
font-family: 'Rubik', sans-serif !important;
font-size: 14px !important;
font-weight: 600 !important;
text-transform: none !important;
text-decoration: none !important;
letter-spacing: .01em;
transition: opacity .2s;
}
.block_make_submission_link:hover {
opacity: .85;
text-decoration: none !important;
}
/* ── Web Feed block links ── */
.block_web_feed .content a {
display: block;
padding: 6px 0;
font-size: 13px;
color: var(--acs-accent, #1a2a4a);
text-decoration: none;
}
.block_web_feed .content a:hover {
text-decoration: underline;
}
/* ── Login sidebar block ── */
.acs_sidebar_login {
background: #fff;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
margin-bottom: 20px;
overflow: hidden;
}
.acs_sidebar_login .acs_block_title {
font-family: 'Rubik', sans-serif;
font-size: 14px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: .06em;
color: #fff;
background: var(--acs-accent, #1a2a4a);
padding: 10px 16px;
margin: 0;
}
.acs_sidebar_login .acs_block_body {
padding: 16px;
}
.acs_sidebar_login label {
display: block;
font-size: 12px;
font-weight: 600;
color: #374151;
margin-bottom: 4px;
}
.acs_sidebar_login input[type="text"],
.acs_sidebar_login input[type="password"] {
width: 100%;
padding: 8px 10px;
border: 1px solid #d1d5db;
border-radius: 4px;
font-size: 13px;
margin-bottom: 10px;
box-sizing: border-box;
outline: none;
}
.acs_sidebar_login input:focus {
border-color: var(--acs-accent, #1a2a4a);
}
.acs_sidebar_login .acs_login_btn {
display: block;
width: 100%;
padding: 9px;
background: var(--acs-accent, #1a2a4a);
color: #fff;
border: none;
border-radius: 4px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
text-align: center;
transition: opacity .2s;
}
.acs_sidebar_login .acs_login_btn:hover {
opacity: .85;
}
.acs_sidebar_login .acs_login_links {
margin-top: 10px;
font-size: 12px;
display: flex;
justify-content: space-between;
}
.acs_sidebar_login .acs_login_links a {
color: var(--acs-accent, #1a2a4a);
text-decoration: none;
}
.acs_sidebar_login .acs_login_links a:hover {
text-decoration: underline;
}
/* ── Navbar bottom border — lebih tegas ── */
.acs_navbar {
border-bottom: 3px solid rgba(255, 255, 255, .6) !important;
}
/* =========================================================
ARTICLE LISTING — Fix red border, spacing, bullets
========================================================= */
/* Remove bullet points from article lists */
.pkp_structure_main ul,
.pkp_structure_main ol,
.obj_issue_toc ul,
.sections ul {
list-style: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
.pkp_structure_main ul li::marker,
.obj_issue_toc ul li::marker,
.sections ul li::marker {
content: '' !important;
display: none !important;
}
/* Article card — replace red left border with accent color */
.obj_article_summary {
border-left: 4px solid var(--acs-accent, #1a2a4a) !important;
margin-bottom: 20px !important;
padding: 16px 16px 14px !important;
border-radius: 0 4px 4px 0 !important;
background: #fff !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, .06) !important;
list-style: none !important;
}
.obj_article_summary:last-child {
margin-bottom: 0 !important;
}
/* Article title link */
.obj_article_summary .title a {
color: var(--acs-accent, #1a2a4a) !important;
font-weight: 600 !important;
text-decoration: none !important;
font-size: 15px !important;
}
.obj_article_summary .title a:hover {
text-decoration: underline !important;
}
/* Authors */
.obj_article_summary .authors {
font-size: 13px !important;
color: #6b7280 !important;
margin-top: 4px !important;
}
/* Stats row — hide Abstract/PDF : 0 counts (zero = not meaningful in dev) */
.obj_article_summary .stats {
display: none !important;
}
/* Pages */
.obj_article_summary .pages {
font-size: 12px !important;
color: #6b7280 !important;
}
/* Galleys / PDF button */
.obj_article_summary .galleys_links a,
.obj_article_summary .obj_galley_link {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
padding: 5px 12px !important;
background: var(--acs-accent, #1a2a4a) !important;
color: #fff !important;
border-radius: 4px !important;
font-size: 12px !important;
font-weight: 600 !important;
text-decoration: none !important;
margin-top: 8px !important;
transition: opacity .2s !important;
}
.obj_article_summary .galleys_links a:hover {
opacity: .85 !important;
}
/* DOI line */
.obj_article_summary .doi {
font-size: 12px !important;
color: #6b7280 !important;
margin-top: 4px !important;
}
/* ── Article list parent — force gap between cards ── */
.sections>li>ul,
.sections ul,
ul.articles,
.obj_issue_toc ul,
.pkp_structure_main .sections .articles {
display: flex !important;
flex-direction: column !important;
gap: 20px !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
}
/* ── Each article card ── */
.obj_article_summary {
margin-bottom: 0 !important;
/* gap on parent handles spacing */
padding: 18px 20px !important;
border-left: 4px solid var(--acs-accent, #1a2a4a) !important;
border-radius: 0 4px 4px 0 !important;
background: #fff !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, .07) !important;
}
/* ── FINAL article card spacing fix ── */
li.obj_article_summary,
.obj_article_summary {
margin-top: 0 !important;
margin-bottom: 28px !important;
padding-bottom: 20px !important;
}
li.obj_article_summary:last-child,
.obj_article_summary:last-child {
margin-bottom: 0 !important;
}
/* ── Article card: padding-bottom 15px, margin-bottom jadi gap antar card ── */
li.obj_article_summary,
.obj_article_summary {
padding-bottom: 15px !important;
margin-bottom: 15px !important;
}
/* =========================================================
ARTICLE LIST — EXACT HTML STRUCTURE FIX
> div.obj_article_summary.acs_article_item
========================================================= */
/* Force wrapper spacing (override inline style with !important) */
.sections ul>li,
ul.articles>li {
padding-top: 0 !important;
padding-bottom: 15px !important;
/* bottom padding INSIDE li */
margin-bottom: 15px !important;
/* gap BETWEEN li items */
list-style: none !important;
border: none !important;
background: transparent !important;
}
.sections ul>li:last-child,
ul.articles>li:last-child {
margin-bottom: 0 !important;
}
/* Card div inside */
.obj_article_summary.acs_article_item {
border-left: 4px solid var(--acs-accent, #1a2a4a) !important;
padding: 16px 18px 14px !important;
background: #fff !important;
border-radius: 0 4px 4px 0 !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, .07) !important;
}
/* Title */
.acs_article_title a {
color: var(--acs-accent, #1a2a4a) !important;
font-weight: 600 !important;
font-size: 15px !important;
text-decoration: none !important;
}
.acs_article_title a:hover {
text-decoration: underline !important;
}
/* Authors */
.acs_authors {
font-size: 13px !important;
color: #6b7280 !important;
margin-top: 4px !important;
}
/* Stats row — hide Abstract/PDF : 0 */
.article_statistic,
.acs_statistic {
display: none !important;
}
/* PDF galley button */
a.obj_galley_link.pdf {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
padding: 5px 14px !important;
background: var(--acs-accent, #1a2a4a) !important;
color: #fff !important;
border-radius: 4px !important;
font-size: 12px !important;
font-weight: 600 !important;
text-decoration: none !important;
margin-top: 8px !important;
}
a.obj_galley_link.pdf:hover {
opacity: .85 !important;
}
/* DOI */
.acs_doi {
margin-top: 6px !important;
font-size: 12px !important;
color: #6b7280 !important;
}
.doi_link {
color: #6b7280 !important;
text-decoration: none !important;
}
.doi_link:hover {
text-decoration: underline !important;
}
/* ── FINAL CLEAN: Article list spacing via padding only, no margin ── */
.sections ul>li,
ul.articles>li,
ul.cmp_article_list>li {
padding: 0 !important;
/* reset semua padding dari li */
margin: 0 0 16px 0 !important;
/* hanya margin-bottom 16px */
list-style: none !important;
}
.sections ul>li:last-child,
ul.articles>li:last-child,
ul.cmp_article_list>li:last-child {
margin-bottom: 0 !important;
}
/* =========================================================
TAB BUTTONS — Fix red → accent color
========================================================= */
.acs_tab_btn {
background: transparent !important;
color: #374151 !important;
border: none !important;
border-bottom: 3px solid transparent !important;
padding: 10px 20px !important;
font-size: 14px !important;
font-weight: 600 !important;
cursor: pointer;
font-family: 'Rubik', sans-serif;
transition: all .2s;
text-transform: uppercase;
letter-spacing: .04em;
}
.acs_tab_btn.acs_tab_active,
.acs_tab_btn:hover {
background: var(--acs-accent, #1a2a4a) !important;
color: #fff !important;
border-bottom-color: var(--acs-accent, #1a2a4a) !important;
border-radius: 4px 4px 0 0 !important;
}
/* =========================================================
JOURNAL THUMBNAIL — Placeholder + cover image
========================================================= */
.journal_thumb {
float: right;
margin: 0 0 16px 20px;
width: 160px;
flex-shrink: 0;
}
.journal_thumb img,
.acs_cover_placeholder {
width: 160px !important;
height: 210px !important;
object-fit: cover;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
display: block;
}
/* Placeholder — abu-abu dengan ikon */
.acs_cover_placeholder {
background: #e5e7eb !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-direction: column;
color: #9ca3af;
font-size: 12px;
text-align: center;
gap: 6px;
}
.acs_cover_placeholder i {
font-size: 36px;
color: #d1d5db;
}
/* Issue cover in issue TOC */
.obj_issue_toc .cover img {
max-width: 160px !important;
max-height: 210px !important;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
}
/* =========================================================
ABOUT TAB — Noble/IJFS elegant layout
========================================================= */
/* Tab bar styling */
.acs_tabs_header {
display: flex !important;
align-items: stretch !important;
gap: 0 !important;
border-bottom: 2px solid #e5e7eb !important;
margin-bottom: 0 !important;
}
.acs_tab_btn {
border-radius: 0 !important;
padding: 12px 28px !important;
font-size: 13px !important;
font-weight: 700 !important;
letter-spacing: .08em !important;
text-transform: uppercase !important;
border: none !important;
border-right: 1px solid #e5e7eb !important;
margin-bottom: -2px !important;
/* overlap bottom border */
}
.acs_tab_btn.acs_tab_active {
background: var(--acs-accent, #1a2a4a) !important;
color: #fff !important;
border-bottom: 2px solid var(--acs-accent, #1a2a4a) !important;
}
.acs_tab_btn:not(.acs_tab_active) {
background: #f9fafb !important;
color: #6b7280 !important;
border-bottom: 2px solid transparent !important;
}
.acs_tab_btn:not(.acs_tab_active):hover {
background: #f3f4f6 !important;
color: #374151 !important;
}
/* Tab panels */
.acs_tabs_content {
background: #fff;
border: 1px solid #e5e7eb;
border-top: none;
border-radius: 0 0 4px 4px;
padding: 28px 24px !important;
}
/* About wrapper — flex: cover left, text right */
.journal_about_wrapper {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 28px !important;
}
/* Journal/issue thumbnail — left column, looks like book */
.journal_thumb {
flex: 0 0 180px !important;
float: none !important;
margin: 0 !important;
}
.journal_thumb a {
display: block;
}
.journal_thumb img {
width: 180px !important;
height: 230px !important;
object-fit: cover !important;
border-radius: 3px 6px 6px 3px !important;
box-shadow: -4px 4px 12px rgba(0, 0, 0, .25), 2px 0 0 rgba(0, 0, 0, .08) !important;
display: block !important;
}
.acs_cover_placeholder {
width: 180px !important;
height: 230px !important;
background: #e5e7eb !important;
border-radius: 3px 6px 6px 3px !important;
box-shadow: -4px 4px 12px rgba(0, 0, 0, .2) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
color: #9ca3af !important;
font-size: 12px !important;
}
.acs_cover_placeholder i {
font-size: 40px !important;
color: #d1d5db !important;
}
/* Description text column */
.journal_description_body {
flex: 1 !important;
font-size: 14.5px !important;
line-height: 1.8 !important;
color: #1f2937 !important;
text-align: justify !important;
position: relative !important;
padding-bottom: 24px !important;
}
/* Decorative accent line after description */
.journal_description_body::after {
content: '' !important;
position: absolute !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
height: 3px !important;
background: linear-gradient(to right, var(--acs-accent, #1a2a4a), transparent) !important;
border-radius: 2px !important;
}
/* ── Cover image — perbesar ── */
.journal_thumb {
flex: 0 0 240px !important;
}
.journal_thumb img,
.acs_cover_placeholder {
width: 240px !important;
height: 310px !important;
}
/* ── Cover: reset ke ukuran proporsional ── */
.journal_thumb {
flex: 0 0 200px !important;
}
.journal_thumb img,
.acs_cover_placeholder {
width: 200px !important;
height: 260px !important;
}
/* ── Deskripsi: truncate dengan fade + Read More ── */
.journal_description_body {
position: relative !important;
max-height: 260px !important;
/* setara tinggi cover */
overflow: hidden !important;
padding-bottom: 36px !important;
}
/* Fade gradient bottom */
.journal_description_body::before {
content: '' !important;
position: absolute !important;
bottom: 28px !important;
left: 0 !important;
right: 0 !important;
height: 60px !important;
background: linear-gradient(to bottom, transparent, #fff) !important;
pointer-events: none !important;
z-index: 1 !important;
}
/* Read More button */
.journal_description_body::after {
content: 'Baca selengkapnya ▾' !important;
position: absolute !important;
bottom: 4px !important;
left: 50% !important;
transform: translateX(-50%) !important;
font-size: 12px !important;
font-weight: 600 !important;
color: var(--acs-accent, #1a2a4a) !important;
background: #fff !important;
padding: 3px 12px !important;
border: 1px solid var(--acs-accent, #1a2a4a) !important;
border-radius: 20px !important;
cursor: pointer !important;
z-index: 2 !important;
white-space: nowrap !important;
}
/* Expanded state */
.journal_description_body.acs_expanded {
max-height: none !important;
overflow: visible !important;
padding-bottom: 24px !important;
}
.journal_description_body.acs_expanded::before {
display: none !important;
}
.journal_description_body.acs_expanded::after {
content: '' !important;
border: none !important;
padding: 0 !important;
}
/* ── Remove bad ::after button, replace with proper style ── */
.journal_description_body::after {
content: none !important;
border: none !important;
background: none !important;
padding: 0 !important;
}
.journal_description_body {
padding-bottom: 0 !important;
}
.journal_description_body.acs_expanded {
max-height: none !important;
overflow: visible !important;
}
.journal_description_body.acs_expanded::before {
display: none !important;
}
/* Real Read More button */
.acs_read_more_btn {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
margin-top: 10px !important;
padding: 5px 16px !important;
background: transparent !important;
color: var(--acs-accent, #1a2a4a) !important;
border: 1px solid var(--acs-accent, #1a2a4a) !important;
border-radius: 20px !important;
font-size: 12px !important;
font-weight: 600 !important;
cursor: pointer !important;
transition: all .2s !important;
}
.acs_read_more_btn:hover {
background: var(--acs-accent, #1a2a4a) !important;
color: #fff !important;
}
.acs_read_more_btn.hidden {
display: none !important;
}
/* ── desc col: flex column, takes remaining width ── */
.acs_desc_col {
flex: 1 1 0 !important;
display: flex !important;
flex-direction: column !important;
align-items: flex-start !important;
min-width: 0 !important;
}
/* ── Read More: elegant text-link style ── */
.acs_read_more_btn {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
margin-top: 8px !important;
padding: 0 !important;
background: transparent !important;
color: var(--acs-accent, #1a2a4a) !important;
border: none !important;
border-bottom: 1.5px solid var(--acs-accent, #1a2a4a) !important;
border-radius: 0 !important;
font-size: 13px !important;
font-weight: 600 !important;
letter-spacing: .03em !important;
cursor: pointer !important;
transition: opacity .2s !important;
font-family: 'Rubik', sans-serif !important;
}
.acs_read_more_btn:hover {
opacity: .7 !important;
}
.acs_read_more_btn.hidden {
display: none !important;
}
/* ── Author affiliation in article summary ── */
.acs_authors {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
.author_item {
display: flex !important;
flex-direction: column !important;
}
.acs_author_name {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
font-size: 13px !important;
color: #374151 !important;
font-weight: 500 !important;
flex-wrap: wrap !important;
}
.acs_author_affil {
font-size: 11.5px !important;
color: #6b7280 !important;
font-style: italic !important;
margin-top: 1px !important;
padding-left: 2px !important;
}
/* ── Author layout: names row + affiliations row ── */
.acs_authors {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
}
.acs_author_names {
font-size: 13px !important;
color: #374151 !important;
font-weight: 500 !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 2px !important;
}
.acs_author_flag {
vertical-align: middle !important;
margin: 0 1px !important;
}
.acs_author_sep {
color: #9ca3af !important;
}
.acs_author_affils {
font-size: 11.5px !important;
color: #6b7280 !important;
font-style: italic !important;
display: flex !important;
flex-wrap: wrap !important;
align-items: baseline !important;
gap: 0 !important;
}
.acs_affil_item {
white-space: nowrap !important;
}
.acs_affil_sep {
margin: 0 2px !important;
color: #9ca3af !important;
}
/* =========================================================
ARCHIVE PAGE — Issue grid cards
========================================================= */
.acs_archive_title {
font-size: 24px !important;
font-weight: 700 !important;
color: var(--acs-accent, #1a2a4a) !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
margin-bottom: 24px !important;
padding-bottom: 10px !important;
border-bottom: 3px solid var(--acs-accent, #1a2a4a) !important;
}
.acs_issues_grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
gap: 24px !important;
margin-bottom: 32px !important;
}
.acs_issue_card {
display: flex !important;
flex-direction: column !important;
text-decoration: none !important;
color: inherit !important;
transition: transform .2s, box-shadow .2s !important;
border-radius: 6px !important;
overflow: hidden !important;
}
.acs_issue_card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, .12) !important;
}
/* Cover area */
.acs_issue_cover {
width: 100% !important;
aspect-ratio: 3/4 !important;
overflow: hidden !important;
}
.acs_issue_cover img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
display: block !important;
border-radius: 4px 4px 0 0 !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, .15) !important;
}
/* Placeholder */
.acs_issue_placeholder {
width: 100% !important;
height: 100% !important;
background: linear-gradient(135deg, var(--acs-accent, #1a2a4a) 0%, #2d4a7a 100%) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
gap: 10px !important;
border-radius: 4px 4px 0 0 !important;
padding: 12px !important;
box-sizing: border-box !important;
}
.acs_issue_placeholder i {
font-size: 32px !important;
color: rgba(255, 255, 255, .3) !important;
}
.acs_ph_vol {
font-size: 11px !important;
font-weight: 700 !important;
color: rgba(255, 255, 255, .9) !important;
text-align: center !important;
line-height: 1.3 !important;
letter-spacing: .03em !important;
}
/* Issue info below cover */
.acs_issue_info {
padding: 8px 10px !important;
background: #fff !important;
border: 1px solid #e5e7eb !important;
border-top: 3px solid var(--acs-accent, #1a2a4a) !important;
border-radius: 0 0 4px 4px !important;
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
}
.acs_issue_label {
font-size: 12px !important;
font-weight: 700 !important;
color: var(--acs-accent, #1a2a4a) !important;
text-transform: uppercase !important;
letter-spacing: .03em !important;
line-height: 1.3 !important;
}
.acs_issue_date {
font-size: 11px !important;
color: #9ca3af !important;
}
/* ── Archive card: perjelas border dan shadow ── */
.acs_issue_card {
border: 2px solid #d1d5db !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, .10) !important;
border-radius: 8px !important;
}
.acs_issue_card:hover {
border-color: var(--acs-accent, #1a2a4a) !important;
box-shadow: 0 8px 24px rgba(0, 0, 0, .18) !important;
transform: translateY(-4px) !important;
}
.acs_issue_info {
border: none !important;
border-top: 3px solid var(--acs-accent, #1a2a4a) !important;
border-radius: 0 0 6px 6px !important;
}
.acs_issue_cover img,
.acs_issue_placeholder {
border-radius: 6px 6px 0 0 !important;
}
/* ── Archive: fix aspect ratio + compact placeholder ── */
.acs_issue_cover {
aspect-ratio: 2/3 !important;
}
/* standard book cover ratio */
.acs_issue_placeholder {
padding: 16px 12px !important;
gap: 8px !important;
}
.acs_issue_placeholder i {
font-size: 28px !important;
}
.acs_ph_vol {
font-size: 10px !important;
font-weight: 700 !important;
text-align: center !important;
line-height: 1.4 !important;
word-break: break-word !important;
color: rgba(255, 255, 255, .95) !important;
}
/* ── Archive cover: fix object-fit agar tidak ada whitespace ── */
.acs_issue_cover {
aspect-ratio: 2/3 !important;
background: #f3f4f6 !important;
/* bg jika gambar tidak cover penuh */
}
.acs_issue_cover img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center center !important;
display: block !important;
}
/* ── Footer: hapus bullet titik dari semua li ── */
.acs_footer ul,
.acs_footer li,
.acs_footer_body ul,
.acs_footer_body li,
.pkp_structure_footer ul,
.pkp_structure_footer li {
list-style: none !important;
list-style-type: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
/* ── Footer: hapus SEMUA bullet dari seluruh halaman ── */
.pkp_structure_footer_wrapper ul,
.pkp_structure_footer_wrapper ol,
.pkp_structure_footer_wrapper li,
.acs_footer ul,
.acs_footer ol,
.acs_footer li,
.acs_footer_page_content ul,
.acs_footer_page_content ol,
.acs_footer_page_content li {
list-style: none !important;
list-style-type: none !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
.acs_footer_page_content ul,
.acs_footer_page_content ol {
padding: 0 !important;
margin: 0 !important;
}
/* Fix --ojk-red → --acs-accent di footer */
.acs_footer_heading {
border-bottom-color: var(--acs-accent, #1a2a4a) !important;
}
.acs_footer_heading .fa,
.acs_footer_heading i {
color: rgba(255, 255, 255, .6) !important;
}
.acs_issn_label {
background: var(--acs-accent, #1a2a4a) !important;
}
/* ── Footer body icons: perjelas warna ── */
.acs_footer_body .fa,
.acs_footer_body .fas,
.acs_footer_body .far,
.acs_footer_body i.fa,
.acs_footer_body i.fas,
.acs_footer_body i.far {
color: rgba(255, 255, 255, 0.75) !important;
opacity: 1 !important;
font-size: 13px !important;
margin-right: 6px !important;
}
/* =========================================================
GLOBAL: Replace semua #97180f merah → var(--acs-accent)
========================================================= */
/* Breadcrumb */
.cmp_breadcrumbs>ol>li:not(.current):hover,
.cmp_breadcrumbs>ol>li.current {
background: var(--acs-accent, #1a2a4a) !important;
color: #fff !important;
}
.cmp_breadcrumbs>ol>li:not(.current):hover::after {
border-left-color: var(--acs-accent, #1a2a4a) !important;
}
.cmp_breadcrumbs>ol>li.current span,
.cmp_breadcrumbs>ol>li.current h1 {
color: #fff !important;
}
/* Tab active */
.acs_tab_btn.acs_tab_active {
background: var(--acs-accent, #1a2a4a) !important;
border-color: var(--acs-accent, #1a2a4a) !important;
color: #fff !important;
}
/* Article card left border */
.obj_article_summary.acs_article_item {
border-left-color: var(--acs-accent, #1a2a4a) !important;
}
/* Article title hover */
.acs_article_title a:hover {
color: var(--acs-accent, #1a2a4a) !important;
}
/* Galley buttons */
.acs_galleys .obj_galley_link,
.acs_galleys a {
border-color: var(--acs-accent, #1a2a4a) !important;
color: var(--acs-accent, #1a2a4a) !important;
}
.acs_galleys .obj_galley_link:hover,
.acs_galleys a:hover {
background: var(--acs-accent, #1a2a4a) !important;
color: #fff !important;
}
/* DOI link hover */
.doi_link:hover {
color: var(--acs-accent, #1a2a4a) !important;
}
/* Announcement heading border + color */
.acs_announce_heading {
border-bottom-color: var(--acs-accent, #1a2a4a) !important;
}
.cmp_announcements h2,
#homepageAnnouncements h2 {
color: var(--acs-accent, #1a2a4a) !important;
border-bottom-color: var(--acs-accent, #1a2a4a) !important;
}
.obj_announcement_summary h3 a:hover,
.obj_announcement_summary h4 a:hover {
color: var(--acs-accent, #1a2a4a) !important;
}
.obj_announcement_summary .date {
color: var(--acs-accent, #1a2a4a) !important;
}
/* Read More button */
.obj_announcement_summary .read_more,
.cmp_announcements .read_more {
background: var(--acs-accent, #1a2a4a) !important;
}
.obj_announcement_summary .read_more:hover,
.cmp_announcements .read_more:hover {
background: color-mix(in srgb, var(--acs-accent, #1a2a4a) 80%, white) !important;
}
/* =========================================================
ARTICLE DETAIL PAGE — Noble-inspired layout
========================================================= */
/* Title */
.acs_article_page_title {
font-size: 26px !important;
font-weight: 700 !important;
line-height: 1.35 !important;
color: #1a1a2e !important;
margin: 20px 0 8px !important;
font-family: 'Rubik', sans-serif !important;
}
.acs_article_page_subtitle {
font-size: 18px !important;
color: #4b5563 !important;
margin: 0 0 12px !important;
font-style: italic !important;
}
/* DOI row */
.acs_article_doi_row {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
gap: 12px !important;
margin-bottom: 20px !important;
flex-wrap: wrap !important;
}
.acs_doi_link {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
font-size: 13.5px !important;
color: #374151 !important;
text-decoration: none !important;
}
.acs_doi_link .ai {
font-size: 18px !important;
color: #f6a623 !important;
}
.acs_doi_link:hover {
text-decoration: underline !important;
color: var(--acs-accent, #1a2a4a) !important;
}
.acs_article_doi_plugins {
display: flex;
align-items: center;
gap: 8px;
}
/* Authors grid — 2 columns */
.acs_article_authors_section {
margin-bottom: 24px !important;
}
.acs_authors_grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
gap: 16px !important;
}
.acs_author_card {
background: #f8fafc !important;
border: 1px solid #e5e7eb !important;
border-radius: 8px !important;
padding: 14px 16px !important;
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
}
.acs_ac_name {
display: flex;
align-items: center;
gap: 7px;
}
.acs_ac_name i {
color: var(--acs-accent, #1a2a4a) !important;
}
.acs_ac_name strong {
font-size: 14px !important;
color: #111827 !important;
}
.acs_ac_email,
.acs_ac_affil,
.acs_ac_orcid {
display: flex !important;
align-items: flex-start !important;
gap: 6px !important;
font-size: 12.5px !important;
color: #6b7280 !important;
}
.acs_ac_email i,
.acs_ac_affil i {
color: var(--acs-accent, #1a2a4a) !important;
opacity: .6;
margin-top: 2px;
flex-shrink: 0;
}
.acs_ac_orcid a {
color: #a6ce39 !important;
font-size: 12px !important;
word-break: break-all;
}
/* Galleys top */
.acs_article_galleys_top {
margin-bottom: 20px !important;
}
.acs_galleys_list {
list-style: none !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
padding: 0 !important;
margin: 0 !important;
}
.acs_galleys_list li {
margin: 0 !important;
}
/* Cover image */
.acs_article_cover {
margin-bottom: 24px !important;
text-align: center !important;
}
.acs_article_cover img {
max-width: 100% !important;
max-height: 400px !important;
object-fit: contain !important;
border-radius: 6px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, .12) !important;
}
/* Article Tabs */
.acs_article_tabs_wrapper {
margin-bottom: 32px !important;
}
.acs_article_tabs_header {
display: flex !important;
border-bottom: 2px solid #e5e7eb !important;
flex-wrap: wrap !important;
}
.acs_art_tab_btn {
padding: 10px 22px !important;
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
background: transparent !important;
border: none !important;
border-bottom: 3px solid transparent !important;
margin-bottom: -2px !important;
cursor: pointer !important;
color: #6b7280 !important;
transition: all .2s !important;
}
.acs_art_tab_btn:hover {
color: var(--acs-accent, #1a2a4a) !important;
}
.acs_art_tab_btn.acs_art_tab_active {
color: var(--acs-accent, #1a2a4a) !important;
border-bottom-color: var(--acs-accent, #1a2a4a) !important;
background: transparent !important;
}
.acs_article_tabs_content {
padding: 24px !important;
border: 1px solid #e5e7eb !important;
border-top: none !important;
background: #fff !important;
border-radius: 0 0 6px 6px !important;
}
.acs_art_tab_panel {
display: none !important;
}
.acs_art_tab_panel.acs_art_tab_panel_active {
display: block !important;
}
/* Keywords inside abstract tab */
.acs_keywords_section {
margin-top: 16px !important;
padding-top: 14px !important;
border-top: 1px solid #f3f4f6 !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
align-items: center !important;
}
.acs_keywords_label {
font-size: 12px !important;
font-weight: 700 !important;
color: #374151 !important;
text-transform: uppercase !important;
letter-spacing: .05em !important;
margin-right: 4px !important;
}
.acs_keyword_tag {
background: #f3f4f6 !important;
color: #374151 !important;
font-size: 12px !important;
padding: 3px 10px !important;
border-radius: 20px !important;
border: 1px solid #e5e7eb !important;
}
/* Details bar below tabs */
.acs_article_details_bar {
display: flex !important;
flex-wrap: wrap !important;
gap: 0 !important;
border: 1px solid #e5e7eb !important;
border-radius: 6px !important;
overflow: hidden !important;
margin-bottom: 24px !important;
}
.acs_detail_item {
flex: 1 1 280px !important;
padding: 12px 16px !important;
border-bottom: 1px solid #e5e7eb !important;
display: flex !important;
gap: 10px !important;
align-items: flex-start !important;
background: #fafafa !important;
}
.acs_detail_item:last-child {
border-bottom: none !important;
}
.acs_detail_label {
font-size: 12px !important;
font-weight: 700 !important;
color: var(--acs-accent, #1a2a4a) !important;
text-transform: uppercase !important;
letter-spacing: .05em !important;
min-width: 110px !important;
flex-shrink: 0 !important;
}
.acs_detail_label i {
margin-right: 4px !important;
}
.acs_detail_value {
font-size: 13px !important;
color: #374151 !important;
}
.acs_detail_value a {
color: var(--acs-accent, #1a2a4a) !important;
text-decoration: none !important;
}
.acs_detail_value a:hover {
text-decoration: underline !important;
}
.acs_detail_license .acs_detail_value {
font-size: 12px !important;
}
.acs_bio_item {
margin-bottom: 12px !important;
padding-bottom: 12px !important;
border-bottom: 1px solid #f3f4f6 !important;
}
/* ── Article compact meta bar ── */
.acs_article_meta_bar {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 6px 12px !important;
padding: 12px 16px !important;
background: #f8fafc !important;
border: 1px solid #e5e7eb !important;
border-radius: 8px !important;
margin-bottom: 20px !important;
}
.acs_meta_galleys {
display: flex !important;
gap: 6px !important;
flex-wrap: wrap !important;
}
.acs_meta_divider {
color: #d1d5db !important;
font-size: 16px !important;
user-select: none !important;
}
.acs_meta_chip {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
font-size: 12.5px !important;
color: #374151 !important;
padding: 4px 10px !important;
background: #fff !important;
border: 1px solid #e5e7eb !important;
border-radius: 20px !important;
}
.acs_meta_chip i {
color: var(--acs-accent, #1a2a4a) !important;
font-size: 11px !important;
}
.acs_meta_chip_label {
color: #9ca3af !important;
font-size: 11px !important;
margin-right: 2px !important;
}
.acs_meta_chip_val {
font-weight: 600 !important;
color: #1f2937 !important;
}
.acs_meta_chip_val a,
a.acs_meta_chip_val {
color: var(--acs-accent, #1a2a4a) !important;
text-decoration: none !important;
}
.acs_meta_chip_val a:hover,
a.acs_meta_chip_val:hover {
text-decoration: underline !important;
}
.acs_meta_chip_license a {
display: flex !important;
align-items: center !important;
gap: 4px !important;
text-decoration: none !important;
color: inherit !important;
}
.acs_meta_chip_license .ai {
font-size: 14px !important;
color: #f6a623 !important;
}
/* ── Fix article tab buttons: text warna jelas ── */
.acs_article_tabs_header {
background: #f9fafb !important;
border-bottom: 2px solid #e5e7eb !important;
}
.acs_art_tab_btn {
color: #6b7280 !important;
background: transparent !important;
font-size: 12px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .07em !important;
padding: 11px 22px !important;
border: none !important;
border-bottom: 3px solid transparent !important;
margin-bottom: -2px !important;
cursor: pointer !important;
}
.acs_art_tab_btn:hover {
color: var(--acs-accent, #1a2a4a) !important;
}
.acs_art_tab_btn.acs_art_tab_active {
color: var(--acs-accent, #1a2a4a) !important;
border-bottom-color: var(--acs-accent, #1a2a4a) !important;
background: transparent !important;
}
.acs_article_tabs_content {
background: #fff !important;
padding: 24px !important;
border: 1px solid #e5e7eb !important;
border-top: none !important;
}
/* How to Cite plugin output inside tab — hide plugin's own heading since tab btn is the label */
#acs_artab_howtocite .item.citation_format>h2.label,
#acs_artab_howtocite>.item.citation>h2.label {
display: none !important;
}
/* ===================================================
HOW TO CITE PLUGIN — tampil bagus di dalam tab
=================================================== */
/* Sembunyikan HOW TO CITE duplikat di luar tab (dari Templates::Article::Details) */
.acs_details_hook_area .item.citation,
.acs_details_hook_area .item.citation_display,
.acs_details_hook_area section.sub_item.citation_display {
display: none !important;
}
/* Style the citation format list inside tab */
#acs_artab_howtocite .item.citation {
display: block !important;
}
#acs_artab_howtocite .item.citation h2.label {
display: none !important;
}
#acs_artab_howtocite .sub_item.citation_display h2.label {
font-size: 13px !important;
font-weight: 700 !important;
color: #374151 !important;
text-transform: uppercase !important;
letter-spacing: .05em !important;
margin-bottom: 10px !important;
}
#acs_artab_howtocite .citation_display_formats {
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
#acs_artab_howtocite .citation_display_formats li {
margin: 0 !important;
}
#acs_artab_howtocite .citation_display_formats a,
#acs_artab_howtocite .citation_display_formats button {
display: inline-block !important;
padding: 5px 14px !important;
font-size: 12px !important;
font-weight: 600 !important;
border: 1px solid var(--acs-accent, #1a2a4a) !important;
border-radius: 4px !important;
color: var(--acs-accent, #1a2a4a) !important;
background: #fff !important;
cursor: pointer !important;
text-decoration: none !important;
transition: all .15s !important;
}
#acs_artab_howtocite .citation_display_formats a:hover,
#acs_artab_howtocite .citation_display_formats button:hover {
background: var(--acs-accent, #1a2a4a) !important;
color: #fff !important;
}
#acs_artab_howtocite .value {
margin-top: 14px !important;
}
#acs_artab_howtocite .citation_text,
#acs_artab_howtocite .value p {
background: #f8fafc !important;
border: 1px solid #e5e7eb !important;
border-radius: 6px !important;
padding: 14px 16px !important;
font-size: 13.5px !important;
line-height: 1.7 !important;
color: #374151 !important;
}
/* ===================================================
SIMILAR ARTICLES — styling premium
=================================================== */
#articlesBySimilarityList {
margin-top: 24px !important;
padding-top: 20px !important;
border-top: 2px solid #f3f4f6 !important;
}
#articlesBySimilarityList h3 {
font-size: 13px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
color: var(--acs-accent, #1a2a4a) !important;
margin-bottom: 14px !important;
}
#articlesBySimilarityList h3 a {
color: inherit !important;
text-decoration: none !important;
}
#articlesBySimilarityList ul {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
#articlesBySimilarityList li {
padding: 10px 0 !important;
border-bottom: 1px solid #f3f4f6 !important;
font-size: 13px !important;
line-height: 1.5 !important;
}
#articlesBySimilarityList li:last-child {
border-bottom: none !important;
}
#articlesBySimilarityList li a {
color: var(--acs-accent, #1a2a4a) !important;
text-decoration: none !important;
font-weight: 500 !important;
}
#articlesBySimilarityList li a:hover {
text-decoration: underline !important;
}
#articlesBySimilarityList .authors {
font-size: 12px !important;
color: #6b7280 !important;
margin-top: 2px !important;
}
/* ===================================================
COPYRIGHT SECTION — dipindah ke bawah tabs
=================================================== */
.acs_article_copyright_section {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 12px 16px !important;
background: #f8fafc !important;
border: 1px solid #e5e7eb !important;
border-radius: 6px !important;
margin-bottom: 20px !important;
font-size: 12.5px !important;
color: #374151 !important;
flex-wrap: wrap !important;
}
.acs_article_copyright_section img {
height: 22px !important;
width: auto !important;
}
.acs_article_copyright_section a {
color: var(--acs-accent, #1a2a4a) !important;
text-decoration: none !important;
}
.acs_article_copyright_section a:hover {
text-decoration: underline !important;
}
.acs_article_copyright_section span {
color: #6b7280 !important;
font-size: 12px !important;
}
.acs_license_terms {
font-size: 12px !important;
color: #6b7280 !important;
}
/* ── Authors flat style (no card box) ── */
.acs_authors_flat_grid {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important;
gap: 0 !important;
border-top: 1px solid #f0f0f0 !important;
margin-bottom: 20px !important;
}
.acs_author_flat {
padding: 12px 16px 12px 0 !important;
border-bottom: 1px solid #f5f5f5 !important;
}
.acs_af_name {
font-size: 14.5px !important;
font-weight: 700 !important;
color: var(--acs-accent, #1a2a4a) !important;
margin-bottom: 4px !important;
display: flex !important;
align-items: center !important;
gap: 6px !important;
}
.acs_af_affil,
.acs_af_email {
display: flex !important;
align-items: flex-start !important;
gap: 5px !important;
font-size: 12.5px !important;
color: #6b7280 !important;
margin-top: 3px !important;
}
.acs_af_affil i,
.acs_af_email i {
font-size: 11px !important;
color: #9ca3af !important;
margin-top: 2px !important;
flex-shrink: 0 !important;
}
.acs_af_orcid_inline {
margin-left: 4px !important;
}
/* ================================================
HOW TO CITE — Plugin output via acs_article_main_hook_area
Plugin CSL terdaftar di Templates::Article::Details
yang dipanggil dari #acs_copyright_section di template
================================================ */
/* acs_article_main_hook_area — berisi Templates::Article::Main (plugin lain) */
.acs_article_main_hook_area {
margin-bottom: 8px !important;
}
/* ================================================
HOW TO CITE — styling output plugin CSL
di dalam .acs_article_howtocite_area (via Templates::Article::Details)
================================================ */
.acs_article_howtocite_area {
margin-bottom: 24px !important;
}
.acs_article_howtocite_area .item.citation {
display: block !important;
}
/* Heading "HOW TO CITE" dari plugin sudah cukup, styling natural */
.acs_article_howtocite_area .item.citation>h2.label {
font-size: 16px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
color: var(--acs-accent, #1a2a4a) !important;
padding: 0 0 10px !important;
border-bottom: 2px solid #f0f0f0 !important;
margin-bottom: 16px !important;
}
.acs_article_howtocite_area .sub_item.citation_display h2.label {
font-size: 12px !important;
font-weight: 600 !important;
color: #6b7280 !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
margin-bottom: 8px !important;
}
.acs_article_howtocite_area #citationOutput,
.acs_article_howtocite_area .citation_display .value {
background: #f8fafc !important;
border: 1px solid #e5e7eb !important;
border-radius: 6px !important;
padding: 14px 16px !important;
font-size: 13.5px !important;
line-height: 1.7 !important;
color: #374151 !important;
margin-bottom: 12px !important;
}
.acs_article_howtocite_area .citation_formats_button {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
padding: 7px 16px !important;
font-size: 12px !important;
font-weight: 600 !important;
border: 1px solid var(--acs-accent, #1a2a4a) !important;
border-radius: 4px !important;
color: var(--acs-accent, #1a2a4a) !important;
background: #fff !important;
cursor: pointer !important;
text-transform: uppercase !important;
letter-spacing: .05em !important;
transition: all .15s !important;
}
.acs_article_howtocite_area .citation_formats_button:hover {
background: var(--acs-accent, #1a2a4a) !important;
color: #fff !important;
}
.acs_article_howtocite_area .citation_formats_list {
margin-top: 10px !important;
padding: 12px !important;
background: #f9fafb !important;
border: 1px solid #e5e7eb !important;
border-radius: 6px !important;
}
.acs_article_howtocite_area .citation_formats_styles {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-wrap: wrap !important;
gap: 6px !important;
}
.acs_article_howtocite_area .citation_formats_styles a {
display: inline-block !important;
padding: 5px 12px !important;
font-size: 12px !important;
border: 1px solid #d1d5db !important;
border-radius: 4px !important;
color: #374151 !important;
text-decoration: none !important;
background: #fff !important;
transition: all .15s !important;
}
.acs_article_howtocite_area .citation_formats_styles a:hover {
border-color: var(--acs-accent, #1a2a4a) !important;
color: var(--acs-accent, #1a2a4a) !important;
}
/* Sembunyikan jika aria-hidden=true */
.acs_article_howtocite_area #cslCitationFormats[aria-hidden="true"] {
display: none !important;
}
/* ================================================
TAB PANELS
================================================ */
.acs_art_tab_panel {
display: none !important;
}
.acs_art_tab_panel.acs_art_tab_panel_active {
display: block !important;
padding: 24px !important;
}
/* ================================================
VIBRANT COLOR ENHANCEMENTS — Article Detail Page
================================================ */
/* Meta bar: gradient + colored left border */
article.acs_article_details .acs_article_meta_bar,
.obj_article_details .acs_article_meta_bar {
background: linear-gradient(135deg, #f0f4ff 0%, #f8f9ff 100%) !important;
border: 1px solid #c7d4f0 !important;
border-left: 4px solid var(--acs-accent, #1a2a4a) !important;
}
article.acs_article_details .acs_meta_chip,
.obj_article_details .acs_meta_chip {
background: #fff !important;
border: 1px solid #c7d4f0 !important;
box-shadow: 0 1px 3px rgba(26, 42, 74, .07) !important;
}
article.acs_article_details .acs_meta_chip_val,
.obj_article_details .acs_meta_chip_val {
color: var(--acs-accent, #1a2a4a) !important;
font-weight: 700 !important;
}
/* Tab header */
article.acs_article_details .acs_article_tabs_header,
.obj_article_details .acs_article_tabs_header {
background: linear-gradient(to bottom, #f5f7ff, #eef1fb) !important;
border-bottom: 2px solid #c7d4f0 !important;
}
article.acs_article_details .acs_art_tab_btn,
.obj_article_details .acs_art_tab_btn {
color: #64748b !important;
}
article.acs_article_details .acs_art_tab_btn:hover,
.obj_article_details .acs_art_tab_btn:hover {
color: var(--acs-accent, #1a2a4a) !important;
background: rgba(26, 42, 74, .06) !important;
}
article.acs_article_details .acs_art_tab_btn.acs_art_tab_active,
.obj_article_details .acs_art_tab_btn.acs_art_tab_active {
color: var(--acs-accent, #1a2a4a) !important;
background: #fff !important;
border-bottom: 3px solid var(--acs-accent, #1a2a4a) !important;
}
article.acs_article_details .acs_article_tabs_content,
.obj_article_details .acs_article_tabs_content {
border: 1px solid #d1daf5 !important;
border-top: none !important;
}
/* Keywords */
article.acs_article_details .acs_keyword_tag,
.obj_article_details .acs_keyword_tag {
background: linear-gradient(135deg, #eef2ff, #e8f0fe) !important;
color: var(--acs-accent, #1a2a4a) !important;
border: 1px solid #c7d4f0 !important;
font-weight: 600 !important;
}
article.acs_article_details .acs_keywords_label,
.obj_article_details .acs_keywords_label {
color: var(--acs-accent, #1a2a4a) !important;
}
/* Author names */
article.acs_article_details .acs_af_name,
.obj_article_details .acs_af_name {
color: var(--acs-accent, #1a2a4a) !important;
font-size: 15px !important;
font-weight: 700 !important;
}
/* Copyright: amber accent */
article.acs_article_details .acs_article_copyright_section,
.obj_article_details .acs_article_copyright_section {
background: linear-gradient(135deg, #fffbeb 0%, #fff8e1 100%) !important;
border: 1px solid #fcd34d !important;
border-left: 4px solid #f59e0b !important;
}
article.acs_article_details .acs_article_copyright_section span,
.obj_article_details .acs_article_copyright_section span {
color: #92400e !important;
}
article.acs_article_details .acs_article_copyright_section a,
.obj_article_details .acs_article_copyright_section a {
color: #b45309 !important;
}
/* HOW TO CITE: blue left border */
article.acs_article_details .acs_article_howtocite_area,
.obj_article_details .acs_article_howtocite_area {
background: #fafbff !important;
border: 1px solid #d1daf5 !important;
border-left: 4px solid var(--acs-accent, #1a2a4a) !important;
border-radius: 6px !important;
padding: 20px 24px !important;
}
article.acs_article_details .acs_article_howtocite_area #citationOutput,
.obj_article_details .acs_article_howtocite_area #citationOutput {
background: #fff !important;
border: 1px solid #d1daf5 !important;
box-shadow: 0 1px 4px rgba(26, 42, 74, .06) !important;
}
article.acs_article_details .acs_article_howtocite_area .citation_formats_button,
.obj_article_details .acs_article_howtocite_area .citation_formats_button {
background: var(--acs-accent, #1a2a4a) !important;
color: #fff !important;
border-color: var(--acs-accent, #1a2a4a) !important;
width: 100% !important;
justify-content: space-between !important;
text-align: left !important;
padding: 10px 16px !important;
}
/* DOI pill */
article.acs_article_details .acs_doi_link,
.obj_article_details .acs_doi_link {
background: #f0f4ff !important;
padding: 4px 12px !important;
border-radius: 20px !important;
border: 1px solid #c7d4f0 !important;
color: var(--acs-accent, #1a2a4a) !important;
font-weight: 600 !important;
}
article.acs_article_details .acs_doi_link:hover,
.obj_article_details .acs_doi_link:hover {
background: var(--acs-accent, #1a2a4a) !important;
color: #fff !important;
text-decoration: none !important;
}
/* ================================================
ACCESSIBILITY & ADMIN EDIT LINK FIXES
================================================ */
/* Screen reader only — sembunyikan secara visual */
.pkp_screen_reader {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ── Admin Edit Link: subtle pencil badge, float right ── */
.cmp_edit_link {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
font-size: 10px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .07em !important;
color: var(--acs-accent, #1a2a4a) !important;
background: transparent !important;
border: 1.5px solid var(--acs-accent, #1a2a4a) !important;
padding: 2px 10px !important;
border-radius: 20px !important;
text-decoration: none !important;
line-height: 1.8 !important;
flex-shrink: 0 !important;
opacity: .55 !important;
float: right !important;
margin-top: 2px !important;
transition: opacity .15s !important;
}
.cmp_edit_link:hover {
opacity: 1 !important;
color: var(--acs-accent, #1a2a4a) !important;
text-decoration: none !important;
}
/* Heading yang memuat edit link — gunakan relative + clearfix */
.page_submissions h2,
.page_about h2,
.page_editorial_team h2,
.page_privacy_statement h2,
.page_submissions div[class$="_guidelines"] h2,
.page_submissions div[class$="_checklist"] h2,
.page_submissions div[class$="_notice"] h2 {
position: relative !important;
overflow: hidden !important;
/* clearfix untuk float */
font-size: 13px !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: .09em !important;
color: var(--acs-accent, #1a2a4a) !important;
margin: 28px 0 12px !important;
padding-bottom: 10px !important;
border-bottom: 2px solid #d1daf5 !important;
display: block !important;
/* bukan flex — biar float bekerja */
}
/* Edit link standalone (di luar h2, seperti editorialTeam.tpl) */
.page_editorial_team>.cmp_edit_link,
.page .cmp_edit_link:not(h2 .cmp_edit_link):not(h3 .cmp_edit_link) {
float: none !important;
display: inline-flex !important;
margin: 0 0 12px auto !important;
clear: both !important;
position: relative !important;
}
/* ================================================
STICKY SIDEBAR — Final clean rules
(override semua rule float/overflow dari base.less)
================================================ */
/* Container: flex, tidak ada overflow hidden */
.pkp_structure_content {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
overflow: visible !important;
}
.pkp_structure_content::after {
display: none !important;
}
/* Main: hapus float */
.pkp_structure_main {
float: none !important;
flex: 1 1 auto !important;
min-width: 0 !important;
}
/* Sidebar: hapus float, sticky, tampil penuh sepanjang apapun */
.pkp_structure_sidebar {
float: none !important;
flex-shrink: 0 !important;
width: 300px !important;
position: sticky !important;
top: 20px !important;
align-self: flex-start !important;
/* Tidak ada max-height / overflow → konten tampil penuh */
}
/* Offset saat ghost nav aktif */
body.acs_scrolled .pkp_structure_sidebar {
top: 68px !important;
}
@media (max-width: 768px) {
.pkp_structure_content {
flex-direction: column !important;
}
.pkp_structure_main {
width: 100% !important;
}
.pkp_structure_sidebar {
float: none !important;
position: relative !important;
top: auto !important;
width: 100% !important;
align-self: auto !important;
}
}
/* ====================================================================
DARK / LIGHT MODE TOGGLE BUTTON
==================================================================== */
.acs_theme_toggle {
position: fixed !important;
bottom: 24px !important;
right: 24px !important;
z-index: 9999 !important;
width: 44px !important;
height: 44px !important;
border-radius: 50% !important;
border: none !important;
background: var(--acs-accent, #1a2a4a) !important;
color: #fff !important;
font-size: 20px !important;
cursor: pointer !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, .25) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: transform .2s, box-shadow .2s, background .3s !important;
padding: 0 !important;
line-height: 1 !important;
}
.acs_theme_toggle:hover {
transform: scale(1.12) !important;
box-shadow: 0 6px 20px rgba(0, 0, 0, .35) !important;
opacity: 1 !important;
}
.acs_toggle_icon {
pointer-events: none;
}
/* ====================================================================
DARK MODE — body[data-theme="dark"]
Prioritas tinggi: semua override pakai selector spesifik
PENTING: warna teks harus selalu kontras dgn background
==================================================================== */
body[data-theme="dark"] {
background-color: #0f172a !important;
color: #cbd5e1 !important;
}
/* ── Typografi dasar ── */
body[data-theme="dark"] h1,
body[data-theme="dark"] h2,
body[data-theme="dark"] h3,
body[data-theme="dark"] h4,
body[data-theme="dark"] h5,
body[data-theme="dark"] h6 {
color: #f1f5f9 !important;
}
body[data-theme="dark"] a {
color: #93c5fd !important;
/* biru muda, kontras di gelap */
}
body[data-theme="dark"] a:hover {
color: #bfdbfe !important;
}
/* ── Header / Topbar ── */
body[data-theme="dark"] .acs_header,
body[data-theme="dark"] .acs_topbar {
background: #0f172a !important;
border-bottom-color: #1e3a5f !important;
}
body[data-theme="dark"] .acs_topbar_inner {
background: #0f172a !important;
}
body[data-theme="dark"] .acs_journal_name_text {
color: #f1f5f9 !important;
}
/* User menu button di topbar */
body[data-theme="dark"] .acs_topbar_user .acs_user_menu>li>a {
background: #1e293b !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
body[data-theme="dark"] .acs_topbar_user .acs_user_menu>li>a:hover {
background: var(--acs-accent, #1a2a4a) !important;
color: #fff !important;
}
/* ── Navbar (accent bg — umumnya sudah gelap, tapi perlu pastikan teks putih) ── */
body[data-theme="dark"] .acs_navbar {
background: #0a1628 !important;
border-bottom: 1px solid #1e3a5f !important;
}
body[data-theme="dark"] .acs_primary_menu>li>a {
color: rgba(255, 255, 255, .9) !important;
}
body[data-theme="dark"] .acs_primary_menu>li>ul {
background: #1e293b !important;
border-top-color: #475569 !important;
}
body[data-theme="dark"] .acs_primary_menu>li>ul>li>a {
color: #cbd5e1 !important;
}
body[data-theme="dark"] .acs_primary_menu>li>ul>li>a:hover {
background: #334155 !important;
color: #93c5fd !important;
}
body[data-theme="dark"] .acs_navbar_issn {
color: rgba(255, 255, 255, .55) !important;
}
/* ── Ghost Nav ── */
body[data-theme="dark"] .acs_ghost_nav {
background: linear-gradient(135deg, #0a1628 0%, #0f1f3d 60%, #0a1628 100%) !important;
border-bottom-color: #1e3a5f !important;
}
/* ── Main content area ── */
body[data-theme="dark"] .pkp_structure_main {
background: #1e293b !important;
color: #e2e8f0 !important;
/* lebih terang dari #cbd5e1 → kontras lebih baik */
}
body[data-theme="dark"] .pkp_structure_main p,
body[data-theme="dark"] .pkp_structure_main li,
body[data-theme="dark"] .pkp_structure_main td,
body[data-theme="dark"] .pkp_structure_main th,
body[data-theme="dark"] .pkp_structure_main span,
body[data-theme="dark"] .pkp_structure_main div,
body[data-theme="dark"] .pkp_structure_main .value,
body[data-theme="dark"] .pkp_structure_main .abstract,
body[data-theme="dark"] .pkp_structure_main .article,
body[data-theme="dark"] .pkp_structure_main .meta,
body[data-theme="dark"] .pkp_structure_main .description {
color: #e2e8f0 !important;
background-color: transparent !important;
}
/* ── Sidebar ── */
body[data-theme="dark"] .pkp_structure_sidebar .pkp_block {
background: #1e293b !important;
border-color: #334155 !important;
color: #cbd5e1 !important;
}
body[data-theme="dark"] .pkp_structure_sidebar .pkp_block h2,
body[data-theme="dark"] .pkp_structure_sidebar .pkp_block .title {
background: #0f172a !important;
color: #f1f5f9 !important;
}
body[data-theme="dark"] .pkp_structure_sidebar .pkp_block a {
color: #93c5fd !important;
}
body[data-theme="dark"] .pkp_structure_sidebar .pkp_block a:hover {
color: #bfdbfe !important;
}
body[data-theme="dark"] .pkp_structure_sidebar .pkp_block .content {
color: #cbd5e1 !important;
}
/* ── Page background (wrapper) ── */
body[data-theme="dark"] .pkp_structure_page {
background: #0f172a !important;
}
/* ── Article list items ── */
body[data-theme="dark"] .obj_article_summary,
body[data-theme="dark"] .obj_article_summary .title a {
color: #93c5fd !important;
}
body[data-theme="dark"] .obj_article_summary .meta,
body[data-theme="dark"] .obj_article_summary .authors,
body[data-theme="dark"] .obj_article_summary .search_author {
color: #94a3b8 !important;
}
body[data-theme="dark"] .obj_article_summary .doi {
color: #64748b !important;
}
/* ── Galley buttons (PDF, XML) ── */
body[data-theme="dark"] .galley_link,
body[data-theme="dark"] .obj_galley_link {
border-color: #475569 !important;
color: #93c5fd !important;
background: #1e293b !important;
}
body[data-theme="dark"] .galley_link:hover,
body[data-theme="dark"] .obj_galley_link:hover {
background: #334155 !important;
color: #fff !important;
border-color: #64748b !important;
}
body[data-theme="dark"] .galley_link.pdf {
border-color: #f87171 !important;
color: #f87171 !important;
}
body[data-theme="dark"] .galley_link.pdf:hover {
background: #7f1d1d !important;
color: #fecaca !important;
}
/* ── Borders & Dividers ── */
body[data-theme="dark"] .pkp_structure_main,
body[data-theme="dark"] .obj_article_summary {
border-color: #334155 !important;
}
body[data-theme="dark"] hr {
border-color: #334155 !important;
}
/* ── Forms ── */
body[data-theme="dark"] input[type="text"],
body[data-theme="dark"] input[type="email"],
body[data-theme="dark"] input[type="password"],
body[data-theme="dark"] input[type="search"],
body[data-theme="dark"] select,
body[data-theme="dark"] textarea {
background: #0f172a !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
body[data-theme="dark"] input::placeholder,
body[data-theme="dark"] textarea::placeholder {
color: #64748b !important;
}
/* ── Footer ── */
body[data-theme="dark"] .acs_footer,
body[data-theme="dark"] footer {
background: #020817 !important;
color: #94a3b8 !important;
border-top-color: #1e293b !important;
}
body[data-theme="dark"] .acs_footer a,
body[data-theme="dark"] footer a {
color: #93c5fd !important;
}
body[data-theme="dark"] .acs_footer_heading,
body[data-theme="dark"] .acs_footer h4 {
color: #e2e8f0 !important;
}
/* ── Breadcrumb ── */
body[data-theme="dark"] .pkp_breadcrumbs,
body[data-theme="dark"] .pkp_breadcrumbs a {
color: #64748b !important;
}
body[data-theme="dark"] .pkp_breadcrumbs a:hover {
color: #93c5fd !important;
}
/* ── Section / chapter headings in main ── */
body[data-theme="dark"] .pkp_structure_main h2,
body[data-theme="dark"] .current_issue h2,
body[data-theme="dark"] .page_index_journal h2 {
color: #f1f5f9 !important;
border-bottom-color: #475569 !important;
}
/* ── Ascarya custom blocks (ojs-sidebar-*) ── */
body[data-theme="dark"] .ojs-sidebar-container {
background: #1e293b !important;
}
body[data-theme="dark"] .ojs-sidebar-title {
color: #f1f5f9 !important;
border-bottom-color: #334155 !important;
}
body[data-theme="dark"] .ojs-sidebar-list li {
color: #cbd5e1 !important;
border-bottom-color: #334155 !important;
}
/* ── Ascarya author stats block ── */
body[data-theme="dark"] .ascarya-stats-container {
background: #1e293b !important;
}
body[data-theme="dark"] .ascarya-stats-header {
border-bottom-color: #334155 !important;
}
body[data-theme="dark"] .ascarya-stats-title {
color: #f1f5f9 !important;
}
body[data-theme="dark"] .ascarya-country-name {
color: #cbd5e1 !important;
}
body[data-theme="dark"] .ascarya-stat-count {
color: #93c5fd !important;
}
body[data-theme="dark"] .ascarya-stat-bar {
background: #334155 !important;
}
body[data-theme="dark"] .ascarya-stats-footer {
border-top-color: #334155 !important;
color: #64748b !important;
}
body[data-theme="dark"] .ascarya-stats-total-count {
color: #93c5fd !important;
}
/* ── PKP common blocks ── */
body[data-theme="dark"] .block_custom .content,
body[data-theme="dark"] .pkp_block .content {
color: #cbd5e1 !important;
}
/* ── Pagination ── */
body[data-theme="dark"] ul.pagination li a,
body[data-theme="dark"] ul.pagination li span {
border-color: #475569 !important;
background: #1e293b !important;
color: #93c5fd !important;
}
body[data-theme="dark"] ul.pagination li.active span,
body[data-theme="dark"] ul.pagination li a:hover {
background: #1e3a5f !important;
color: #fff !important;
}
/* ── Toggle button warna di dark mode ── */
body[data-theme="dark"] .acs_theme_toggle {
background: #f1f5f9 !important;
color: #0f172a !important;
}
/* ====================================================================
DARK MODE — PATCH 2: Override hardcoded !important light backgrounds
Semua background putih/terang dioverride ke dark
==================================================================== */
/* Citation box (How to Cite) */
body[data-theme="dark"] #acs_artab_howtocite .citation_text,
body[data-theme="dark"] #acs_artab_howtocite .value p,
body[data-theme="dark"] .acs_article_howtocite_area .citation_text,
body[data-theme="dark"] .acs_article_howtocite_area .value p {
background: #0f172a !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
/* Citation format buttons */
body[data-theme="dark"] #acs_artab_howtocite .citation_display_formats a,
body[data-theme="dark"] #acs_artab_howtocite .citation_display_formats button {
background: #1e293b !important;
border-color: #475569 !important;
color: #93c5fd !important;
}
body[data-theme="dark"] #acs_artab_howtocite .citation_display_formats a:hover,
body[data-theme="dark"] #acs_artab_howtocite .citation_display_formats button:hover {
background: #1e3a5f !important;
color: #bfdbfe !important;
}
/* Sub-label di How to Cite */
body[data-theme="dark"] #acs_artab_howtocite .sub_item.citation_display h2.label {
color: #94a3b8 !important;
}
/* Howtocite area outer container */
body[data-theme="dark"] .acs_article_howtocite_area {
background: #1e293b !important;
border-color: #334155 !important;
}
body[data-theme="dark"] .acs_article_howtocite_area #citationOutput,
body[data-theme="dark"] #citationOutput {
background: #0f172a !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
/* Copyright / License box */
body[data-theme="dark"] .acs_copyright_bar,
body[data-theme="dark"] .acs_license_row {
background: #1e2d3d !important;
border-color: #334155 !important;
color: #94a3b8 !important;
}
body[data-theme="dark"] .acs_copyright_bar a,
body[data-theme="dark"] .acs_license_row a {
color: #93c5fd !important;
}
/* Article detail info bar (Published / Issue / Section chips) */
body[data-theme="dark"] .acs_article_details_bar,
body[data-theme="dark"] .acs_detail_item {
background: #1e293b !important;
border-color: #334155 !important;
}
body[data-theme="dark"] .acs_detail_label {
color: #93c5fd !important;
}
body[data-theme="dark"] .acs_detail_value {
color: #e2e8f0 !important;
}
/* Article tab bar */
body[data-theme="dark"] .acs_article_tabs {
background: #1e293b !important;
border-bottom-color: #334155 !important;
}
body[data-theme="dark"] .acs_article_tab {
color: #94a3b8 !important;
background: transparent !important;
}
body[data-theme="dark"] .acs_article_tab.active,
body[data-theme="dark"] .acs_article_tab:hover {
color: #93c5fd !important;
border-bottom-color: #93c5fd !important;
}
/* Article metadata chips (Published, Issue, Section) */
body[data-theme="dark"] .acs_meta_chip {
background: #0f172a !important;
border-color: #334155 !important;
color: #94a3b8 !important;
}
body[data-theme="dark"] .acs_meta_chip a,
body[data-theme="dark"] .acs_meta_chip strong {
color: #93c5fd !important;
}
/* Author bio card */
body[data-theme="dark"] .acs_author_card,
body[data-theme="dark"] .acs_bio_item {
background: #1e293b !important;
border-color: #334155 !important;
color: #e2e8f0 !important;
}
/* Keyword chips */
body[data-theme="dark"] .acs_keyword_chip {
background: #1e293b !important;
border-color: #334155 !important;
color: #93c5fd !important;
}
/* Similar articles */
body[data-theme="dark"] #articlesBySimilarityList li {
border-bottom-color: #334155 !important;
color: #e2e8f0 !important;
}
body[data-theme="dark"] #articlesBySimilarityList a {
color: #93c5fd !important;
}
/* Breadcrumb dark */
body[data-theme="dark"] .pkp_breadcrumbs,
body[data-theme="dark"] .pkp_breadcrumbs span,
body[data-theme="dark"] nav[aria-label="breadcrumb"] {
color: #64748b !important;
background: transparent !important;
}
body[data-theme="dark"] .pkp_breadcrumbs a {
color: #64748b !important;
}
/* Table of contents / article list on homepage */
body[data-theme="dark"] .obj_article_summary,
body[data-theme="dark"] .obj_issue_toc {
background: transparent !important;
border-color: #334155 !important;
}
body[data-theme="dark"] .obj_article_summary .title a {
color: #93c5fd !important;
}
body[data-theme="dark"] .obj_article_summary .authors,
body[data-theme="dark"] .obj_article_summary .search_author,
body[data-theme="dark"] .obj_article_summary .pages {
color: #94a3b8 !important;
}
/* Section headers on homepage */
body[data-theme="dark"] .current_issue_heading,
body[data-theme="dark"] .pkp_structure_main .section-header {
background: #0f172a !important;
color: #f1f5f9 !important;
}
/* Search input in navbar (dark mode) */
body[data-theme="dark"] .acs_search_input {
color: rgba(255, 255, 255, .9) !important;
}
/* ====================================================================
DARK MODE — PATCH 3: Keyword chips, Meta bar, Copyright box
==================================================================== */
/* Keyword tags */
body[data-theme="dark"] .acs_keyword_tag,
body[data-theme="dark"] article.acs_article_details .acs_keyword_tag,
body[data-theme="dark"] .obj_article_details .acs_keyword_tag {
background: #1e3a5f !important;
color: #93c5fd !important;
border-color: #2d4a73 !important;
}
/* Article meta bar (Published / Issue / Section row) */
body[data-theme="dark"] .acs_article_meta_bar {
background: #0f172a !important;
border-color: #334155 !important;
}
/* Meta chips inside the bar */
body[data-theme="dark"] .acs_meta_chip {
background: #1e293b !important;
border-color: #334155 !important;
color: #94a3b8 !important;
}
body[data-theme="dark"] .acs_meta_chip .acs_chip_label {
color: #64748b !important;
}
body[data-theme="dark"] .acs_meta_chip .acs_chip_value,
body[data-theme="dark"] .acs_meta_chip strong,
body[data-theme="dark"] .acs_meta_chip a {
color: #93c5fd !important;
}
body[data-theme="dark"] .acs_meta_divider {
color: #334155 !important;
}
/* PDF button in meta bar */
body[data-theme="dark"] .acs_meta_galleys .acs_galley_btn {
background: #1e3a5f !important;
border-color: #2d4a73 !important;
color: #93c5fd !important;
}
/* Copyright / License box — kuning → gelap */
body[data-theme="dark"] .acs_article_copyright_section,
body[data-theme="dark"] article.acs_article_details .acs_article_copyright_section,
body[data-theme="dark"] .obj_article_details .acs_article_copyright_section {
background: #1c1f2e !important;
border-color: #2d3748 !important;
}
body[data-theme="dark"] .acs_article_copyright_section span,
body[data-theme="dark"] article.acs_article_details .acs_article_copyright_section span,
body[data-theme="dark"] .obj_article_details .acs_article_copyright_section span {
color: #94a3b8 !important;
}
body[data-theme="dark"] .acs_article_copyright_section a,
body[data-theme="dark"] article.acs_article_details .acs_article_copyright_section a,
body[data-theme="dark"] .obj_article_details .acs_article_copyright_section a {
color: #93c5fd !important;
}
body[data-theme="dark"] .acs_license_terms {
background: #1c1f2e !important;
color: #94a3b8 !important;
border-color: #2d3748 !important;
}
/* Article details bar (Published meta below tabs) */
body[data-theme="dark"] .acs_article_details_bar {
border-color: #334155 !important;
background: #1e293b !important;
}
body[data-theme="dark"] .acs_detail_item {
background: #1e293b !important;
border-bottom-color: #334155 !important;
}
body[data-theme="dark"] .acs_detail_label {
color: #64748b !important;
}
body[data-theme="dark"] .acs_detail_value,
body[data-theme="dark"] .acs_detail_value a {
color: #e2e8f0 !important;
}
body[data-theme="dark"] .acs_detail_value a {
color: #93c5fd !important;
}
/* ====================================================================
DARK MODE — PATCH 4: Fade gradient & Read More links
==================================================================== */
/* Fade gradient: ubah endpoint dari #fff ke background gelap */
body[data-theme="dark"] .journal_description_body::before {
background: linear-gradient(to bottom, transparent, #1e293b) !important;
}
/* "Baca selengkapnya" / acs_read_more_btn */
body[data-theme="dark"] .acs_read_more_btn {
color: #93c5fd !important;
border-bottom-color: #93c5fd !important;
border-color: #93c5fd !important;
}
body[data-theme="dark"] .acs_read_more_btn:hover {
color: #bfdbfe !important;
opacity: 1 !important;
}
/* "More →" links sitewide */
body[data-theme="dark"] a.read_more,
body[data-theme="dark"] a.read_more_announcements,
body[data-theme="dark"] .pkp_block a.read_more {
color: #93c5fd !important;
border-bottom-color: #93c5fd !important;
}
body[data-theme="dark"] a.read_more:hover,
body[data-theme="dark"] a.read_more_announcements:hover {
color: #bfdbfe !important;
}
/* "More →" specifically in About sidebar block & journal description */
body[data-theme="dark"] .journal_description_body a,
body[data-theme="dark"] .pkp_block_information a,
body[data-theme="dark"] .pkp_block_information .read_more {
color: #93c5fd !important;
}
/* Box shadow putih pada sidebar blocks → hilangkan di dark mode */
body[data-theme="dark"] .pkp_block,
body[data-theme="dark"] .pkp_structure_main {
box-shadow: 0 1px 4px rgba(0, 0, 0, .4) !important;
}
/* About the Journal block dalam sidebar */
body[data-theme="dark"] .pkp_block_information {
background: #1e293b !important;
color: #e2e8f0 !important;
}
body[data-theme="dark"] .pkp_block_information p {
color: #cbd5e1 !important;
}
/* ====================================================================
TRUNCATION FIX: JS-driven child hide/show
==================================================================== */
/* Sembunyikan child ke-2+ saat collapsed */
.journal_description_body .acs_hidden_child {
display: none !important;
}
/* Reset max-height — tidak pakai lagi */
.journal_description_body {
max-height: none !important;
overflow: visible !important;
padding-bottom: 0 !important;
}
/* Hapus ::before (gradient) dari max-height era */
.journal_description_body::before {
display: none !important;
}
/* Dark mode gradient juga tidak perlu */
body[data-theme="dark"] .journal_description_body::before {
display: none !important;
}
/* ====================================================================
SCHOLAR STATS BLOCK — Override sidebar a:hover + overflow fix
==================================================================== */
/* Allow border-radius clip to not cut the button */
.pkp_structure_sidebar .block_scholar_stats {
overflow: visible !important;
}
.pkp_structure_sidebar .block_scholar_stats .content {
overflow: visible !important;
}
/* Override custom-sidebar.less block_custom .content a:hover rules */
.pkp_structure_sidebar .block_scholar_stats .content a.scholar-view-btn {
display: block !important;
margin: 14px 0 0 0 !important;
padding: 8px 12px !important;
background: transparent !important;
color: var(--acs-accent, #1a2a4a) !important;
border: 2px solid var(--acs-accent, #1a2a4a) !important;
border-left: 2px solid var(--acs-accent, #1a2a4a) !important;
border-radius: 4px !important;
text-align: center !important;
font-weight: 700 !important;
font-size: 11.5px !important;
text-decoration: none !important;
transition: background .2s, color .2s !important;
}
.pkp_structure_sidebar .block_scholar_stats .content a.scholar-view-btn:hover {
background: var(--acs-accent, #1a2a4a) !important;
color: #fff !important;
border-left-color: var(--acs-accent, #1a2a4a) !important;
}
/* Dark mode */
body[data-theme="dark"] .pkp_structure_sidebar .block_scholar_stats .content a.scholar-view-btn {
color: #93c5fd !important;
border-color: #2d4a73 !important;
border-left-color: #2d4a73 !important;
}
body[data-theme="dark"] .pkp_structure_sidebar .block_scholar_stats .content a.scholar-view-btn:hover {
background: #1e3a5f !important;
color: #bfdbfe !important;
}
/* ====================================================================
SCHOLAR STATS BLOCK — Mobile overflow fix
Prevents the Google Scholar chart + table from exceeding sidebar width
==================================================================== */
/* Global containment — always keep block within sidebar bounds */
.block_scholar_stats,
.block_scholar_stats .content,
.block_scholar_stats .ojs-sidebar-container,
.block_scholar_stats .scholar-stats-wrap {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Chart wrapper must never exceed parent */
.scholar-chart-wrap {
max-width: 100% !important;
overflow: hidden !important;
box-sizing: border-box !important;
}
/* Canvas must fit its wrapper */
.scholar-canvas {
max-width: 100% !important;
box-sizing: border-box !important;
}
/* Table must not overflow */
.scholar-stats-tbl {
max-width: 100% !important;
table-layout: fixed !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
}
/* Mobile: tighter containment */
@media (max-width: 900px) {
.block_scholar_stats {
overflow: hidden !important;
}
.block_scholar_stats .content {
overflow: hidden !important;
padding: 10px !important;
}
.block_scholar_stats .ojs-sidebar-container {
overflow: hidden !important;
}
.scholar-chart-wrap {
height: 120px !important;
margin-top: 10px !important;
}
.scholar-canvas {
height: 120px !important;
}
.scholar-stats-tbl {
font-size: 0.78em !important;
}
.scholar-view-btn {
margin: 10px 0 0 0 !important;
font-size: 11px !important;
}
.pkp_structure_sidebar .block_scholar_stats .content a.scholar-view-btn {
margin: 10px 0 0 0 !important;
}
}
@media (max-width: 480px) {
.scholar-chart-wrap {
height: 100px !important;
margin-top: 8px !important;
}
.scholar-canvas {
height: 100px !important;
}
.scholar-stats-tbl {
font-size: 0.75em !important;
}
.scholar-th-label,
.scholar-th-num {
padding: 4px 2px !important;
font-size: 0.85em !important;
}
.scholar-row td {
padding: 4px 2px !important;
}
}
/* ====================================================================
INDEXING BLOCK — sidebar logo grid
==================================================================== */
.idx-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 6px;
margin: 6px 0 0 0;
padding: 0;
}
.idx-grid a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 5px !important;
border: 1px solid #e8edf2 !important;
border-left: 1px solid #e8edf2 !important;
border-radius: 4px !important;
background: #fff !important;
transition: box-shadow .15s !important;
}
.idx-grid a:hover {
box-shadow: 0 2px 8px rgba(0, 0, 0, .10) !important;
border-color: #c8d4e0 !important;
background: #f8fafc !important;
}
.idx-grid a img {
width: 100% !important;
height: 44px !important;
object-fit: contain !important;
display: block !important;
max-width: 100% !important;
}
/* ====================================================================
SIDEBAR CUSTOM BLOCKS — compact link list (lebih kecil & dempet)
==================================================================== */
.pkp_structure_sidebar .block_custom .content ul {
margin: 4px 0 0 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 5px !important;
}
.pkp_structure_sidebar .block_custom .content ul li {
padding: 0 !important;
border: 1px solid #dde3ec !important;
border-radius: 0 !important;
margin: 0 !important;
list-style: none !important;
overflow: hidden !important;
transition: box-shadow .15s !important;
}
.pkp_structure_sidebar .block_custom .content ul li:last-child {
border-bottom: 1px solid #dde3ec !important;
}
.pkp_structure_sidebar .block_custom .content ul li:hover {
box-shadow: 0 2px 6px rgba(0, 0, 0, .08) !important;
border-color: #c4cfe0 !important;
}
.pkp_structure_sidebar .block_custom .content a {
display: block !important;
padding: 9px 12px !important;
margin-bottom: 0 !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: .03em !important;
line-height: 1.35 !important;
}
/* ====================================================================
JOURNAL HIGHLIGHTS — key-value table style
==================================================================== */
.jh-table {
margin: 4px 0 0 0;
padding: 0;
}
.jh-row {
display: flex;
justify-content: space-between;
align-items: baseline;
gap: 6px;
padding: 5px 0;
border-bottom: 1px solid #f0f4f8;
font-size: 12px;
line-height: 1.4;
}
.jh-row:last-child {
border-bottom: none;
}
.jh-table dt {
font-weight: 400;
color: #6b7280;
flex-shrink: 0;
white-space: nowrap;
}
.jh-table dd {
font-weight: 700;
color: #111827;
text-align: right;
margin: 0;
word-break: break-word;
}
.jh-table dd a {
color: var(--acs-accent, #1a2a4a) !important;
font-weight: 700;
text-decoration: none !important;
}
.jh-table dd a:hover {
text-decoration: underline !important;
}
/* Link rows (menu links di bawah info) */
.jh-link-row {
padding: 4px 0 !important;
justify-content: flex-start !important;
}
.jh-link-row a {
font-size: 11.5px !important;
font-weight: 600 !important;
color: var(--acs-accent, #1a2a4a) !important;
text-decoration: none !important;
width: 100%;
}
.jh-link-row a:hover {
color: var(--acs-accent, #1a2a4a) !important;
text-decoration: underline !important;
}
/* Dark mode */
body[data-theme="dark"] .jh-table dt {
color: #94a3b8;
}
body[data-theme="dark"] .jh-table dd {
color: #e2e8f0;
}
body[data-theme="dark"] .jh-row {
border-bottom-color: #1e3a5f;
}
/* ====================================================================
JOURNAL HIGHLIGHTS — span-based key-value (TinyMCE-safe)
==================================================================== */
.jh-row {
display: flex !important;
justify-content: space-between !important;
align-items: baseline !important;
gap: 6px !important;
padding: 5px 0 !important;
border-bottom: 1px solid #f0f4f8 !important;
font-size: 12px !important;
line-height: 1.4 !important;
margin: 0 !important;
}
.jh-row:last-child {
border-bottom: none !important;
}
.jh-label {
font-weight: 400 !important;
color: #6b7280 !important;
flex-shrink: 0 !important;
white-space: nowrap !important;
}
.jh-val {
font-weight: 700 !important;
color: #111827 !important;
text-align: right !important;
word-break: break-word !important;
}
.jh-val a {
color: var(--acs-accent, #1a2a4a) !important;
font-weight: 700 !important;
text-decoration: none !important;
}
.jh-val a:hover {
text-decoration: underline !important;
}
/* Dark mode */
body[data-theme="dark"] .jh-label {
color: #94a3b8 !important;
}
body[data-theme="dark"] .jh-val {
color: #e2e8f0 !important;
}
body[data-theme="dark"] .jh-row {
border-bottom-color: #334155 !important;
}
/* ====================================================================
MAIN CONTENT BOTTOM BORDER — garis accent di bawah area konten
==================================================================== */
.pkp_structure_content {
border-bottom: 3px solid var(--acs-accent, #1a2a4a);
margin-bottom: 0 !important;
}
/* ====================================================================
CURRENT ISSUE — cover image
==================================================================== */
.current_issue_cover {
margin-bottom: 16px;
}
.current_issue_cover a {
display: block;
max-width: 200px;
}
.current_issue_cover img {
width: 100%;
height: auto;
display: block;
border-radius: 4px;
box-shadow: 0 4px 16px rgba(0, 0, 0, .15);
}
/* OLD block removed — replaced by ci_row/ci_body below */
/* ====================================================================
CURRENT ISSUE — proper 2-col (cover left, content right)
==================================================================== */
.current_issue>h2 {
border-bottom: 1px solid #e2e8f0 !important;
padding-bottom: 10px !important;
margin-bottom: 16px !important;
}
.ci_row {
display: flex !important;
gap: 24px !important;
align-items: flex-start !important;
}
.current_issue_cover {
flex: 0 0 180px !important;
max-width: 180px !important;
margin: 0 !important;
}
.current_issue_cover a {
display: block !important;
}
.current_issue_cover img {
width: 100% !important;
height: auto !important;
display: block !important;
border-radius: 4px !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, .15) !important;
}
.ci_body {
flex: 1 1 0 !important;
min-width: 0 !important;
}
.ci_body .current_issue_title {
font-weight: 700 !important;
font-size: 15px !important;
margin-bottom: 12px !important;
color: #1e293b !important;
}
/* View All Issues — bordered button like reference */
.current_issue .read_more {
display: inline-block !important;
margin-top: 14px !important;
padding: 7px 14px !important;
border: 1px solid #cbd5e1 !important;
border-bottom: 1px solid #cbd5e1 !important;
border-radius: 0 !important;
background: transparent !important;
color: #1e293b !important;
font-size: 11px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .06em !important;
text-decoration: none !important;
}
.current_issue .read_more:hover {
background: #f8fafc !important;
border-color: #94a3b8 !important;
color: #1e293b !important;
text-decoration: none !important;
}
/* ====================================================================
FIX: Hapus padding bawah current_issue supaya accent bar tidak jauh
==================================================================== */
.current_issue {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
.pkp_structure_content {
padding-bottom: 0 !important;
}
/* ====================================================================
Home page: hide duplicate DOI/published from issue_toc heading
(we display these manually in ci_body)
==================================================================== */
.page_index_journal .obj_issue_toc .heading {
display: none !important;
}
/* ci_body meta rows */
.ci_meta {
font-size: 13px;
color: #374151;
margin-bottom: 4px;
line-height: 1.5;
}
.ci_meta a {
color: var(--acs-accent, #1a2a4a);
}
/* Jarak antara ci_row dan Articles heading */
.page_index_journal .obj_issue_toc {
margin-top: 24px !important;
clear: both !important;
}
/* ====================================================================
Restore padding-bottom — agar konten tidak tenggelam di footer
==================================================================== */
.pkp_structure_content {
padding-bottom: 32px !important;
}
.current_issue {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
/* ====================================================================
READ MORE BUTTON — clean text-link style
==================================================================== */
.acs_read_more_btn {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 10px;
padding: 0;
background: transparent;
border: none;
border-bottom: 1.5px solid var(--acs-accent, #1a2a4a);
color: var(--acs-accent, #1a2a4a);
font-size: 12px;
font-weight: 700;
cursor: pointer;
border-radius: 0;
letter-spacing: .06em;
text-transform: uppercase;
opacity: .75;
transition: opacity .2s, border-color .2s;
outline: none;
}
.acs_read_more_btn:hover {
opacity: 1;
border-bottom-color: var(--acs-accent, #1a2a4a);
background: transparent;
color: var(--acs-accent, #1a2a4a);
}
.acs_read_more_btn:focus {
outline: none;
box-shadow: none;
}
.acs_read_more_btn.hidden {
display: none !important;
}
/* Dark mode override */
body[data-theme="dark"] .acs_read_more_btn {
color: #93c5fd !important;
border-bottom-color: #93c5fd !important;
}
body[data-theme="dark"] .acs_read_more_btn:hover {
color: #bfdbfe !important;
border-bottom-color: #bfdbfe !important;
}
/* Utility */
.hidden {
display: none !important;
}
/* ====================================================================
LOGIN & REGISTER — form spacing improvements
==================================================================== */
/* Page wrapper padding */
.pkp_page_login .page,
.pkp_page_register .page,
.pkp_page_login .pkp_structure_main,
.pkp_page_register .pkp_structure_main {
padding-top: 32px !important;
padding-bottom: 40px !important;
}
/* Form container */
.pkp_page_login form,
.pkp_page_register form {
max-width: 860px;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 32px 36px !important;
margin-top: 20px !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, .06);
}
/* Field groups */
.pkp_page_login .fields,
.pkp_page_register .fields,
.pkp_page_login .pkp_form .section,
.pkp_page_register .pkp_form .section {
margin-bottom: 20px !important;
}
/* Labels */
.pkp_page_login label,
.pkp_page_register label {
display: block !important;
font-size: 13px !important;
font-weight: 600 !important;
margin-bottom: 6px !important;
color: #374151 !important;
letter-spacing: .01em;
}
/* Inputs */
.pkp_page_login input[type="text"],
.pkp_page_login input[type="email"],
.pkp_page_login input[type="password"],
.pkp_page_register input[type="text"],
.pkp_page_register input[type="email"],
.pkp_page_register input[type="password"],
.pkp_page_register select {
width: 100% !important;
padding: 10px 12px !important;
border: 1px solid #d1d5db !important;
border-radius: 4px !important;
font-size: 14px !important;
margin-top: 2px !important;
transition: border-color .2s;
}
.pkp_page_login input:focus,
.pkp_page_register input:focus,
.pkp_page_register select:focus {
border-color: var(--acs-accent, #1a2a4a) !important;
outline: none !important;
box-shadow: 0 0 0 2px rgba(26, 42, 74, .1) !important;
}
/* Fieldset groups */
.pkp_page_register fieldset {
border: 1px solid #e2e8f0 !important;
border-radius: 6px !important;
padding: 20px 24px !important;
margin-bottom: 24px !important;
}
.pkp_page_register legend {
font-weight: 700 !important;
font-size: 12px !important;
letter-spacing: .06em !important;
text-transform: uppercase !important;
color: #6b7280 !important;
padding: 0 8px !important;
}
/* Submit button */
.pkp_page_login .submit,
.pkp_page_register .submit {
margin-top: 24px !important;
}
/* Dark mode */
body[data-theme="dark"] .pkp_page_login form,
body[data-theme="dark"] .pkp_page_register form {
background: #1e293b !important;
border-color: #334155 !important;
}
body[data-theme="dark"] .pkp_page_login label,
body[data-theme="dark"] .pkp_page_register label {
color: #e2e8f0 !important;
}
body[data-theme="dark"] .pkp_page_login input,
body[data-theme="dark"] .pkp_page_register input,
body[data-theme="dark"] .pkp_page_register select {
background: #0f172a !important;
border-color: #475569 !important;
color: #e2e8f0 !important;
}
body[data-theme="dark"] .pkp_page_register fieldset {
border-color: #334155 !important;
}
/* =========================================================
MOBILE RESPONSIVE — About & Current Issue Pages
@media max-width: 900px
========================================================= */
@media (max-width: 900px) {
/* ── Tab buttons: wrap & scrollable row ── */
.acs_tabs_header {
flex-wrap: nowrap !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
gap: 0 !important;
}
.acs_tabs_header::-webkit-scrollbar {
display: none !important;
}
.acs_tab_btn {
flex: 0 0 auto !important;
padding: 10px 16px !important;
font-size: 11px !important;
white-space: nowrap !important;
letter-spacing: .05em !important;
}
/* ── Tab content: reduce padding ── */
.acs_tabs_content {
padding: 16px !important;
}
/* ── About: cover + description stacked ── */
.journal_about_wrapper {
flex-direction: column !important;
align-items: center !important;
gap: 16px !important;
}
.journal_thumb {
flex: 0 0 auto !important;
width: 140px !important;
}
.journal_thumb img,
.acs_cover_placeholder {
width: 140px !important;
height: 180px !important;
margin: 0 auto !important;
}
.acs_desc_col {
width: 100% !important;
}
.journal_description_body {
font-size: 13.5px !important;
line-height: 1.7 !important;
text-align: left !important;
max-height: 12em !important;
}
/* ── Current Issue section ── */
.current_issue {
margin-top: 20px !important;
padding: 0 !important;
}
.current_issue h2 {
font-size: 16px !important;
margin-bottom: 12px !important;
padding-bottom: 8px !important;
}
/* ci_row: cover + meta stacked vertically */
.ci_row {
display: flex !important;
flex-direction: column !important;
align-items: center !important;
gap: 12px !important;
margin-bottom: 16px !important;
}
.current_issue_cover {
width: 120px !important;
flex-shrink: 0 !important;
}
.current_issue_cover img {
width: 120px !important;
height: auto !important;
border-radius: 4px !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, .15) !important;
display: block !important;
}
.ci_body {
width: 100% !important;
text-align: center !important;
}
.current_issue_title {
font-size: 14px !important;
font-weight: 700 !important;
margin-bottom: 6px !important;
}
.ci_meta {
font-size: 12px !important;
color: #6b7280 !important;
}
/* ── Article cards: full width, proper padding ── */
.obj_article_summary.acs_article_item,
.obj_article_summary {
padding: 14px 14px 12px !important;
}
.acs_article_title a {
font-size: 14px !important;
line-height: 1.5 !important;
}
.acs_authors,
.obj_article_summary .authors {
font-size: 12px !important;
}
/* Galley buttons: smaller */
.acs_galleys,
.obj_article_summary .galleys_links {
flex-wrap: wrap !important;
gap: 6px !important;
}
.acs_galleys .obj_galley_link,
.obj_article_summary .galleys_links a {
font-size: 11px !important;
padding: 4px 10px !important;
}
/* ── Issue TOC section header ── */
.obj_issue_toc h2 {
font-size: 13px !important;
padding: 8px 12px !important;
}
/* ── Sidebar: full width & compact ── */
.pkp_structure_sidebar {
margin-top: 0 !important;
}
.pkp_structure_sidebar .pkp_block {
margin-bottom: 12px !important;
}
/* ── Make a Submission: full width ── */
.block_make_submission_link {
padding: 14px 16px !important;
font-size: 15px !important;
}
/* ── Announcements on homepage ── */
.obj_announcement_summary {
padding: 14px !important;
}
.obj_announcement_summary h3 {
font-size: 14px !important;
}
.obj_announcement_summary .summary {
font-size: 13px !important;
}
/* ── About sub-pages (via OJS default templates) ── */
.pkp_page_about .pkp_structure_main {
padding: 16px !important;
}
/* About sub-nav tabs (Editorial Board, etc.) */
.pkp_page_about nav.about_nav ul,
.pkp_page_about .tabs {
flex-wrap: wrap !important;
gap: 4px !important;
}
/* ── Read More button ── */
.acs_read_more_btn {
font-size: 12px !important;
margin-top: 8px !important;
}
/* ── Jarak bawah konten agar footer tidak tertutup ── */
.pkp_structure_content {
padding-bottom: 32px !important;
margin-bottom: 0 !important;
}
.pkp_structure_sidebar .pkp_block:last-child {
margin-bottom: 24px !important;
}
}
/* ── Extra small screens (< 480px) ── */
@media (max-width: 480px) {
.acs_topbar_inner {
padding: 0 12px !important;
}
.acs_logo_img {
max-height: 34px !important;
max-width: 150px !important;
}
.acs_topbar_user ul.acs_user_menu>li>a {
height: 30px !important;
padding: 0 10px !important;
font-size: 11px !important;
}
.journal_thumb {
width: 110px !important;
}
.journal_thumb img,
.acs_cover_placeholder {
width: 110px !important;
height: 145px !important;
}
.acs_tabs_content {
padding: 12px !important;
}
.acs_tab_btn {
padding: 8px 12px !important;
font-size: 10px !important;
}
.pkp_structure_content {
padding: 10px !important;
}
.pkp_structure_main {
padding: 16px 14px 24px !important;
}
}
/* =========================================================
PDF GALLEY VIEW — Article PDF Viewer page
(.pkp_page_article.pkp_op_view)
NOTE: OJS uses the same body classes for both article detail
and galley view. Scroll fix for article detail is handled
via JavaScript in article_details.tpl
========================================================= */
/* Full page layout: header bar + PDF fills viewport */
.pkp_page_article.pkp_op_view {
margin: 0 !important;
padding: 0 !important;
display: flex !important;
flex-direction: column !important;
height: 100vh !important;
min-height: 100vh !important;
overflow: hidden !important;
font-family: 'Rubik', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
/* ── Header bar ── */
.header_view {
display: flex !important;
align-items: center !important;
height: 56px !important;
min-height: 56px !important;
padding: 0 20px !important;
background: linear-gradient(135deg, var(--acs-accent, #1a2a4a) 0%, color-mix(in srgb, var(--acs-accent, #1a2a4a) 78%, black 22%) 100%) !important;
color: #fff !important;
box-shadow: 0 2px 12px rgba(0, 0, 0, .25) !important;
z-index: 100;
flex-shrink: 0;
gap: 16px;
box-sizing: border-box;
}
/* Return arrow */
.header_view a.return {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 36px !important;
height: 36px !important;
border-radius: 8px !important;
background: rgba(255, 255, 255, .12) !important;
color: #fff !important;
text-decoration: none !important;
transition: background .2s !important;
flex-shrink: 0;
}
.header_view a.return:hover {
background: rgba(255, 255, 255, .22) !important;
}
.header_view a.return::before {
content: '\2190';
font-size: 18px;
line-height: 1;
}
/* Article title */
.header_view a.title {
flex: 1 1 auto !important;
color: #fff !important;
font-size: 15px !important;
font-weight: 500 !important;
text-decoration: none !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
line-height: 1.3 !important;
opacity: .92;
}
.header_view a.title:hover {
opacity: 1;
text-decoration: underline !important;
}
/* Download button */
.header_view a.download {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
height: 36px !important;
padding: 0 18px !important;
background: rgba(255, 255, 255, .15) !important;
border: 1px solid rgba(255, 255, 255, .25) !important;
border-radius: 8px !important;
color: #fff !important;
font-size: 13px !important;
font-weight: 600 !important;
text-decoration: none !important;
white-space: nowrap !important;
transition: background .2s, border-color .2s !important;
flex-shrink: 0;
}
.header_view a.download:hover {
background: rgba(255, 255, 255, .28) !important;
border-color: rgba(255, 255, 255, .4) !important;
}
.header_view a.download::before {
content: '\2B73';
font-size: 14px;
}
/* ── PDF Canvas Container — fills remaining height ── */
#pdfCanvasContainer,
.galley_view {
flex: 1 1 auto !important;
width: 100% !important;
min-height: 0 !important;
position: relative;
background: #525659;
display: flex !important;
flex-direction: column !important;
}
#pdfCanvasContainer>iframe,
.galley_view>iframe {
display: block !important;
width: 100% !important;
height: 100% !important;
flex: 1 1 auto !important;
min-height: 0 !important;
border: none !important;
}
/* Galley view with notice — outdated version banner */
.galley_view_notice {
background: #fef3c7;
border-bottom: 1px solid #f59e0b;
padding: 10px 20px;
text-align: center;
}
.galley_view_notice_message {
font-size: 13px;
color: #92400e;
font-weight: 500;
}
.galley_view_notice_message a {
color: #d97706;
font-weight: 600;
text-decoration: underline;
}
/* Screen reader only text */
.header_view .pkp_screen_reader {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* ── Mobile responsive for galley view ── */
@media (max-width: 900px) {
.header_view {
height: 50px !important;
min-height: 50px !important;
padding: 0 12px !important;
gap: 10px;
}
.header_view a.return {
width: 32px !important;
height: 32px !important;
}
.header_view a.title {
font-size: 13px !important;
}
.header_view a.download {
height: 32px !important;
padding: 0 12px !important;
font-size: 12px !important;
}
.header_view a.download .label {
display: none;
}
.header_view a.download::before {
font-size: 16px;
}
}
@media (max-width: 480px) {
.header_view {
height: 46px !important;
min-height: 46px !important;
padding: 0 10px !important;
gap: 8px;
}
.header_view a.title {
font-size: 12px !important;
}
}