:root {
--primary-color: #48cae4;
--neutral-color: #ffffff;
--text-dark: #000000;
--transition: 0.3s ease-in-out;
}
/* Main Style */
body {
background-color: #48cae4;
background-image: url("data:image/svg+xml,");
background-size: cover;
background-attachment: fixed;
}
.pkp_site_name {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.pkp_site_name > a {
padding-top: 0;
padding-bottom: 0;
}
.pkp_site_name_wrapper {
padding-left: 0;
padding-right: 0;
}
/* .pkp_navigation_user_wrapper {top: 0; right: 0; padding-right:30px;} */
.pkp_brand_footer {
display: none;
}
/* === PERBAIKAN NAVIGASI UTAMA === */
/* === Hover tetap seperti sekarang === */
.pkp_navigation_primary > li > a {
background-color: transparent;
color: var(--neutral-color);
padding: 8px 12px;
font-weight: 600;
font-size: 14px;
text-decoration: none;
display: inline-flex;
align-items: center;
transition: all 0.3s ease-in-out;
transform: translateY(0px);
position: relative;
}
.pkp_navigation_primary > li > a::before {
font-family: "FontAwesome";
content: "";
margin-right: 8px;
font-size: 14px;
color: var(--neutral-color);
transition: color 0.3s ease-in-out;
}
.pkp_navigation_primary > li > a:hover {
color: var(--primary-color);
transform: translateY(-2px);
}
.pkp_navigation_primary > li > a:hover::before {
color: var(--primary-color);
}
/* === TAMBAHAN: Efek saat menu diklik/aktif === */
.pkp_navigation_primary > li.current > a,
.pkp_navigation_primary > li.active > a {
background-color: rgba(255, 255, 255, 0.642); /* sangat ringan, transparan */
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(72, 202, 228, 0.2);
border-radius: 8px;
}
/* Tambahan garis bawah halus untuk menu aktif */
.pkp_navigation_primary > li.current > a::after,
.pkp_navigation_primary > li.active > a::after {
content: '';
position: absolute;
bottom: 0;
left: 12px;
width: 50%;
height: 2px;
background-color: var(--primary-color);
border-radius: 2px;
}
/* === Ikon spesifik berdasarkan urutan menu === */
.pkp_navigation_primary > li:nth-child(1) > a::before { content: "\f015"; } /* Home */
.pkp_navigation_primary > li:nth-child(2) > a::before { content: "\f0c1"; } /* Current */
.pkp_navigation_primary > li:nth-child(3) > a::before { content: "\f187"; } /* Archives */
.pkp_navigation_primary > li:nth-child(4) > a::before { content: "\f0ea"; } /* Submissions */
.pkp_navigation_primary > li:nth-child(5) > a::before { content: "\f129"; } /* About */
.pkp_navigation_primary > li:nth-child(6) > a::before {
content: '';
width: 20px;
height: 20px;
background-image: url('https://journal.lontaradigitech.com/public/site/images/mmiftachfakhri/lontara-digitech-logo-2.png');
background-size: contain;
background-repeat: no-repeat;
margin-right: 8px;
}
/* === Dropdown menu (tetap rapi dan lembut) === */
.pkp_navigation_primary li ul.dropdown-menu {
background-color: var(--neutral-color);
border-radius: 8px;
padding: 0.5rem 0;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}
.pkp_navigation_primary li ul.dropdown-menu li a {
padding: 10px 18px;
color: var(--text-dark);
font-size: 14px;
display: flex;
align-items: center;
transition: var(--transition);
}
.pkp_navigation_primary li ul.dropdown-menu li a::before {
font-family: "FontAwesome";
margin-right: 10px;
color: var(--primary-color);
transition: color var(--transition);
}
.pkp_navigation_primary li ul.dropdown-menu li a:hover {
background-color: var(--primary-color);
color: var(--neutral-color);
}
.pkp_navigation_primary li ul.dropdown-menu li a:hover::before {
color: var(--neutral-color);
}
/* Navigation For Register and Login */
ul#navigationUser > li.profile {
border-radius: 5px;
}
ul#navigationUser > li.profile > a:hover {
color: #ffffff;
}
/* ul#navigationUser > li:first-child > a::before {
content: ' Register';
} */
/* Navigation Primary */
.pkp_nav_list > li {
background: #48cae4;
}
.pkp_nav_list > li > a {
color: white;
font-weight: bold;
}
.pkp_navigation_primary > li > a {
border-bottom: 3px solid transparent;
}
.pkp_navigation_primary > li > a:hover {
color: #ffffff;
}
.pkp_navigation_primary > li:first-child a {
margin-left: 0.5em;
}
.pkp_navigation_primary > li:last-child a {
margin-right: 0.5em;
}
.pkp_navigation_user > li:last-child > a {
margin-right: 0;
}
.pkp_navigation_user .task_count {
top: 0.1rem;
background: #48cae4;
}
/* @media (min-width: 992px) {
} */
/* Navigation Sub Primary */
.pkp_navigation_primary ul a {
margin-right: 0 !important;
}
#pkpDropdown3::before {
content: "Howdy,";
}
.dropdown-menu {
left: 0 !important;
}
.pkp_navigation_search_wrapper a {
color: white;
}
/* Header */
.pkp_structure_head {
background-color: transparent;
border-bottom: none;
}
.pkp_head_wrapper {
background-color: #48cae4;
border-bottom: 1px solid #ddd;
}
.pkp_structure_content {
background-color: whitesmoke;
}
.pkp_structure_footer_wrapper {
background: transparent;
}
.pkp_footer_content {
background: #48cae4;
padding: 100px 40px 200px; /* More bottom space for wave */
position: relative;
overflow: hidden;
z-index: 0;
}
/* Smooth Tall Wavy Top Layer */
.pkp_footer_content::before {
content: "";
position: absolute;
top: -100px;
left: 0;
width: 100vw;
height: 200px;
background: #e4c89c;
opacity: 0.4;
z-index: 1;
clip-path: path("M0,120 C200,0 400,240 600,120 C800,0 1000,240 1200,120 L1200,0 L0,0 Z");
}
/* Smooth Tall Wavy Bottom Layer */
.pkp_footer_content::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100vw;
height: 200px;
background: #d9b98c;
opacity: 0.3;
z-index: 1;
clip-path: path("M0,80 C200,200 400,0 600,120 C800,240 1000,0 1200,120 L1200,200 L0,200 Z");
}
.pkp_site_nav_menu {
background: #48cae4;
}
.pkp_site_name .is_img {
margin-bottom: 0;
}
/* .php_structure_page {
width: 80vw;
} */
/* .pkp_structure_head, .pkp_structure_content, .pkp_structure_footer {
box-shadow: 0 0px 8px 0 rgb(0 0 0 / 20%), 0 6px 20px 0 rgb(0 0 0 / 19%);
} */
/* Content Homepage */
@media only screen and (max-width: 600px) {
.hide-small {
display: none;
}
}
@media (min-width: 601px) {
.show-small {
display: none;
}
}
/* Custom Block Tools */
#customblock-tools img {
max-width: unset;
width: 70%;
}
#customblock-journal-template img {
max-width: unset;
width: 70%;
border-radius: 3px;
}
/* Team */
.flag-img {
max-width: unset;
width: 50px;
}
/* Animation */
.dropdown {
position: relative;
}
.dropdown a {
text-decoration: none;
}
.dropdown [data-toggle="dropdown"] {
display: block;
color: white;
background: #2790A5;
-moz-box-shadow: 0 1px 0 #0a4c5a inset, 0 -1px 0 #0a4c5a inset;
-webkit-box-shadow: 0 1px 0 #0a4c5a inset, 0 -1px 0 #0a4c5a inset;
box-shadow: 0 1px 0 #0a4c5a inset, 0 -1px 0 #0a4c5a inset;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3);
padding: 10px;
}
.dropdown [data-toggle="dropdown"]:hover {
background: #0f6681;
}
.dropdown [data-toggle="dropdown"]:before {
position: absolute;
display: block;
content: "\25BC";
font-size: 0.7em;
color: #fff;
top: 13px;
right: 10px;
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
.dropdown > .dropdown-menu {
max-height: 0;
overflow: hidden;
list-style: none;
padding: 0;
margin: 0;
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
-moz-transform-origin: 50% 0%;
-ms-transform-origin: 50% 0%;
-webkit-transform-origin: 50% 0%;
transform-origin: 50% 0%;
-moz-transition: max-height 0.6s ease-out;
-o-transition: max-height 0.6s ease-out;
-webkit-transition: max-height 0.6s ease-out;
transition: max-height 0.6s ease-out;
animation: hideAnimation 0.4s ease-out;
-moz-animation: hideAnimation 0.4s ease-out;
-webkit-animation: hideAnimation 0.4s ease-out;
}
.dropdown > .dropdown-menu li {
padding: 0;
}
.dropdown > input[type="checkbox"] {
opacity: 0;
display: block;
position: absolute;
top: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
.dropdown > input[type="checkbox"]:checked ~ .dropdown-menu {
max-height: 9999px;
display: block;
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
animation: showAnimation 0.5s ease-in-out;
-moz-animation: showAnimation 0.5s ease-in-out;
-webkit-animation: showAnimation 0.5s ease-in-out;
-moz-transition: max-height 2s ease-in-out;
-o-transition: max-height 2s ease-in-out;
-webkit-transition: max-height 2s ease-in-out;
transition: max-height 2s ease-in-out;
}
.dropdown > input[type="checkbox"]:checked + a[data-toggle="dropdown"]:before {
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
transform: rotate(-180deg);
-moz-transition: -moz-transform 0.6s;
-o-transition: -o-transform 0.6s;
-webkit-transition: -webkit-transform 0.6s;
transition: transform 0.6s;
}
@keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@-moz-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@-webkit-keyframes showAnimation {
0% {
-moz-transform: scaleY(0.1);
-ms-transform: scaleY(0.1);
-webkit-transform: scaleY(0.1);
transform: scaleY(0.1);
}
40% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.04);
-ms-transform: scaleY(1.04);
-webkit-transform: scaleY(1.04);
transform: scaleY(1.04);
}
100% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
}
@keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
@-moz-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
@-webkit-keyframes hideAnimation {
0% {
-moz-transform: scaleY(1);
-ms-transform: scaleY(1);
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
60% {
-moz-transform: scaleY(0.98);
-ms-transform: scaleY(0.98);
-webkit-transform: scaleY(0.98);
transform: scaleY(0.98);
}
80% {
-moz-transform: scaleY(1.02);
-ms-transform: scaleY(1.02);
-webkit-transform: scaleY(1.02);
transform: scaleY(1.02);
}
100% {
-moz-transform: scaleY(0);
-ms-transform: scaleY(0);
-webkit-transform: scaleY(0);
transform: scaleY(0);
}
}
/* Desktop View */
@media only screen and (min-width: 992px) {
.pkp_site_name .is_img img {
max-height: 200px !important;
}
.show-on-mobile {
display: none;
}
}
/* Mobile View */
@media only screen and (max-width: 991px) {
.pkp_nav_list > li > ul > li > a {
color: white;
margin-left: 1.5em;
}
.pkp_navigation_primary > li a {
margin-left: 0.5em;
}
.pkp_navigation_search_wrapper, .pkp_navigation_user_wrapper {
margin-left: 0.5em;
}
.pkp_nav_list > li {
background: transparent;
}
.pkp_navigation_user .task_count {
top: 0;
background: #ff4d4d !important;
}
}
/* Editorial Team (Custom Block) */
.editorial_team_block .profile .orcid {
background: url('https://journal.diginus.id/public/site/images/pisces/orcid_logo.svg') no-repeat 2px;
background-size: 15px;
padding-left: 25px;
}
.editorial_team_block .profile .google_scholar {
background: url('https://journal.diginus.id/public/site/images/pisces/google_scholar_logo.svg') no-repeat 2px;
background-size: 15px;
padding-left: 25px;
}
.editorial_team_block .profile div {
line-height: 1.5;
font-size: .92em;
text-align: left;
}
.editorial_team_block div {
padding: 0;
}
.editorial_team_block img {
width: 85px!important;
height: 90px!important;
padding: 5px;
border: 1px solid #d6cfcf46;
float: left;
box-shadow: 10px 10px 5px -13px rgb(105 98 98 / 75%);
}
.team td {
vertical-align: top;
}
.dropdown-customblock {
padding: 10px;
border-bottom: 1px solid #aaa;
background: #1B4482 !important;
color: #fbfcfc;
}
.dropdown-customblock-item {
padding: 10px !important;
border-bottom: 1px solid #aaa;
background: #e6e2e2;
color: #fbfcfc;
}
.dropdown-customblock-item a {
color: #2790A5;
}
.dropdown-customblock-item a:hover {
color: #0f6681;
}