/* ============================================================================
JUSTICIA - JOURNAL STYLE SHEET
Jurnal Mahasiswa Hukum Indonesia - Fakultas Hukum
Universitas Gunung Rinjani
----------------------------------------------------------------------------
Berkas CSS tunggal untuk field bawaan OJS:
Settings (Pengaturan) -> Website -> Appearance (Tampilan)
-> tab "Advanced" -> "Journal style sheet"
(Bila field tidak tampak di tab Advanced, periksa juga tab "Setup".)
Isi berkas (berurutan):
0) @import Google Fonts (Playfair Display + Plus Jakarta Sans)
1) Seluruh stylesheet tema "Judicial Crimson" v1.9.0.0
(identik dengan styles/index.less hasil kompilasi)
2) Lampiran A: kompatibilitas markup TEMA DEFAULT OJS
(form pencari header + batas tinggi logo)
Cara kerja:
- Jika tema Judicial Crimson AKTIF: berkas ini menimpa CSS tema dengan
rule identik, sehingga tampilan tidak berubah - tetap aman diunggah
(berguna sebagai lapisan gaya tambahan yang bisa Anda edit sendiri).
- Jika tema Judicial Crimson NONAKTIF (tema default OJS): berkas ini
tetap menghadirkan identitas Judicial Crimson - palet marun-emas,
tipografi serif Playfair Display, header marun SATU BARIS (logo kiri,
menu tengah, pencarian + Register/Login kanan), grid konten
1280px+24px, serta halaman dalam dan footer yang senada.
Batasan (CSS tidak bisa menambah markup baru):
- Topbar ISSN/DOI, logo UGR berdampingan, tombol emas "Buat Submisi",
hero beranda, kartu artikel bernomor, dan tombol WhatsApp mengambang
hanya tampil jika TEMA Judicial Crimson terpasang dan aktif, karena
butuh template (.tpl) tambahan - bukan sekadar CSS.
Versi: 1.0.0 (selaras tema v1.9.0.0) - 2026-10-11
Lisensi: GNU GPL v3
============================================================================ */
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,500;1,600&family=Plus+Jakarta+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,400;1,600&display=swap");
/**
* plugins/themes/justiciaTheme/styles/index.less
*
* Tema "Judicial Crimson" — JUSTICIA (Jurnal Mahasiswa Hukum Indonesia)
* Fakultas Hukum Universitas Gunung Rinjani
*
* Tema anak dari tema default. Stylesheet ini dimuat SETELAH stylesheet
* induk, sehingga override dengan spesifisitas sedikit lebih tinggi sudah
* cukup untuk menang.
*
* Palet:
* maroon #8c1d18 | maroon-deep #6e1412 | maroon-dark #45100d
* crimson #b32821 | gold #c9a227 | gold-light #e3c86a
* ivory #faf6ef | paper #fffdf8 | ink #241b16 | ink-soft #6b5d52
*/
/* ============================================================
1. VARIABEL
============================================================ */
/* Tekstur titik halus ala kertas pada latar ivory */
/* Pilar vertikal emas di atas gradasi marun gelap */
/* Garis emas dengan belah ketupat di tengah */
/* ============================================================
2. DASAR GLOBAL — tipografi & warna brand
============================================================ */
body {
font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
color: #241b16;
background: #faf6ef;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
color: #241b16;
}
a {
color: #8c1d18;
}
a:hover {
color: #b32821;
}
/* Judul halaman dalam (article, issue, about, dst.) */
.page_title,
.page_index_journal h2,
.obj_issue_toc h2,
.obj_article_details .title {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
color: #241b16;
}
/* ============================================================
3. TOPBAR — ISSN / DOI / pengindeks
============================================================ */
.jus-topbar {
display: none;
/* hanya tampil di layar lebar */
background: #45100d;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
color: rgba(233, 217, 184, 0.85);
font-size: 11.5px;
letter-spacing: 0.02em;
/* v1.9.0.0 — rentang 992-1199px: izinkan isi topbar melipat
(tautan pengindeks turun di bawah ISSN) — sebelumnya kedua
grup nowrap menjumlah ±996px sehingga meluber keluar
kontainer (terukur scrollWidth 1060 > viewport 992). */
}
.jus-topbar .jus-topbar-inner {
max-width: 1280px;
margin: 0 auto;
padding: 6px 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.jus-topbar .jus-topbar-ids {
display: flex;
align-items: center;
gap: 18px;
white-space: nowrap;
}
.jus-topbar .jus-topbar-ids strong {
color: #f3e7c9;
font-weight: 600;
}
.jus-topbar .jus-topbar-ids .jus-sep {
width: 1px;
height: 12px;
background: rgba(255, 255, 255, 0.15);
display: inline-block;
}
.jus-topbar .jus-topbar-indexers {
display: flex;
align-items: center;
gap: 2px;
white-space: nowrap;
}
.jus-topbar .jus-topbar-indexers .jus-topbar-label {
color: rgba(233, 217, 184, 0.6);
margin-right: 6px;
}
.jus-topbar .jus-topbar-indexers a {
color: rgba(233, 217, 184, 0.85);
text-decoration: none;
padding: 2px 6px;
border-radius: 3px;
}
.jus-topbar .jus-topbar-indexers a:hover {
background: rgba(255, 255, 255, 0.1);
color: #fff;
}
@media (min-width: 992px) {
.jus-topbar {
display: block;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.jus-topbar .jus-topbar-inner {
flex-wrap: wrap;
row-gap: 2px;
}
.jus-topbar .jus-topbar-ids {
gap: 12px;
}
.jus-topbar .jus-topbar-indexers {
flex-wrap: wrap;
row-gap: 2px;
font-size: 11px;
}
}
/* ============================================================
4. HEADER — marun, serif, menu putih
============================================================ */
header.pkp_structure_head {
background: #6e1412;
border-top: 3px solid transparent;
border-image: linear-gradient(90deg, #45100d, #c9a227, #45100d) 1;
position: relative;
z-index: 100;
/* v1.6.0.0 — Sejajarkan margin kiri navigasi dengan logo.
Tema default OJS memberi .pkp_site_name_wrapper lebar tetap
(952px @>=992px, 1160px @>=1200px, center) sehingga logo masuk
+-60px dari tepi kontainer 1280px, sementara
.pkp_navigation_primary_wrapper mengikuti aturan
.has_site_logo { width: auto } sehingga menu menempel di tepi
kontainer — hasilnya menu menjorok KIRI +-60px dari logo
(terukur di situs live: logo x=140 vs teks menu x=80 @1440px).
Solusi: samakan kedua wrapper pada SATU grid situs yang sama
dengan seluruh seksi Judicial Crimson (topbar, hero, stats,
issue, footer): max-width 1280px + padding-inline 24px.
Hasil: topbar, logo, dan menu berbagi satu garis kiri yang
identik pada semua lebar layar >=992px. Di bawah 992px tata
letak mobile bawaan dipertahankan apa adanya. */
/* Nama jurnal / logo — logo jurnal + logo universitas berdampingan */
/* Menu primer */
/* Tombol cari */
/* v1.8.0.0 — Tombol emas "Buat Submisi" di baris navigasi,
meniru CTA emas pada navbar showcase. Disisipkan di
header.tpl sebelum kotak pencari (keduanya float:right,
sehingga CTA mendarat paling kanan, persis showcase).
Tersembunyi di bawah 992px karena navigasi mobile memakai
panel off-canvas bawaan OJS. */
/* Menu pengguna.
v1.5.0.0: aturan lama "li a { color: @jus-ink }" bertabrakan dengan
aturan top-level (spesifisitas sama, urutan menang) sehingga tautan
Register/Login tampil TINTA GELAP di atas header marun (nyaris tak
terlihat). Warna tinta kini hanya untuk butir dropdown (li li). */
/* Toggle menu mobile */
/* Panel menu off-canvas mobile */
/* v1.9.0.0 — Header SATU BARIS: menu sejajar di kanan logo
(meniru navbar situs showcase). Sebelumnya logo (baris 1) dan
menu (baris 2) bertumpuk; showcase menyusun logo — menu —
(cari + CTA) pada SATU baris. Geometri showcase terukur
@1440px: kontainer 1280px+24px (grid situs, sama), logo
104..438, menu terpusat di ruang antara (gap +-92px), grup
cari+CTA menempel di 1336, tinggi baris +-70px.
Implementasi (semua >=992px, mobile tidak disentuh):
.pkp_head_wrapper menjadi flex satu baris:
[logo] .. [menu terpusat auto-margin] .. [Cari][CTA][Register/Login]
- menu ul diberi margin kiri-kanan auto -> terpusat di ruang
antara logo dan grup kanan, meniru justify-between showcase;
- CTA + kotak cari (kini tombol lingkaran ikon, hemat lebar)
terdorong ke ujung kanan lewat order + margin auto grup menu;
- Register/Login keluar dari posisi absolut (pita atas) dan
ikut baris di ujung kanan, dipisah garis vertikal halus;
- clearfix ::before/::after inti dinetralkan karena berubah
menjadi item flex (lebar ~4px di kedua tepi). */
}
header.pkp_structure_head .pkp_head_wrapper {
background: transparent;
max-width: 1280px;
margin: 0 auto;
width: 100%;
}
@media (min-width: 992px) {
header.pkp_structure_head .pkp_site_name_wrapper,
header.pkp_structure_head .pkp_navigation_primary_wrapper {
width: 100%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
padding-left: 24px;
padding-right: 24px;
}
}
header.pkp_structure_head .pkp_site_name {
display: flex;
align-items: center;
gap: 0.5rem;
/* Logo Universitas Gunung Rinjani — lingkaran, sejajar logo jurnal */
/* Kompensasi padding transparan di sisi kanan logo jurnal
(±129px pada pageHeaderLogoImage saat ini) agar logo UGR
benar-benar berdampingan. CATATAN: bila logo jurnal
diganti lewat dashboard, sesuaikan nilai margin-left ini.
Hanya berlaku saat logo jurnal (a.is_img) adalah elemen
pertama, dan hanya di layar ≥600px (di bawah itu logo
jurnal menyusut proporsional lewat flex). */
}
header.pkp_structure_head .pkp_site_name a.is_text,
header.pkp_structure_head .pkp_site_name a.is_img {
min-width: 0;
}
header.pkp_structure_head .pkp_site_name a.is_text {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-weight: 700;
letter-spacing: 0.04em;
color: #fff;
font-size: 1.55rem;
line-height: 1.2;
/* Fallback cabang teks: judul satu baris dengan
elipsis bila ruang sempit (cabang logo tidak
pernah terpengaruh aturan ini). */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
header.pkp_structure_head .pkp_site_name a.is_text:hover,
header.pkp_structure_head .pkp_site_name a.is_text:focus {
color: #e3c86a;
}
header.pkp_structure_head .pkp_site_name a.is_img img {
display: inline-block;
max-width: 100%;
height: auto;
}
header.pkp_structure_head .pkp_site_name a.jus-logo-ugr {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
line-height: 0;
}
header.pkp_structure_head .pkp_site_name a.jus-logo-ugr img {
width: 64px;
height: 64px;
border-radius: 50%;
box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.55), 0 2px 8px rgba(0, 0, 0, 0.28);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
header.pkp_structure_head .pkp_site_name a.jus-logo-ugr:hover img,
header.pkp_structure_head .pkp_site_name a.jus-logo-ugr:focus img {
box-shadow: 0 0 0 2px #e3c86a, 0 3px 10px rgba(0, 0, 0, 0.32);
transform: translateY(-1px);
}
@media (max-width: 767px) {
header.pkp_structure_head .pkp_site_name {
gap: 0.45rem;
}
header.pkp_structure_head .pkp_site_name a.jus-logo-ugr img {
width: 46px;
height: 46px;
}
}
@media (min-width: 600px) {
header.pkp_structure_head .pkp_site_name a.is_img:first-child + a.jus-logo-ugr {
margin-left: -7.5rem;
}
}
header.pkp_structure_head .pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a {
color: rgba(255, 255, 255, 0.85);
font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 500;
font-size: 0.95rem;
}
header.pkp_structure_head .pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a:hover,
header.pkp_structure_head .pkp_navigation_primary_wrapper .pkp_navigation_primary > li > a:focus {
background: rgba(255, 255, 255, 0.12);
color: #fff;
}
header.pkp_structure_head .pkp_navigation_primary_wrapper .pkp_navigation_primary > li ul a {
color: #241b16;
}
header.pkp_structure_head .pkp_navigation_primary_wrapper .pkp_navigation_primary > li ul a:hover {
color: #8c1d18;
}
header.pkp_structure_head .pkp_navigation_search_wrapper .pkp_search {
color: rgba(255, 255, 255, 0.85);
border: 1px solid rgba(255, 255, 255, 0.25);
border-radius: 999px;
}
header.pkp_structure_head .pkp_navigation_search_wrapper .pkp_search:hover,
header.pkp_structure_head .pkp_navigation_search_wrapper .pkp_search:focus {
color: #e3c86a;
border-color: rgba(201, 162, 39, 0.7);
}
header.pkp_structure_head .jus-nav-cta {
display: none;
}
@media (min-width: 992px) {
header.pkp_structure_head .jus-nav-cta {
display: inline-flex;
float: right;
align-items: center;
gap: 8px;
/* tinggi total +-37px agar segaris dgn butir menu
(item menu: padding 5.7px/9.4px + teks) */
margin: 6px 0 0 12px;
padding: 8px 20px 9px;
background: linear-gradient(135deg, #c9a227, #e3c86a);
color: #fff;
font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 0.95rem;
font-weight: 700;
letter-spacing: 0.01em;
line-height: 1.3;
border-radius: 999px;
box-shadow: 0 6px 18px rgba(201, 162, 39, 0.4);
text-decoration: none;
transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
header.pkp_structure_head .jus-nav-cta svg {
display: block;
}
header.pkp_structure_head .jus-nav-cta:hover,
header.pkp_structure_head .jus-nav-cta:focus {
color: #fff;
filter: brightness(1.06);
transform: translateY(-1px);
box-shadow: 0 10px 26px rgba(201, 162, 39, 0.5);
text-decoration: none;
}
}
header.pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a {
color: rgba(233, 217, 184, 0.88);
}
header.pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a:hover,
header.pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a:focus {
color: #e3c86a;
}
header.pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user li li > a {
color: #241b16;
}
header.pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user li li > a:hover,
header.pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user li li > a:focus {
color: #8c1d18;
}
header.pkp_structure_head .pkp_site_nav_toggle {
background: rgba(255, 255, 255, 0.12);
color: #fff;
border-radius: 6px;
}
header.pkp_structure_head .pkp_site_nav_toggle:hover {
background: rgba(255, 255, 255, 0.2);
}
header.pkp_structure_head .pkp_site_nav_menu {
background: #6e1412;
}
@media (min-width: 992px) {
header.pkp_structure_head {
/* Logo menyusut ke konten -> grup paling kiri */
/* Menu utama terpusat di ruang antara logo dan grup kanan */
/* CTA emas: ikut baris, urutan [Cari] lalu [CTA] seperti
showcase (search order 2, CTA order 3) */
/* Kotak cari menjadi tombol lingkaran ikon (showcase);
teks "Search" disembunyikan visual, tetap terbaca SR */
/* Register/Login: keluar dari posisi absolut pita atas,
ikut baris di ujung kanan dengan pemisah vertikal */
/* Rentang sempit 992-1199px: versi kompak (CTA ramping,
jarak dirapatkan) agar satu baris tetap muat */
}
header.pkp_structure_head .pkp_head_wrapper:before,
header.pkp_structure_head .pkp_head_wrapper:after,
header.pkp_structure_head .pkp_navigation_primary_wrapper:before,
header.pkp_structure_head .pkp_navigation_primary_wrapper:after {
content: none;
display: none;
}
header.pkp_structure_head .pkp_head_wrapper {
display: flex;
align-items: center;
flex-wrap: nowrap;
padding: 14px 24px;
}
header.pkp_structure_head .pkp_site_name_wrapper {
width: auto;
max-width: none;
margin: 0;
padding: 0;
flex: 0 0 auto;
}
header.pkp_structure_head .pkp_site_name {
width: auto;
}
header.pkp_structure_head .pkp_site_name a.is_img {
margin-top: 0;
margin-bottom: 0;
}
header.pkp_structure_head nav.pkp_site_nav_menu {
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
margin-left: 24px;
}
header.pkp_structure_head .pkp_navigation_primary_row,
header.pkp_structure_head .pkp_navigation_primary_wrapper {
width: auto;
max-width: none;
margin: 0;
padding: 0;
flex: 1 1 auto;
min-width: 0;
display: flex;
align-items: center;
}
header.pkp_structure_head .pkp_navigation_primary {
flex: 0 1 auto;
width: auto;
max-width: none;
margin-left: auto;
margin-right: auto;
display: flex;
align-items: center;
/* margin-top butir (0.357rem) menggeser teks 5px
dari pusat baris flex — dinetralkan */
}
header.pkp_structure_head .pkp_navigation_primary > li > a {
margin-top: 0;
}
header.pkp_structure_head .jus-nav-cta {
float: none;
order: 3;
flex: 0 0 auto;
align-self: center;
margin: 0 0 0 12px;
}
header.pkp_structure_head .pkp_navigation_search_wrapper {
order: 2;
flex: 0 0 auto;
margin-left: 12px;
/* wrapper flex agar lingkaran ikon tepat di garis
tengah baris (inline baseline menggeser +2.5px) */
display: flex;
align-items: center;
}
header.pkp_structure_head .pkp_navigation_search_wrapper .pkp_search {
width: 38px;
height: 38px;
padding: 0;
margin: 0;
/* margin-top 0.357rem inti menggeser lingkaran 5px */
font-size: 0;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
}
header.pkp_structure_head .pkp_navigation_search_wrapper .pkp_search .fa {
font-size: 14px;
}
header.pkp_structure_head .pkp_navigation_user_wrapper {
position: static;
transform: none;
width: auto;
flex: 0 0 auto;
margin: 0 0 0 14px;
padding: 0 0 0 16px;
border-left: 1px solid rgba(255, 255, 255, 0.18);
text-align: left;
}
header.pkp_structure_head .pkp_navigation_user {
width: auto;
margin: 0;
padding-right: 0;
display: flex;
align-items: center;
gap: 14px;
text-align: left;
}
}
@media (min-width: 992px) and (max-width: 1199px) {
header.pkp_structure_head nav.pkp_site_nav_menu {
margin-left: 12px;
}
header.pkp_structure_head .jus-nav-cta {
margin-left: 10px;
padding: 8px 12px 9px;
font-size: 0.9rem;
}
header.pkp_structure_head .pkp_navigation_search_wrapper {
margin-left: 10px;
}
header.pkp_structure_head .pkp_navigation_user_wrapper {
margin-left: 10px;
padding-left: 12px;
}
header.pkp_structure_head .pkp_navigation_user {
gap: 10px;
}
}
/* ============================================================
5. KONTEN UMUM — kertas ivory
============================================================ */
.pkp_structure_content {
background: #faf6ef;
/* v1.7.0.0 — Konten halaman dalam (About, Submissions, Arsip,
issue, artikel, cari) ikut SATU GRID SITUS yang sama dengan
header/footer/topbar: max-width 1280px + gutter 24px.
Sebelumnya tema default membatasi wadah ini 952px @>=992px /
1160px @>=1200px (center), sehingga teks halaman dalam masuk
+-70px dari garis kiri header (terukur live @1440px: konten
x=174 vs grid header x=104). Blok anti-tamper v1.1.1.0 di
bawah menjaga .pkp_structure_main tetap width:100% dari
wadah ini, jadi cukup melebarkan wadahnya di sini.
Di bawah 992px tata letak tablet/ponsel bawaan dipertahankan. */
}
@media (min-width: 992px) {
.pkp_structure_content {
width: 100%;
max-width: 1280px;
margin-left: auto;
margin-right: auto;
}
}
.pkp_structure_main {
max-width: 1280px;
margin-left: auto;
margin-right: auto;
/* v1.7.0.0 — gutter horizontal halaman dalam mengikuti grid 24px.
Ritme vertikal bawaan dipertahankan dari tema default
(atas 0, bawah 6.429rem). Catatan: blok anti-tamper v1.1.1.0
memaksa width/max-width 100% (!important) — itu tetap benar,
karena batas 1280px kini ditetapkan pada wadah di atas. */
/* v1.7.0.0 — PENGECUALIAN BERANDA: seksi kustom beranda sudah
membawa gutter 24px sendiri (.jus-hero-inner, .jus-stats-inner,
.jus-issue-inner, dst. — semuanya max-width 1280px + padding
24px). Bila main diberi padding 24px juga, hasilnya padding
ganda (teks beranda masuk 48px) dan tidak sejajar dengan logo.
Nolkan padding horizontal main KHUSUS beranda (body class
pkp_page_index pkp_op_index) agar gutter tunggal dari seksi
sendiri menempatkan teks tepat pada garis grid (104px @1440px)
— sama dengan topbar, logo, dan menu. */
/* v1.5.0.0: tema default OJS menggambar dua garis panduan kolom
(1px #ddd, setinggi seluruh halaman) via ::before/::after pada
.pkp_structure_main. Di atas desain Judicial Crimson garis ini
tampak sebagai coretan vertikal asing yang menembus semua seksi.
Matikan total. */
}
@media (min-width: 992px) {
.pkp_structure_main {
padding-left: 24px;
padding-right: 24px;
}
}
@media (min-width: 992px) {
.pkp_page_index.pkp_op_index .pkp_structure_main {
padding-left: 0;
padding-right: 0;
}
}
.pkp_structure_main::before,
.pkp_structure_main::after {
content: none !important;
display: none !important;
}
/* v1.5.0.0 — Halaman dalam (About, Submissions, Arsip, dsb.):
judul serif senada Judicial Crimson + breadcrumb kecil rapi. */
.cmp_breadcrumbs {
font-size: 12px;
letter-spacing: 0.05em;
text-transform: uppercase;
color: #6b5d52;
}
.cmp_breadcrumbs a {
color: #8c1d18;
text-decoration: none;
}
.cmp_breadcrumbs a:hover,
.cmp_breadcrumbs a:focus {
color: #b32821;
text-decoration: underline;
}
.pkp_structure_main .page > h1,
.pkp_structure_main .page > h2 {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
color: #241b16;
letter-spacing: -0.01em;
}
.pkp_structure_main .page > h1 {
font-size: 2.1rem;
font-weight: 800;
line-height: 1.2;
}
.pkp_structure_main .page > h1::after {
content: "";
display: block;
width: 64px;
height: 3px;
margin-top: 10px;
border-radius: 2px;
background: linear-gradient(90deg, #c9a227, #e3c86a);
}
/* Tombol utama gaya marun */
.pkp_button:not(.pkp_button_offset) {
background: #8c1d18;
color: #fff;
border-radius: 999px;
}
.pkp_button:not(.pkp_button_offset):hover,
.pkp_button:not(.pkp_button_offset):focus {
background: #b32821;
}
/* Kartu ringkasan artikel di halaman issue/arsip */
.obj_article_summary {
background: #fffdf8;
border: 1px solid rgba(140, 29, 24, 0.12);
border-radius: 12px;
padding: 16px 18px;
box-shadow: 0 2px 10px rgba(69, 16, 13, 0.05);
transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.obj_article_summary:hover {
transform: translateY(-3px);
border-color: rgba(201, 162, 39, 0.55);
box-shadow: 0 14px 34px rgba(69, 16, 13, 0.12);
}
.obj_article_summary .title {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}
.obj_article_summary .title a {
color: #241b16;
}
.obj_article_summary .title a:hover {
color: #8c1d18;
}
.obj_article_summary .meta .pages {
color: #6b5d52;
}
.obj_article_summary .galleys_links .obj_galley_link {
background: #8c1d18;
color: #fff;
border-radius: 999px;
}
.obj_article_summary .galleys_links .obj_galley_link:hover,
.obj_article_summary .galleys_links .obj_galley_link:focus {
background: #b32821;
}
.obj_article_summary .galleys_links .obj_galley_link.pdf {
background: #8c1d18;
}
/* ============================================================
6. BERANDA KUSTOM
============================================================ */
/* ---------- 6a. HERO ---------- */
.jus-hero {
background-color: #faf6ef;
background-image: radial-gradient(circle at 1px 1px, rgba(140, 29, 24, 0.045) 1px, transparent 0);
background-size: 22px 22px;
position: relative;
overflow: hidden;
/* Sampul dengan bingkai emas + kemiringan 3D mengikuti mouse */
/* Fallback bila terbitan belum memiliki sampul */
}
.jus-hero .jus-hero-inner {
max-width: 1280px;
margin: 0 auto;
padding: 48px 24px 64px;
display: grid;
grid-template-columns: 1fr;
gap: 40px;
align-items: center;
}
@media (min-width: 992px) {
.jus-hero .jus-hero-inner {
grid-template-columns: 1.15fr 0.85fr;
/* v1.8.0.0: ritme vertikal disamakan dgn showcase
(lg:pt-20 pb-24 = 80px/96px) */
padding: 80px 24px 96px;
}
}
.jus-hero .jus-hero-badge {
display: inline-flex;
align-items: center;
gap: 8px;
background: #fffdf8;
border: 1px solid rgba(140, 29, 24, 0.15);
color: #8c1d18;
font-size: 11.5px;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
padding: 7px 16px;
border-radius: 999px;
box-shadow: 0 1px 4px rgba(69, 16, 13, 0.08);
}
.jus-hero h1.jus-hero-title {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-weight: 900;
font-size: 3.2rem;
line-height: 0.95;
letter-spacing: -0.01em;
color: #241b16;
margin: 22px 0 0;
position: relative;
display: inline-block;
/* v1.8.0.0: skala judul hero disamakan PERSIS showcase
(lg:text-[5.2rem] = 83.2px). Satuan px dipakai karena
root font-size OJS 14px (rem tema = 14px, berbeda
dari rem Tailwind showcase = 16px). */
}
@media (min-width: 768px) {
.jus-hero h1.jus-hero-title {
font-size: 72px;
}
}
@media (min-width: 992px) {
.jus-hero h1.jus-hero-title {
font-size: 83px;
}
}
.jus-hero h1.jus-hero-title .jus-hero-underline {
display: block;
width: 100%;
height: 5px;
margin-top: 8px;
background: linear-gradient(90deg, #c9a227, #e3c86a);
border-radius: 3px;
}
.jus-hero .jus-hero-subtitle {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-style: italic;
color: #8c1d18;
font-size: 1.35rem;
margin-top: 16px;
}
.jus-hero .jus-hero-desc {
color: #6b5d52;
font-size: 0.98rem;
line-height: 1.75;
max-width: 560px;
margin-top: 22px;
}
.jus-hero .jus-hero-desc strong {
color: #241b16;
font-weight: 600;
}
.jus-hero .jus-hero-actions {
margin-top: 30px;
display: flex;
flex-wrap: wrap;
gap: 14px;
}
.jus-hero .jus-hero-actions a.jus-btn-primary,
.jus-hero .jus-hero-actions a.jus-btn-ghost {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 14px 28px;
border-radius: 999px;
font-size: 0.9rem;
font-weight: 700;
text-decoration: none;
transition: all 0.25s ease;
}
.jus-hero .jus-hero-actions a.jus-btn-primary {
background: #8c1d18;
color: #fff;
box-shadow: 0 10px 30px rgba(140, 29, 24, 0.35);
}
.jus-hero .jus-hero-actions a.jus-btn-primary:hover {
background: #b32821;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 16px 40px rgba(140, 29, 24, 0.45);
}
.jus-hero .jus-hero-actions a.jus-btn-ghost {
background: #fffdf8;
color: #8c1d18;
border: 2px solid rgba(140, 29, 24, 0.25);
}
.jus-hero .jus-hero-actions a.jus-btn-ghost:hover {
background: #8c1d18;
color: #fff;
border-color: #8c1d18;
transform: translateY(-2px);
}
.jus-hero .jus-hero-badges {
margin-top: 34px;
display: flex;
flex-wrap: wrap;
gap: 10px 24px;
}
.jus-hero .jus-hero-badges span {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 12.5px;
font-weight: 600;
color: #6b5d52;
}
.jus-hero .jus-hero-badges span::before {
content: "";
width: 14px;
height: 14px;
flex-shrink: 0;
background: #c9a227;
border-radius: 50%;
-webkit-mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center / contain no-repeat;
}
.jus-hero .jus-hero-cover {
position: relative;
perspective: 1200px;
justify-self: center;
width: 100%;
max-width: 380px;
}
.jus-hero .jus-cover-frame {
border: 6px solid rgba(201, 162, 39, 0.85);
background: #45100d;
padding: 6px;
border-radius: 8px;
box-shadow: 0 30px 60px -15px rgba(69, 16, 13, 0.5);
transition: transform 0.3s ease-out;
transform-style: preserve-3d;
}
.jus-hero .jus-cover-frame img {
display: block;
width: 100%;
height: auto;
border-radius: 3px;
}
.jus-hero .jus-cover-badge {
position: absolute;
background: rgba(255, 253, 248, 0.95);
border: 1px solid rgba(140, 29, 24, 0.12);
border-radius: 12px;
padding: 10px 16px;
box-shadow: 0 8px 24px rgba(69, 16, 13, 0.18);
backdrop-filter: blur(4px);
z-index: 5;
}
.jus-hero .jus-cover-badge .label {
display: block;
font-size: 10px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #6b5d52;
}
.jus-hero .jus-cover-badge .value {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-size: 1.15rem;
font-weight: 700;
color: #8c1d18;
}
.jus-hero .jus-cover-badge.issn {
top: 38px;
right: -14px;
}
.jus-hero .jus-cover-badge.doi {
bottom: 52px;
left: -14px;
}
.jus-hero .jus-cover-fallback {
aspect-ratio: 596 / 842;
width: 100%;
background: linear-gradient(160deg, #b32821 0%, #6e1412 100%);
border-radius: 3px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
padding: 24px;
text-align: center;
}
.jus-hero .jus-cover-fallback .jus-cover-fallback-title {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-size: 2.6rem;
font-weight: 900;
letter-spacing: 0.06em;
color: #fff;
}
.jus-hero .jus-cover-fallback .jus-cover-fallback-sub {
font-size: 0.8rem;
letter-spacing: 0.18em;
text-transform: uppercase;
color: rgba(233, 217, 184, 0.9);
}
/* ---------- 6b. STATISTIK ---------- */
.jus-stats {
background-image: repeating-linear-gradient(90deg, rgba(227, 200, 106, 0.05) 0 2px, transparent 2px 96px), linear-gradient(180deg, #45100d 0%, #6e1412 55%, #8c1d18 100%);
}
.jus-stats .jus-stats-inner {
max-width: 1280px;
margin: 0 auto;
padding: 40px 24px;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 28px 8px;
}
@media (min-width: 992px) {
.jus-stats .jus-stats-inner {
grid-template-columns: repeat(4, 1fr);
}
}
.jus-stats .jus-stat {
text-align: center;
/* v1.5.0.0: value & label dipaksa blok agar tersusun rapi
(ikon → angka besar → label), tidak mengalir sebaris. */
}
.jus-stats .jus-stat .jus-stat-label {
display: block;
margin-top: 6px;
font-size: 12px;
font-weight: 600;
letter-spacing: 0.14em;
text-transform: uppercase;
color: rgba(233, 217, 184, 0.75);
}
.jus-stats .jus-stat .jus-stat-value {
display: block;
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-size: 36px;
font-weight: 700;
color: #fff;
line-height: 1.1;
/* v1.8.0.0: disamakan PERSIS showcase
(sm:text-5xl = 48px; root OJS 14px) */
}
@media (min-width: 992px) {
.jus-stats .jus-stat .jus-stat-value {
font-size: 48px;
}
}
.jus-stats .jus-stat .jus-stat-icon {
width: 24px;
height: 24px;
margin: 0 auto 10px;
display: block;
color: #e3c86a;
}
/* ---------- 6c. MARQUEE PENGINDEKS ---------- */
.jus-marquee {
background: #fffdf8;
border-top: 1px solid rgba(140, 29, 24, 0.1);
border-bottom: 1px solid rgba(140, 29, 24, 0.1);
overflow: hidden;
position: relative;
padding: 16px 0;
}
.jus-marquee::before,
.jus-marquee::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 72px;
z-index: 5;
pointer-events: none;
}
.jus-marquee::before {
left: 0;
background: linear-gradient(90deg, #fffdf8, transparent);
}
.jus-marquee::after {
right: 0;
background: linear-gradient(-90deg, #fffdf8, transparent);
}
.jus-marquee .jus-marquee-track {
display: flex;
width: max-content;
animation: jus-marquee 36s linear infinite;
}
.jus-marquee .jus-marquee-track:hover {
animation-play-state: paused;
}
.jus-marquee .jus-marquee-item {
display: inline-flex;
align-items: center;
gap: 10px;
margin: 0 8px;
padding: 10px 20px;
background: #faf6ef;
border: 1px solid rgba(140, 29, 24, 0.12);
border-radius: 999px;
font-size: 13px;
font-weight: 600;
color: #241b16;
text-decoration: none;
white-space: nowrap;
transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.jus-marquee .jus-marquee-item:hover {
border-color: rgba(201, 162, 39, 0.6);
box-shadow: 0 4px 14px rgba(201, 162, 39, 0.25);
}
.jus-marquee .jus-marquee-item .dot {
width: 9px;
height: 9px;
background: #c9a227;
border-radius: 50%;
flex-shrink: 0;
}
@keyframes jus-marquee {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* ---------- 6d. HEADER SECTION umum ---------- */
.jus-section-head {
text-align: center;
margin-bottom: 44px;
}
.jus-section-head .jus-eyebrow {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.28em;
text-transform: uppercase;
color: #c9a227;
margin-bottom: 8px;
}
.jus-section-head h2 {
font-size: 1.9rem;
font-weight: 700;
color: #241b16;
margin: 0;
/* v1.8.0.0: core memaksa .pkp_structure_main h2
{ line-height: 2.143rem } = 30px TETAP. Sejak judul
dinaikkan ke 44px, teks baris kedua menimpa baris
pertama (inheriting line-height px tetap). Kunci
eksplisit agar proporsional dgn ukuran font. */
line-height: 1.2;
/* v1.8.0.0: disamakan PERSIS showcase
(lg:text-[2.75rem] = 44px; root OJS 14px) */
}
@media (min-width: 768px) {
.jus-section-head h2 {
font-size: 36px;
}
}
@media (min-width: 992px) {
.jus-section-head h2 {
font-size: 44px;
}
}
.jus-section-head .jus-rule {
position: relative;
height: 1px;
background: linear-gradient(90deg, transparent, #c9a227 20%, #c9a227 80%, transparent);
width: 220px;
margin: 22px auto 0;
}
.jus-section-head .jus-rule::after {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 7px;
height: 7px;
transform: translate(-50%, -50%) rotate(45deg);
background: #c9a227;
}
/* ---------- 6e. TERBITAN TERKINI ---------- */
.jus-current {
background: #faf6ef;
padding: 56px 0 72px;
/* Kartu issue (kiri) */
/* v1.5.0.0 — Lipatan teks panjang (mis. PENGANTAR REDAKSI).
Checkbox-hack murni CSS: tanpa JS, aksesibel (focus-visible),
tombol melingkar senada tema. */
/* Daftar artikel (kanan) */
}
.jus-current .jus-current-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
.jus-current .jus-current-grid {
display: grid;
grid-template-columns: 1fr;
gap: 36px;
}
@media (min-width: 992px) {
.jus-current .jus-current-grid {
/* v1.8.0.0: kolom sampul 340px seperti showcase
(lg:grid-cols-[340px_1fr]) */
grid-template-columns: 340px 1fr;
gap: 48px;
}
}
.jus-current .jus-issue-card {
background: #fffdf8;
border: 1px solid rgba(140, 29, 24, 0.12);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 12px 40px rgba(69, 16, 13, 0.1);
}
@media (min-width: 992px) {
.jus-current .jus-issue-card {
position: sticky;
top: 24px;
align-self: start;
}
}
.jus-current .jus-issue-card .jus-issue-cover {
background: #45100d;
text-align: center;
}
.jus-current .jus-issue-card .jus-issue-cover img {
width: 100%;
height: auto;
display: block;
}
.jus-current .jus-issue-card .jus-issue-body {
padding: 20px;
/* Galleys issue penuh (PDF) */
}
.jus-current .jus-issue-card .jus-issue-body .jus-issue-galleys {
margin: 4px 0 2px;
}
.jus-current .jus-issue-card .jus-issue-body .jus-issue-galleys .obj_galley_link {
display: inline-flex;
align-items: center;
gap: 6px;
background: #8c1d18;
color: #fff;
font-size: 12px;
font-weight: 700;
padding: 7px 16px;
border-radius: 999px;
text-decoration: none;
margin-right: 8px;
}
.jus-current .jus-issue-card .jus-issue-body .jus-issue-galleys .obj_galley_link:hover,
.jus-current .jus-issue-card .jus-issue-body .jus-issue-galleys .obj_galley_link:focus {
background: #b32821;
color: #fff;
}
.jus-current .jus-issue-card .jus-issue-body .jus-issue-galleys .obj_galley_link.restricted {
background: #6b5d52;
}
.jus-current .jus-issue-card .jus-issue-body .jus-issue-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 12px;
}
.jus-current .jus-issue-card .jus-issue-body .jus-issue-chips .chip-maroon {
background: #8c1d18;
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 5px 12px;
border-radius: 999px;
text-decoration: none;
}
.jus-current .jus-issue-card .jus-issue-body .jus-issue-chips .chip-gold {
background: rgba(201, 162, 39, 0.12);
border: 1px solid rgba(201, 162, 39, 0.5);
color: #8c1d18;
font-size: 11px;
font-weight: 700;
padding: 5px 12px;
border-radius: 999px;
}
.jus-current .jus-issue-card .jus-issue-body .jus-issue-theme {
font-size: 0.92rem;
font-weight: 400;
line-height: 1.75;
color: #6b5d52;
margin: 0 0 12px;
}
.jus-current .jus-issue-card .jus-issue-body .jus-issue-theme strong,
.jus-current .jus-issue-card .jus-issue-body .jus-issue-theme b {
color: #241b16;
font-weight: 700;
}
.jus-current .jus-issue-card .jus-issue-body .jus-issue-theme p {
margin: 0 0 10px;
}
.jus-current .jus-issue-card .jus-issue-body .jus-issue-theme h3,
.jus-current .jus-issue-card .jus-issue-body .jus-issue-theme h4 {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
color: #241b16;
font-size: 1.05rem;
letter-spacing: 0.06em;
margin: 14px 0 8px;
}
.jus-current .jus-issue-card .jus-issue-body .jus-issue-meta {
font-size: 12.5px;
color: #6b5d52;
margin: 0 0 6px;
}
.jus-current .jus-issue-card .jus-issue-body a.jus-btn-primary,
.jus-current .jus-issue-card .jus-issue-body a.jus-btn-outline {
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 12px 20px;
border-radius: 999px;
font-size: 13px;
font-weight: 700;
margin-top: 10px;
text-decoration: none;
transition: all 0.25s ease;
}
.jus-current .jus-issue-card .jus-issue-body a.jus-btn-primary {
background: #8c1d18;
color: #fff;
}
.jus-current .jus-issue-card .jus-issue-body a.jus-btn-primary:hover {
background: #b32821;
color: #fff;
}
.jus-current .jus-issue-card .jus-issue-body a.jus-btn-outline {
border: 1px solid rgba(140, 29, 24, 0.25);
color: #8c1d18;
}
.jus-current .jus-issue-card .jus-issue-body a.jus-btn-outline:hover {
background: #8c1d18;
color: #fff;
}
.jus-current .jus-collapsible {
position: relative;
}
.jus-current .jus-collapsible .jus-coll-toggle {
position: absolute;
opacity: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
.jus-current .jus-collapsible .jus-coll-body {
max-height: 320px;
overflow: hidden;
position: relative;
transition: max-height 0.35s ease;
}
.jus-current .jus-collapsible .jus-coll-body::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 72px;
background: linear-gradient(180deg, rgba(255, 253, 248, 0), #fffdf8);
pointer-events: none;
}
.jus-current .jus-collapsible .jus-coll-btn {
display: inline-flex;
align-items: center;
gap: 6px;
cursor: pointer;
user-select: none;
margin-top: 10px;
padding: 7px 16px;
border: 1px solid rgba(140, 29, 24, 0.25);
border-radius: 999px;
background: #fffdf8;
color: #8c1d18;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
transition: background 0.2s ease, border-color 0.2s ease;
}
.jus-current .jus-collapsible .jus-coll-btn:hover {
background: #fff;
border-color: rgba(201, 162, 39, 0.7);
}
.jus-current .jus-collapsible .jus-coll-less {
display: none;
}
.jus-current .jus-collapsible .jus-coll-toggle:checked ~ .jus-coll-body {
max-height: none;
}
.jus-current .jus-collapsible .jus-coll-toggle:checked ~ .jus-coll-body::after {
display: none;
}
.jus-current .jus-collapsible .jus-coll-toggle:checked ~ .jus-coll-btn .jus-coll-more {
display: none;
}
.jus-current .jus-collapsible .jus-coll-toggle:checked ~ .jus-coll-btn .jus-coll-less {
display: inline;
}
.jus-current .jus-collapsible .jus-coll-toggle:focus-visible ~ .jus-coll-btn {
outline: 2px solid #c9a227;
outline-offset: 2px;
}
.jus-current .jus-articles {
/* v1.8.0.0: penghitung nomor urut kartu (01, 02, ...)
seperti badge kartu pada showcase */
counter-reset: jus-art;
}
.jus-current .jus-articles .jus-section-title {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-size: 1.25rem;
font-weight: 700;
color: #241b16;
margin: 4px 0 16px;
padding-bottom: 12px;
border-bottom: 2px solid rgba(201, 162, 39, 0.5);
}
.jus-current .jus-articles .jus-article-card {
position: relative;
overflow: hidden;
background: #fffdf8;
border: 1px solid rgba(140, 29, 24, 0.1);
border-radius: 16px;
/* v1.8.0.0: layout grid 2 kolom — kolom kiri badge
nomor urut (56px), kolom kanan konten. */
display: grid;
grid-template-columns: 56px 1fr;
gap: 6px 18px;
align-items: start;
padding: 20px 22px;
margin-bottom: 16px;
counter-increment: jus-art;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
/* semua konten kartu berada di kolom kanan */
/* Badge nomor urut — kotak 56x56, nomor serif besar,
label kecil "ART" di bawahnya (dua pseudo di sel
yang sama, ditumpuk rapi). Persis showcase:
latar marun transparan; saat kartu di-hover,
latar jadi marun penuh, nomor putih, label emas. */
/* v1.8.0.0: padding disamakan dgn showcase (sm:p-6 = 24px) */
}
.jus-current .jus-articles .jus-article-card > * {
grid-column: 2;
}
.jus-current .jus-articles .jus-article-card::before {
grid-column: 1;
grid-row: 1;
align-self: center;
justify-self: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
padding-bottom: 11px;
border-radius: 12px;
background: rgba(140, 29, 24, 0.06);
content: counter(jus-art, decimal-leading-zero);
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-size: 1.25rem;
font-weight: 700;
line-height: 1;
color: #8c1d18;
transition: background 0.3s ease, color 0.3s ease;
}
.jus-current .jus-articles .jus-article-card::after {
grid-column: 1;
grid-row: 1;
align-self: center;
justify-self: center;
margin-top: 26px;
content: "ART";
font-size: 9px;
font-weight: 700;
letter-spacing: 0.14em;
color: #6b5d52;
transition: color 0.3s ease;
}
.jus-current .jus-articles .jus-article-card:hover {
transform: translateY(-4px);
border-color: rgba(201, 162, 39, 0.5);
box-shadow: 0 18px 45px rgba(69, 16, 13, 0.14);
}
.jus-current .jus-articles .jus-article-card:hover::before {
background: #8c1d18;
color: #fff;
}
.jus-current .jus-articles .jus-article-card:hover::after {
color: #e3c86a;
}
@media (min-width: 992px) {
.jus-current .jus-articles .jus-article-card {
padding: 24px;
}
}
.jus-current .jus-articles .jus-article-card .jus-art-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
margin-bottom: 8px;
}
.jus-current .jus-articles .jus-article-card .jus-art-chips .chip-cat {
background: rgba(201, 162, 39, 0.15);
color: #8c1d18;
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
padding: 4px 10px;
border-radius: 6px;
}
.jus-current .jus-articles .jus-article-card .jus-art-chips .chip-pages {
font-size: 11.5px;
font-weight: 500;
color: #6b5d52;
}
.jus-current .jus-articles .jus-article-card h3.jus-art-title {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
/* v1.8.0.0: disamakan PERSIS showcase
(text-[17px] sm:text-lg); root OJS 14px
membuat 1.08rem = 15.1px — terlalu kecil. */
font-size: 17px;
font-weight: 700;
line-height: 1.45;
margin: 0 0 8px;
}
.jus-current .jus-articles .jus-article-card h3.jus-art-title a {
color: #241b16;
text-decoration: none;
}
.jus-current .jus-articles .jus-article-card h3.jus-art-title a:hover {
color: #8c1d18;
}
.jus-current .jus-articles .jus-article-card .jus-art-authors {
font-size: 13px;
font-weight: 600;
color: #6b5d52;
margin-bottom: 12px;
}
.jus-current .jus-articles .jus-article-card .jus-art-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
}
.jus-current .jus-articles .jus-article-card .jus-art-actions a.obj_galley_link {
display: inline-flex;
align-items: center;
gap: 6px;
background: #8c1d18;
color: #fff;
font-size: 12px;
font-weight: 700;
padding: 6px 14px;
border-radius: 999px;
text-decoration: none;
}
.jus-current .jus-articles .jus-article-card .jus-art-actions a.obj_galley_link:hover,
.jus-current .jus-articles .jus-article-card .jus-art-actions a.obj_galley_link:focus {
background: #b32821;
color: #fff;
}
.jus-current .jus-articles .jus-article-card .jus-art-actions a.obj_galley_link.restricted {
background: #6b5d52;
}
.jus-current .jus-articles .jus-article-card .jus-art-actions a.jus-art-abstract {
display: inline-flex;
align-items: center;
gap: 6px;
border: 1px solid rgba(140, 29, 24, 0.2);
color: #8c1d18;
font-size: 12px;
font-weight: 700;
padding: 6px 14px;
border-radius: 999px;
text-decoration: none;
}
.jus-current .jus-articles .jus-article-card .jus-art-actions a.jus-art-abstract:hover {
background: #8c1d18;
color: #fff;
}
.jus-current .jus-articles .jus-article-card .jus-art-doi {
display: inline-block;
font-size: 11.5px;
color: #6b5d52;
margin-left: 4px;
}
/* ---------- 6f. TENTANG JURNAL ---------- */
.jus-about {
background: #fffdf8;
padding: 64px 0;
border-top: 1px solid rgba(140, 29, 24, 0.08);
/* kartu metadata */
}
.jus-about .jus-about-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
.jus-about .jus-about-grid {
display: grid;
grid-template-columns: 1fr;
gap: 40px;
}
@media (min-width: 992px) {
.jus-about .jus-about-grid {
grid-template-columns: 1fr 1.05fr;
gap: 56px;
}
}
.jus-about .jus-about-desc {
color: #6b5d52;
font-size: 0.95rem;
line-height: 1.8;
}
.jus-about .jus-about-desc strong {
color: #241b16;
font-weight: 600;
}
.jus-about .jus-highlights {
margin-top: 28px;
}
.jus-about .jus-highlights .jus-highlight {
display: flex;
gap: 14px;
margin-bottom: 20px;
}
.jus-about .jus-highlights .jus-highlight .h-icon {
flex-shrink: 0;
width: 44px;
height: 44px;
border-radius: 12px;
background: rgba(140, 29, 24, 0.08);
display: flex;
align-items: center;
justify-content: center;
color: #8c1d18;
font-size: 18px;
}
.jus-about .jus-highlights .jus-highlight h3 {
font-size: 0.95rem;
font-weight: 700;
margin: 0 0 4px;
font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.jus-about .jus-highlights .jus-highlight p {
margin: 0;
font-size: 13.5px;
color: #6b5d52;
line-height: 1.65;
}
.jus-about .jus-metadata {
background: #fff;
border: 1px solid rgba(140, 29, 24, 0.15);
border-radius: 16px;
overflow: hidden;
box-shadow: 0 16px 50px rgba(69, 16, 13, 0.1);
}
.jus-about .jus-metadata .jus-metadata-head {
background-image: repeating-linear-gradient(90deg, rgba(227, 200, 106, 0.05) 0 2px, transparent 2px 96px), linear-gradient(180deg, #45100d 0%, #6e1412 55%, #8c1d18 100%);
padding: 14px 24px;
display: flex;
align-items: center;
gap: 12px;
}
.jus-about .jus-metadata .jus-metadata-head h3 {
color: #fff;
font-size: 1.05rem;
font-weight: 700;
margin: 0;
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}
.jus-about .jus-metadata .jus-metadata-head .seal {
margin-left: auto;
color: #e3c86a;
font-size: 18px;
}
.jus-about .jus-metadata dl {
margin: 0;
}
.jus-about .jus-metadata dl .jus-meta-row {
display: grid;
grid-template-columns: 150px 1fr;
gap: 12px;
padding: 13px 24px;
border-bottom: 1px solid rgba(140, 29, 24, 0.08);
transition: background 0.2s ease;
}
.jus-about .jus-metadata dl .jus-meta-row:hover {
background: rgba(250, 246, 239, 0.7);
}
.jus-about .jus-metadata dl .jus-meta-row:last-child {
border-bottom: none;
}
.jus-about .jus-metadata dl .jus-meta-row dt {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #6b5d52;
}
.jus-about .jus-metadata dl .jus-meta-row dd {
margin: 0;
font-size: 13.5px;
font-weight: 500;
color: #241b16;
line-height: 1.5;
}
.jus-about .jus-metadata .jus-metadata-foot {
border-top: 1px solid rgba(140, 29, 24, 0.1);
background: #faf6ef;
padding: 13px 24px;
font-size: 12px;
color: #6b5d52;
}
/* ---------- 6g. TIM EDITORIAL ---------- */
.jus-editorial {
background-color: #faf6ef;
background-image: radial-gradient(circle at 1px 1px, rgba(140, 29, 24, 0.045) 1px, transparent 0);
background-size: 22px 22px;
padding: 64px 0;
}
.jus-editorial .jus-editorial-inner {
max-width: 1280px;
margin: 0 auto;
padding: 0 24px;
}
.jus-editorial .jus-editorial-grid {
display: grid;
grid-template-columns: 1fr;
gap: 20px;
max-width: 880px;
margin: 0 auto;
}
@media (min-width: 768px) {
.jus-editorial .jus-editorial-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.jus-editorial .jus-person {
background: #fffdf8;
border: 1px solid rgba(140, 29, 24, 0.12);
border-radius: 16px;
padding: 26px 20px;
text-align: center;
position: relative;
overflow: hidden;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.jus-editorial .jus-person::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #c9a227, #8c1d18, #c9a227);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.4s ease;
}
.jus-editorial .jus-person:hover {
transform: translateY(-6px);
border-color: rgba(201, 162, 39, 0.6);
box-shadow: 0 20px 50px rgba(69, 16, 13, 0.16);
}
.jus-editorial .jus-person:hover::before {
transform: scaleX(1);
}
.jus-editorial .jus-person .jus-person-avatar {
width: 72px;
height: 72px;
margin: 0 auto 14px;
border-radius: 50%;
background: #8c1d18;
border: 2px solid rgba(201, 162, 39, 0.5);
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-size: 1.5rem;
font-weight: 700;
box-shadow: 0 8px 24px rgba(140, 29, 24, 0.3);
}
.jus-editorial .jus-person h3 {
font-size: 0.98rem;
font-weight: 700;
line-height: 1.4;
margin: 0 0 6px;
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}
.jus-editorial .jus-person .jus-person-role {
font-size: 10.5px;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
color: #c9a227;
}
.jus-editorial .jus-editorial-note {
max-width: 640px;
margin: 32px auto 0;
text-align: center;
font-size: 13.5px;
color: #6b5d52;
line-height: 1.7;
}
/* ---------- 6h. CTA SUBMISI ---------- */
.jus-cta {
position: relative;
background-image: repeating-linear-gradient(90deg, rgba(227, 200, 106, 0.05) 0 2px, transparent 2px 96px), linear-gradient(180deg, #45100d 0%, #6e1412 55%, #8c1d18 100%);
padding: 72px 0;
text-align: center;
overflow: hidden;
}
.jus-cta::before {
content: "";
position: absolute;
left: 50%;
top: 50%;
width: 700px;
height: 420px;
transform: translate(-50%, -50%);
background: radial-gradient(closest-side, rgba(201, 162, 39, 0.25), transparent);
pointer-events: none;
}
.jus-cta .jus-cta-inner {
position: relative;
max-width: 720px;
margin: 0 auto;
padding: 0 24px;
}
.jus-cta .jus-cta-icon {
width: 64px;
height: 64px;
margin: 0 auto 22px;
border-radius: 50%;
border: 1px solid rgba(201, 162, 39, 0.5);
background: rgba(69, 16, 13, 0.5);
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
color: #e3c86a;
}
.jus-cta h2 {
color: #fff;
font-size: 1.9rem;
font-weight: 700;
line-height: 1.25;
margin: 0 0 18px;
}
@media (min-width: 768px) {
.jus-cta h2 {
font-size: 2.5rem;
}
}
.jus-cta p {
color: rgba(233, 217, 184, 0.9);
font-size: 0.95rem;
line-height: 1.75;
max-width: 560px;
margin: 0 auto 30px;
}
.jus-cta .jus-cta-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 16px;
}
.jus-cta .jus-cta-actions a.jus-btn-gold {
display: inline-flex;
align-items: center;
gap: 10px;
background: #c9a227;
color: #45100d;
font-size: 0.95rem;
font-weight: 700;
padding: 15px 32px;
border-radius: 999px;
text-decoration: none;
box-shadow: 0 14px 40px rgba(201, 162, 39, 0.4);
transition: all 0.25s ease;
}
.jus-cta .jus-cta-actions a.jus-btn-gold:hover {
background: #e3c86a;
transform: translateY(-2px);
box-shadow: 0 20px 50px rgba(201, 162, 39, 0.55);
}
.jus-cta .jus-cta-actions a.jus-btn-line {
display: inline-flex;
align-items: center;
gap: 8px;
border: 1px solid rgba(255, 255, 255, 0.3);
color: #fff;
font-size: 0.95rem;
font-weight: 700;
padding: 15px 32px;
border-radius: 999px;
text-decoration: none;
transition: all 0.25s ease;
}
.jus-cta .jus-cta-actions a.jus-btn-line:hover {
border-color: rgba(201, 162, 39, 0.7);
color: #e3c86a;
}
/* ============================================================
7. FOOTER KUSTOM
============================================================ */
.jus-footer {
background: #45100d;
color: #e9d9b8;
position: relative;
/* Tombol WhatsApp besar */
}
.jus-footer .jus-footer-gold {
height: 2px;
background: linear-gradient(90deg, #45100d, #c9a227, #45100d);
}
.jus-footer .jus-footer-inner {
max-width: 1280px;
margin: 0 auto;
padding: 52px 24px 40px;
display: grid;
grid-template-columns: 1fr;
gap: 36px;
}
@media (min-width: 768px) {
.jus-footer .jus-footer-inner {
grid-template-columns: 1fr 1fr;
}
}
@media (min-width: 992px) {
.jus-footer .jus-footer-inner {
grid-template-columns: 1.3fr 0.85fr 0.85fr 1fr;
}
}
.jus-footer h3.jus-footer-heading {
font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #e3c86a;
margin: 0 0 16px;
}
.jus-footer .jus-footer-brand {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 18px;
}
.jus-footer .jus-footer-brand .seal {
width: 44px;
height: 44px;
flex-shrink: 0;
border-radius: 50%;
border: 1px solid rgba(201, 162, 39, 0.5);
background: #6e1412;
display: flex;
align-items: center;
justify-content: center;
color: #e3c86a;
font-size: 20px;
}
.jus-footer .jus-footer-brand .name {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
font-size: 1.35rem;
font-weight: 700;
color: #fff;
line-height: 1.15;
}
.jus-footer .jus-footer-brand .fullname {
font-size: 10.5px;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: rgba(227, 200, 106, 0.9);
}
.jus-footer p {
font-size: 13px;
line-height: 1.75;
color: rgba(233, 217, 184, 0.75);
}
.jus-footer ul.jus-footer-links {
list-style: none;
margin: 0;
padding: 0;
}
.jus-footer ul.jus-footer-links li {
margin-bottom: 10px;
}
.jus-footer ul.jus-footer-links a {
color: rgba(233, 217, 184, 0.8);
text-decoration: none;
font-size: 13.5px;
display: inline-flex;
align-items: center;
gap: 8px;
}
.jus-footer ul.jus-footer-links a::before {
content: "";
width: 12px;
height: 1px;
background: rgba(201, 162, 39, 0.5);
transition: width 0.2s ease, background 0.2s ease;
}
.jus-footer ul.jus-footer-links a:hover {
color: #fff;
}
.jus-footer ul.jus-footer-links a:hover::before {
width: 16px;
background: #c9a227;
}
.jus-footer address {
font-style: normal;
font-size: 13px;
line-height: 1.75;
color: rgba(233, 217, 184, 0.8);
}
.jus-footer address strong {
color: #fff;
font-weight: 600;
display: block;
margin-bottom: 4px;
}
.jus-footer address a {
color: rgba(233, 217, 184, 0.85);
text-decoration: none;
}
.jus-footer address a:hover {
color: #fff;
}
.jus-footer address .jus-wa-line {
display: flex;
align-items: center;
gap: 8px;
margin-top: 10px;
}
.jus-footer address .jus-wa-line svg {
color: #4ad066;
flex-shrink: 0;
}
.jus-footer address .jus-wa-line a {
color: #7ee59a;
font-weight: 600;
}
.jus-footer address .jus-wa-line a:hover {
color: #fff;
}
.jus-footer a.jus-wa-btn {
display: inline-flex;
align-items: center;
gap: 10px;
background: #25d366;
color: #fff;
font-size: 13px;
font-weight: 700;
padding: 12px 20px;
border-radius: 999px;
margin-top: 14px;
text-decoration: none;
box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
transition: all 0.25s ease;
}
.jus-footer a.jus-wa-btn svg {
width: 17px;
height: 17px;
}
.jus-footer a.jus-wa-btn:hover {
background: #20bd5a;
color: #fff;
transform: translateY(-2px);
box-shadow: 0 14px 34px rgba(37, 211, 102, 0.5);
}
.jus-footer .jus-footer-chips {
margin-top: 18px;
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.jus-footer .jus-footer-chips span {
border: 1px solid rgba(201, 162, 39, 0.4);
background: #6e1412;
color: #e3c86a;
font-size: 11.5px;
font-weight: 600;
padding: 6px 12px;
border-radius: 999px;
}
.jus-footer .jus-footer-bottom {
border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.jus-footer .jus-footer-bottom .jus-footer-bottom-inner {
max-width: 1280px;
margin: 0 auto;
padding: 18px 24px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
font-size: 12px;
color: rgba(233, 217, 184, 0.65);
}
.jus-footer .jus-footer-bottom .jus-footer-bottom-inner a {
color: #e3c86a;
font-weight: 600;
text-decoration: none;
}
.jus-footer .jus-footer-bottom .jus-footer-bottom-inner a:hover {
text-decoration: underline;
}
/* ============================================================
8. TOMBOL WHATSAPP MENGAMBANG
============================================================ */
.jus-wa-float {
position: fixed;
right: 20px;
bottom: 20px;
z-index: 1000;
display: inline-flex;
align-items: center;
gap: 0;
background: #25d366;
color: #fff;
border-radius: 999px;
padding: 14px;
box-shadow: 0 10px 30px rgba(37, 211, 102, 0.45);
text-decoration: none;
transition: all 0.3s ease;
overflow: hidden;
max-width: 60px;
/* denyut halus */
}
.jus-wa-float svg {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.jus-wa-float span {
max-width: 0;
overflow: hidden;
white-space: nowrap;
font-size: 13.5px;
font-weight: 700;
transition: all 0.3s ease;
}
.jus-wa-float:hover,
.jus-wa-float:focus {
background: #20bd5a;
color: #fff;
transform: translateY(-3px);
box-shadow: 0 16px 40px rgba(37, 211, 102, 0.6);
max-width: 260px;
}
.jus-wa-float:hover span,
.jus-wa-float:focus span {
max-width: 200px;
margin-left: 10px;
}
.jus-wa-float::after {
content: "";
position: absolute;
inset: 0;
border-radius: 999px;
background: #25d366;
opacity: 0.18;
animation: jus-wa-ping 2.4s cubic-bezier(0, 0, 0.2, 1) infinite;
z-index: -1;
}
@keyframes jus-wa-ping {
0% {
transform: scale(1);
opacity: 0.18;
}
75%,
100% {
transform: scale(1.5);
opacity: 0;
}
}
/* ============================================================
9. HALAMAN LAINNYA — sentuhan brand
============================================================ */
/* Judul issue & halaman arsip */
.obj_issue_toc .heading .description {
color: #6b5d52;
}
.obj_issue_toc .section > h2,
.obj_issue_toc .section > h3 {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
color: #241b16;
}
/* Halaman artikel */
.obj_article_details .title {
font-family: "Playfair Display", Georgia, "Times New Roman", serif;
color: #241b16;
}
.obj_article_details .authors span.name {
color: #8c1d18;
}
.obj_article_details .galleys_links .obj_galley_link {
background: #8c1d18;
color: #fff;
border-radius: 999px;
}
.obj_article_details .galleys_links .obj_galley_link:hover,
.obj_article_details .galleys_links .obj_galley_link:focus {
background: #b32821;
color: #fff;
}
/* Abstrak section */
.article_abstract .obj_article_summary,
.article_abstract .abstract {
background: #fffdf8;
border-radius: 12px;
}
/* ============================================================
10. UTILITAS
============================================================ */
.jus-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
html {
scroll-behavior: smooth;
}
/* Hormati preferensi pengguna yang mengurangi animasi */
@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}
.jus-marquee-track {
animation: none;
}
.jus-wa-float::after {
animation: none;
}
.jus-cover-frame {
transition: none;
}
}
/* ============================================================
11. PENANGGAL BLOK SIDEBAR BAWAAN OJS & CSS JURNAL LAMA
------------------------------------------------------------
Tema ini memakai beranda & footer kustom lengkap (tautan
informasi, submisi, dan kontak sudah tersedia), sehingga blok
sidebar bawaan OJS (Web Feed, Make a Submission, Information,
Browse) menjadi redundan dan membuat tampilan dobel di bawah
halaman. Sembunyikan secara definitif (!important) agar tidak
bisa ditimpa oleh CSS jurnal lama yang dimuat setelahnya.
Untuk menampilkannya kembali: hapus/komentari blok ini.
============================================================ */
.pkp_structure_sidebar {
display: none !important;
visibility: hidden !important;
}
/* Jagokan dasar: pastikan struktur konten tidak diubah oleh
CSS lama (mis. aturan grid kolom warisan tema sebelumnya). */
.pkp_structure_content {
display: block !important;
float: none !important;
}
.pkp_structure_content.has_sidebar {
display: block !important;
}
.pkp_structure_main {
float: none !important;
width: 100% !important;
max-width: 100% !important;
}
/* ============================================================================
LAMPIRAN A - KOMPATIBILITAS MARKUP "TEMA DEFAULT OJS"
----------------------------------------------------------------------------
Tema Judicial Crimson mengganti kotak pencari pada header dengan tautan
ikon (). Pada markup TEMA DEFAULT
OJS 3.3, posisi yang sama berisi FORM pencari lengkap
(