/* Import Noto Sans from Google Fonts (Recommended to be in your HTML for best performance) */ /* If your OJS theme doesn't load Noto Sans automatically, ensure this is added in your template file. */ /* */ /* */ /* */ /* ===== GLOBAL STYLES & FONT ===== */ body { background-color: #F8F8F8; /* Sangat terang, hampir putih untuk latar belakang halaman */ font-family: 'Noto Sans', sans-serif; /* Menggunakan Noto Sans sebagai font utama */ color: #333333; /* Warna teks standar yang gelap untuk keterbacaan tinggi */ margin: 0; padding: 0; line-height: 1.6; /* Ketinggian baris yang ideal untuk teks panjang */ -webkit-font-smoothing: antialiased; /* Meningkatkan rendering font di Chrome/Safari */ -moz-osx-font-smoothing: grayscale; /* Meningkatkan rendering font di Firefox */ } /* Penyesuaian umum untuk link */ a { color: #0056B3; /* Warna biru universitas yang klasik dan terpercaya */ text-decoration: none; /* Tanpa garis bawah standar */ transition: color 0.3s ease, text-decoration 0.3s ease; /* Transisi halus */ } a:hover { color: #003F8C; /* Biru yang sedikit lebih gelap saat hover */ text-decoration: underline; /* Garis bawah muncul saat hover untuk umpan balik */ } /* ===== STRUKTUR HALAMAN UTAMA ===== */ .pkp_structure_page { max-width: 1200px; /* Batasi lebar maksimum halaman untuk desktop yang lebar */ margin: 30px auto !important; /* Pusatkan halaman dengan margin otomatis */ padding: 40px !important; /* Padding yang luas di dalam area konten utama */ background-color: #FFFFFF; /* Latar belakang putih bersih untuk area konten */ box-shadow: 0 4px 15px rgba(0,0,0,0.08); /* Bayangan yang sedikit lebih kentara namun tetap halus */ border-radius: 8px; /* Sudut membulat yang sedikit lebih menonjol */ overflow: hidden; /* Memastikan tidak ada konten yang meluap dari sudut */ border: 1px solid #E0E0E0; /* Border sangat tipis untuk definisi */ } /* ===== HEADER STYLES (Bersih, Otoritatif, Fokus Universitas) ===== */ .pkp_structure_head { background: #FFFFFF; /* Latar belakang header putih bersih */ border-bottom: 1px solid #DEDEDE; /* Garis pemisah yang jelas namun halus */ padding: 25px 50px; /* Padding yang lebih besar untuk kesan premium */ display: flex; justify-content: space-between; /* Sebar elemen logo dan navigasi */ align-items: center; /* Pusatkan vertikal */ box-shadow: 0 2px 8px rgba(0,0,0,0.05); /* Bayangan yang lebih terlihat namun tetap elegan */ } /* Gaya nama situs/logo jurnal */ .pkp_site_name { padding-top: 0 !important; padding-bottom: 0 !important; margin-right: 40px; /* Jarak yang lebih besar */ } .pkp_site_name > a { text-decoration: none; color: #222222; /* Warna teks gelap yang kuat untuk kontras */ font-size: 2.2em; /* Ukuran font lebih besar untuk nama jurnal (jika teks) */ font-weight: 700; /* Sangat tebal */ letter-spacing: -1px; /* Sedikit rapat untuk tampilan yang kokoh */ line-height: 1.1; /* Ketinggian baris untuk judul */ } /* --- PENYESUAIAN UTAMA UNTUK UKURAN LOGO --- */ /* Target sangat spesifik dan gunakan !important pada semua properti terkait ukuran */ /* Saya juga menaikkan sedikit max-height untuk memberikan efek lebih */ .pkp_site_name .is_img img, .pkp_site_name img, /* Selektor umum untuk img di dalam .pkp_site_name */ .pkp_header .pkp_site_name img, /* Selektor yang lebih spesifik jika header juga memiliki class pkp_header */ .pkp_header .pkp_site_name .is_img img /* Kombinasi yang sangat spesifik */ { max-height: 85px !important; /* Menaikkan tinggi maksimum logo menjadi 85px */ width: auto !important; /* Pastikan lebar otomatis untuk menjaga rasio aspek */ display: block !important; /* Pastikan display block */ box-sizing: border-box !important; /* Memastikan perhitungan ukuran box model konsisten */ } /* Jika logo adalah elemen di dalam tag a */ .pkp_site_name a img { max-height: 85px !important; width: auto !important; } /* Jika ada div atau h1 spesifik untuk logo di dalam header, coba target juga */ .header-logo img, #header .logo img { /* Selektor umum lainnya yang mungkin ada di tema OJS */ max-height: 85px !important; width: auto !important; } /* Jika logo adalah teks, tingkatkan ukuran fontnya juga */ .pkp_site_name > a span { font-size: 2.5em !important; /* Meningkatkan ukuran font untuk teks logo */ line-height: 1.1 !important; font-weight: 700 !important; color: #222222 !important; letter-spacing: -1px !important; } /* --- AKHIR PENYESUAIAN LOGO --- */ .pkp_site_name_wrapper { padding-left: 0; padding-right: 0; } /* Gaya untuk navigasi pengguna (Login, Register, dll.) */ .pkp_navigation_user_wrapper { padding-right: 0; font-size: 0.95em; /* Ukuran font yang nyaman */ } .pkp_navigation_user_wrapper a { color: #555555; text-decoration: none; margin-left: 25px; /* Jarak yang nyaman antar link user */ transition: color 0.3s ease; } .pkp_navigation_user_wrapper a:hover { color: #0056B3; /* Warna biru aksen saat hover */ } /* Navigasi Utama (Main Menu) */ .pkp_navigation_primary_row { flex-grow: 1; display: flex; justify-content: flex-end; align-items: center; } .pkp_navigation_primary_row ul { list-style: none; margin: 0; padding: 0; display: flex; } .pkp_navigation_primary_row ul li { margin-left: 40px; /* Jarak yang sangat lapang antar item menu */ } .pkp_navigation_primary_row ul li a { color: #444444; /* Warna teks menu yang solid */ text-decoration: none; font-size: 1.1em; /* Ukuran yang sedikit lebih besar */ font-weight: 600; /* Lebih tebal */ padding: 8px 0; /* Padding lebih besar */ position: relative; transition: color 0.3s ease; } .pkp_navigation_primary_row ul li a:hover { color: #0056B3; /* Warna biru aksen saat hover */ } /* Efek underline saat hover untuk navigasi utama */ .pkp_navigation_primary_row ul li a::after { content: ''; position: absolute; left: 0; bottom: -10px; /* Jarak lebih jauh dari teks */ width: 0; height: 3px; /* Garis tebal */ background: #0056B3; /* Warna biru aksen */ transition: width 0.3s ease; } .pkp_navigation_primary_row ul li a:hover::after { width: 100%; } .pkp_navigation_more_wrapper { display: none; /* Sembunyikan 'More' dropdown */ } /* ===== ANNOUNCEMENT AREA (Menggantikan Marquee) ===== */ .header-container { background-color: #FDFDFD; /* Sangat terang */ padding: 12px 50px; /* Padding yang lebih tinggi */ text-align: center; border-bottom: 1px solid #EEEEEE; /* Garis pemisah halus */ font-size: 0.9em; color: #666666; } .marquee-text { display: none; /* Sembunyikan elemen marquee-text sepenuhnya */ } .header-container .announcement-text { font-weight: 600; color: #0056B3; /* Warna biru aksen untuk pengumuman penting */ } /* ===== FOOTER STYLES (Informasi & Bersih) ===== */ .pkp_footer_content { display: block; width: 100%; padding: 50px; /* Padding yang sangat luas untuk footer */ text-align: center; color: #AAAAAA; /* Warna teks yang lebih lembut */ font-size: 0.85em; background-color: #222222; /* Latar belakang sangat gelap untuk kontras tinggi */ border-top: 1px solid #3A3A3A; /* Garis pemisah yang subtle */ } .pkp_footer_content p { margin: 10px 0; /* Jarak antar paragraf */ line-height: 1.8; /* Ketinggian baris lebih tinggi untuk keterbacaan di footer */ } .pkp_footer_content a { color: #BBBBBB; /* Warna link yang lebih terang */ text-decoration: none; transition: color 0.3s ease; } .pkp_footer_content a:hover { color: #FFFFFF; /* Putih bersih saat hover */ } .pkp_brand_footer { display: none; /* Sembunyikan branding PKP */ } .footer-container { text-align: center; } /* ===== CUSTOM BLOCKS & CARDS STYLES (Struktur & Fokus Konten) ===== */ .custom-block-container-ultra { max-width: 100%; margin: 40px 0; padding: 35px; /* Padding lebih besar di dalam blok */ background-color: #FFFFFF; border-radius: 8px; /* Sudut lebih jelas */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); /* Bayangan yang lebih kentara */ font-family: 'Noto Sans', sans-serif; overflow: hidden; position: relative; border: 1px solid #E0E0E0; /* Border tipis */ } .custom-block-container-ultra::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 5px; /* Garis aksen lebih tebal */ background: #0056B3; /* Warna biru aksen */ border-radius: 8px 8px 0 0; } .custom-block-section-ultra { margin-bottom: 40px; /* Jarak antar section dalam blok */ padding: 0; padding-top: 25px; /* Tambahan padding dari top bar container */ } .custom-block-title-ultra { position: relative; color: #333333; padding: 10px 0; text-align: left; font-size: 1.8em; /* Ukuran judul lebih besar */ font-weight: 700; margin-bottom: 30px; /* Jarak di bawah judul */ letter-spacing: -0.5px; /* Sedikit rapat */ } .custom-block-title-ultra::after { content: ''; position: absolute; left: 0; bottom: -12px; /* Jarak lebih jauh dari teks */ width: 80px; /* Lebar underline yang proporsional */ height: 4px; /* Ketebalan underline */ background: #0056B3; /* Warna biru aksen */ border-radius: 2px; } .custom-block-list-ultra { list-style: none; padding: 0; margin: 0; } .custom-block-list-ultra li.custom-block-link-item-ultra { margin-bottom: 12px; /* Jarak antar item */ background-color: #FCFCFC; /* Latar belakang item sangat terang */ border-radius: 5px; /* Sudut sedikit lebih menonjol */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Bayangan yang lebih jelas */ transition: all 0.2s ease; overflow: hidden; border: 1px solid #F0F0F0; /* Border sangat tipis */ } .custom-block-list-ultra li.custom-block-link-item-ultra:hover { background: #F0F0F0; /* Sedikit gelap saat hover */ transform: translateY(-2px); /* Sedikit naik */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Bayangan lebih kuat */ border-color: #D0D0D0; /* Border sedikit lebih gelap */ } .custom-block-list-ultra a { color: #444444; /* Warna teks link yang solid */ text-decoration: none; font-size: 1.05em; /* Ukuran font sedikit lebih besar */ display: flex; align-items: center; padding: 18px 25px; /* Padding yang sangat nyaman */ font-weight: 500; } .custom-block-list-ultra li.custom-block-link-item-ultra:hover a { color: #333333; /* Teks sedikit lebih gelap saat hover */ } .custom-block-icon-ultra { font-size: 1.5em; /* Ukuran ikon lebih besar */ margin-right: 20px; color: #0056B3; /* Warna biru aksen */ transition: color 0.2s ease; } .custom-block-list-ultra li.custom-block-link-item-ultra:hover .custom-block-icon-ultra { color: #003F8C; /* Warna biru sedikit lebih gelap saat hover */ } /* Card Style (untuk elemen seperti ISSN, About Journal, dll.) */ .card-style-ultra { background-color: #FFFFFF; border-radius: 8px; padding: 35px; margin-bottom: 40px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; overflow: hidden; text-align: left; border: 1px solid #E0E0E0; } .card-style-ultra:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12); } .card-style-ultra .custom-block-title-ultra { font-size: 1.6em; color: #333; text-align: left; margin-bottom: 25px; } .card-style-ultra .custom-block-title-ultra::after { left: 0; transform: none; } .custom-block-img-ultra { max-width: 100%; height: auto; display: block; margin: 25px 0 20px; /* Margin lebih besar */ border-radius: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); transition: transform 0.3s ease, box-shadow 0.3s ease; } .custom-block-img-ultra:hover { transform: scale(1.01); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .custom-block-img-small-ultra { max-height: 80px; /* Ukuran yang lebih menonjol untuk logo/ISSN kecil */ width: auto; display: inline-block; margin-right: 15px; /* Jarak lebih besar */ } /* --- RESPONSIVITAS MOBILE & TABLET (American University Journal Look) --- */ @media (max-width: 992px) { /* Breakpoint untuk tablet dan mobile */ .pkp_structure_head { flex-direction: column; /* Tumpuk vertikal */ padding: 20px 25px; /* Padding yang disesuaikan */ align-items: flex-start; /* Rata kiri */ } .pkp_site_name { margin-right: 0; margin-bottom: 20px; /* Jarak lebih besar di bawah logo/nama jurnal */ } /* --- PENYESUAIAN UTAMA UNTUK UKURAN LOGO DI MOBILE --- */ .pkp_site_name .is_img img, .pkp_site_name img, .pkp_header .pkp_site_name img, .pkp_header .pkp_site_name .is_img img, .header-logo img, #header .logo img { max-height: 75px !important; /* Meningkatkan ukuran logo di mobile menjadi 75px */ width: auto !important; } /* Jika logo adalah teks di mobile, tingkatkan ukuran fontnya juga */ .pkp_site_name > a span { font-size: 2em !important; /* Meningkatkan ukuran font untuk teks logo di mobile */ line-height: 1.1 !important; } /* --- AKHIR PENYESUAIAN LOGO MOBILE --- */ .pkp_site_name > a { font-size: 1.8em; /* Ukuran font nama situs lebih kecil */ } /* Sembunyikan navigasi utama dan navigasi user secara default untuk mobile. Ini mengasumsikan Anda akan mengimplementasikan menu hamburger/toggle dengan JavaScript. */ .pkp_navigation_primary_row, .pkp_navigation_user_wrapper { display: none; } /* Penyesuaian padding dan margin untuk elemen utama di mobile */ .pkp_structure_page { margin: 25px 20px !important; /* Margin yang disesuaikan */ padding: 25px !important; /* Padding yang disesuaikan */ } .custom-block-container-ultra { margin: 30px 0; /* Margin yang disesuaikan */ padding: 25px; /* Padding yang disesuaikan */ } .custom-block-title-ultra { font-size: 1.5em; margin-bottom: 25px; } .custom-block-title-ultra::after { bottom: -10px; width: 70px; height: 3px; } .custom-block-list-ultra li.custom-block-link-item-ultra { padding: 15px 20px; /* Padding yang disesuaikan */ } .card-style-ultra { padding: 30px; /* Padding yang disesuaikan */ } .pkp_footer_content { padding: 40px 25px; /* Padding yang disesuaikan */ } }