/* ========================================================== EDU SPORTIVO — PEKA HEADER + EDU SPORTIVO CONTENT OJS 3.3.0-20 BASE: - PEKA CSS dipertahankan utuh, termasuk HEADER/LOGO/NAVIGATION. ADOPTED FROM EDU SPORTIVO v28: - Hero - Current Issue animation - Aims & Scope - Sidebar - Journal Policies - Tabs - Footer - Article title / PDF buttons - Content animations IMPORTANT: - Tidak mengambil CSS Header/Logo Edu. - Tidak mengambil CSS Navigation Edu. - Header tetap mengikuti PEKA. ========================================================== */ /* ========================================================== SPORT PEDAGOGY PREMIUM CSS Palette: Primary : #1F7A3D Secondary : #D8EEDC Background: #F4FAF5 ========================================================== */ :root{ --primary:#1F7A3D; --primary-dark:#155C2E; --secondary:#D8EEDC; --light:#F4FAF5; } html{scroll-behavior:smooth;} body{animation:fadePage .8s ease;} @keyframes fadePage{ from{opacity:0;} to{opacity:1;} } /* HERO */ .hero-banner{position:relative;overflow:hidden;} .hero-banner img{transition:8s;} .hero-banner:hover img{transform:scale(1.08);} /* CARD */ .sp-card{ transition:.35s; border-radius:16px; } .sp-card:hover{ transform:translateY(-6px); box-shadow:0 18px 35px rgba(31,122,61,.18); } /* COVER */ .sp-cover img{ transition:.4s; border-radius:12px; } .sp-cover img:hover{ transform:translateY(-8px); box-shadow:0 18px 35px rgba(31,122,61,.28); } /* BUTTON */ .sp-btn{ position:relative; overflow:hidden; display:inline-block; animation:buttonPulse 3s infinite; transition:.35s; } .sp-btn:hover{ transform:translateY(-5px); box-shadow:0 14px 30px rgba(31,122,61,.30); } .sp-btn::before{ content:""; position:absolute; top:0; left:-120%; width:45%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-25deg); animation:shine 3s linear infinite; } @keyframes buttonPulse{ 0%,100%{transform:scale(1);} 50%{transform:scale(1.03);} } @keyframes shine{ 0%{left:-120%;} 100%{left:160%;} } /* QUICK INFO */ .sp-info{ transition:.35s; border-radius:12px; } .sp-info:hover{ background:#fff; transform:translateY(-4px); box-shadow:0 14px 24px rgba(31,122,61,.12); } /* MENU */ .sp-menu a{ transition:.35s; display:inline-block; } .sp-menu a:hover{ transform:translateY(-5px); } /* HEADINGS */ h1,h2,h3,h4{ color:var(--primary); } /* LINKS */ a{ transition:.3s; } a:hover{ color:var(--primary-dark); } /* IMAGES */ img{ transition:.45s; } img:hover{ transform:scale(1.02); } /* RESPONSIVE */ @media(max-width:900px){ .hero-layout{display:block!important;} .hero-layout>div{ width:100%!important; margin-bottom:25px; } .sp-cover{text-align:center!important;} } @media(max-width:600px){ h1{font-size:38px!important;} h2{font-size:26px!important;} .sp-btn{ display:block; text-align:center; margin-bottom:12px; } } /* ========================================================== PREMIUM SIDEBAR MENU v5 (Compact) ========================================================== */ .sidebar-title{ background:linear-gradient(135deg,#1F7A3D,#155C2E); color:#fff; font-size:18px; font-weight:700; text-align:center; padding:13px 16px; margin:0 0 14px; border-radius:16px; box-shadow:0 8px 18px rgba(31,122,61,.22); letter-spacing:.2px; } .content .gap-2{ display:block!important; width:100%; margin:0; padding:0; } .content .gap-2 .m-menu{ position:relative; display:flex!important; align-items:center; overflow:hidden; min-height:46px; padding:10px 16px!important; margin:0 0 9px; background:#fff; border:1px solid var(--secondary)!important; border-radius:10px; box-shadow:0 3px 10px rgba(31,122,61,.08); color:var(--primary)!important; text-decoration:none!important; font-size:15px; font-weight:600; line-height:1.3; transition:transform .25s ease,box-shadow .25s ease,color .25s ease; z-index:1; } .content .gap-2 .m-menu::before{ content:""; position:absolute; left:0; top:0; width:0; height:100%; background:linear-gradient(90deg,#1F7A3D,#155C2E); transition:width .35s cubic-bezier(.4,0,.2,1); z-index:-1; } .content .gap-2 .m-menu:hover::before{ width:100%; } .content .gap-2 .m-menu em{ width:22px; min-width:22px; margin-right:12px; text-align:center; font-size:16px; color:#1F7A3D; transition:.25s; } .content .gap-2 .m-menu span{ flex:1; } .content .gap-2 .m-menu::after{ content:"›"; margin-left:auto; font-size:20px; font-weight:700; color:#1F7A3D; transition:.25s; } .content .gap-2 .m-menu:hover{ color:#fff!important; transform:translateY(-2px); box-shadow:0 8px 18px rgba(31,122,61,.20); } .content .gap-2 .m-menu:hover em, .content .gap-2 .m-menu:hover::after{ color:#fff; } .content .gap-2 .m-menu:hover::after{ transform:translateX(4px); } /* ========================================================== PEKA SIDEBAR — ORANGE PALETTE MATCHING HERO Hero palette: #3CA24C / #FFD04C / #FFDD63 / #FFE58A ========================================================== */ /* Sidebar heading */ .sidebar-title{ background:linear-gradient( 135deg, #3CA24C 0%, #FFD04C 58%, #FFDD63 100% )!important; color:#FFFFFF!important; box-shadow: 0 8px 18px rgba(217,101,18,.22), 0 4px 12px rgba(245,154,58,.14)!important; } /* Sidebar menu cards */ .content .gap-2 .m-menu{ background:#FFFFFF!important; border:1px solid #C9E5CE!important; color:#3CA24C!important; box-shadow: 0 3px 10px rgba(217,101,18,.08)!important; } /* Orange hover fill */ .content .gap-2 .m-menu::before{ background:linear-gradient( 90deg, #3CA24C 0%, #FFD04C 58%, #FFDD63 100% )!important; } /* Sidebar icons */ .content .gap-2 .m-menu em{ color:#3CA24C!important; } /* Sidebar arrows */ .content .gap-2 .m-menu::after{ color:#3CA24C!important; } /* Hover state */ .content .gap-2 .m-menu:hover{ color:#FFFFFF!important; border-color:#3CA24C!important; box-shadow: 0 8px 18px rgba(217,101,18,.20)!important; } .content .gap-2 .m-menu:hover em, .content .gap-2 .m-menu:hover::after{ color:#FFFFFF!important; } /* Sidebar links/text remain orange before hover */ .content .gap-2 .m-menu span{ color:#3CA24C!important; } .content .gap-2 .m-menu:hover span{ color:#FFFFFF!important; } /* Optional accent for sidebar links */ .content .gap-2 .m-menu:focus-visible{ outline:2px solid #FFE58A!important; outline-offset:2px; } /* Mobile */ @media(max-width:600px){ .sidebar-title{ font-size:17px!important; padding:12px 14px!important; } .content .gap-2 .m-menu{ min-height:46px!important; padding:10px 14px!important; } } /* ========================================================== PEKA HEADER — JSA STYLE / ORANGE EDITION Structure: 1. White logo area 2. Register/Login at top-right 3. Centered navigation bar 4. Orange navigation typography 5. White About dropdown + orange text ========================================================== */ /* ---------- HEADER / LOGO AREA ---------- */ .pkp_structure_head{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; background:#FFFFFF!important; border:0!important; box-shadow:none!important; } .pkp_head_wrapper{ width:100%!important; max-width:1160px!important; min-height:205px!important; margin:0 auto!important; padding:0 20px!important; box-sizing:border-box!important; position:relative!important; } .pkp_site_name_wrapper{ position:relative!important; width:100%!important; min-height:205px!important; margin:0!important; padding:0!important; background:#FFFFFF!important; border:0!important; box-shadow:none!important; overflow:visible!important; } .pkp_site_name{ position:relative!important; z-index:5!important; display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-height:205px!important; margin:0!important; padding:28px 0 22px!important; box-sizing:border-box!important; } .pkp_site_name img{ display:block!important; width:auto!important; height:auto!important; max-width:min(720px,90vw)!important; max-height:125px!important; margin:0 auto!important; transform:none!important; filter:none!important; } /* ---------- REGISTER / LOGIN ---------- */ .pkp_navigation_user_wrapper{ position:absolute!important; top:0!important; right:0!important; z-index:99999!important; } .pkp_navigation_user{ display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:20px!important; margin:0!important; padding:0!important; list-style:none!important; } .pkp_navigation_user > li > a{ color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; font-family:Arial,Helvetica,sans-serif!important; font-size:14px!important; font-weight:700!important; text-decoration:none!important; white-space:nowrap!important; } .pkp_navigation_user > li > a:hover{ color:#247A3B!important; -webkit-text-fill-color:#247A3B!important; } /* ---------- NAVIGATION BAR ---------- */ .pkp_site_nav_menu{ position:relative!important; z-index:200!important; width:100%!important; max-width:1160px!important; min-height:58px!important; margin:0 auto!important; padding:0!important; background:#FFFFFF!important; border-bottom:1px solid #D9D9D9!important; box-shadow:0 5px 14px rgba(0,0,0,.08)!important; overflow:visible!important; } .pkp_navigation_primary_wrapper{ width:100%!important; max-width:none!important; min-height:58px!important; margin:0!important; padding:0!important; box-sizing:border-box!important; background:#FFFFFF!important; } .pkp_navigation_primary_row{ position:relative!important; width:100%!important; max-width:none!important; min-height:58px!important; margin:0!important; padding:0 22px!important; box-sizing:border-box!important; display:flex!important; align-items:center!important; justify-content:space-between!important; flex-wrap:nowrap!important; gap:12px!important; } /* ---------- PRIMARY MENU ---------- */ .pkp_navigation_primary{ display:flex!important; align-items:center!important; gap:2px!important; margin:0!important; padding:0!important; list-style:none!important; } .pkp_navigation_primary > li{ margin:0!important; padding:0!important; } .pkp_navigation_primary > li > a{ display:flex!important; align-items:center!important; width:auto!important; min-width:0!important; height:58px!important; padding:0 10px!important; box-sizing:border-box!important; color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; font-family:Arial,Helvetica,sans-serif!important; font-size:14px!important; font-weight:700!important; line-height:1.25!important; white-space:nowrap!important; text-decoration:none!important; visibility:visible!important; opacity:1!important; } .pkp_navigation_primary > li > a:hover, .pkp_navigation_primary > li > a:focus{ color:#247A3B!important; -webkit-text-fill-color:#247A3B!important; background:#F5FBF6!important; } /* ---------- ABOUT DROPDOWN ---------- */ .pkp_navigation_primary .dropdown-menu{ min-width:220px!important; margin:0!important; padding:7px 0!important; background:#FFFFFF!important; border:1px solid #C9E5CE!important; border-radius:0 0 10px 10px!important; box-shadow:0 10px 24px rgba(217,101,18,.14)!important; z-index:99999!important; } .pkp_navigation_primary .dropdown-menu > li{ margin:0!important; padding:0!important; } .pkp_navigation_primary .dropdown-menu > li > a, .pkp_navigation_primary .dropdown-menu > li > a *, .pkp_navigation_primary .dropdown-menu a{ display:block!important; width:100%!important; box-sizing:border-box!important; padding:10px 16px!important; background:#FFFFFF!important; color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; font-family:Arial,Helvetica,sans-serif!important; font-size:13px!important; font-weight:600!important; text-decoration:none!important; white-space:nowrap!important; } .pkp_navigation_primary .dropdown-menu > li > a:hover, .pkp_navigation_primary .dropdown-menu > li > a:focus{ background:#FFF9E5!important; color:#247A3B!important; -webkit-text-fill-color:#247A3B!important; } /* ---------- SEARCH ---------- */ .pkp_search{ margin-left:auto!important; padding-left:8px!important; padding-right:4px!important; } .pkp_search .search_prompt, .pkp_search a, .pkp_search button{ color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; font-family:Arial,Helvetica,sans-serif!important; font-size:14px!important; font-weight:700!important; text-decoration:none!important; } .pkp_search a:hover, .pkp_search button:hover, .pkp_search .search_prompt:hover{ color:#247A3B!important; -webkit-text-fill-color:#247A3B!important; } /* ---------- REMOVE OLD GREEN HEADER COLORS ---------- */ .pkp_navigation_primary *, .pkp_navigation_user *, .pkp_search *{ text-decoration-color:#3CA24C!important; } .pkp_navigation_primary > li > a, .pkp_navigation_user > li > a, .pkp_search a, .pkp_search button, .pkp_search .search_prompt{ text-shadow:none!important; } /* ---------- RESPONSIVE ---------- */ @media (max-width:900px){ .pkp_head_wrapper{ min-height:170px!important; padding:0 15px!important; } .pkp_site_name_wrapper, .pkp_site_name{ min-height:170px!important; } .pkp_site_name{ padding:25px 0 20px!important; } .pkp_site_name img{ max-width:85vw!important; max-height:105px!important; } .pkp_navigation_primary_row{ padding:0 12px!important; gap:6px!important; overflow-x:auto!important; } .pkp_navigation_primary > li > a{ padding:0 7px!important; font-size:13px!important; } } @media (max-width:600px){ .pkp_head_wrapper{ min-height:145px!important; } .pkp_site_name_wrapper, .pkp_site_name{ min-height:145px!important; } .pkp_site_name{ padding:20px 0 15px!important; } .pkp_site_name img{ max-width:88vw!important; max-height:85px!important; } .pkp_navigation_user_wrapper{ top:0!important; right:8px!important; } .pkp_navigation_user{ gap:10px!important; } .pkp_navigation_user > li > a{ font-size:12px!important; } .pkp_navigation_primary_row{ min-height:52px!important; } .pkp_navigation_primary > li > a{ height:52px!important; padding:0 6px!important; font-size:12px!important; } } /* ========================================================== PEKA HEADER V3 — TRUE JSA LAYOUT 1. REGISTER + LOGIN ABOVE LOGO 2. SEARCH ON THE SAME NAVIGATION ROW 3. NO LOGIN/REGISTER BOXES 4. ORANGE PEKA COLOR ========================================================== */ /* ---------------------------------------------------------- HEADER CONTAINER ---------------------------------------------------------- */ .pkp_head_wrapper{ position:relative!important; max-width:1160px!important; margin:0 auto!important; background:#FFFFFF!important; } .pkp_site_name_wrapper{ position:relative!important; z-index:1!important; background:#FFFFFF!important; } .pkp_site_name{ position:relative!important; z-index:1!important; } /* ---------------------------------------------------------- REGISTER + LOGIN Move them from navigation row to TOP OF HEADER, matching the JSA screenshot. ---------------------------------------------------------- */ .pkp_navigation_user_wrapper{ position:absolute!important; top:0!important; right:0!important; z-index:999999!important; /* move from navigation row to the top header */ transform:translateY(-330px)!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; } .pkp_navigation_user{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-end!important; gap:24px!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; list-style:none!important; } .pkp_navigation_user > li{ display:block!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; } .pkp_navigation_user > li > a{ display:inline-flex!important; align-items:center!important; justify-content:center!important; height:auto!important; min-height:0!important; width:auto!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; font-family:Arial,Helvetica,sans-serif!important; font-size:14px!important; font-weight:700!important; line-height:1.2!important; text-decoration:none!important; white-space:nowrap!important; } .pkp_navigation_user > li > a:hover{ background:transparent!important; border:0!important; box-shadow:none!important; color:#247A3B!important; -webkit-text-fill-color:#247A3B!important; } /* ---------------------------------------------------------- REMOVE ANY OLD REGISTER/LOGIN BUTTON APPEARANCE ---------------------------------------------------------- */ .pkp_navigation_user .profile, .pkp_navigation_user .profile > a, .pkp_navigation_user li, .pkp_navigation_user li > a{ background-color:transparent!important; background-image:none!important; } /* ---------------------------------------------------------- NAVIGATION ROW ---------------------------------------------------------- */ .pkp_site_nav_menu{ position:relative!important; z-index:200!important; width:100%!important; max-width:1160px!important; height:58px!important; min-height:58px!important; margin:0 auto!important; padding:0!important; background:#FFFFFF!important; border-bottom:1px solid #D9D9D9!important; box-shadow:0 5px 14px rgba(0,0,0,.08)!important; overflow:visible!important; } .pkp_navigation_primary_wrapper{ position:relative!important; width:100%!important; height:58px!important; min-height:58px!important; margin:0!important; padding:0!important; background:#FFFFFF!important; box-sizing:border-box!important; } .pkp_navigation_primary_row{ position:relative!important; display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important; flex-wrap:nowrap!important; width:100%!important; height:58px!important; min-height:58px!important; margin:0!important; padding:0 22px!important; gap:0!important; box-sizing:border-box!important; background:#FFFFFF!important; overflow:visible!important; } /* ---------------------------------------------------------- PRIMARY MENU ---------------------------------------------------------- */ .pkp_navigation_primary{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important; flex-wrap:nowrap!important; width:auto!important; height:58px!important; min-height:58px!important; margin:0!important; padding:0!important; gap:0!important; list-style:none!important; } .pkp_navigation_primary > li{ display:flex!important; align-items:center!important; flex:0 0 auto!important; height:58px!important; margin:0!important; padding:0!important; } .pkp_navigation_primary > li > a{ display:flex!important; align-items:center!important; height:58px!important; min-height:58px!important; margin:0!important; padding:0 12px!important; box-sizing:border-box!important; color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; font-family:Arial,Helvetica,sans-serif!important; font-size:14px!important; font-weight:700!important; line-height:1!important; white-space:nowrap!important; text-decoration:none!important; } .pkp_navigation_primary > li > a:hover{ color:#247A3B!important; -webkit-text-fill-color:#247A3B!important; background:#F5FBF6!important; } /* ---------------------------------------------------------- SEARCH ABSOLUTE RIGHT SIDE OF THE SAME NAVIGATION ROW. This prevents it from ever dropping underneath. ---------------------------------------------------------- */ .pkp_navigation_primary_row .pkp_search, .pkp_navigation_primary_wrapper .pkp_search{ position:absolute!important; top:0!important; right:14px!important; display:flex!important; align-items:center!important; justify-content:center!important; width:auto!important; min-width:0!important; max-width:none!important; height:58px!important; min-height:58px!important; margin:0!important; padding:0!important; float:none!important; clear:none!important; background:transparent!important; border:0!important; box-shadow:none!important; z-index:9999!important; } .pkp_navigation_primary_row .pkp_search a, .pkp_navigation_primary_row .pkp_search button, .pkp_navigation_primary_row .pkp_search .search_prompt{ display:flex!important; align-items:center!important; justify-content:center!important; width:auto!important; height:58px!important; min-height:58px!important; margin:0!important; padding:0 8px!important; background:transparent!important; border:0!important; box-shadow:none!important; color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; font-family:Arial,Helvetica,sans-serif!important; font-size:14px!important; font-weight:700!important; line-height:1!important; white-space:nowrap!important; text-decoration:none!important; } .pkp_navigation_primary_row .pkp_search a:hover, .pkp_navigation_primary_row .pkp_search button:hover, .pkp_navigation_primary_row .pkp_search .search_prompt:hover{ background:#F5FBF6!important; color:#247A3B!important; -webkit-text-fill-color:#247A3B!important; } /* ---------------------------------------------------------- SEARCH ICON ---------------------------------------------------------- */ .pkp_navigation_primary_row .pkp_search a::before, .pkp_navigation_primary_row .pkp_search button::before, .pkp_navigation_primary_row .pkp_search .search_prompt::before{ content:"\f002"!important; display:inline-block!important; margin-right:6px!important; font-family:"FontAwesome"!important; font-weight:normal!important; color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; } .pkp_navigation_primary_row .pkp_search a:hover::before, .pkp_navigation_primary_row .pkp_search button:hover::before, .pkp_navigation_primary_row .pkp_search .search_prompt:hover::before{ color:#247A3B!important; -webkit-text-fill-color:#247A3B!important; } /* ---------------------------------------------------------- MENU ICONS ---------------------------------------------------------- */ .pkp_navigation_primary > li > a::before{ display:inline-block!important; width:18px!important; min-width:18px!important; margin-right:7px!important; font-family:"FontAwesome"!important; font-weight:normal!important; font-style:normal!important; text-align:center!important; color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; } .pkp_navigation_primary > li:nth-child(1) > a::before{ content:"\f015"!important; } .pkp_navigation_primary > li:nth-child(2) > a::before{ content:"\f02d"!important; } .pkp_navigation_primary > li:nth-child(3) > a::before{ content:"\f187"!important; } .pkp_navigation_primary > li:nth-child(4) > a::before{ content:"\f0a1"!important; } .pkp_navigation_primary > li:nth-child(5) > a::before{ content:"\f0c0"!important; } /* ---------------------------------------------------------- ABOUT DROPDOWN ---------------------------------------------------------- */ .pkp_navigation_primary .dropdown-menu{ background:#FFFFFF!important; border:1px solid #C9E5CE!important; box-shadow:0 10px 24px rgba(217,101,18,.14)!important; } .pkp_navigation_primary .dropdown-menu > li > a, .pkp_navigation_primary .dropdown-menu > li > a *, .pkp_navigation_primary .dropdown-menu a{ background:#FFFFFF!important; color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; } .pkp_navigation_primary .dropdown-menu > li > a:hover{ background:#FFF9E5!important; color:#247A3B!important; -webkit-text-fill-color:#247A3B!important; } /* ---------------------------------------------------------- WHITE OUTER SIDES ---------------------------------------------------------- */ html, body, .pkp_structure_page, .pkp_structure_head{ background:#FFFFFF!important; background-image:none!important; } .pkp_structure_page{ max-width:none!important; box-shadow:none!important; } /* ---------------------------------------------------------- RESPONSIVE ---------------------------------------------------------- */ @media (max-width:900px){ .pkp_navigation_user_wrapper{ transform:translateY(-285px)!important; right:10px!important; } .pkp_navigation_user{ gap:14px!important; } .pkp_navigation_user > li > a{ font-size:13px!important; } .pkp_navigation_primary > li > a{ padding:0 8px!important; font-size:13px!important; } .pkp_navigation_primary_row .pkp_search{ right:8px!important; } } @media (max-width:600px){ .pkp_navigation_user_wrapper{ transform:translateY(-235px)!important; right:8px!important; } .pkp_navigation_user{ gap:10px!important; } .pkp_navigation_user > li > a{ font-size:12px!important; } .pkp_navigation_primary > li > a{ height:52px!important; min-height:52px!important; padding:0 7px!important; font-size:12px!important; } .pkp_navigation_primary_row .pkp_search{ height:52px!important; min-height:52px!important; } .pkp_navigation_primary_row .pkp_search a, .pkp_navigation_primary_row .pkp_search button, .pkp_navigation_primary_row .pkp_search .search_prompt{ height:52px!important; min-height:52px!important; font-size:12px!important; } } /* ========================================================== PEKA HEADER V4 — REGISTER / LOGIN DEFINITIVE POSITION Place Register + Login at the TOP-RIGHT of the WHITE LOGO AREA, exactly like the JSA reference. IMPORTANT: Do NOT use translateY() because the previous version moved the element outside its visible containing area. ========================================================== */ /* Header must provide the positioning context */ .pkp_structure_head, .pkp_head_wrapper, .pkp_site_name_wrapper{ position:relative!important; overflow:visible!important; } /* Register / Login wrapper */ .pkp_structure_head .pkp_navigation_user_wrapper, .pkp_head_wrapper .pkp_navigation_user_wrapper, .pkp_site_name_wrapper .pkp_navigation_user_wrapper{ position:absolute!important; /* JSA-like top-right placement */ top:14px!important; right:20px!important; /* cancel the previous V3 displacement */ transform:none!important; z-index:999999!important; display:block!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; visibility:visible!important; opacity:1!important; } /* User menu itself */ .pkp_structure_head .pkp_navigation_user, .pkp_head_wrapper .pkp_navigation_user, .pkp_site_name_wrapper .pkp_navigation_user{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-end!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; gap:24px!important; background:transparent!important; border:0!important; box-shadow:none!important; list-style:none!important; visibility:visible!important; opacity:1!important; } /* Individual Register / Login */ .pkp_structure_head .pkp_navigation_user > li, .pkp_head_wrapper .pkp_navigation_user > li, .pkp_site_name_wrapper .pkp_navigation_user > li{ display:block!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; } .pkp_structure_head .pkp_navigation_user > li > a, .pkp_head_wrapper .pkp_navigation_user > li > a, .pkp_site_name_wrapper .pkp_navigation_user > li > a{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; height:auto!important; min-height:0!important; margin:0!important; padding:0!important; background:transparent!important; background-image:none!important; border:0!important; border-radius:0!important; box-shadow:none!important; color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; font-family:Arial,Helvetica,sans-serif!important; font-size:14px!important; font-weight:700!important; line-height:1.2!important; text-decoration:none!important; white-space:nowrap!important; visibility:visible!important; opacity:1!important; } .pkp_structure_head .pkp_navigation_user > li > a:hover, .pkp_head_wrapper .pkp_navigation_user > li > a:hover, .pkp_site_name_wrapper .pkp_navigation_user > li > a:hover{ background:transparent!important; background-image:none!important; border:0!important; box-shadow:none!important; color:#247A3B!important; -webkit-text-fill-color:#247A3B!important; } /* Icons for Register and Login, like JSA */ .pkp_structure_head .pkp_navigation_user > li:first-child > a::before, .pkp_head_wrapper .pkp_navigation_user > li:first-child > a::before, .pkp_site_name_wrapper .pkp_navigation_user > li:first-child > a::before{ content:"\f234"!important; display:inline-block!important; margin-right:5px!important; font-family:"FontAwesome"!important; font-weight:normal!important; color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; } .pkp_structure_head .pkp_navigation_user > li:last-child > a::before, .pkp_head_wrapper .pkp_navigation_user > li:last-child > a::before, .pkp_site_name_wrapper .pkp_navigation_user > li:last-child > a::before{ content:"\f090"!important; display:inline-block!important; margin-right:5px!important; font-family:"FontAwesome"!important; font-weight:normal!important; color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; } /* ---------------------------------------------------------- Keep navigation Search on the SAME row ---------------------------------------------------------- */ .pkp_navigation_primary_row .pkp_search{ position:absolute!important; top:0!important; right:14px!important; transform:none!important; display:flex!important; align-items:center!important; height:58px!important; min-height:58px!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; z-index:9999!important; } /* ---------------------------------------------------------- Desktop exact spacing ---------------------------------------------------------- */ @media (min-width:901px){ .pkp_structure_head .pkp_navigation_user_wrapper, .pkp_head_wrapper .pkp_navigation_user_wrapper, .pkp_site_name_wrapper .pkp_navigation_user_wrapper{ top:14px!important; right:20px!important; transform:none!important; } } /* ---------------------------------------------------------- Tablet ---------------------------------------------------------- */ @media (max-width:900px){ .pkp_structure_head .pkp_navigation_user_wrapper, .pkp_head_wrapper .pkp_navigation_user_wrapper, .pkp_site_name_wrapper .pkp_navigation_user_wrapper{ top:10px!important; right:12px!important; transform:none!important; } .pkp_structure_head .pkp_navigation_user, .pkp_head_wrapper .pkp_navigation_user, .pkp_site_name_wrapper .pkp_navigation_user{ gap:14px!important; } } /* ---------------------------------------------------------- Mobile ---------------------------------------------------------- */ @media (max-width:600px){ .pkp_structure_head .pkp_navigation_user_wrapper, .pkp_head_wrapper .pkp_navigation_user_wrapper, .pkp_site_name_wrapper .pkp_navigation_user_wrapper{ top:8px!important; right:8px!important; transform:none!important; } .pkp_structure_head .pkp_navigation_user, .pkp_head_wrapper .pkp_navigation_user, .pkp_site_name_wrapper .pkp_navigation_user{ gap:10px!important; } .pkp_structure_head .pkp_navigation_user > li > a, .pkp_head_wrapper .pkp_navigation_user > li > a, .pkp_site_name_wrapper .pkp_navigation_user > li > a{ font-size:12px!important; } } /* ========================================================== PEKA HEADER V5 — JSA-STYLE REGISTER / LOGIN AT VERY TOP ---------------------------------------------------------- Goal: - Register + Login are ONLY in the white logo/header area. - Search stays ONLY in the navigation row. - Register/Login never overlap Search. - No transform displacement. - No button/box styling. ========================================================== */ /* The actual header is the positioning context */ .pkp_structure_head{ position:relative!important; width:100%!important; background:#FFFFFF!important; overflow:visible!important; } .pkp_structure_head .pkp_head_wrapper{ position:relative!important; width:100%!important; max-width:1160px!important; min-height:205px!important; margin:0 auto!important; padding:0 20px!important; box-sizing:border-box!important; background:#FFFFFF!important; overflow:visible!important; } /* ---------------------------------------------------------- REGISTER + LOGIN Put them at the TOP-RIGHT of the complete header wrapper. This is independent of the navigation row. ---------------------------------------------------------- */ .pkp_structure_head .pkp_head_wrapper > .pkp_navigation_user_wrapper, .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user_wrapper{ position:absolute!important; top:12px!important; right:20px!important; transform:none!important; float:none!important; clear:none!important; display:block!important; width:auto!important; max-width:none!important; height:auto!important; min-height:0!important; margin:0!important; padding:0!important; background:transparent!important; background-image:none!important; border:0!important; border-radius:0!important; box-shadow:none!important; z-index:1000000!important; visibility:visible!important; opacity:1!important; } /* User list */ .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user{ position:relative!important; display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-end!important; width:auto!important; max-width:none!important; height:auto!important; min-height:0!important; margin:0!important; padding:0!important; gap:24px!important; list-style:none!important; background:transparent!important; border:0!important; box-shadow:none!important; visibility:visible!important; opacity:1!important; } /* User items */ .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user > li{ display:block!important; position:relative!important; width:auto!important; height:auto!important; min-height:0!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; } /* Register / Login links */ .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user > li > a{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; height:auto!important; min-height:0!important; margin:0!important; padding:0!important; background:transparent!important; background-image:none!important; border:0!important; border-radius:0!important; box-shadow:none!important; color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; font-family:Arial,Helvetica,sans-serif!important; font-size:14px!important; font-weight:700!important; line-height:1.2!important; text-decoration:none!important; white-space:nowrap!important; } .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user > li > a:hover{ background:transparent!important; color:#247A3B!important; -webkit-text-fill-color:#247A3B!important; } /* Register icon */ .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user > li:first-child > a::before{ content:"\f234"!important; display:inline-block!important; margin-right:5px!important; font-family:"FontAwesome"!important; font-weight:normal!important; color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; } /* Login icon */ .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user > li:last-child > a::before{ content:"\f090"!important; display:inline-block!important; margin-right:5px!important; font-family:"FontAwesome"!important; font-weight:normal!important; color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; } /* ---------------------------------------------------------- ABSOLUTELY REMOVE USER MENU FROM NAVIGATION FLOW ---------------------------------------------------------- */ .pkp_navigation_primary_row .pkp_navigation_user_wrapper{ position:absolute!important; top:auto!important; right:auto!important; transform:none!important; width:0!important; height:0!important; min-height:0!important; margin:0!important; padding:0!important; overflow:visible!important; background:transparent!important; border:0!important; box-shadow:none!important; } /* ---------------------------------------------------------- SEARCH — REMAINS ON THE SAME NAVIGATION ROW ---------------------------------------------------------- */ .pkp_navigation_primary_row{ position:relative!important; display:flex!important; align-items:center!important; flex-wrap:nowrap!important; overflow:visible!important; } .pkp_navigation_primary_row .pkp_search{ position:absolute!important; top:0!important; right:14px!important; display:flex!important; align-items:center!important; justify-content:center!important; width:auto!important; height:58px!important; min-height:58px!important; margin:0!important; padding:0!important; float:none!important; clear:none!important; background:transparent!important; border:0!important; box-shadow:none!important; z-index:9999!important; } /* ---------------------------------------------------------- JSA-LIKE WHITE SPACE Register/Login sit above the centered logo. ---------------------------------------------------------- */ .pkp_structure_head .pkp_site_name_wrapper{ position:relative!important; z-index:1!important; background:#FFFFFF!important; overflow:visible!important; } .pkp_structure_head .pkp_site_name{ position:relative!important; z-index:1!important; background:#FFFFFF!important; } /* ---------------------------------------------------------- RESPONSIVE ---------------------------------------------------------- */ @media (min-width:901px){ .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user_wrapper{ top:12px!important; right:20px!important; transform:none!important; } } @media (max-width:900px){ .pkp_structure_head .pkp_head_wrapper{ min-height:170px!important; } .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user_wrapper{ top:10px!important; right:12px!important; transform:none!important; } .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user{ gap:14px!important; } .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user > li > a{ font-size:13px!important; } } @media (max-width:600px){ .pkp_structure_head .pkp_head_wrapper{ min-height:145px!important; } .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user_wrapper{ top:8px!important; right:8px!important; transform:none!important; } .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user{ gap:10px!important; } .pkp_structure_head .pkp_head_wrapper .pkp_navigation_user > li > a{ font-size:12px!important; } } /* ========================================================== PEKA V6 — DEFINITIVE FIX Root cause: .pkp_navigation_user_wrapper is INSIDE .pkp_site_nav_menu. The previous CSS positioned .pkp_site_nav_menu as relative, so Register/Login were positioned relative to the NAV ROW, not relative to the white header. Fix: 1. Make .pkp_structure_head the positioning context. 2. Make .pkp_site_nav_menu static. 3. Position .pkp_navigation_user_wrapper absolutely against .pkp_structure_head. 4. Keep .pkp_search inside the navigation row. ========================================================== */ /* 1. Header becomes the ONLY positioning context for the user menu */ .pkp_structure_head{ position:relative!important; overflow:visible!important; z-index:100!important; } /* 2. IMPORTANT: remove the navigation menu as the containing block */ .pkp_structure_head .pkp_site_nav_menu{ position:static!important; top:auto!important; left:auto!important; right:auto!important; bottom:auto!important; overflow:visible!important; } /* 3. User menu is inside .pkp_site_nav_menu in OJS, but is now positioned relative to .pkp_structure_head */ .pkp_structure_head .pkp_navigation_user_wrapper{ position:absolute!important; top:12px!important; right:20px!important; left:auto!important; bottom:auto!important; width:auto!important; height:auto!important; min-width:0!important; min-height:0!important; margin:0!important; padding:0!important; transform:none!important; float:none!important; clear:none!important; display:block!important; visibility:visible!important; opacity:1!important; background:transparent!important; background-image:none!important; border:0!important; box-shadow:none!important; z-index:1000000!important; } /* 4. User links: horizontal, plain text, orange */ .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user{ position:relative!important; display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-end!important; width:auto!important; height:auto!important; min-height:0!important; margin:0!important; padding:0!important; gap:22px!important; list-style:none!important; background:transparent!important; border:0!important; box-shadow:none!important; } .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li{ display:block!important; position:relative!important; width:auto!important; height:auto!important; min-height:0!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; } .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a{ display:inline-flex!important; align-items:center!important; width:auto!important; height:auto!important; min-height:0!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; font-family:Arial,Helvetica,sans-serif!important; font-size:14px!important; font-weight:700!important; line-height:1.2!important; text-decoration:none!important; white-space:nowrap!important; } .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a:hover{ background:transparent!important; color:#247A3B!important; -webkit-text-fill-color:#247A3B!important; } /* 5. Icons */ .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li:first-child > a::before{ content:"\f234"!important; display:inline-block!important; margin-right:5px!important; font-family:"FontAwesome"!important; font-weight:normal!important; color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; } .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li:last-child > a::before{ content:"\f090"!important; display:inline-block!important; margin-right:5px!important; font-family:"FontAwesome"!important; font-weight:normal!important; color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; } /* 6. Search is independent and stays in the navigation row */ .pkp_structure_head .pkp_navigation_primary_row{ position:relative!important; display:flex!important; align-items:center!important; flex-wrap:nowrap!important; overflow:visible!important; } .pkp_structure_head .pkp_navigation_primary_row .pkp_search{ position:absolute!important; top:0!important; right:14px!important; display:flex!important; align-items:center!important; justify-content:center!important; width:auto!important; height:58px!important; min-height:58px!important; margin:0!important; padding:0!important; float:none!important; clear:none!important; background:transparent!important; border:0!important; box-shadow:none!important; z-index:9999!important; } /* 7. Desktop/tablet */ @media (min-width:901px){ .pkp_structure_head .pkp_navigation_user_wrapper{ top:12px!important; right:20px!important; } } /* 8. Mobile */ @media (max-width:900px){ .pkp_structure_head .pkp_navigation_user_wrapper{ top:10px!important; right:12px!important; } .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user{ gap:14px!important; } .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a{ font-size:13px!important; } } @media (max-width:600px){ .pkp_structure_head .pkp_navigation_user_wrapper{ top:8px!important; right:8px!important; } .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user{ gap:10px!important; } .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a{ font-size:12px!important; } } /* ========================================================== V7 — FORCE SEARCH TO MATCH HOME MENU Search text and icon use exactly the same PEKA orange, font family and font weight as the primary navigation. ========================================================== */ .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search *, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search a, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search a span, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search button, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search .search_prompt, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search .search_prompt span{ color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; font-family:Arial,Helvetica,sans-serif!important; font-size:14px!important; font-weight:700!important; line-height:1.25!important; text-decoration:none!important; text-shadow:none!important; opacity:1!important; visibility:visible!important; } .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search a::before, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search button::before, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search .search_prompt::before{ color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; font-family:"FontAwesome"!important; font-weight:normal!important; } .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search a:hover, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search button:hover, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search .search_prompt:hover, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search a:hover span{ color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; background:transparent!important; } .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search a:hover::before, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search button:hover::before, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search .search_prompt:hover::before{ color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; } /* Match the primary menu spacing/appearance */ .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search a, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search button, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search .search_prompt{ display:flex!important; align-items:center!important; justify-content:center!important; min-height:58px!important; padding:0 8px!important; box-sizing:border-box!important; } /* ========================================================== V8 — RESTORE ORIGINAL OJS SEARCH GLASS ICON The OJS search link already contains . Keep that FontAwesome span intact; do not replace it with a pseudo-element and do not force Arial onto the icon span. ========================================================== */ .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search .fa, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search .fa-search, .pkp_navigation_primary_row .pkp_search a > .fa-search, .pkp_navigation_primary_row .pkp_search a > span.fa-search{ display:inline-block!important; font-family:"FontAwesome"!important; font-size:14px!important; font-weight:normal!important; line-height:1!important; color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; width:auto!important; min-width:0!important; margin:0 6px 0 0!important; padding:0!important; text-indent:0!important; } /* Use the native OJS FontAwesome icon, not a CSS-generated square/icon. */ .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search a::before, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search button::before, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search .search_prompt::before{ content:none!important; display:none!important; } /* Search text remains identical to HOME. */ .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search a, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search button, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search .search_prompt{ color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; font-family:Arial,Helvetica,sans-serif!important; font-size:14px!important; font-weight:700!important; line-height:1.25!important; text-decoration:none!important; } .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search a:hover, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search button:hover, .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search .search_prompt:hover{ color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; background:transparent!important; } .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search .fa-search:hover{ color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; } /* ========================================================== PEKA V9 — RESTORE HERO BUTTON ANIMATION Restores animation for: - Submit Manuscript - Author Guidelines - Current Issue - View Current Issue Animation uses box-shadow pulse + diagonal shine. It does not override the button's existing colors/layout. ========================================================== */ .peka2026-buttons a.peka2026-btn, .peka2026-btn, .peka2026-btn-primary, .peka2026-btn-outline{ position:relative!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; overflow:hidden!important; isolation:isolate!important; animation:pekaButtonPulse 3s ease-in-out infinite!important; transition: transform .35s ease, box-shadow .35s ease, background-color .35s ease, color .35s ease, border-color .35s ease!important; } /* Moving light sweep */ .peka2026-buttons a.peka2026-btn::after, .peka2026-btn::after, .peka2026-btn-primary::after, .peka2026-btn-outline::after{ content:""!important; position:absolute!important; top:-20%!important; left:-130%!important; width:42%!important; height:140%!important; z-index:0!important; pointer-events:none!important; background:linear-gradient( 100deg, transparent 0%, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.68) 50%, rgba(255,255,255,0.08) 75%, transparent 100% )!important; transform:skewX(-24deg)!important; animation:pekaButtonShine 3.2s linear infinite!important; } /* Keep button text/icons above the shine layer */ .peka2026-buttons a.peka2026-btn > *, .peka2026-btn > *, .peka2026-btn-primary > *, .peka2026-btn-outline > *{ position:relative!important; z-index:2!important; } /* Subtle breathing/pulse without fighting hover transform */ @keyframes pekaButtonPulse{ 0%,100%{ box-shadow:0 6px 16px rgba(217,101,18,.12); } 50%{ box-shadow:0 10px 26px rgba(217,101,18,.28); } } @keyframes pekaButtonShine{ 0%{ left:-130%; } 100%{ left:165%; } } /* Stronger hover interaction */ .peka2026-buttons a.peka2026-btn:hover, .peka2026-btn:hover, .peka2026-btn-primary:hover, .peka2026-btn-outline:hover{ transform:translateY(-4px)!important; animation-play-state:paused!important; } /* Stop the sweep while the pointer is over the button */ .peka2026-buttons a.peka2026-btn:hover::after, .peka2026-btn:hover::after, .peka2026-btn-primary:hover::after, .peka2026-btn-outline:hover::after{ animation-play-state:paused!important; } /* Accessibility: respect reduced-motion preference */ @media (prefers-reduced-motion:reduce){ .peka2026-buttons a.peka2026-btn, .peka2026-btn, .peka2026-btn-primary, .peka2026-btn-outline, .peka2026-buttons a.peka2026-btn::after, .peka2026-btn::after, .peka2026-btn-primary::after, .peka2026-btn-outline::after{ animation:none!important; transition:none!important; } } /* ========================================================== PEKA — ARTICLE TITLE ORANGE Current Issue / Archives Added without changing existing V9 rules ========================================================== */ .obj_article_summary .title, .obj_article_summary .title a, .obj_article_summary h3.title, .obj_article_summary h3.title a, .issue-toc .obj_article_summary .title, .issue-toc .obj_article_summary .title a { color:#3CA24C!important; -webkit-text-fill-color:#3CA24C!important; font-family:Arial,Helvetica,sans-serif!important; font-weight:700!important; text-decoration:none!important; opacity:1!important; visibility:visible!important; } .obj_article_summary .title a:hover, .obj_article_summary h3.title a:hover, .issue-toc .obj_article_summary .title a:hover { color:#247A3B!important; -webkit-text-fill-color:#247A3B!important; text-decoration:none!important; } /* ========================================================== PEKA V10 — ENLARGE HEADER / LOGO Purpose: - Make the PEKA logo substantially larger - Keep Register/Login at the top-right - Keep navigation unchanged - Preserve responsive behavior ========================================================== */ /* Desktop: larger logo area */ @media (min-width:901px){ .pkp_structure_head .pkp_head_wrapper{ min-height:220px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:220px!important; } .pkp_structure_head .pkp_site_name{ min-height:220px!important; padding:42px 0 28px!important; } .pkp_structure_head .pkp_site_name img{ display:block!important; width:760px!important; max-width:calc(100% - 40px)!important; height:auto!important; max-height:none!important; margin:0 auto!important; transform:none!important; filter:none!important; } } /* Tablet */ @media (min-width:601px) and (max-width:900px){ .pkp_structure_head .pkp_head_wrapper{ min-height:185px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:185px!important; } .pkp_structure_head .pkp_site_name{ min-height:185px!important; padding:34px 0 22px!important; } .pkp_structure_head .pkp_site_name img{ display:block!important; width:620px!important; max-width:calc(100% - 30px)!important; height:auto!important; max-height:none!important; margin:0 auto!important; transform:none!important; } } /* Mobile */ @media (max-width:600px){ .pkp_structure_head .pkp_head_wrapper{ min-height:150px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:150px!important; } .pkp_structure_head .pkp_site_name{ min-height:150px!important; padding:28px 0 16px!important; } .pkp_structure_head .pkp_site_name img{ display:block!important; width:520px!important; max-width:calc(100% - 24px)!important; height:auto!important; max-height:none!important; margin:0 auto!important; transform:none!important; } } /* Keep top Register/Login safely above the enlarged logo */ @media (min-width:901px){ .pkp_structure_head .pkp_navigation_user_wrapper{ top:12px!important; right:20px!important; z-index:1000000!important; } } /* ========================================================== PEKA V11 — EXTRA LARGE HEADER LOGO Based on V10. Desktop logo enlarged substantially while keeping Register/Login and navigation positions unchanged. ========================================================== */ @media (min-width:901px){ /* Increase the white header area */ .pkp_structure_head .pkp_head_wrapper{ min-height:270px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:270px!important; } .pkp_structure_head .pkp_site_name{ min-height:270px!important; padding:52px 0 34px!important; } /* Extra-large PEKA logo */ .pkp_structure_head .pkp_site_name img{ display:block!important; width:950px!important; max-width:calc(100% - 30px)!important; height:auto!important; max-height:none!important; margin:0 auto!important; transform:none!important; filter:none!important; } /* Keep Register/Login in the top-right */ .pkp_structure_head .pkp_navigation_user_wrapper{ top:12px!important; right:20px!important; z-index:1000000!important; } } /* Tablet — proportionally larger */ @media (min-width:601px) and (max-width:900px){ .pkp_structure_head .pkp_head_wrapper{ min-height:210px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:210px!important; } .pkp_structure_head .pkp_site_name{ min-height:210px!important; padding:38px 0 24px!important; } .pkp_structure_head .pkp_site_name img{ display:block!important; width:760px!important; max-width:calc(100% - 24px)!important; height:auto!important; max-height:none!important; margin:0 auto!important; transform:none!important; } } /* Mobile — larger but still constrained to viewport */ @media (max-width:600px){ .pkp_structure_head .pkp_head_wrapper{ min-height:170px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:170px!important; } .pkp_structure_head .pkp_site_name{ min-height:170px!important; padding:30px 0 18px!important; } .pkp_structure_head .pkp_site_name img{ display:block!important; width:650px!important; max-width:calc(100% - 18px)!important; height:auto!important; max-height:none!important; margin:0 auto!important; transform:none!important; } } /* ========================================================== PEKA V12 — LARGER LOGO + LOWER HEADER Desktop: - Logo enlarged to 1050px - Header reduced from 270px to 230px - Tighter vertical padding - Register/Login remain at top-right - Navigation position remains unchanged ========================================================== */ @media (min-width:901px){ .pkp_structure_head .pkp_head_wrapper{ min-height:230px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:230px!important; } .pkp_structure_head .pkp_site_name{ min-height:230px!important; padding:30px 0 18px!important; } .pkp_structure_head .pkp_site_name img{ display:block!important; width:1050px!important; max-width:calc(100% - 20px)!important; height:auto!important; max-height:none!important; margin:0 auto!important; transform:none!important; filter:none!important; } .pkp_structure_head .pkp_navigation_user_wrapper{ top:10px!important; right:20px!important; z-index:1000000!important; } } /* Tablet */ @media (min-width:601px) and (max-width:900px){ .pkp_structure_head .pkp_head_wrapper{ min-height:190px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:190px!important; } .pkp_structure_head .pkp_site_name{ min-height:190px!important; padding:28px 0 16px!important; } .pkp_structure_head .pkp_site_name img{ display:block!important; width:820px!important; max-width:calc(100% - 20px)!important; height:auto!important; max-height:none!important; margin:0 auto!important; transform:none!important; } } /* Mobile */ @media (max-width:600px){ .pkp_structure_head .pkp_head_wrapper{ min-height:155px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:155px!important; } .pkp_structure_head .pkp_site_name{ min-height:155px!important; padding:25px 0 14px!important; } .pkp_structure_head .pkp_site_name img{ display:block!important; width:680px!important; max-width:calc(100% - 14px)!important; height:auto!important; max-height:none!important; margin:0 auto!important; transform:none!important; } } /* ========================================================== PEKA V13 — HEADER HEIGHT 190PX Logo size preserved from V12 (1050px desktop) Only the header height/vertical spacing is reduced. ========================================================== */ @media (min-width:901px){ .pkp_structure_head .pkp_head_wrapper{ min-height:190px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:190px!important; } .pkp_structure_head .pkp_site_name{ min-height:190px!important; padding:20px 0 10px!important; } /* Keep V12 logo size */ .pkp_structure_head .pkp_site_name img{ width:1050px!important; max-width:calc(100% - 20px)!important; max-height:none!important; height:auto!important; margin:0 auto!important; } .pkp_structure_head .pkp_navigation_user_wrapper{ top:10px!important; right:20px!important; } } /* Tablet */ @media (min-width:601px) and (max-width:900px){ .pkp_structure_head .pkp_head_wrapper{ min-height:175px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:175px!important; } .pkp_structure_head .pkp_site_name{ min-height:175px!important; padding:24px 0 12px!important; } .pkp_structure_head .pkp_site_name img{ width:820px!important; max-width:calc(100% - 20px)!important; max-height:none!important; height:auto!important; margin:0 auto!important; } } /* Mobile */ @media (max-width:600px){ .pkp_structure_head .pkp_head_wrapper{ min-height:145px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:145px!important; } .pkp_structure_head .pkp_site_name{ min-height:145px!important; padding:22px 0 10px!important; } .pkp_structure_head .pkp_site_name img{ width:680px!important; max-width:calc(100% - 14px)!important; max-height:none!important; height:auto!important; margin:0 auto!important; } } /* ========================================================== PEKA V14 — HEADER HEIGHT 160PX Logo size preserved from V12/V13. Only desktop header height is reduced to 160px. ========================================================== */ @media (min-width:901px){ .pkp_structure_head .pkp_head_wrapper{ min-height:160px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:160px!important; } .pkp_structure_head .pkp_site_name{ min-height:160px!important; padding:12px 0 6px!important; } /* Preserve approved logo size */ .pkp_structure_head .pkp_site_name img{ width:1050px!important; max-width:calc(100% - 20px)!important; max-height:none!important; height:auto!important; margin:0 auto!important; } .pkp_structure_head .pkp_navigation_user_wrapper{ top:8px!important; right:20px!important; } } /* Tablet */ @media (min-width:601px) and (max-width:900px){ .pkp_structure_head .pkp_head_wrapper{ min-height:160px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:160px!important; } .pkp_structure_head .pkp_site_name{ min-height:160px!important; padding:20px 0 10px!important; } .pkp_structure_head .pkp_site_name img{ width:820px!important; max-width:calc(100% - 20px)!important; max-height:none!important; height:auto!important; margin:0 auto!important; } } /* Mobile */ @media (max-width:600px){ .pkp_structure_head .pkp_head_wrapper{ min-height:140px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:140px!important; } .pkp_structure_head .pkp_site_name{ min-height:140px!important; padding:20px 0 8px!important; } .pkp_structure_head .pkp_site_name img{ width:680px!important; max-width:calc(100% - 14px)!important; max-height:none!important; height:auto!important; margin:0 auto!important; } } /* ========================================================== PEKA V15 — HEADER HEIGHT 120PX Logo size preserved from V12/V13/V14. Desktop header reduced to 120px. ========================================================== */ @media (min-width:901px){ .pkp_structure_head .pkp_head_wrapper{ min-height:120px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:120px!important; } .pkp_structure_head .pkp_site_name{ min-height:120px!important; padding:6px 0 3px!important; } /* Preserve approved logo size */ .pkp_structure_head .pkp_site_name img{ width:1050px!important; max-width:calc(100% - 20px)!important; max-height:none!important; height:auto!important; margin:0 auto!important; } /* Keep Register/Login safely at the top-right */ .pkp_structure_head .pkp_navigation_user_wrapper{ top:6px!important; right:20px!important; } } /* Tablet */ @media (min-width:601px) and (max-width:900px){ .pkp_structure_head .pkp_head_wrapper{ min-height:145px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:145px!important; } .pkp_structure_head .pkp_site_name{ min-height:145px!important; padding:16px 0 8px!important; } .pkp_structure_head .pkp_site_name img{ width:820px!important; max-width:calc(100% - 20px)!important; max-height:none!important; height:auto!important; margin:0 auto!important; } } /* Mobile */ @media (max-width:600px){ .pkp_structure_head .pkp_head_wrapper{ min-height:130px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:130px!important; } .pkp_structure_head .pkp_site_name{ min-height:130px!important; padding:18px 0 7px!important; } .pkp_structure_head .pkp_site_name img{ width:680px!important; max-width:calc(100% - 14px)!important; max-height:none!important; height:auto!important; margin:0 auto!important; } } /* ========================================================== PEKA V16 — HEADER HEIGHT 70PX Logo size preserved from V12-V15. Desktop header reduced to 70px. ========================================================== */ @media (min-width:901px){ .pkp_structure_head .pkp_head_wrapper{ min-height:70px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:70px!important; } .pkp_structure_head .pkp_site_name{ min-height:70px!important; padding:2px 0 2px!important; } /* Preserve approved logo size */ .pkp_structure_head .pkp_site_name img{ width:1050px!important; max-width:calc(100% - 20px)!important; max-height:none!important; height:auto!important; margin:0 auto!important; } /* Register/Login remain at top-right */ .pkp_structure_head .pkp_navigation_user_wrapper{ top:4px!important; right:20px!important; } } /* Tablet */ @media (min-width:601px) and (max-width:900px){ .pkp_structure_head .pkp_head_wrapper{ min-height:120px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:120px!important; } .pkp_structure_head .pkp_site_name{ min-height:120px!important; padding:12px 0 6px!important; } .pkp_structure_head .pkp_site_name img{ width:820px!important; max-width:calc(100% - 20px)!important; max-height:none!important; height:auto!important; margin:0 auto!important; } } /* Mobile */ @media (max-width:600px){ .pkp_structure_head .pkp_head_wrapper{ min-height:115px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:115px!important; } .pkp_structure_head .pkp_site_name{ min-height:115px!important; padding:14px 0 6px!important; } .pkp_structure_head .pkp_site_name img{ width:680px!important; max-width:calc(100% - 14px)!important; max-height:none!important; height:auto!important; margin:0 auto!important; } } /* ========================================================== EDU SPORTIVO CONTENT LAYER Header PEKA di atas tetap dipertahankan. ========================================================== */ :root{ --es-primary:#F57C00; --es-secondary:#D95D00; --es-accent:#FFCC80; --es-light:#FFF7ED; --es-dark:#1F2937; --es-shadow:rgba(249,115,22,.20); } .es2026-home{ width:100%; max-width:1180px; margin:16px auto; padding:0 12px; font-family:"Segoe UI",Arial,sans-serif; } .es2026-banner{ position:relative; display:flex; align-items:center; width:100%; min-height:260px; overflow:hidden; border-radius:20px; padding:30px 42px; background: linear-gradient(135deg,rgba(245,124,0,.96),rgba(217,93,0,.90)), radial-gradient(circle at top right,rgba(255,255,255,.18),transparent 40%); box-shadow:0 12px 30px var(--es-shadow); } .es2026-banner{ transition:.4s ease; } .es2026-banner:hover{ transform:translateY(-3px); box-shadow:0 18px 45px rgba(0,0,0,.18); } .es2026-banner::before{ content:""; position:absolute; inset:0; background:none!important; opacity:.28; } .es2026-overlay{ position:absolute; inset:0; background:linear-gradient(90deg,rgba(249,115,22,.88),rgba(234,88,12,.72)); } .es2026-content{ position:relative; z-index:10; color:#fff; width:100%; max-width:900px; } .es2026-badge{ display:inline-block; padding:8px 18px; border-radius:40px; background:rgba(255,255,255,.22); border:1px solid rgba(255,255,255,.40); margin-bottom:18px; font-size:11px; letter-spacing:2px; font-weight:700; } .es2026-title{ font-size:56px; line-height:.95; font-weight:900; margin:0 0 2px; color:#fff; } .es2026-subtitle{ font-size:24px; color:#FFFFFF; margin:2px 0 10px; font-weight:700; } .es2026-text{ color:#fff; line-height:1.65; max-width:840px; margin-top:6px; font-size:15px; } .es2026-btn{ display:inline-block; margin:6px 10px 0 0; padding:11px 22px; font-size:13px; border-radius:40px; background:#fff; color:var(--es-secondary)!important; text-decoration:none!important; font-weight:700; transition:all .35s ease; box-shadow:0 10px 24px rgba(0,0,0,.12); } .es2026-btn:hover{ background:var(--es-accent); color:#6b2d00!important; transform:translateY(-4px); box-shadow:0 18px 36px var(--es-shadow); } .es2026-btn-primary{ background:var(--es-dark); color:#fff!important; } .es2026-btn-primary:hover{ background:#000; color:#fff!important; } .es2026-card{ background:#fff; border:1px solid #FED7AA; border-radius:18px; padding:24px; margin:24px 0; box-shadow:0 10px 24px rgba(0,0,0,.06); transition:.3s; } .es2026-card:hover{ transform:translateY(-4px); box-shadow:0 18px 40px rgba(0,0,0,.10); } .es2026-grid{ display:flex; flex-wrap:wrap; gap:20px; } .es2026-col{ flex:1 1 280px; } .es2026-metric{ background:#fff; border:1px solid #FED7AA; border-radius:16px; text-align:center; padding:20px; } .es2026-metric strong{ display:block; color:var(--es-secondary); font-size:24px; } @media(max-width:768px){ .es2026-banner{ min-height:200px; padding:20px 24px; } .es2026-title{ font-size:38px; } .es2026-subtitle{ font-size:24px; } } .es2026-home .es2026-buttons{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; align-items:center; } .es2026-home .es2026-buttons .es2026-btn{ margin:0; } @media(max-width:768px){ .es2026-content{max-width:100%;} .es2026-title{font-size:30px;} .es2026-subtitle{font-size:17px;} .es2026-text{font-size:14px;} .es2026-banner{padding:22px 24px; min-height:260px;} } .es2026-home .es2026-content{ animation:fadeUp .8s ease; } @keyframes fadeUp{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:translateY(0); } } /* Reserved namespace for About Journal Use only classes beginning with .es-about- This prevents conflicts with .es2026-* hero styles. */ .es2026-banner::after{ content:""; position:absolute; inset:0; background:linear-gradient(to right,rgba(0,0,0,.08),transparent 55%); pointer-events:none; } .es2026-title{ text-shadow:0 3px 12px rgba(0,0,0,.22); } .es2026-btn{ backdrop-filter:blur(4px); } .es2026-btn-primary{ background:#16324F; } /* ====================================================== PREMIUM ANIMATION - Added ====================================================== */ .es2026-banner{ animation:bannerFade .9s ease; } @keyframes bannerFade{ from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:translateY(0);} } .es2026-badge{animation:badgeSlide 1s ease;} @keyframes badgeSlide{ from{opacity:0;transform:translateX(-40px);} to{opacity:1;transform:translateX(0);} } .es2026-title{animation:titleZoom 1s ease;} @keyframes titleZoom{ 0%{opacity:0;transform:scale(.85);} 100%{opacity:1;transform:scale(1);} } .es2026-subtitle{animation:subtitleFade 1.2s ease;} @keyframes subtitleFade{ from{opacity:0;transform:translateX(30px);} to{opacity:1;transform:translateX(0);} } .es2026-text{animation:textFade 1.5s ease;} @keyframes textFade{ from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} } .es2026-btn{ position:relative; overflow:hidden; } .es2026-btn-primary{ animation:pulseButton 2.5s infinite; } @keyframes pulseButton{ 0%{transform:scale(1);box-shadow:0 0 0 rgba(245,124,0,.45);} 50%{transform:scale(1.05);box-shadow:0 0 24px rgba(245,124,0,.45);} 100%{transform:scale(1);box-shadow:0 0 0 rgba(245,124,0,0);} } .es2026-btn-primary::before{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-25deg); animation:shine 3s infinite; } @keyframes shine{ 0%{left:-120%;} 100%{left:160%;} } .es2026-banner::before{ animation:zoomCover 18s ease-in-out infinite alternate; } @keyframes zoomCover{ from{transform:scale(1);} to{transform:scale(1.03);} } /* ====================================================== VIEW CURRENT ISSUE BUTTON ANIMATION ====================================================== */ .es-current-btn{ position:relative; overflow:hidden; animation:pulseCurrent 2.5s infinite; transition:all .35s ease !important; } .es-current-btn:hover{ transform:translateY(-4px) scale(1.04); box-shadow:0 18px 36px rgba(245,124,0,.40) !important; } .es-current-btn::before{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.60),transparent); transform:skewX(-25deg); animation:currentShine 3s linear infinite; } @keyframes pulseCurrent{ 0%{ transform:scale(1); box-shadow:0 0 0 rgba(245,124,0,.35); } 50%{ transform:scale(1.05); box-shadow:0 0 22px rgba(245,124,0,.40); } 100%{ transform:scale(1); box-shadow:0 0 0 rgba(245,124,0,0); } } @keyframes currentShine{ 0%{left:-120%;} 100%{left:160%;} } /* ====================================================== AIMS & SCOPE SECTION (v7) ====================================================== */ .es-scope{ background:#fff; border-radius:18px; padding:30px; margin:30px 0; box-shadow:0 10px 28px rgba(0,0,0,.08); animation:fadeScope .8s ease; } @keyframes fadeScope{ from{opacity:0;transform:translateY(30px);} to{opacity:1;transform:translateY(0);} } .es-scope-title{ font-size:30px; font-weight:800; color:#F57C00; margin-bottom:10px; } .es-scope-desc{ font-size:15px; line-height:1.8; color:#555; margin-bottom:22px; } .es-scope-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; } .es-scope-card{ position:relative; overflow:hidden; background:#FFF7ED; border-left:5px solid #F57C00; border-radius:12px; padding:18px; transition:.35s ease; } .es-scope-card:hover{ transform:translateY(-6px); background:#fff; box-shadow:0 16px 32px rgba(245,124,0,.22); } .es-scope-card::before{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-25deg); transition:.7s; } .es-scope-card:hover::before{left:160%;} .es-scope-card h4{ margin:0; font-size:16px; color:#333; font-weight:700; } .es-scope-btn{ display:inline-block; margin-top:26px; padding:13px 30px; border-radius:35px; background:linear-gradient(135deg,#F57C00,#EA580C); color:#fff!important; text-decoration:none!important; font-weight:700; box-shadow:0 10px 24px rgba(245,124,0,.25); animation:pulseScope 2.6s infinite; transition:.35s; } .es-scope-btn:hover{transform:translateY(-4px);} @keyframes pulseScope{ 0%{transform:scale(1);} 50%{transform:scale(1.04);} 100%{transform:scale(1);} } /* ===================================================== SIDEBAR MENU PREMIUM - EDU SPORTIVO 2026 =====================================================*/ .pkp_block .content ul{padding:0;margin:0;list-style:none;} .pkp_block .content ul li{margin-bottom:12px;} .pkp_block .content ul li a{ display:flex;align-items:center;padding:13px 16px;border-radius:12px; background:linear-gradient(180deg,#fff,#FFF3E0); border:1px solid rgba(245,124,0,.12); color:#E65100!important;font-weight:700;text-decoration:none; box-shadow:0 5px 15px rgba(245,124,0,.12); transition:all .35s ease;position:relative;overflow:hidden;} .pkp_block .content ul li a:hover{ background:linear-gradient(135deg,#F57C00,#EA580C); color:#fff!important;transform:translateX(6px); box-shadow:0 12px 26px rgba(245,124,0,.30);} .pkp_block .content ul li a::before{ content:"➜";display:flex;align-items:center;justify-content:center; width:34px;height:34px;margin-right:12px;border-radius:50%; background:#fff;color:#F57C00;font-size:16px;font-weight:bold; transition:.35s;box-shadow:0 4px 10px rgba(245,124,0,.20);} .pkp_block .content ul li a:hover::before{transform:rotate(360deg);} .pkp_block .content ul li a::after{ content:"";position:absolute;top:0;left:-120%;width:60%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-25deg);transition:.8s;} .pkp_block .content ul li a:hover::after{left:160%;} /* ===================================================== SIDEBAR PREMIUM v9 - EDU SPORTIVO ===================================================== */ .sidebar-es-container{margin-bottom:12px;} .es-sidebar-btn{ display:flex; align-items:center; padding:13px 18px; border-radius:14px; text-decoration:none!important; font-weight:700; font-size:15px; color:#fff!important; background:linear-gradient(135deg,#FB8C00,#F57C00,#EF6C00); box-shadow:0 6px 18px rgba(245,124,0,.28); transition:all .35s ease; overflow:hidden; position:relative; } .es-sidebar-btn:hover{ transform:translateY(-3px); background:linear-gradient(135deg,#FF9800,#F57C00,#E65100); box-shadow:0 12px 28px rgba(245,124,0,.40); } .es-sidebar-btn:before{ content:""; position:absolute; left:-120%; top:0; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-25deg); transition:.8s; } .es-sidebar-btn:hover:before{ left:160%; } .es-sidebar-icon{ width:22px; height:22px; margin-right:12px; transition:.35s ease; } .es-sidebar-btn:hover .es-sidebar-icon{ transform:scale(1.15) rotate(12deg); } /* ====================================================== PEOPLE BLOCK FINAL ANIMATION v10 ====================================================== */ .people-title{ transition:all .35s ease; } .people-card{ transition:all .35s ease; cursor:pointer; border-radius:10px; } .people-card:hover{ transform:translateY(-4px); box-shadow:0 14px 28px rgba(245,124,0,.30)!important; } .people-card:active{ transform:scale(.97); } .people-card em.fa{ transition:all .35s ease; } .people-card:hover em.fa{ transform:rotate(360deg) scale(1.2); color:#FF9800!important; } .people-card a{ transition:all .3s ease; display:inline-block; text-decoration:none; } .people-card:hover a{ padding-left:5px; color:#F57C00!important; } .people-card::after{ content:""; display:block; position:absolute; } .sidebar-es-container, .people-card{ position:relative; overflow:hidden; } .sidebar-es-container::before, .people-card::before{ content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-25deg); transition:.8s; } .sidebar-es-container:hover::before, .people-card:hover::before{ left:160%; } /* ===================================================== JOURNAL POLICIES ANIMATION (Added) Add class="people-title" and class="people-card" in HTML ===================================================== */ .people-title{ transition:all .35s ease; } .people-title:hover{ transform:translateY(-3px); box-shadow:0 12px 28px rgba(245,124,0,.35)!important; } .people-card{ position:relative; overflow:hidden; transition:all .35s ease; cursor:pointer; animation:sidebarFloat 4s ease-in-out infinite; } .people-card:hover{ transform:translateY(-5px); box-shadow:0 16px 34px rgba(245,124,0,.35)!important; } .people-card:active{ transform:scale(.97); } .people-card::before{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-25deg); transition:.8s; } .people-card:hover::before{ left:160%; } .people-card em.fa{ transition:all .45s ease; } .people-card:hover em.fa{ transform:rotate(360deg) scale(1.18); color:#FF9800!important; } .people-card:hover a{ padding-left:8px; color:#BF5B00!important; transition:.35s; } .people-card:hover>div:first-child{ transform:scale(1.12); transition:.35s; } @keyframes sidebarFloat{ 0%{transform:translateY(0);} 50%{transform:translateY(-2px);} 100%{transform:translateY(0);} } /* ========================================================== EDU SPORTIVO CONTENT LAYER — SCOPE / SIDEBAR / FOOTER ========================================================== */ /* APPEND v15 AIMS SCOPE */ .es-scope-grid{display:flex!important;flex-wrap:wrap;gap:12px;align-items:stretch}.es-scope-card{flex:1 1 320px;background:#fff!important;border:2px solid rgba(245,124,0,.45)!important;border-left:2px solid rgba(245,124,0,.45)!important;border-radius:0!important;padding:16px 18px!important;min-height:62px;display:flex;align-items:center;justify-content:flex-start;box-shadow:none!important;overflow:hidden;position:relative;transition:all .35s ease}.es-scope-card h4{margin:0;font-size:17px;font-weight:600;color:#444;transition:.35s}.es-scope-card:hover{transform:translateY(-4px) scale(1.02);background:linear-gradient(135deg,#F57C00,#FB8C00)!important;border-color:#F57C00!important;box-shadow:0 12px 28px rgba(245,124,0,.28)!important}.es-scope-card:hover h4{color:#fff}.es-scope-card::after{content:'';position:absolute;top:0;left:-120%;width:50%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-25deg)}.es-scope-card:hover::after{animation:scopeShine .8s forwards}@keyframes scopeShine{from{left:-120%}to{left:160%}} /* ========================================================== APPEND v16 - Compact Aims & Scope (does not replace v15) ========================================================== */ .es-scope-grid{ display:grid !important; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:10px !important; margin-top:18px; } .es-scope-card{ position:relative; overflow:hidden; display:flex; align-items:center; justify-content:flex-start; min-height:46px !important; padding:10px 16px !important; background:#ffffff !important; border:2px solid #F57C00 !important; border-radius:4px !important; box-shadow:none !important; transition:all .30s ease; } .es-scope-card h4{ margin:0; font-size:15px !important; line-height:1.35; font-weight:600; color:#444 !important; transition:.3s; } .es-scope-card:hover{ background:linear-gradient(135deg,#F57C00,#FB8C00) !important; border-color:#F57C00 !important; transform:translateY(-3px); box-shadow:0 10px 20px rgba(245,124,0,.22) !important; } .es-scope-card:hover h4{ color:#fff !important; } .es-scope-card::before{ content:""; position:absolute; top:0; left:-120%; width:45%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent); transform:skewX(-25deg); transition:.8s; } .es-scope-card:hover::before{ left:160%; } /* ========================================================== APPEND v17 - Journal Policies Hover Animation ========================================================== */ .jp-card{ position:relative; overflow:hidden; transition:all .35s ease; cursor:pointer; } .jp-card:hover{ transform:translateY(-5px); box-shadow:0 16px 34px rgba(245,124,0,.30)!important; } .jp-card::before{ content:""; position:absolute; top:0; left:-130%; width:55%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-25deg); transition:.8s; } .jp-card:hover::before{ left:160%; } .jp-card em.fa{ transition:all .45s ease; } .jp-card:hover em.fa{ transform:rotate(360deg) scale(1.18); color:#FF9800!important; } .jp-card:hover a{ padding-left:8px; transition:.35s; } .jp-card:hover>div:first-child{ transform:scale(1.12); transition:.35s; } /* ========================================================== APPEND v18 - National Accreditation spacing (non-destructive) ========================================================== */ /* Beri ruang kiri-kanan pada blok National Accreditation */ .es-scope-title + div[style*="border-left: 6px solid #F57C00"]{ margin-left:18px !important; margin-right:18px !important; padding:24px 30px !important; box-sizing:border-box; } /* Rapikan paragraf */ .es-scope-title + div[style*="border-left: 6px solid #F57C00"] p{ margin:0 !important; line-height:2 !important; } /* Responsif */ @media (max-width:768px){ .es-scope-title + div[style*="border-left: 6px solid #F57C00"]{ margin-left:10px !important; margin-right:10px !important; padding:18px 18px !important; } } /* ========================================================== APPEND v19 - Premium HTML Tabs (Non-destructive) Add only - does not replace previous CSS ========================================================== */ .es-tab-menu{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin:20px auto; } .es-tab{ display:flex; align-items:center; justify-content:center; gap:8px; padding:14px 28px; background:#ffffff; border:2px solid #F57C00; border-radius:10px; font-weight:700; font-size:15px; color:#F57C00!important; text-decoration:none!important; transition:all .35s ease; box-shadow:0 5px 15px rgba(245,124,0,.12); position:relative; overflow:hidden; } .es-tab i{ font-size:15px; transition:.35s; } .es-tab:hover{ background:linear-gradient(135deg,#F57C00,#FB8C00); color:#fff!important; transform:translateY(-4px); box-shadow:0 12px 28px rgba(245,124,0,.30); } .es-tab:hover i{ color:#fff!important; transform:rotate(12deg) scale(1.15); } .es-tab::before{ content:""; position:absolute; top:0; left:-120%; width:55%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-25deg); transition:.8s; } .es-tab:hover::before{ left:160%; } .es-tab.active{ background:linear-gradient(135deg,#F57C00,#FB8C00); color:#fff!important; } .es-tab.active i{ color:#fff!important; } @media(max-width:768px){ .es-tab{ width:100%; } } /* ========================================================== APPEND v20 - Simple Orange Footer (Non-destructive) Only changes colors, no animation ========================================================== */ #pageFooter-bottom{ background:#F57C00 !important; color:#ffffff !important; padding:30px 0 !important; } #pageFooter-bottom .panel{ background:transparent !important; border:1px solid rgba(255,255,255,.25) !important; border-radius:8px !important; box-shadow:none !important; } #pageFooter-bottom .panel-heading, #pageFooter-bottom .panel-body{ background:transparent !important; color:#ffffff !important; border:none !important; } #pageFooter-bottom strong{ color:#ffffff !important; } #pageFooter-bottom a{ color:#FFE082 !important; text-decoration:none; } #pageFooter-bottom a:hover{ color:#FFF3C4 !important; text-decoration:underline; } #pageFooter-bottom img{ max-width:100%; } #pageFooter-bottom + div hr{ border:none; border-top:1px solid #FFD180; } /* ========================================================== APPEND v21 - Footer Only (No Boxes, Full Orange) Only footer styles. Other CSS remains unchanged. ========================================================== */ #pageFooter-bottom{ background:#F57C00 !important; color:#fff !important; padding:35px 25px !important; margin:0 !important; } #pageFooter-bottom .panel, #pageFooter-bottom .panel-success{ background:transparent !important; border:none !important; box-shadow:none !important; border-radius:0 !important; margin:0 !important; } #pageFooter-bottom .panel-heading, #pageFooter-bottom .panel-body{ background:transparent !important; border:none !important; color:#fff !important; padding:0 !important; } #pageFooter-bottom .panel-heading{ margin-bottom:8px; font-weight:700; } #pageFooter-bottom, #pageFooter-bottom p, #pageFooter-bottom div, #pageFooter-bottom span, #pageFooter-bottom strong{ color:#fff !important; } #pageFooter-bottom a{ color:#FFE082 !important; text-decoration:none !important; } #pageFooter-bottom a:hover{ color:#FFF8E1 !important; } #pageFooter-bottom img{ background:transparent !important; } /* Continue orange to visitor section */ #pageFooter-bottom + div, #pageFooter-bottom + div + div, #pageFooter-bottom + div + div + p, #pageFooter-bottom ~ p{ background:#F57C00 !important; color:#fff !important; margin:0 !important; padding:12px 25px !important; } #pageFooter-bottom ~ p a{ color:#FFE082 !important; } #pageFooter-bottom + div hr, #pageFooter-bottom + div + div hr{ display:none !important; } /* ========================================================== APPEND v22 - SIDEBAR PREMIUM ANIMATION ONLY ========================================================== */ .people-card,.jp-card,.sidebar-es-container,.es-sidebar-btn{transition:all .35s ease!important} .people-card:hover,.jp-card:hover,.sidebar-es-container:hover{transform:translateY(-5px)!important;box-shadow:0 16px 34px rgba(245,124,0,.28)!important} .people-card::before,.jp-card::before,.sidebar-es-container::before{content:"";position:absolute;top:0;left:-130%;width:55%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-25deg);transition:.8s;pointer-events:none} .people-card:hover::before,.jp-card:hover::before,.sidebar-es-container:hover::before{left:160%} .people-card em.fa,.jp-card em.fa,.sidebar-es-container em.fa{transition:transform .4s ease,color .4s ease} .people-card:hover em.fa,.jp-card:hover em.fa,.sidebar-es-container:hover em.fa{transform:rotate(360deg) scale(1.15);color:#FF9800!important} .people-card a,.jp-card a,.sidebar-es-container a{transition:all .35s ease} .people-card:hover a,.jp-card:hover a,.sidebar-es-container:hover a{padding-left:8px} .people-title:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(245,124,0,.30)!important} .es-sidebar-btn{position:relative;overflow:hidden} .es-sidebar-btn::after{content:"";position:absolute;top:0;left:-120%;width:45%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-25deg);transition:.8s} .es-sidebar-btn:hover::after{left:160%} .es-sidebar-btn:hover{transform:translateY(-4px) scale(1.02)!important} /* ========================================================== APPEND v23 - UNIVERSAL SIDEBAR ANIMATION (OJS 3.3) No HTML changes required ========================================================== */ /* All custom sidebar blocks */ .pkp_block .content > div, .pkp_block .content > p, .pkp_block .content table{ transition:all .35s ease !important; } /* Any sidebar card with inline style */ .pkp_block .content div[style*="border-radius"]{ position:relative; overflow:hidden; transition:all .35s ease !important; } .pkp_block .content div[style*="border-radius"]:hover{ transform:translateY(-4px); box-shadow:0 16px 30px rgba(245,124,0,.25)!important; } /* Shine effect */ .pkp_block .content div[style*="border-radius"]::before{ content:""; position:absolute; top:0; left:-130%; width:45%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-25deg); transition:left .8s ease; pointer-events:none; z-index:2; } .pkp_block .content div[style*="border-radius"]:hover::before{ left:160%; } /* Animate all FA icons in sidebar */ .pkp_block .content em.fa{ transition:transform .45s ease,color .35s ease !important; } .pkp_block .content div[style*="border-radius"]:hover em.fa{ transform:rotate(360deg) scale(1.18); color:#FF9800!important; } /* Animate links */ .pkp_block .content a{ transition:all .3s ease !important; } .pkp_block .content div[style*="border-radius"]:hover a{ padding-left:6px; } /* Images */ .pkp_block .content img{ transition:transform .4s ease, box-shadow .4s ease; } .pkp_block .content img:hover{ transform:scale(1.03); box-shadow:0 12px 24px rgba(245,124,0,.22); } /* Buttons */ .pkp_block .content a[href]{ position:relative; } .pkp_block .content a[href]:hover{ filter:brightness(1.04); } /* ========================================================== EDU SPORTIVO ARTICLE TITLE + GALLEY BUTTONS ========================================================== */ /* ========================================================== APPEND v25 - Orange Article Title + PDF Buttons ONLY ========================================================== */ .obj_article_summary .title a, .obj_article_summary h3 a, .cmp_article_list .title a, .article-summary-title a, .title a[href*="/article/view/"]{ color:#F57C00 !important; } .obj_article_summary .title a:hover, .obj_article_summary h3 a:hover, .cmp_article_list .title a:hover, .article-summary-title a:hover, .title a[href*="/article/view/"]:hover{ color:#E65100 !important; } .obj_galley_link, .cmp_galley_link, a.obj_galley_link, a.cmp_galley_link, a[href*="similarity"]{ background:#FFD04C !important; border-color:#FFD04C !important; color:#fff !important; } .obj_galley_link:hover, .cmp_galley_link:hover, a.obj_galley_link:hover, a.cmp_galley_link:hover, a[href*="similarity"]:hover{ background:#FFDD63 !important; border-color:#FFDD63 !important; color:#fff !important; } /* ========================================================== FINAL SAFETY: Do not let Edu content rules alter PEKA header dimensions. ========================================================== */ .pkp_structure_head, .pkp_head_wrapper, .pkp_site_name_wrapper, .pkp_site_name, .pkp_site_nav_menu, .pkp_navigation_primary_wrapper, .pkp_navigation_primary_row { box-sizing:border-box; } /* ========================================================== EDU SPORTIVO — JOURNAL METRICS SIDEBAR ---------------------------------------------------------- Designed for: .es-journal-metrics Used with the Journal Metrics HTML block. Scoped to avoid changing existing PEKA header, navigation, hero, sidebar menu, and footer. ========================================================== */ .es-journal-metrics{ width:100%; box-sizing:border-box; margin:0 0 24px 0; padding:18px 16px 17px; background:#FFFFFF; border:1px solid #E7E7E7; border-bottom:3px solid #26748B; border-radius:0; box-shadow:0 3px 12px rgba(0,0,0,.07); font-family:Arial,Helvetica,sans-serif; color:#333333; } /* Header */ .es-journal-metrics .es-metrics-header{ margin:0; padding:0 0 12px; border-bottom:1px solid #DCDCDC; } .es-journal-metrics .es-metrics-header h3{ margin:0; padding:0; color:#292929!important; font-size:19px; line-height:1.25; font-weight:800; } /* Period badge */ .es-journal-metrics .es-metrics-period{ display:inline-flex; align-items:center; gap:7px; margin:13px 0 20px; padding:5px 10px; box-sizing:border-box; background:#E7F0F3; border-radius:16px; color:#205F75; font-size:12px; line-height:1.2; font-weight:700; white-space:nowrap; } /* CSS calendar icon */ .es-journal-metrics .es-calendar-icon{ position:relative; display:inline-block; width:14px; height:13px; flex:0 0 14px; box-sizing:border-box; border:1.5px solid #28748B; border-radius:2px; } .es-journal-metrics .es-calendar-icon:before{ content:""; position:absolute; left:1px; right:1px; top:3px; height:1px; background:#28748B; } .es-journal-metrics .es-calendar-icon:after{ content:""; position:absolute; left:3px; top:-3px; width:2px; height:3px; border-left:1.5px solid #28748B; border-right:1.5px solid #28748B; } /* Metrics grid */ .es-journal-metrics .es-metrics-grid{ display:grid; grid-template-columns:1fr 1fr; column-gap:20px; row-gap:27px; margin:0 0 24px; } .es-journal-metrics .es-metric-item{ min-width:0; } .es-journal-metrics .es-metric-number{ position:relative; display:inline-block; margin:0; font-size:25px; line-height:1; font-weight:800; color:#173F4C; z-index:1; } .es-journal-metrics .es-metric-number:after{ content:""; position:absolute; left:-5px; right:-3px; bottom:0; height:5px; background:#D8E7EB; border-radius:4px; z-index:-1; } .es-journal-metrics .es-metric-label{ margin-top:5px; color:#555555; font-size:13px; line-height:1.35; font-weight:400; } /* Author Diversity heading */ .es-journal-metrics .es-diversity-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 0 13px; } .es-journal-metrics .es-diversity-header h4{ margin:0!important; padding:0!important; color:#292929!important; font-size:17px!important; line-height:1.2!important; font-weight:800!important; } .es-journal-metrics .es-diversity-header a{ display:inline-flex; align-items:center; gap:3px; padding:5px 10px; border:1px solid #8FBFD0; border-radius:18px; background:#F7FBFC; color:#286D84!important; font-size:12px; line-height:1.1; font-weight:700; text-decoration:none!important; white-space:nowrap; } .es-journal-metrics .es-diversity-header a:hover{ background:#EAF3F6; color:#1D5D72!important; } .es-journal-metrics .es-diversity-header a span{ font-size:18px; line-height:10px; } /* Diversity bar */ .es-journal-metrics .es-diversity-bar{ display:flex; width:100%; height:6px; margin:0 0 13px; padding:0; overflow:hidden; background:#EEEEEE; border-radius:5px; } .es-journal-metrics .es-diversity-bar span{ display:block; height:100%; margin:0; padding:0; } /* Distribution: 16 / 14 / 11 / 9 / 7 / 43 */ .es-journal-metrics .es-country-id{width:16%;background:#28748B;} .es-journal-metrics .es-country-us{width:14%;background:#E0A32A;} .es-journal-metrics .es-country-uk{width:11%;background:#C74473;} .es-journal-metrics .es-country-au{width:9%;background:#28748B;} .es-journal-metrics .es-country-sg{width:7%;background:#9B4B6D;} .es-journal-metrics .es-country-other{width:43%;background:#9CA3A7;} /* Country list */ .es-journal-metrics .es-country-list{ display:flex; flex-direction:column; gap:9px; margin:0 0 17px; } .es-journal-metrics .es-country-row{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0; padding:0; color:#555555; font-size:13px; line-height:1.25; } .es-journal-metrics .es-country-row strong{ margin:0; color:#333333; font-size:13px; font-weight:700; } .es-journal-metrics .es-country-name{ display:flex; align-items:center; gap:7px; min-width:0; } .es-journal-metrics .es-country-dot{ display:inline-block; width:7px; height:7px; flex:0 0 7px; border-radius:50%; } .es-journal-metrics .es-dot-id{background:#28748B;} .es-journal-metrics .es-dot-us{background:#D8D8D8;} .es-journal-metrics .es-dot-uk{background:#E2A12C;} .es-journal-metrics .es-dot-au{background:#D04472;} .es-journal-metrics .es-dot-sg{background:#28748B;} .es-journal-metrics .es-dot-other{background:#9CA3A7;} /* View Details button */ .es-journal-metrics .es-metrics-button{ display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:36px; box-sizing:border-box; margin:0; padding:8px 12px; background:#28748B; border:0; border-radius:3px; color:#FFFFFF!important; font-size:13px; line-height:1.2; font-weight:700; text-align:center; text-decoration:none!important; transition:background .2s ease,transform .2s ease; } .es-journal-metrics .es-metrics-button:hover{ background:#1D5D72; color:#FFFFFF!important; transform:translateY(-1px); } /* Small chart icon */ .es-journal-metrics .es-chart-icon{ position:relative; display:inline-block; width:12px; height:14px; flex:0 0 12px; box-sizing:border-box; border-left:1.5px solid #FFFFFF; border-bottom:1.5px solid #FFFFFF; } .es-journal-metrics .es-chart-icon:before{ content:""; position:absolute; left:3px; bottom:0; width:2px; height:7px; background:#FFFFFF; box-shadow:4px -3px 0 #FFFFFF,8px -7px 0 #FFFFFF; } /* Prevent global image/link/card rules from affecting this block */ .es-journal-metrics img{ transform:none!important; } .es-journal-metrics a:hover{ transform:none; } /* Sidebar width compatibility */ @media (min-width:901px){ .es-journal-metrics{ width:100%; } } /* Tablet */ @media (max-width:900px){ .es-journal-metrics{ margin-top:20px; } } /* Mobile */ @media (max-width:600px){ .es-journal-metrics{ padding:16px 14px 15px; } .es-journal-metrics .es-metrics-grid{ column-gap:16px; row-gap:24px; } .es-journal-metrics .es-metric-number{ font-size:23px; } .es-journal-metrics .es-metric-label{ font-size:12px; } .es-journal-metrics .es-diversity-header h4{ font-size:16px!important; } .es-journal-metrics .es-diversity-header a{ font-size:11px; padding:5px 8px; } } /* ========================================================== FINAL OVERRIDE — JOURNAL METRICS V2 ---------------------------------------------------------- Compatible with the Journal Metrics HTML supplied in chat: .es-metrics-toggle .es-country-button .es-country-flag .es-metrics-modal .es-metrics-modal-overlay .es-metrics-modal-box .es-modal-header .es-modal-close .es-modal-section .es-stat-row .es-modal-country ---------------------------------------------------------- This block is intentionally appended at the end so it overrides older Journal Metrics rules in this CSS file. ========================================================== */ /* ========================================================== 1. MAIN JOURNAL METRICS CARD ========================================================== */ .es-journal-metrics{ position:relative!important; width:100%!important; box-sizing:border-box!important; margin:0 0 24px!important; padding:18px 16px 17px!important; background:#FFFFFF!important; border:1px solid #E4E4E4!important; border-bottom:3px solid #28748B!important; border-radius:0!important; box-shadow:0 3px 12px rgba(0,0,0,.07)!important; color:#333333!important; font-family:Arial,Helvetica,sans-serif!important; } /* ========================================================== 2. HIDDEN CHECKBOX ========================================================== */ .es-journal-metrics .es-metrics-toggle{ position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; clip-path:inset(50%)!important; white-space:nowrap!important; border:0!important; opacity:0!important; } /* ========================================================== 3. HEADER ========================================================== */ .es-journal-metrics .es-metrics-header{ margin:0 0 12px!important; padding:0 0 11px!important; border-bottom:1px solid #DDDDDD!important; } .es-journal-metrics .es-metrics-header h3{ margin:0!important; padding:0!important; color:#292929!important; font-size:19px!important; line-height:1.2!important; font-weight:800!important; } /* ========================================================== 4. PERIOD ========================================================== */ .es-journal-metrics .es-metrics-period{ display:inline-flex!important; align-items:center!important; gap:7px!important; margin:0 0 20px!important; padding:5px 10px!important; box-sizing:border-box!important; background:#E7F0F3!important; border-radius:16px!important; color:#245F73!important; font-size:12px!important; line-height:1.2!important; font-weight:700!important; white-space:nowrap!important; } /* Calendar icon */ .es-journal-metrics .es-calendar-icon{ position:relative!important; display:inline-block!important; width:14px!important; height:13px!important; min-width:14px!important; box-sizing:border-box!important; border:1.5px solid #28748B!important; border-radius:2px!important; } .es-journal-metrics .es-calendar-icon::before{ content:""!important; position:absolute!important; left:1px!important; right:1px!important; top:3px!important; height:1px!important; background:#28748B!important; } .es-journal-metrics .es-calendar-icon::after{ content:""!important; position:absolute!important; left:3px!important; top:-3px!important; width:2px!important; height:3px!important; border-left:1.5px solid #28748B!important; border-right:1.5px solid #28748B!important; } /* ========================================================== 5. METRICS GRID ========================================================== */ .es-journal-metrics .es-metrics-grid{ display:grid!important; grid-template-columns:1fr 1fr!important; column-gap:20px!important; row-gap:27px!important; margin:0 0 24px!important; padding:0!important; } .es-journal-metrics .es-metric-item{ min-width:0!important; margin:0!important; padding:0!important; } .es-journal-metrics .es-metric-number{ position:relative!important; display:inline-block!important; margin:0!important; padding:0!important; color:#173F4C!important; font-size:25px!important; line-height:1!important; font-weight:800!important; z-index:1!important; } .es-journal-metrics .es-metric-number::after{ content:""!important; position:absolute!important; left:-5px!important; right:-3px!important; bottom:0!important; height:5px!important; background:#D8E7EB!important; border-radius:4px!important; z-index:-1!important; } .es-journal-metrics .es-metric-label{ margin:5px 0 0!important; padding:0!important; color:#555555!important; font-size:13px!important; line-height:1.35!important; font-weight:400!important; } /* ========================================================== 6. AUTHOR DIVERSITY HEADER ========================================================== */ .es-journal-metrics .es-diversity-header{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:8px!important; margin:0 0 10px!important; padding:0!important; } .es-journal-metrics .es-diversity-header h4{ margin:0!important; padding:0!important; color:#292929!important; font-size:17px!important; line-height:1.2!important; font-weight:800!important; } /* 18 countries */ .es-journal-metrics .es-country-button{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:4px!important; margin:0!important; padding:5px 10px!important; box-sizing:border-box!important; background:#F5F9FA!important; border:1px solid #8FBFD0!important; border-radius:18px!important; color:#286D84!important; font-size:12px!important; line-height:1.2!important; font-weight:700!important; white-space:nowrap!important; cursor:pointer!important; text-decoration:none!important; } .es-journal-metrics .es-country-button:hover{ background:#E8F3F6!important; border-color:#72AFC2!important; color:#1D5D72!important; } .es-journal-metrics .es-country-button span{ display:inline-block!important; margin:0!important; padding:0!important; font-size:18px!important; line-height:10px!important; } /* ========================================================== 7. DIVERSITY BAR ========================================================== */ .es-journal-metrics .es-diversity-bar{ display:flex!important; width:100%!important; height:6px!important; margin:0 0 12px!important; padding:0!important; overflow:hidden!important; background:#EEEEEE!important; border-radius:5px!important; } .es-journal-metrics .es-diversity-bar span{ display:block!important; height:100%!important; margin:0!important; padding:0!important; flex-shrink:0!important; } /* ========================================================== 8. COUNTRY LIST ========================================================== */ .es-journal-metrics .es-country-list{ display:flex!important; flex-direction:column!important; gap:9px!important; width:100%!important; margin:0 0 17px!important; padding:0!important; } .es-journal-metrics .es-country-row{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; width:100%!important; margin:0!important; padding:0!important; color:#555555!important; font-size:13px!important; line-height:1.3!important; } .es-journal-metrics .es-country-name{ display:flex!important; align-items:center!important; gap:8px!important; min-width:0!important; color:#555555!important; } .es-journal-metrics .es-country-row strong{ flex:0 0 auto!important; margin:0!important; padding:0!important; color:#333333!important; font-size:13px!important; line-height:1.3!important; font-weight:700!important; } /* ========================================================== 9. COUNTRY FLAGS ---------------------------------------------------------- Important: Global Edu Sportivo CSS contains img:hover rules. These rules completely neutralize them here. ========================================================== */ .es-journal-metrics .es-country-flag{ display:inline-block!important; width:20px!important; height:14px!important; min-width:20px!important; max-width:20px!important; min-height:14px!important; max-height:14px!important; margin:0!important; padding:0!important; box-sizing:border-box!important; object-fit:cover!important; object-position:center!important; border:0!important; border-radius:1px!important; background:transparent!important; transform:none!important; box-shadow:none!important; vertical-align:middle!important; } .es-journal-metrics .es-country-flag:hover{ transform:none!important; box-shadow:none!important; filter:none!important; } /* Other dot */ .es-journal-metrics .es-country-dot.other{ display:inline-block!important; width:7px!important; height:7px!important; min-width:7px!important; margin:0!important; padding:0!important; border-radius:50%!important; background:#9FA5A8!important; } /* ========================================================== 10. VIEW DETAILS BUTTON ========================================================== */ .es-journal-metrics .es-metrics-button{ display:flex!important; align-items:center!important; justify-content:center!important; gap:10px!important; width:100%!important; min-height:36px!important; box-sizing:border-box!important; margin:0!important; padding:9px 12px!important; background:#28748B!important; border:0!important; border-radius:4px!important; color:#FFFFFF!important; font-size:13px!important; line-height:1.2!important; font-weight:700!important; text-align:center!important; text-decoration:none!important; cursor:pointer!important; transition: background .2s ease, transform .2s ease!important; } .es-journal-metrics .es-metrics-button:hover{ background:#1D5D72!important; color:#FFFFFF!important; transform:translateY(-1px)!important; } /* Chart icon */ .es-journal-metrics .es-chart-icon{ position:relative!important; display:inline-block!important; width:13px!important; height:14px!important; min-width:13px!important; box-sizing:border-box!important; border-left:1.5px solid #FFFFFF!important; border-bottom:1.5px solid #FFFFFF!important; } .es-journal-metrics .es-chart-icon::before{ content:""!important; position:absolute!important; left:3px!important; bottom:0!important; width:2px!important; height:6px!important; background:#FFFFFF!important; box-shadow: 4px -3px 0 #FFFFFF, 8px -7px 0 #FFFFFF!important; } /* ========================================================== 11. CSS-ONLY MODAL ========================================================== */ .es-journal-metrics .es-metrics-modal{ position:fixed!important; top:0!important; left:0!important; width:100vw!important; height:100vh!important; display:none!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; padding:20px!important; z-index:2147483000!important; } /* Checkbox opens modal */ .es-journal-metrics .es-metrics-toggle:checked ~ .es-metrics-modal{ display:flex!important; } /* Dark backdrop */ .es-journal-metrics .es-metrics-modal-overlay{ position:absolute!important; top:0!important; left:0!important; width:100%!important; height:100%!important; margin:0!important; padding:0!important; background:rgba(0,0,0,.58)!important; cursor:pointer!important; } /* Modal dialog */ .es-journal-metrics .es-metrics-modal-box{ position:relative!important; z-index:2!important; width:100%!important; max-width:650px!important; max-height:88vh!important; overflow-y:auto!important; overflow-x:hidden!important; box-sizing:border-box!important; margin:0!important; padding:22px!important; background:#FFFFFF!important; border:0!important; border-radius:10px!important; box-shadow:0 20px 60px rgba(0,0,0,.30)!important; color:#333333!important; } /* ========================================================== 12. MODAL HEADER ========================================================== */ .es-journal-metrics .es-modal-header{ display:flex!important; align-items:flex-start!important; justify-content:space-between!important; gap:20px!important; margin:0 0 5px!important; padding:0 0 15px!important; border-bottom:1px solid #DDDDDD!important; } .es-journal-metrics .es-modal-header h2{ margin:0!important; padding:0!important; color:#222222!important; font-size:22px!important; line-height:1.2!important; font-weight:800!important; } .es-journal-metrics .es-modal-header p{ margin:5px 0 0!important; padding:0!important; color:#777777!important; font-size:12px!important; line-height:1.4!important; } /* Close */ .es-journal-metrics .es-modal-close{ display:flex!important; align-items:center!important; justify-content:center!important; width:34px!important; height:34px!important; min-width:34px!important; margin:0!important; padding:0!important; box-sizing:border-box!important; background:#F1F1F1!important; border:0!important; border-radius:50%!important; color:#555555!important; font-size:25px!important; line-height:1!important; cursor:pointer!important; transition:background .2s ease!important; } .es-journal-metrics .es-modal-close:hover{ background:#E4E4E4!important; color:#333333!important; transform:none!important; } /* ========================================================== 13. MODAL SECTIONS ========================================================== */ .es-journal-metrics .es-modal-section{ margin:0!important; padding:17px 0!important; border-bottom:1px solid #EEEEEE!important; } .es-journal-metrics .es-modal-section:last-child{ border-bottom:0!important; } .es-journal-metrics .es-modal-section h3{ margin:0 0 12px!important; padding:0!important; color:#222222!important; font-size:16px!important; line-height:1.25!important; font-weight:800!important; } /* ========================================================== 14. MODAL STAT ROWS ========================================================== */ .es-journal-metrics .es-stat-row{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:20px!important; margin:0!important; padding:8px 0!important; border-bottom:1px solid #F0F0F0!important; color:#555555!important; font-size:13px!important; line-height:1.35!important; } .es-journal-metrics .es-stat-row:last-child{ border-bottom:0!important; } .es-journal-metrics .es-stat-row strong{ flex:0 0 auto!important; color:#222222!important; font-size:14px!important; font-weight:700!important; } /* ========================================================== 15. OUTCOME BOX ========================================================== */ .es-journal-metrics .es-outcome-box{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:20px!important; margin:0!important; padding:13px 15px!important; box-sizing:border-box!important; background:#EDF6F8!important; border-radius:7px!important; color:#28677A!important; font-size:14px!important; line-height:1.3!important; font-weight:700!important; } .es-journal-metrics .es-outcome-box strong{ color:#174D60!important; font-size:23px!important; font-weight:800!important; } /* ========================================================== 16. MODAL COUNTRY COUNT ========================================================== */ .es-journal-metrics .es-country-count{ float:right!important; display:inline-block!important; margin:0!important; padding:4px 8px!important; background:#EDF4F6!important; border-radius:12px!important; color:#28677A!important; font-size:11px!important; line-height:1.2!important; font-weight:700!important; } /* ========================================================== 17. MODAL COUNTRY LIST ========================================================== */ .es-journal-metrics .es-modal-country{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:15px!important; margin:0!important; padding:8px 0!important; border-bottom:1px solid #F1F1F1!important; color:#555555!important; font-size:13px!important; line-height:1.3!important; } .es-journal-metrics .es-modal-country > div{ display:flex!important; align-items:center!important; gap:9px!important; min-width:0!important; } .es-journal-metrics .es-modal-country strong{ flex:0 0 auto!important; margin:0!important; padding:0!important; color:#333333!important; font-weight:700!important; } .es-journal-metrics .es-modal-country .es-country-flag{ width:20px!important; height:14px!important; min-width:20px!important; max-width:20px!important; } /* ========================================================== 18. PROTECT METRICS FROM GLOBAL OJS / EDU RULES ========================================================== */ .es-journal-metrics *, .es-journal-metrics *::before, .es-journal-metrics *::after{ box-sizing:border-box; } .es-journal-metrics img{ max-width:none!important; transform:none!important; filter:none!important; } .es-journal-metrics img:hover{ transform:none!important; box-shadow:none!important; } .es-journal-metrics a:hover{ padding-left:0!important; } /* ========================================================== 19. MOBILE ========================================================== */ @media(max-width:600px){ .es-journal-metrics{ padding:16px 14px 15px!important; } .es-journal-metrics .es-metrics-grid{ column-gap:15px!important; row-gap:24px!important; } .es-journal-metrics .es-metric-number{ font-size:23px!important; } .es-journal-metrics .es-metric-label{ font-size:12px!important; } .es-journal-metrics .es-diversity-header h4{ font-size:16px!important; } .es-journal-metrics .es-country-button{ padding:5px 8px!important; font-size:11px!important; } .es-journal-metrics .es-metrics-modal{ padding:10px!important; } .es-journal-metrics .es-metrics-modal-box{ max-height:92vh!important; padding:17px!important; border-radius:9px!important; } .es-journal-metrics .es-modal-header h2{ font-size:19px!important; } .es-journal-metrics .es-modal-section{ padding:14px 0!important; } .es-journal-metrics .es-modal-country{ font-size:12px!important; } } /* ========================================================== 20. ACCESSIBILITY / REDUCED MOTION ========================================================== */ @media(prefers-reduced-motion:reduce){ .es-journal-metrics *, .es-journal-metrics *::before, .es-journal-metrics *::after{ transition:none!important; animation:none!important; scroll-behavior:auto!important; } } /* ========================================================== EDU SPORTIVO — JOURNAL METRICS ORANGE / NATIVE DETAILS VERSION FINAL OVERRIDE FOR OJS 3.3.0-20 ---------------------------------------------------------- - Uses
/ - No checkbox - No JavaScript - No modal dependency - Orange palette matching PEKA/National Accreditation - Scoped with new class names to avoid old CSS conflicts ========================================================== */ .es-journal-metrics-orange{ width:100%!important; max-width:100%!important; margin:0 0 20px!important; padding:0!important; box-sizing:border-box!important; font-family:Arial,Helvetica,sans-serif!important; } .es-journal-metrics-orange *, .es-journal-metrics-orange *::before, .es-journal-metrics-orange *::after{ box-sizing:border-box!important; } .es-journal-metrics-orange img{ max-width:none!important; } /* ========================================================== HEADER ========================================================== */ .es-metrics-orange-header{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-height:52px!important; margin:0 0 16px!important; padding:11px 16px!important; background:linear-gradient( 135deg, #3CA24C 0%, #FFD04C 58%, #FFDD63 100% )!important; border:0!important; border-radius:14px!important; box-shadow: 0 7px 18px rgba(217,101,18,.22)!important; } .es-metrics-orange-header span{ display:block!important; margin:0!important; padding:0!important; color:#FFFFFF!important; font-size:20px!important; line-height:1.2!important; font-weight:800!important; text-align:center!important; } /* ========================================================== MAIN CARD ========================================================== */ .es-metrics-orange-card{ width:100%!important; margin:0!important; padding:20px!important; background:#FFFFFF!important; border:1px solid #FFD8B8!important; border-radius:14px!important; box-shadow: 0 5px 18px rgba(217,101,18,.10)!important; } /* ========================================================== PERIOD ========================================================== */ .es-metrics-orange-period{ display:inline-flex!important; align-items:center!important; margin:0 0 22px!important; padding:7px 14px!important; background:#FFF7EF!important; border:1px solid #FFB866!important; border-radius:30px!important; color:#3CA24C!important; font-size:12px!important; line-height:1.2!important; font-weight:700!important; } /* ========================================================== METRICS GRID ========================================================== */ .es-metrics-orange-grid{ display:grid!important; grid-template-columns:1fr 1fr!important; column-gap:22px!important; row-gap:27px!important; width:100%!important; margin:0 0 25px!important; padding:0!important; } .es-metric-orange-item{ min-width:0!important; margin:0!important; padding:0!important; } .es-metric-orange-number{ position:relative!important; display:inline-block!important; margin:0!important; padding:0!important; color:#17485A!important; font-size:29px!important; line-height:1!important; font-weight:800!important; } .es-metric-orange-number::after{ content:""!important; position:absolute!important; left:-5px!important; right:-3px!important; bottom:-1px!important; height:6px!important; background:#DDEBED!important; border-radius:5px!important; z-index:0!important; } .es-metric-orange-label{ position:relative!important; margin:6px 0 0!important; padding:0!important; color:#555555!important; font-size:13px!important; line-height:1.35!important; font-weight:400!important; } /* ========================================================== AUTHOR DIVERSITY HEADER ========================================================== */ .es-metrics-orange-diversity-head{ display:flex!important; align-items:center!important; justify-content:space-between!important; width:100%!important; gap:10px!important; margin:0 0 10px!important; padding:0!important; } .es-metrics-orange-diversity-head h4{ flex:1 1 auto!important; margin:0!important; padding:0!important; color:#222222!important; font-size:17px!important; line-height:1.15!important; font-weight:800!important; } .es-metrics-orange-countries{ display:inline-flex!important; align-items:center!important; justify-content:center!important; flex:0 0 auto!important; padding:6px 10px!important; background:#F5FBF6!important; border:1px solid #F5B66A!important; border-radius:30px!important; color:#3CA24C!important; font-size:12px!important; line-height:1!important; font-weight:700!important; white-space:nowrap!important; } .es-metrics-orange-countries b{ display:inline-block!important; margin-left:4px!important; color:#3CA24C!important; font-size:17px!important; line-height:10px!important; } /* ========================================================== DIVERSITY BAR ========================================================== */ .es-metrics-orange-bar{ display:flex!important; width:100%!important; height:7px!important; margin:0 0 13px!important; padding:0!important; overflow:hidden!important; background:#EEEEEE!important; border-radius:6px!important; } .es-metrics-orange-bar span{ display:block!important; height:100%!important; margin:0!important; padding:0!important; } .es-metrics-orange-bar span:nth-child(1){ background:#3CA24C!important; } .es-metrics-orange-bar span:nth-child(2){ background:#FFD04C!important; } .es-metrics-orange-bar span:nth-child(3){ background:#FFDD63!important; } .es-metrics-orange-bar span:nth-child(4){ background:#FFB866!important; } .es-metrics-orange-bar span:nth-child(5){ background:#FFE58A!important; } .es-metrics-orange-bar span:nth-child(6){ background:#A5A5A5!important; } /* ========================================================== COUNTRY LIST ========================================================== */ .es-metrics-orange-countries-list{ display:flex!important; flex-direction:column!important; width:100%!important; gap:9px!important; margin:0 0 18px!important; padding:0!important; } .es-metrics-orange-country{ display:flex!important; align-items:center!important; justify-content:space-between!important; width:100%!important; gap:10px!important; margin:0!important; padding:0!important; color:#555555!important; font-size:13px!important; line-height:1.3!important; } .es-metrics-orange-country > div{ display:flex!important; align-items:center!important; min-width:0!important; gap:8px!important; } .es-metrics-orange-country strong{ flex:0 0 auto!important; margin:0!important; padding:0!important; color:#333333!important; font-size:13px!important; font-weight:700!important; } .es-metrics-orange-country img{ display:block!important; width:20px!important; min-width:20px!important; max-width:20px!important; height:14px!important; min-height:14px!important; max-height:14px!important; margin:0!important; padding:0!important; object-fit:cover!important; border:0!important; border-radius:1px!important; box-shadow:none!important; transform:none!important; } .es-orange-other-dot{ display:inline-block!important; width:7px!important; min-width:7px!important; height:7px!important; margin:0 5px 0 2px!important; background:#A5A5A5!important; border-radius:50%!important; } /* ========================================================== CLICKABLE VIEW DETAILS Native HTML
/ ========================================================== */ .es-metrics-orange-details{ display:block!important; width:100%!important; margin:0!important; padding:0!important; } /* Remove browser marker */ .es-metrics-orange-details > summary{ list-style:none!important; } .es-metrics-orange-details > summary::-webkit-details-marker{ display:none!important; } /* Actual clickable button */ .es-metrics-orange-details > summary{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-height:44px!important; margin:0!important; padding:11px 18px!important; background:linear-gradient( 135deg, #3CA24C 0%, #FFD04C 58%, #FFDD63 100% )!important; border:0!important; border-radius:8px!important; color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif!important; font-size:14px!important; line-height:1.2!important; font-weight:700!important; text-align:center!important; text-decoration:none!important; cursor:pointer!important; user-select:none!important; box-shadow: 0 5px 12px rgba(217,101,18,.22)!important; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease!important; } .es-metrics-orange-details > summary:hover{ color:#FFFFFF!important; background:linear-gradient( 135deg, #C4570D 0%, #E96D12 58%, #F28C28 100% )!important; transform:translateY(-1px)!important; box-shadow: 0 8px 18px rgba(217,101,18,.28)!important; } .es-metrics-orange-details > summary:focus{ outline:2px solid #FFE58A!important; outline-offset:2px!important; } .es-metrics-orange-details > summary:active{ transform:translateY(0)!important; } .es-orange-chart-icon{ display:inline-flex!important; align-items:center!important; margin-left:3px!important; color:#FFFFFF!important; font-size:17px!important; line-height:1!important; font-weight:700!important; } /* ========================================================== OPEN STATE ========================================================== */ .es-metrics-orange-details[open] > summary{ border-radius:8px 8px 0 0!important; } .es-metrics-orange-details[open] > summary .es-orange-chart-icon{ transform:rotate(90deg)!important; } /* ========================================================== DETAIL CONTENT ========================================================== */ .es-metrics-orange-detail-content{ width:100%!important; margin:0!important; padding:17px!important; background:#FFFDFB!important; border:1px solid #FFD8B8!important; border-top:0!important; border-radius:0 0 10px 10px!important; animation:esMetricsOrangeOpen .22s ease!important; } @keyframes esMetricsOrangeOpen{ from{ opacity:0; transform:translateY(-4px); } to{ opacity:1; transform:translateY(0); } } /* ========================================================== DETAIL TITLE ========================================================== */ .es-orange-detail-title{ display:flex!important; align-items:flex-start!important; justify-content:space-between!important; gap:10px!important; margin:0 0 5px!important; padding:0 0 12px!important; border-bottom:1px solid #FFE0C7!important; } .es-orange-detail-title strong{ margin:0!important; padding:0!important; color:#3CA24C!important; font-size:16px!important; line-height:1.2!important; font-weight:800!important; } .es-orange-detail-title span{ margin:0!important; padding:0!important; color:#888888!important; font-size:11px!important; line-height:1.2!important; } /* ========================================================== DETAIL SECTION ========================================================== */ .es-orange-detail-section{ width:100%!important; margin:0!important; padding:14px 0!important; border-bottom:1px solid #EEEEEE!important; } .es-orange-detail-section:last-child{ border-bottom:0!important; } .es-orange-detail-section h5{ margin:0 0 9px!important; padding:0!important; color:#333333!important; font-size:14px!important; line-height:1.2!important; font-weight:800!important; } .es-orange-detail-section h5 span{ float:right!important; margin:0!important; padding:4px 8px!important; background:#FFF9E5!important; border-radius:20px!important; color:#3CA24C!important; font-size:10px!important; line-height:1.2!important; font-weight:700!important; } /* ========================================================== STAT ROW ========================================================== */ .es-orange-stat-row{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:15px!important; width:100%!important; margin:0!important; padding:7px 0!important; border-bottom:1px solid #F1F1F1!important; color:#555555!important; font-size:12px!important; line-height:1.3!important; } .es-orange-stat-row:last-child{ border-bottom:0!important; } .es-orange-stat-row strong{ flex:0 0 auto!important; color:#3CA24C!important; font-size:13px!important; font-weight:700!important; } /* ========================================================== OUTCOME ========================================================== */ .es-orange-outcome{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; width:100%!important; margin:0!important; padding:12px 14px!important; background:#FFF9E5!important; border:1px solid #FFD09E!important; border-radius:8px!important; color:#A84300!important; font-size:13px!important; line-height:1.2!important; font-weight:700!important; } .es-orange-outcome strong{ color:#3CA24C!important; font-size:22px!important; font-weight:800!important; } /* ========================================================== DETAIL COUNTRY ========================================================== */ .es-orange-stat-country{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:10px!important; width:100%!important; margin:0!important; padding:7px 0!important; border-bottom:1px solid #F1F1F1!important; color:#555555!important; font-size:12px!important; line-height:1.3!important; } .es-orange-stat-country > div{ display:flex!important; align-items:center!important; min-width:0!important; gap:8px!important; } .es-orange-stat-country strong{ flex:0 0 auto!important; color:#3CA24C!important; font-size:12px!important; font-weight:700!important; } .es-orange-stat-country img{ display:block!important; width:20px!important; min-width:20px!important; max-width:20px!important; height:14px!important; min-height:14px!important; max-height:14px!important; margin:0!important; padding:0!important; object-fit:cover!important; border:0!important; border-radius:1px!important; box-shadow:none!important; transform:none!important; } /* ========================================================== IMPORTANT: PREVENT GLOBAL IMAGE HOVER RULE FROM DISTORTING FLAGS ========================================================== */ .es-journal-metrics-orange img:hover{ transform:none!important; box-shadow:none!important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width:600px){ .es-metrics-orange-card{ padding:16px!important; } .es-metrics-orange-header{ min-height:48px!important; padding:10px 14px!important; } .es-metrics-orange-header span{ font-size:18px!important; } .es-metrics-orange-period{ margin-bottom:20px!important; font-size:11px!important; } .es-metrics-orange-grid{ column-gap:15px!important; row-gap:24px!important; } .es-metric-orange-number{ font-size:25px!important; } .es-metric-orange-label{ font-size:12px!important; } .es-metrics-orange-diversity-head{ align-items:flex-start!important; } .es-metrics-orange-diversity-head h4{ font-size:16px!important; } .es-metrics-orange-countries{ font-size:11px!important; padding:5px 8px!important; } .es-metrics-orange-detail-content{ padding:14px!important; } .es-orange-detail-title strong{ font-size:15px!important; } } /* ========================================================== FINAL OVERRIDE — ORIGINAL CLICKABLE JOURNAL METRICS Orange palette matching National Accreditation IMPORTANT: keeps the original checkbox modal clickable. ========================================================== */ .es-journal-metrics{ border:1px solid #FFD8B8!important; background:#FFFFFF!important; box-shadow:0 5px 18px rgba(217,101,18,.10)!important; } /* HEADER */ .es-journal-metrics .es-metrics-header{ background:linear-gradient( 135deg, #F57C00 0%, #E65100 100% )!important; border:0!important; color:#FFFFFF!important; box-shadow:0 6px 16px rgba(245,124,0,.20)!important; } .es-journal-metrics .es-metrics-header h3{ color:#FFFFFF!important; } /* PERIOD */ .es-journal-metrics .es-metrics-period{ background:#FFF3E0!important; border:1px solid #FFD180!important; color:#E65100!important; } /* METRIC NUMBERS */ .es-journal-metrics .es-metric-number{ color:#173F4C!important; } .es-journal-metrics .es-metric-number::after{ background:#DDEBED!important; } /* AUTHOR DIVERSITY */ .es-journal-metrics .es-diversity-header h4{ color:#292929!important; } .es-journal-metrics .es-country-button{ background:#F5FBF6!important; border:1px solid #F5B66A!important; color:#3CA24C!important; } .es-journal-metrics .es-country-button:hover{ background:#FFF0E2!important; border-color:#EFA24A!important; color:#247A3B!important; } /* DIVERSITY BAR */ .es-journal-metrics .es-diversity-bar{ background: linear-gradient( to right, #3CA24C 0% 16%, #FFD04C 16% 30%, #E2A12C 30% 41%, #D04472 41% 50%, #28748B 50% 57%, #9CA3A7 57% 100% )!important; } /* COUNTRY VALUES */ .es-journal-metrics .es-country-row strong{ color:#333333!important; } /* VIEW DETAILS — remains a LABEL for checkbox modal */ .es-journal-metrics .es-metrics-button{ background:linear-gradient( 135deg, #3CA24C 0%, #FFD04C 58%, #FFDD63 100% )!important; color:#FFFFFF!important; border:0!important; box-shadow:0 5px 12px rgba(217,101,18,.23)!important; } .es-journal-metrics .es-metrics-button:hover{ background:linear-gradient( 135deg, #C4570D 0%, #E96D12 58%, #F28C28 100% )!important; color:#FFFFFF!important; } /* MODAL */ .es-journal-metrics .es-metrics-modal-box{ background:#FFFFFF!important; border:1px solid #FFD8B8!important; box-shadow:0 20px 60px rgba(0,0,0,.30)!important; } /* Modal header */ .es-journal-metrics .es-modal-header{ border-bottom:1px solid #F1D8C5!important; } .es-journal-metrics .es-modal-header h2{ color:#222222!important; } .es-journal-metrics .es-modal-header p{ color:#777777!important; } /* Close */ .es-journal-metrics .es-modal-close{ background:#FFF3E0!important; border:1px solid #FFD180!important; color:#E65100!important; } .es-journal-metrics .es-modal-close:hover{ background:#FFE4C7!important; border-color:#F5B66A!important; color:#247A3B!important; } /* Modal section headings */ .es-journal-metrics .es-modal-section h3{ color:#3CA24C!important; } /* Modal statistics */ .es-journal-metrics .es-stat-row strong{ color:#3CA24C!important; } /* Outcome */ .es-journal-metrics .es-outcome-box{ background:#FFF3E0!important; border:1px solid #FFD8B8!important; color:#A84300!important; } .es-journal-metrics .es-outcome-box strong{ color:#3CA24C!important; } /* Country count inside modal */ .es-journal-metrics .es-country-count{ background:#F5FBF6!important; border:1px solid #F5B66A!important; color:#3CA24C!important; } /* Modal country percentages */ .es-journal-metrics .es-modal-country strong{ color:#3CA24C!important; } /* Flags — prevent global OJS image rules from enlarging them */ .es-journal-metrics .es-country-flag, .es-journal-metrics .es-modal-country .es-country-flag{ display:inline-block!important; width:20px!important; min-width:20px!important; max-width:20px!important; height:14px!important; min-height:14px!important; max-height:14px!important; margin:0!important; padding:0!important; object-fit:cover!important; object-position:center!important; border:0!important; border-radius:1px!important; transform:none!important; box-shadow:none!important; } /* Keep the CSS-only modal above the page */ .es-journal-metrics .es-metrics-modal{ z-index:2147483000!important; } /* Orange scrollbar */ .es-journal-metrics .es-metrics-modal-box{ scrollbar-color:#3CA24C #F5F5F5!important; } .es-journal-metrics .es-metrics-modal-box::-webkit-scrollbar-thumb{ background:#3CA24C!important; border-radius:8px!important; } .es-journal-metrics .es-metrics-modal-box::-webkit-scrollbar-track{ background:#F5F5F5!important; } /* Do not let the global image hover animation affect flags */ .es-journal-metrics img:hover, .es-journal-metrics .es-country-flag:hover{ transform:none!important; box-shadow:none!important; filter:none!important; } /* ========================================================== JOURNAL METRICS — RECOMMENDED JOURNALS STYLE Animated orange header ========================================================== */ .es-journal-metrics .es-metrics-header{ position:relative!important; overflow:hidden!important; display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-height:62px!important; box-sizing:border-box!important; margin:0 0 16px!important; padding:14px 20px!important; border:0!important; border-radius:16px!important; background:linear-gradient( 135deg, #F57C00 0%, #F46A00 48%, #E65100 100% )!important; box-shadow: 0 8px 18px rgba(245,124,0,.22), 0 3px 8px rgba(230,81,0,.12)!important; animation:esMetricsHeaderFloat 3.5s ease-in-out infinite!important; } /* Title */ .es-journal-metrics .es-metrics-header h3{ position:relative!important; z-index:2!important; margin:0!important; padding:0!important; color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif!important; font-size:24px!important; font-weight:800!important; line-height:1.1!important; letter-spacing:.1px!important; text-align:center!important; text-shadow: 0 1px 2px rgba(0,0,0,.12)!important; } /* Moving shine — similar to Recommended Journals */ .es-journal-metrics .es-metrics-header::before{ content:""!important; position:absolute!important; top:0!important; left:-65%!important; width:42%!important; height:100%!important; background:linear-gradient( 100deg, transparent 0%, rgba(255,255,255,.08) 25%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.08) 75%, transparent 100% )!important; transform:skewX(-22deg)!important; animation:esMetricsHeaderShine 3.2s ease-in-out infinite!important; pointer-events:none!important; z-index:1!important; } /* Small orange glow */ .es-journal-metrics .es-metrics-header::after{ content:""!important; position:absolute!important; inset:0!important; border-radius:16px!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.20), inset 0 -1px 0 rgba(128,45,0,.12)!important; pointer-events:none!important; } /* Gentle floating animation */ @keyframes esMetricsHeaderFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } } /* Shine animation */ @keyframes esMetricsHeaderShine{ 0%{ left:-65%; opacity:0; } 15%{ opacity:1; } 48%{ left:125%; opacity:1; } 55%,100%{ left:125%; opacity:0; } } /* Hover */ .es-journal-metrics .es-metrics-header:hover{ animation-play-state:paused!important; transform:translateY(-2px)!important; box-shadow: 0 11px 24px rgba(245,124,0,.28), 0 5px 12px rgba(230,81,0,.16)!important; } /* Tablet */ @media(max-width:900px){ .es-journal-metrics .es-metrics-header{ min-height:58px!important; padding:13px 18px!important; border-radius:15px!important; } .es-journal-metrics .es-metrics-header h3{ font-size:22px!important; } } /* Mobile */ @media(max-width:600px){ .es-journal-metrics .es-metrics-header{ min-height:56px!important; padding:12px 16px!important; margin-bottom:14px!important; border-radius:14px!important; } .es-journal-metrics .es-metrics-header h3{ font-size:20px!important; } } /* Respect reduced-motion preference */ @media(prefers-reduced-motion:reduce){ .es-journal-metrics .es-metrics-header, .es-journal-metrics .es-metrics-header::before{ animation:none!important; } } /* ========================================================== EDU SPORTIVO — JOURNAL METRICS REFINED V3 ---------------------------------------------------------- Tujuan: - Lebih compact untuk sidebar - Card berada di tengah - Lebar proporsional dengan sidebar - Orange mengikuti palette Edu Sportivo: #3CA24C / #FFD04C / #FFDD63 - Header seperti "Recommended Journals" - Tidak mengganggu checkbox modal / klik View Details ========================================================== */ /* MAIN CARD — centered + compact */ .es-journal-metrics{ position:relative!important; display:block!important; width:calc(100% - 10px)!important; max-width:340px!important; margin:0 auto 20px!important; padding:14px 14px 15px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid #C9E5CE!important; border-bottom:2px solid #3CA24C!important; border-radius:0!important; box-shadow:0 5px 16px rgba(217,101,18,.08)!important; color:#333333!important; font-family:Arial,Helvetica,sans-serif!important; } /* HEADER — same visual language as Recommended Journals */ .es-journal-metrics .es-metrics-header{ position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-height:56px!important; margin:0 0 14px!important; padding:10px 14px!important; box-sizing:border-box!important; overflow:hidden!important; border:0!important; border-radius:16px!important; background:linear-gradient( 135deg, #3CA24C 0%, #FFD04C 58%, #FFDD63 100% )!important; box-shadow: 0 7px 16px rgba(217,101,18,.20), 0 3px 8px rgba(245,154,58,.12)!important; animation:esMetricsRefinedFloat 4s ease-in-out infinite!important; } /* Header title */ .es-journal-metrics .es-metrics-header h3{ position:relative!important; z-index:2!important; margin:0!important; padding:0!important; color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; font-size:24px!important; line-height:1.1!important; font-weight:800!important; text-align:center!important; letter-spacing:0!important; text-shadow:0 1px 2px rgba(0,0,0,.12)!important; } /* Header shine */ .es-journal-metrics .es-metrics-header::before{ content:""!important; position:absolute!important; top:0!important; left:-70%!important; width:42%!important; height:100%!important; background:linear-gradient( 100deg, transparent, rgba(255,255,255,.45), transparent )!important; transform:skewX(-22deg)!important; animation:esMetricsRefinedShine 3.8s ease-in-out infinite!important; pointer-events:none!important; z-index:1!important; } @keyframes esMetricsRefinedFloat{ 0%,100%{transform:translateY(0);} 50%{transform:translateY(-2px);} } @keyframes esMetricsRefinedShine{ 0%,20%{left:-70%;opacity:0;} 35%{opacity:1;} 58%{left:130%;opacity:1;} 65%,100%{left:130%;opacity:0;} } /* Period badge — orange */ .es-journal-metrics .es-metrics-period{ display:flex!important; align-items:center!important; justify-content:center!important; width:max-content!important; max-width:100%!important; margin:0 auto 20px!important; padding:6px 13px!important; background:#F5FBF6!important; border:1px solid #F5B66A!important; border-radius:18px!important; color:#3CA24C!important; font-size:12px!important; line-height:1.2!important; font-weight:700!important; white-space:nowrap!important; } /* Calendar icon */ .es-journal-metrics .es-calendar-icon{ border-color:#3CA24C!important; } .es-journal-metrics .es-calendar-icon:before{ background:#3CA24C!important; } .es-journal-metrics .es-calendar-icon:after{ border-color:#3CA24C!important; } /* Metrics grid — compact and symmetrical */ .es-journal-metrics .es-metrics-grid{ display:grid!important; grid-template-columns:1fr 1fr!important; column-gap:22px!important; row-gap:25px!important; width:100%!important; margin:0 0 25px!important; } /* Metric number */ .es-journal-metrics .es-metric-number{ font-size:30px!important; line-height:1!important; font-weight:800!important; color:#173F4C!important; } /* Underline/accent below number */ .es-journal-metrics .es-metric-number::after{ left:-5px!important; right:-3px!important; bottom:0!important; height:5px!important; background:#DCEBED!important; } /* Metric labels */ .es-journal-metrics .es-metric-label{ margin-top:6px!important; color:#555555!important; font-size:13px!important; line-height:1.3!important; } /* Author Diversity */ .es-journal-metrics .es-diversity-header{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:7px!important; margin:0 0 11px!important; } .es-journal-metrics .es-diversity-header h4{ margin:0!important; padding:0!important; color:#292929!important; font-size:17px!important; line-height:1.15!important; font-weight:800!important; } /* 18 countries pill */ .es-journal-metrics .es-country-button{ display:inline-flex!important; align-items:center!important; justify-content:center!important; flex:0 0 auto!important; padding:6px 10px!important; border:1px solid #F5B66A!important; border-radius:18px!important; background:#F5FBF6!important; color:#3CA24C!important; font-size:12px!important; line-height:1.1!important; font-weight:700!important; text-decoration:none!important; white-space:nowrap!important; cursor:pointer!important; transition: background .2s ease, border-color .2s ease, transform .2s ease!important; } .es-journal-metrics .es-country-button:hover{ background:#FFF0E2!important; border-color:#EFA24A!important; color:#247A3B!important; transform:translateY(-1px)!important; } /* Diversity bar */ .es-journal-metrics .es-diversity-bar{ width:100%!important; height:7px!important; margin:0 0 12px!important; border-radius:5px!important; overflow:hidden!important; background:linear-gradient( to right, #3CA24C 0% 16%, #FFD04C 16% 30%, #E2A12C 30% 41%, #D04472 41% 50%, #28748B 50% 57%, #9CA3A7 57% 100% )!important; } /* Country list */ .es-journal-metrics .es-country-list{ display:flex!important; flex-direction:column!important; gap:8px!important; margin:0 0 17px!important; } .es-journal-metrics .es-country-row{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:8px!important; color:#555555!important; font-size:13px!important; line-height:1.25!important; } .es-journal-metrics .es-country-row strong{ color:#333333!important; font-size:13px!important; font-weight:700!important; } /* Country name + flags */ .es-journal-metrics .es-country-name{ display:flex!important; align-items:center!important; gap:7px!important; min-width:0!important; } /* IMPORTANT: prevent global OJS img rules from enlarging flags */ .es-journal-metrics .es-country-flag, .es-journal-metrics .es-modal-country .es-country-flag{ display:inline-block!important; width:20px!important; min-width:20px!important; max-width:20px!important; height:14px!important; min-height:14px!important; max-height:14px!important; margin:0!important; padding:0!important; object-fit:cover!important; object-position:center!important; border:0!important; border-radius:1px!important; transform:none!important; box-shadow:none!important; } /* View Details — centered and orange */ .es-journal-metrics .es-metrics-button{ display:flex!important; align-items:center!important; justify-content:center!important; gap:9px!important; width:100%!important; min-height:38px!important; margin:0!important; padding:9px 12px!important; box-sizing:border-box!important; background:linear-gradient( 135deg, #3CA24C 0%, #FFD04C 58%, #FFDD63 100% )!important; border:0!important; border-radius:5px!important; color:#FFFFFF!important; font-size:13px!important; line-height:1.2!important; font-weight:700!important; text-align:center!important; text-decoration:none!important; cursor:pointer!important; box-shadow:0 5px 12px rgba(217,101,18,.20)!important; transition: transform .2s ease, box-shadow .2s ease, background .2s ease!important; } .es-journal-metrics .es-metrics-button:hover{ background:linear-gradient( 135deg, #C4570D 0%, #E96D12 58%, #F28C28 100% )!important; color:#FFFFFF!important; transform:translateY(-1px)!important; box-shadow:0 7px 15px rgba(217,101,18,.25)!important; } /* Keep modal functional and above all sidebar elements */ .es-journal-metrics .es-metrics-modal{ z-index:2147483000!important; } .es-journal-metrics .es-metrics-modal-box{ background:#FFFFFF!important; border:1px solid #FFD8B8!important; box-shadow:0 20px 60px rgba(0,0,0,.30)!important; } /* Modal scrollbar */ .es-journal-metrics .es-metrics-modal-box{ scrollbar-color:#3CA24C #F5F5F5!important; } .es-journal-metrics .es-metrics-modal-box::-webkit-scrollbar-thumb{ background:#3CA24C!important; border-radius:8px!important; } .es-journal-metrics .es-metrics-modal-box::-webkit-scrollbar-track{ background:#F5F5F5!important; } /* Prevent global image animation */ .es-journal-metrics img:hover, .es-journal-metrics .es-country-flag:hover{ transform:none!important; box-shadow:none!important; filter:none!important; } /* Tablet */ @media(max-width:900px){ .es-journal-metrics{ width:calc(100% - 8px)!important; max-width:340px!important; margin-left:auto!important; margin-right:auto!important; padding:13px 13px 14px!important; } .es-journal-metrics .es-metrics-header{ min-height:54px!important; border-radius:15px!important; } .es-journal-metrics .es-metrics-header h3{ font-size:23px!important; } .es-journal-metrics .es-metric-number{ font-size:28px!important; } } /* Mobile */ @media(max-width:600px){ .es-journal-metrics{ width:calc(100% - 4px)!important; max-width:340px!important; margin-left:auto!important; margin-right:auto!important; padding:12px 12px 13px!important; } .es-journal-metrics .es-metrics-header{ min-height:52px!important; margin-bottom:13px!important; padding:9px 12px!important; border-radius:14px!important; } .es-journal-metrics .es-metrics-header h3{ font-size:21px!important; } .es-journal-metrics .es-metrics-period{ font-size:11px!important; margin-bottom:18px!important; } .es-journal-metrics .es-metrics-grid{ column-gap:18px!important; row-gap:22px!important; margin-bottom:23px!important; } .es-journal-metrics .es-metric-number{ font-size:27px!important; } .es-journal-metrics .es-metric-label{ font-size:12px!important; } .es-journal-metrics .es-diversity-header h4{ font-size:16px!important; } .es-journal-metrics .es-country-button{ font-size:11px!important; padding:5px 8px!important; } .es-journal-metrics .es-country-row{ font-size:12px!important; } .es-journal-metrics .es-country-row strong{ font-size:12px!important; } .es-journal-metrics .es-metrics-button{ min-height:37px!important; font-size:12px!important; } } /* Reduced motion */ @media(prefers-reduced-motion:reduce){ .es-journal-metrics .es-metrics-header, .es-journal-metrics .es-metrics-header::before{ animation:none!important; } } /* ========================================================== JOURNAL METRICS V5 ONLY: 4 METRIC ITEMS - Smaller number and label - Precisely centered - Light orange accent - Journal Metrics header is NOT changed ========================================================== */ /* Metrics grid: 2 x 2, centered and symmetrical */ .es-journal-metrics .es-metrics-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; column-gap:26px!important; row-gap:22px!important; width:100%!important; margin:0 auto 22px!important; padding:0 8px!important; box-sizing:border-box!important; } /* Each metric block centered */ .es-journal-metrics .es-metric{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:flex-start!important; width:100%!important; min-width:0!important; text-align:center!important; box-sizing:border-box!important; } /* Number: smaller + light orange */ .es-journal-metrics .es-metric-number{ position:relative!important; display:inline-block!important; width:auto!important; margin:0 auto!important; padding:0 0 5px!important; font-size:25px!important; line-height:1!important; font-weight:800!important; text-align:center!important; color:#F28C3C!important; } /* Light orange underline */ .es-journal-metrics .es-metric-number::after{ content:""!important; position:absolute!important; left:50%!important; bottom:0!important; width:42px!important; height:3px!important; transform:translateX(-50%)!important; background:#F8C79F!important; border-radius:3px!important; } /* Labels: smaller, centered, controlled width */ .es-journal-metrics .es-metric-label{ display:block!important; width:100%!important; max-width:105px!important; margin:6px auto 0!important; font-size:11px!important; line-height:1.22!important; font-weight:400!important; text-align:center!important; color:#666666!important; } /* Keep the Journal Metrics title exactly as existing CSS. No .es-metrics-header rules are added here. */ /* Mobile: preserve the same 2 x 2 centered arrangement */ @media(max-width:600px){ .es-journal-metrics .es-metrics-grid{ column-gap:14px!important; row-gap:19px!important; padding:0 4px!important; } .es-journal-metrics .es-metric-number{ font-size:23px!important; } .es-journal-metrics .es-metric-label{ max-width:95px!important; font-size:10.5px!important; line-height:1.2!important; } .es-journal-metrics .es-metric-number::after{ width:38px!important; height:3px!important; } } /* ========================================================== JOURNAL METRICS V6 — PRECISION CENTER ALIGNMENT Fix: - Actual metric wrapper is .es-metric-item - Number centered exactly over its label - 2 x 2 layout remains unchanged - Journal Metrics header remains untouched ========================================================== */ /* The actual metric item must be the centering container */ .es-journal-metrics .es-metric-item{ display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:flex-start!important; width:100%!important; min-width:0!important; margin:0!important; padding:0!important; text-align:center!important; box-sizing:border-box!important; } /* Number is centered by the metric item */ .es-journal-metrics .es-metric-item .es-metric-number{ display:table!important; position:relative!important; width:max-content!important; max-width:100%!important; margin:0 auto!important; padding:0 0 5px!important; text-align:center!important; line-height:1!important; font-size:25px!important; font-weight:800!important; color:#F28C3C!important; } /* Short light-orange line stays exactly centered under number */ .es-journal-metrics .es-metric-item .es-metric-number::after{ left:50%!important; right:auto!important; bottom:0!important; width:42px!important; height:3px!important; transform:translateX(-50%)!important; background:#F8C79F!important; border-radius:3px!important; } /* Label occupies the same centered axis as the number */ .es-journal-metrics .es-metric-item .es-metric-label{ display:block!important; width:100%!important; max-width:105px!important; margin:6px auto 0!important; padding:0!important; text-align:center!important; text-align-last:center!important; font-size:11px!important; line-height:1.22!important; font-weight:400!important; color:#666666!important; box-sizing:border-box!important; } /* Keep the 2 x 2 grid mathematically symmetrical */ .es-journal-metrics .es-metrics-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; column-gap:26px!important; row-gap:22px!important; width:100%!important; margin:0 auto 22px!important; padding:0 8px!important; box-sizing:border-box!important; } /* Mobile */ @media(max-width:600px){ .es-journal-metrics .es-metric-item{ align-items:center!important; text-align:center!important; } .es-journal-metrics .es-metric-item .es-metric-number{ font-size:23px!important; } .es-journal-metrics .es-metric-item .es-metric-label{ max-width:95px!important; font-size:10.5px!important; line-height:1.2!important; } .es-journal-metrics .es-metric-item .es-metric-number::after{ width:38px!important; height:3px!important; } } /* ========================================================== INTERNATIONAL JOURNAL OF BUSINESS SUSTAINABILITY (IJBS) FINAL GREEN–GOLD WEBSITE OVERRIDE Based on the supplied IJBS visual palette. Main green : #3CA24C Deep green : #1F7A3D Dark green : #155C2E Gold : #FFD04C Light gold : #FFDD63 ========================================================== */ :root{ --ijbs-green:#3CA24C; --ijbs-green-dark:#1F7A3D; --ijbs-green-deep:#155C2E; --ijbs-yellow:#FFD04C; --ijbs-yellow-light:#FFDD63; --ijbs-green-soft:#F4FAF5; --ijbs-border:#C9E5CE; } /* ---------- GENERAL IJBS ACCENTS ---------- */ h1,h2,h3,h4{ color:var(--ijbs-green-deep)!important; } a:hover{ color:var(--ijbs-green-dark)!important; } /* ---------- IJBS SIDEBAR TITLE ---------- */ .sidebar-title{ position:relative!important; overflow:hidden!important; background:linear-gradient( 135deg, var(--ijbs-green-deep) 0%, var(--ijbs-green) 68%, var(--ijbs-yellow) 100% )!important; color:#FFFFFF!important; border-radius:12px!important; box-shadow: 0 7px 18px rgba(31,122,61,.18), 0 2px 7px rgba(255,208,76,.12)!important; letter-spacing:.25px!important; } /* subtle animated highlight on section title */ .sidebar-title::after{ content:""!important; position:absolute!important; top:-30%; left:-45%; width:28%; height:160%; background:linear-gradient( 90deg, transparent, rgba(255,255,255,.28), transparent ); transform:skewX(-22deg); animation:ijbsTitleShine 5.5s ease-in-out infinite; pointer-events:none; } @keyframes ijbsTitleShine{ 0%,65%{left:-45%;opacity:0;} 72%{opacity:1;} 100%{left:125%;opacity:0;} } /* ---------- SIDEBAR MENU ---------- */ .content .gap-2 .m-menu{ position:relative!important; overflow:hidden!important; background:#FFFFFF!important; border:1px solid var(--ijbs-border)!important; color:var(--ijbs-green-deep)!important; box-shadow: 0 3px 10px rgba(31,122,61,.07)!important; transition: transform .28s cubic-bezier(.22,.61,.36,1), box-shadow .28s ease, border-color .28s ease, color .28s ease!important; } /* Green fill grows from left, with a small gold edge */ .content .gap-2 .m-menu::before{ content:""!important; position:absolute!important; left:0!important; top:0!important; width:0!important; height:100%!important; background: linear-gradient( 90deg, var(--ijbs-green-deep) 0%, var(--ijbs-green) 72%, var(--ijbs-yellow) 100% )!important; border-radius:inherit; z-index:-1; transition: width .42s cubic-bezier(.22,.61,.36,1)!important; } /* Thin gold sweep */ .content .gap-2 .m-menu::after{ content:"›"!important; position:relative!important; margin-left:auto!important; color:var(--ijbs-green)!important; font-size:21px!important; font-weight:700!important; transition: transform .28s ease, color .28s ease!important; } /* Hover */ .content .gap-2 .m-menu:hover{ color:#FFFFFF!important; border-color:var(--ijbs-green)!important; transform:translateX(4px)!important; box-shadow: 0 8px 20px rgba(31,122,61,.18), 0 3px 8px rgba(255,208,76,.10)!important; } .content .gap-2 .m-menu:hover::before{ width:100%!important; } .content .gap-2 .m-menu:hover::after{ color:var(--ijbs-yellow)!important; transform:translateX(5px)!important; } .content .gap-2 .m-menu em{ color:var(--ijbs-green)!important; transition: color .25s ease, transform .25s ease!important; } .content .gap-2 .m-menu:hover em{ color:var(--ijbs-yellow)!important; transform:scale(1.08)!important; } .content .gap-2 .m-menu span{ color:var(--ijbs-green-deep)!important; transition:color .25s ease!important; } .content .gap-2 .m-menu:hover span{ color:#FFFFFF!important; } /* ---------- SUBMIT / PRIMARY SIDEBAR ITEM ---------- */ .content .gap-2 .m-menu.m-submit{ background: linear-gradient( 135deg, var(--ijbs-green-deep), var(--ijbs-green) )!important; color:#FFFFFF!important; border:0!important; border-left:4px solid var(--ijbs-yellow)!important; box-shadow: 0 7px 18px rgba(31,122,61,.18)!important; } .content .gap-2 .m-menu.m-submit::before{ background: linear-gradient( 90deg, var(--ijbs-green), var(--ijbs-yellow) )!important; } .content .gap-2 .m-menu.m-submit em, .content .gap-2 .m-menu.m-submit::after{ color:var(--ijbs-yellow)!important; } /* ---------- KEYBOARD ACCESSIBILITY ---------- */ .content .gap-2 .m-menu:focus-visible{ outline:2px solid var(--ijbs-yellow)!important; outline-offset:3px!important; } /* ---------- SIDEBAR ENTRY ANIMATION ---------- */ .content .gap-2 .m-menu{ animation:ijbsMenuIn .55s both; } .content .gap-2 .m-menu:nth-child(1){animation-delay:.04s;} .content .gap-2 .m-menu:nth-child(2){animation-delay:.08s;} .content .gap-2 .m-menu:nth-child(3){animation-delay:.12s;} .content .gap-2 .m-menu:nth-child(4){animation-delay:.16s;} .content .gap-2 .m-menu:nth-child(5){animation-delay:.20s;} .content .gap-2 .m-menu:nth-child(6){animation-delay:.24s;} .content .gap-2 .m-menu:nth-child(7){animation-delay:.28s;} .content .gap-2 .m-menu:nth-child(8){animation-delay:.32s;} @keyframes ijbsMenuIn{ from{ opacity:0; transform:translateX(-12px); } to{ opacity:1; transform:translateX(0); } } /* ---------- REDUCE MOTION ---------- */ @media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto!important; } .content .gap-2 .m-menu, .sidebar-title::after{ animation:none!important; transition:none!important; } .content .gap-2 .m-menu:hover{ transform:none!important; } } /* ---------- MOBILE ---------- */ @media(max-width:600px){ .sidebar-title{ font-size:16px!important; padding:12px 14px!important; border-radius:10px!important; } .content .gap-2 .m-menu{ min-height:46px!important; padding:10px 14px!important; font-size:14px!important; } .content .gap-2 .m-menu:hover{ transform:translateX(2px)!important; } } /* ========================================================== IJBS HERO V2 — GREEN / GOLD PREMIUM International Journal of Business Sustainability ---------------------------------------------------------- Purpose: - Refine Hero presentation - Improve journal description readability - Match IJBS cover palette - Keep existing header/sidebar/navigation untouched - Responsive for desktop, tablet and mobile ========================================================== */ :root{ --ijbs-green:#155C2E; --ijbs-green-2:#1F7A3D; --ijbs-green-3:#3CA24C; --ijbs-gold:#FFD04C; --ijbs-gold-2:#FFDD63; --ijbs-cream:#FFF9E5; --ijbs-white:#FFFFFF; --ijbs-text:#F5FAF6; --ijbs-shadow:rgba(21,92,46,.22); } /* ---------------------------------------------------------- HERO WRAPPER ---------------------------------------------------------- */ .ijbs-home{ width:100%; margin:0; padding:0; } /* Main Hero */ .ijbs-banner{ position:relative!important; overflow:hidden!important; isolation:isolate; min-height:430px; display:flex; align-items:center; padding:58px 34px 62px!important; background: linear-gradient(120deg, var(--ijbs-green) 0%, var(--ijbs-green-2) 43%, var(--ijbs-green-3) 72%, #6ABF55 100%); border-radius:0 0 24px 24px; box-shadow: 0 16px 38px rgba(21,92,46,.16); } /* Soft gold atmospheric glow */ .ijbs-banner::before{ content:""; position:absolute; z-index:-2; width:520px; height:520px; right:-190px; top:-285px; border-radius:50%; background: radial-gradient(circle, rgba(255,208,76,.48) 0%, rgba(255,208,76,.20) 38%, rgba(255,208,76,0) 72%); pointer-events:none; } /* Gold diagonal shape inspired by the cover */ .ijbs-banner::after{ content:""; position:absolute; z-index:-1; width:620px; height:170px; left:-190px; bottom:-105px; background: linear-gradient(135deg, rgba(255,208,76,.42), rgba(255,221,99,.08)); border-radius:100px; transform:rotate(-11deg); pointer-events:none; } /* ---------------------------------------------------------- HERO CONTENT ---------------------------------------------------------- */ .ijbs-content{ position:relative!important; z-index:5!important; width:100%; max-width:820px!important; margin:0 auto!important; animation:ijbsHeroIn .8s cubic-bezier(.22,.61,.36,1) both; } @keyframes ijbsHeroIn{ from{ opacity:0; transform:translateY(24px); } to{ opacity:1; transform:translateY(0); } } /* ---------------------------------------------------------- BADGE ---------------------------------------------------------- */ .ijbs-badge{ display:inline-flex!important; align-items:center; margin:0 0 10px!important; padding:7px 14px!important; border:1px solid rgba(255,255,255,.45)!important; border-radius:30px!important; background:rgba(255,255,255,.11)!important; color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif!important; font-size:11px!important; font-weight:800!important; letter-spacing:1px!important; line-height:1.2!important; box-shadow:0 5px 16px rgba(0,0,0,.08); backdrop-filter:blur(7px); animation:ijbsBadgeIn .7s ease both; } @keyframes ijbsBadgeIn{ from{ opacity:0; transform:translateX(-18px); } to{ opacity:1; transform:translateX(0); } } /* ---------------------------------------------------------- JOURNAL TITLE ---------------------------------------------------------- */ .ijbs-title{ margin:5px 0 0!important; padding:0!important; color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif!important; font-size:58px!important; font-weight:900!important; line-height:.94!important; letter-spacing:.3px!important; text-shadow:2px 4px 10px rgba(0,0,0,.18)!important; animation:ijbsTitleIn .9s ease both; } .ijbs-title span:first-child{ color:#FFFFFF!important; } .ijbs-title span:nth-child(2){ color:var(--ijbs-gold)!important; } @keyframes ijbsTitleIn{ from{ opacity:0; transform:translateY(12px) scale(.985); } to{ opacity:1; transform:translateY(0) scale(1); } } /* ---------------------------------------------------------- TAGLINE / SUBTITLE ---------------------------------------------------------- */ .ijbs-subtitle{ margin:10px 0 18px!important; padding:0!important; color:#F8FBF8!important; font-family:Arial,Helvetica,sans-serif!important; font-size:24px!important; font-weight:600!important; line-height:1.18!important; letter-spacing:.15px!important; text-shadow:1px 2px 5px rgba(0,0,0,.15)!important; } /* Small gold accent before tagline */ .ijbs-subtitle::before{ content:""; display:inline-block; vertical-align:middle; width:34px; height:3px; margin:0 10px 4px 0; border-radius:3px; background:var(--ijbs-gold); } /* ---------------------------------------------------------- JOURNAL DESCRIPTION ---------------------------------------------------------- */ .ijbs-text{ max-width:760px!important; margin:0 0 22px!important; padding:0!important; color:rgba(255,255,255,.94)!important; font-family:Arial,Helvetica,sans-serif!important; font-size:15px!important; font-weight:400!important; line-height:1.72!important; letter-spacing:.05px!important; text-align:left!important; text-shadow:0 1px 2px rgba(0,0,0,.08); animation:ijbsDescriptionIn 1s ease .12s both; } @keyframes ijbsDescriptionIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } } /* ---------------------------------------------------------- BUTTONS ---------------------------------------------------------- */ .ijbs-buttons{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:10px!important; margin:0!important; padding:0!important; animation:ijbsButtonsIn 1s ease .2s both; } @keyframes ijbsButtonsIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } } .ijbs-btn{ position:relative!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; overflow:hidden!important; min-height:42px!important; margin:0!important; padding:10px 18px!important; border:1px solid rgba(255,255,255,.48)!important; border-radius:9px!important; background:rgba(255,255,255,.10)!important; color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif!important; font-size:13px!important; font-weight:700!important; line-height:1.2!important; text-decoration:none!important; box-shadow:0 5px 14px rgba(0,0,0,.08); backdrop-filter:blur(5px); transition: transform .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease!important; } /* Button light sweep */ .ijbs-btn::before{ content:""; position:absolute; top:0; left:-130%; width:45%; height:100%; background:linear-gradient( 90deg, transparent, rgba(255,255,255,.38), transparent); transform:skewX(-25deg); transition:left .55s ease; } .ijbs-btn:hover::before{ left:150%; } .ijbs-btn:hover{ transform:translateY(-3px)!important; background:rgba(255,255,255,.19)!important; border-color:var(--ijbs-gold)!important; color:#FFFFFF!important; box-shadow:0 10px 24px rgba(0,0,0,.16)!important; } /* Primary CTA */ .ijbs-btn-primary{ background:linear-gradient(135deg,#FFD04C,#FFDD63)!important; border-color:#FFD04C!important; color:#155C2E!important; box-shadow:0 7px 18px rgba(255,208,76,.25)!important; } .ijbs-btn-primary:hover{ background:linear-gradient(135deg,#FFDD63,#FFE58A)!important; color:#155C2E!important; border-color:#FFE58A!important; box-shadow:0 12px 28px rgba(255,208,76,.30)!important; } /* ---------------------------------------------------------- OPTIONAL DESCRIPTION BLOCK OUTSIDE HERO Use for a separate "About the Journal" description. ---------------------------------------------------------- */ .ijbs-description{ position:relative; margin:28px 0; padding:26px 28px 26px 31px; background:#FFFFFF; border:1px solid #D8EEDC; border-radius:16px; box-shadow:0 8px 24px rgba(21,92,46,.07); } .ijbs-description::before{ content:""; position:absolute; top:20px; left:0; bottom:20px; width:4px; border-radius:0 4px 4px 0; background:linear-gradient( 180deg, #1F7A3D, #FFD04C); } .ijbs-description h2, .ijbs-description h3{ margin:0 0 10px!important; color:#155C2E!important; font-weight:800!important; } .ijbs-description p{ margin:0 0 10px!important; color:#4A554E!important; font-size:15px!important; line-height:1.75!important; } .ijbs-description p:last-child{ margin-bottom:0!important; } /* ---------------------------------------------------------- MOBILE / TABLET ---------------------------------------------------------- */ @media(max-width:900px){ .ijbs-banner{ min-height:390px; padding:46px 24px 50px!important; } .ijbs-title{ font-size:45px!important; } .ijbs-subtitle{ font-size:21px!important; } .ijbs-text{ max-width:100%!important; font-size:14px!important; line-height:1.68!important; } } @media(max-width:600px){ .ijbs-banner{ min-height:0; padding:36px 18px 40px!important; border-radius:0 0 16px 16px; } .ijbs-badge{ font-size:9px!important; letter-spacing:.7px!important; padding:6px 10px!important; } .ijbs-title{ font-size:34px!important; line-height:.98!important; letter-spacing:0!important; } .ijbs-subtitle{ margin:9px 0 14px!important; font-size:18px!important; line-height:1.22!important; } .ijbs-subtitle::before{ width:24px; height:2px; margin-right:7px; } .ijbs-text{ font-size:13.5px!important; line-height:1.65!important; margin-bottom:18px!important; } .ijbs-buttons{ flex-direction:column!important; align-items:stretch!important; width:100%; } .ijbs-btn{ width:100%!important; box-sizing:border-box!important; } .ijbs-description{ padding:22px 20px 22px 24px; border-radius:13px; } .ijbs-description p{ font-size:14px!important; line-height:1.68!important; } } /* ---------------------------------------------------------- ACCESSIBILITY ---------------------------------------------------------- */ @media(prefers-reduced-motion:reduce){ .ijbs-content, .ijbs-badge, .ijbs-title, .ijbs-text, .ijbs-buttons{ animation:none!important; } .ijbs-btn, .ijbs-btn::before{ transition:none!important; } } /* ========================================================== END IJBS HERO V2 ========================================================== */ /* ========================================================== IJBS HERO V3 — COMPACT + IMAGE International Journal of Business Sustainability ========================================================== */ :root{ --ijbs-green-deep:#155C2E; --ijbs-green:#1F7A3D; --ijbs-green-light:#3CA24C; --ijbs-gold:#FFD04C; --ijbs-gold-light:#FFDD63; } .ijbs-home{ width:100%!important; margin:0!important; padding:0!important; } /* Compact two-tone hero with sustainability image */ .ijbs-banner{ position:relative!important; overflow:hidden!important; isolation:isolate!important; display:flex!important; align-items:center!important; min-height:315px!important; height:315px!important; padding:30px 34px!important; box-sizing:border-box!important; border-radius:0 0 22px 22px!important; background: linear-gradient(90deg, rgba(21,92,46,1) 0%, rgba(31,122,61,.98) 43%, rgba(31,122,61,.78) 63%, rgba(31,122,61,.16) 100%), url("https://images.unsplash.com/photo-1497435334941-8c899ee9e8e9?auto=format&fit=crop&w=1800&q=82") center right/cover no-repeat!important; box-shadow:0 12px 30px rgba(21,92,46,.16)!important; } /* Image fade */ .ijbs-banner::before{ content:""!important; position:absolute!important; inset:0!important; z-index:-1!important; background:linear-gradient(90deg, #155C2E 0%, rgba(21,92,46,.95) 34%, rgba(21,92,46,.60) 57%, rgba(21,92,46,.08) 84%, rgba(21,92,46,0) 100%)!important; pointer-events:none!important; } /* Gold decorative accent */ .ijbs-banner::after{ content:""!important; position:absolute!important; width:360px!important; height:360px!important; right:-150px!important; bottom:-205px!important; border-radius:50%!important; background:linear-gradient(135deg,rgba(255,208,76,.88),rgba(255,221,99,.12))!important; transform:rotate(-15deg)!important; z-index:0!important; pointer-events:none!important; } .ijbs-content{ position:relative!important; z-index:5!important; width:58%!important; max-width:690px!important; margin:0!important; padding:0!important; text-align:left!important; animation:ijbsCompactIn .7s ease both!important; } @keyframes ijbsCompactIn{ from{opacity:0;transform:translateY(15px)} to{opacity:1;transform:translateY(0)} } .ijbs-badge{ display:inline-flex!important; align-items:center!important; margin:0 0 7px!important; padding:5px 11px!important; border:1px solid rgba(255,255,255,.55)!important; border-radius:30px!important; background:rgba(255,255,255,.10)!important; color:#fff!important; font-size:9px!important; font-weight:800!important; letter-spacing:.8px!important; line-height:1.2!important; box-shadow:none!important; backdrop-filter:blur(5px)!important; } .ijbs-title{ margin:2px 0 0!important; padding:0!important; color:#fff!important; font-family:Arial,Helvetica,sans-serif!important; font-size:43px!important; font-weight:900!important; line-height:.91!important; letter-spacing:.2px!important; text-shadow:2px 3px 8px rgba(0,0,0,.20)!important; } .ijbs-title span:first-child{color:#fff!important;} .ijbs-title span:nth-child(2){color:var(--ijbs-gold)!important;} .ijbs-subtitle{ margin:8px 0 9px!important; padding:0!important; color:#fff!important; font-size:17px!important; font-weight:700!important; line-height:1.15!important; text-shadow:1px 2px 4px rgba(0,0,0,.18)!important; } .ijbs-subtitle::before{ content:""!important; display:inline-block!important; width:28px!important; height:3px!important; margin:0 8px 3px 0!important; border-radius:3px!important; background:var(--ijbs-gold)!important; } .ijbs-text{ max-width:650px!important; margin:0 0 13px!important; padding:0!important; color:rgba(255,255,255,.94)!important; font-family:Arial,Helvetica,sans-serif!important; font-size:12.5px!important; font-weight:400!important; line-height:1.48!important; letter-spacing:0!important; text-align:left!important; text-shadow:0 1px 2px rgba(0,0,0,.12)!important; display:-webkit-box!important; -webkit-line-clamp:3!important; -webkit-box-orient:vertical!important; overflow:hidden!important; } .ijbs-buttons{ display:flex!important; flex-wrap:nowrap!important; align-items:center!important; gap:8px!important; margin:0!important; padding:0!important; } .ijbs-btn{ position:relative!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:36px!important; padding:8px 14px!important; border:1px solid rgba(255,255,255,.45)!important; border-radius:8px!important; background:rgba(255,255,255,.10)!important; color:#fff!important; font-family:Arial,Helvetica,sans-serif!important; font-size:11px!important; font-weight:700!important; line-height:1.1!important; text-decoration:none!important; white-space:nowrap!important; box-shadow:0 4px 10px rgba(0,0,0,.07)!important; backdrop-filter:blur(4px)!important; transition:transform .25s ease,background .25s ease,box-shadow .25s ease,border-color .25s ease!important; } .ijbs-btn:hover{ transform:translateY(-2px)!important; background:rgba(255,255,255,.18)!important; color:#fff!important; border-color:var(--ijbs-gold)!important; box-shadow:0 7px 16px rgba(0,0,0,.14)!important; } .ijbs-btn-primary{ background:linear-gradient(135deg,#FFD04C,#FFDD63)!important; border-color:#FFD04C!important; color:#155C2E!important; box-shadow:0 6px 15px rgba(255,208,76,.25)!important; } .ijbs-btn-primary:hover{ background:linear-gradient(135deg,#FFDD63,#FFE58A)!important; color:#155C2E!important; } /* Optional explicit image panel: works if HTML includes .ijbs-hero-image */ .ijbs-hero-image{ position:absolute!important; right:0!important; top:0!important; width:43%!important; height:100%!important; z-index:2!important; overflow:hidden!important; pointer-events:none!important; } .ijbs-hero-image img{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:center!important; margin:0!important; border:0!important; transform:none!important; filter:saturate(.92) contrast(.96)!important; transition:transform 8s ease!important; } .ijbs-banner:hover .ijbs-hero-image img{transform:scale(1.04)!important;} .ijbs-hero-image::after{ content:""!important; position:absolute!important; inset:0!important; background:linear-gradient(90deg,#1F7A3D 0%,rgba(31,122,61,.72) 20%,rgba(31,122,61,.10) 55%,rgba(31,122,61,0) 100%)!important; } @media(max-width:900px){ .ijbs-banner{ min-height:330px!important; height:330px!important; padding:28px 25px!important; } .ijbs-content{width:64%!important;max-width:600px!important;} .ijbs-title{font-size:36px!important;} .ijbs-subtitle{font-size:15px!important;} .ijbs-text{font-size:12px!important;line-height:1.45!important;-webkit-line-clamp:3!important;} .ijbs-btn{font-size:10.5px!important;padding:7px 11px!important;} .ijbs-hero-image{width:43%!important;} } @media(max-width:600px){ .ijbs-banner{ height:auto!important; min-height:0!important; padding:28px 20px 25px!important; border-radius:0 0 16px 16px!important; background:linear-gradient(135deg,#155C2E 0%,#1F7A3D 65%,#3CA24C 100%)!important; } .ijbs-content{width:100%!important;max-width:none!important;} .ijbs-hero-image{display:none!important;} .ijbs-title{font-size:32px!important;line-height:.95!important;} .ijbs-subtitle{font-size:16px!important;} .ijbs-text{max-width:100%!important;font-size:12.5px!important;line-height:1.5!important;-webkit-line-clamp:4!important;} .ijbs-buttons{flex-wrap:wrap!important;gap:7px!important;} .ijbs-btn{min-height:34px!important;padding:8px 12px!important;font-size:10.5px!important;} } @media(prefers-reduced-motion:reduce){ .ijbs-banner,.ijbs-banner *,.ijbs-hero-image img{animation:none!important;transition:none!important;} } /* ========================================================== END IJBS HERO V3 ========================================================== */ /* ========================================================== IJBS HERO V4 — BALANCED HEIGHT / NO CONTENT CLIPPING ---------------------------------------------------------- Revision: - Hero is no longer excessively compact - All title, description and buttons remain visible - Sustainability image remains on the right - Green–gold visual identity preserved - Desktop / tablet / mobile optimized ---------------------------------------------------------- */ .ijbs-banner{ height:400px!important; min-height:400px!important; padding:32px 34px 34px!important; box-sizing:border-box!important; display:flex!important; align-items:center!important; overflow:hidden!important; } /* Give the text column enough vertical space */ .ijbs-content{ width:59%!important; max-width:700px!important; box-sizing:border-box!important; } /* Slightly reduce typography only enough to guarantee fit */ .ijbs-title{ font-size:42px!important; line-height:.94!important; letter-spacing:0!important; } .ijbs-subtitle{ margin:9px 0 11px!important; font-size:17px!important; line-height:1.18!important; } .ijbs-text{ max-width:680px!important; margin:0 0 15px!important; font-size:13px!important; line-height:1.5!important; -webkit-line-clamp:3!important; } .ijbs-buttons{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:8px!important; } .ijbs-btn{ min-height:37px!important; padding:8px 14px!important; font-size:11px!important; } /* Keep the image visually prominent without covering the text */ .ijbs-hero-image{ width:43%!important; height:100%!important; } /* Tablet */ @media(max-width:900px){ .ijbs-banner{ height:370px!important; min-height:370px!important; padding:28px 25px 30px!important; } .ijbs-content{ width:62%!important; max-width:610px!important; } .ijbs-title{ font-size:36px!important; line-height:.96!important; } .ijbs-subtitle{ font-size:15px!important; margin:8px 0 10px!important; } .ijbs-text{ font-size:12px!important; line-height:1.48!important; -webkit-line-clamp:3!important; margin-bottom:13px!important; } .ijbs-btn{ min-height:35px!important; padding:7px 11px!important; font-size:10.5px!important; } .ijbs-hero-image{ width:42%!important; } } /* Mobile — natural height so nothing is cut */ @media(max-width:600px){ .ijbs-banner{ height:auto!important; min-height:0!important; padding:28px 20px 28px!important; border-radius:0 0 16px 16px!important; } .ijbs-content{ width:100%!important; max-width:none!important; } .ijbs-hero-image{ display:none!important; } .ijbs-title{ font-size:32px!important; line-height:.96!important; } .ijbs-subtitle{ font-size:16px!important; line-height:1.2!important; margin:9px 0 12px!important; } .ijbs-text{ max-width:100%!important; font-size:12.5px!important; line-height:1.52!important; -webkit-line-clamp:4!important; margin-bottom:16px!important; } .ijbs-buttons{ flex-wrap:wrap!important; gap:7px!important; } .ijbs-btn{ min-height:34px!important; padding:8px 12px!important; font-size:10.5px!important; } } /* Accessibility */ @media(prefers-reduced-motion:reduce){ .ijbs-banner, .ijbs-banner *, .ijbs-hero-image img{ animation:none!important; transition:none!important; } } /* ========================================================== END IJBS HERO V4 ========================================================== */ /* ========================================================== IJBS HERO V5 — BALANCED OUTER SPACING ---------------------------------------------------------- Revision: - Hero no longer touches the left/right edges - Creates equal visual breathing room around the Hero - Keeps Hero height from V4 - Keeps title/content readable and balanced - Keeps right-side sustainability image - Does not alter sidebar/header/navigation ========================================================== */ .ijbs-banner{ width:calc(100% - 28px)!important; margin-left:14px!important; margin-right:14px!important; height:400px!important; min-height:400px!important; padding:32px 28px 34px!important; box-sizing:border-box!important; } /* Keep content from becoming too wide after the outer inset */ .ijbs-content{ width:59%!important; max-width:690px!important; box-sizing:border-box!important; } /* Keep the image inside the new balanced Hero boundary */ .ijbs-hero-image{ right:0!important; width:43%!important; height:100%!important; } /* Tablet */ @media(max-width:900px){ .ijbs-banner{ width:calc(100% - 24px)!important; margin-left:12px!important; margin-right:12px!important; height:370px!important; min-height:370px!important; padding:28px 24px 30px!important; } .ijbs-content{ width:62%!important; max-width:600px!important; } .ijbs-hero-image{ width:42%!important; } } /* Mobile */ @media(max-width:600px){ .ijbs-banner{ width:calc(100% - 20px)!important; margin-left:10px!important; margin-right:10px!important; height:auto!important; min-height:0!important; padding:28px 20px 28px!important; border-radius:0 0 16px 16px!important; } .ijbs-content{ width:100%!important; max-width:none!important; } .ijbs-hero-image{ display:none!important; } } /* ========================================================== END IJBS HERO V5 ========================================================== */ /* ========================================================== IJBS HERO V6 — COMPACT JOURNAL NAME / COVER COLOR ---------------------------------------------------------- Purpose: - Menjadikan nama jurnal lebih kecil dan proporsional - Tetap rata kiri seperti referensi Edu Sportivo - Menggunakan warna identitas cover: green + gold - Tidak mengubah header, navigation, sidebar, atau struktur Hero ========================================================== */ /* COVER COLOR PALETTE */ :root{ --ijbs-cover-green:#1F7A3D; --ijbs-cover-green-deep:#155C2E; --ijbs-cover-green-light:#3CA24C; --ijbs-cover-gold:#FFD04C; --ijbs-cover-gold-light:#FFDD63; } /* ---------------------------------------------------------- HERO CONTENT — LEFT ALIGNED ---------------------------------------------------------- */ .ijbs-content{ width:59%!important; max-width:690px!important; margin:0!important; padding:0!important; text-align:left!important; } /* ---------------------------------------------------------- JOURNAL NAME — COMPACT Target appearance: INTERNATIONAL JOURNAL OF BUSINESS SUSTAINABILITY ---------------------------------------------------------- */ .ijbs-title{ display:block!important; width:auto!important; max-width:610px!important; margin:4px 0 0!important; padding:0!important; color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif!important; font-size:34px!important; font-weight:800!important; line-height:1.02!important; letter-spacing:.1px!important; text-align:left!important; text-shadow:1px 2px 5px rgba(0,0,0,.18)!important; } /* First part of journal name — white */ .ijbs-title span:first-child{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; } /* Second part — gold from the journal cover */ .ijbs-title span:nth-child(2){ color:var(--ijbs-cover-gold)!important; -webkit-text-fill-color:var(--ijbs-cover-gold)!important; } /* Prevent old centered rules from taking effect */ .ijbs-title span{ display:inline!important; text-align:left!important; } /* ---------------------------------------------------------- SUBTITLE — SMALLER THAN JOURNAL NAME ---------------------------------------------------------- */ .ijbs-subtitle{ max-width:620px!important; margin:9px 0 12px!important; padding:0!important; color:#FFFFFF!important; text-align:left!important; font-size:16px!important; font-weight:700!important; line-height:1.2!important; text-shadow:1px 2px 4px rgba(0,0,0,.16)!important; } /* Gold line before subtitle */ .ijbs-subtitle::before{ width:24px!important; height:3px!important; margin:0 7px 3px 0!important; background:var(--ijbs-cover-gold)!important; } /* ---------------------------------------------------------- DESCRIPTION — KEEP COMPACT ---------------------------------------------------------- */ .ijbs-text{ max-width:620px!important; margin:0 0 15px!important; font-size:12.5px!important; line-height:1.5!important; text-align:left!important; color:rgba(255,255,255,.94)!important; } /* ---------------------------------------------------------- BUTTONS — COVER GOLD / GREEN ---------------------------------------------------------- */ .ijbs-buttons{ justify-content:flex-start!important; align-items:center!important; } .ijbs-btn-primary{ background:linear-gradient( 135deg, var(--ijbs-cover-gold) 0%, var(--ijbs-cover-gold-light) 100% )!important; border-color:var(--ijbs-cover-gold)!important; color:var(--ijbs-cover-green-deep)!important; } .ijbs-btn-primary:hover{ background:linear-gradient( 135deg, var(--ijbs-cover-gold-light) 0%, #FFE58A 100% )!important; color:var(--ijbs-cover-green-deep)!important; } .ijbs-btn:hover{ border-color:var(--ijbs-cover-gold)!important; } /* ---------------------------------------------------------- DESKTOP — COMPACT JOURNAL NAME ---------------------------------------------------------- */ @media(min-width:901px){ .ijbs-title{ font-size:34px!important; line-height:1.02!important; max-width:610px!important; } .ijbs-content{ width:59%!important; max-width:690px!important; } } /* ---------------------------------------------------------- TABLET ---------------------------------------------------------- */ @media(max-width:900px){ .ijbs-content{ width:62%!important; max-width:600px!important; } .ijbs-title{ font-size:30px!important; line-height:1.02!important; max-width:540px!important; } .ijbs-subtitle{ font-size:15px!important; margin:8px 0 11px!important; } .ijbs-text{ font-size:12px!important; line-height:1.48!important; } } /* ---------------------------------------------------------- MOBILE ---------------------------------------------------------- */ @media(max-width:600px){ .ijbs-content{ width:100%!important; max-width:none!important; } .ijbs-title{ font-size:26px!important; line-height:1.04!important; max-width:100%!important; letter-spacing:0!important; } .ijbs-subtitle{ font-size:15px!important; line-height:1.22!important; margin:9px 0 12px!important; } .ijbs-text{ max-width:100%!important; font-size:12.5px!important; line-height:1.52!important; -webkit-line-clamp:4!important; margin-bottom:15px!important; } .ijbs-buttons{ justify-content:flex-start!important; flex-wrap:wrap!important; gap:7px!important; } .ijbs-btn{ min-height:34px!important; padding:8px 12px!important; font-size:10.5px!important; } } /* ========================================================== END IJBS HERO V6 ========================================================== */ /* ========================================================== IJBS SIDEBAR HEADINGS V7 — GOLD DOMINANT ---------------------------------------------------------- Target: - For Authors - People - Editorial Policies The menu items/content below each heading are intentionally NOT changed. Only the section-heading appearance is enhanced. Palette follows IJBS cover: green + gold/yellow. ========================================================== */ /* ---------- SIDEBAR SECTION HEADINGS ---------- */ .sidebar-title{ position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important; min-height:54px!important; margin:0 0 14px!important; padding:12px 18px!important; box-sizing:border-box!important; overflow:hidden!important; /* GOLD IS THE DOMINANT COLOR */ background: linear-gradient( 115deg, #FFD04C 0%, #FFD95F 42%, #F5C842 70%, #3CA24C 100% )!important; color:#155C2E!important; -webkit-text-fill-color:#155C2E!important; border:1px solid rgba(255,208,76,.95)!important; border-radius:14px!important; font-family:Arial,Helvetica,sans-serif!important; font-size:18px!important; font-weight:800!important; line-height:1.2!important; letter-spacing:.25px!important; text-align:center!important; box-shadow: 0 8px 18px rgba(31,122,61,.14), 0 4px 12px rgba(255,208,76,.28)!important; transition: transform .35s ease, box-shadow .35s ease, background-position .7s ease!important; background-size:180% 180%!important; background-position:0% 50%!important; } /* Green accent strip on the left */ .sidebar-title::before{ content:""; position:absolute!important; left:0!important; top:0!important; width:6px!important; height:100%!important; background:#155C2E!important; border-radius:14px 0 0 14px!important; transform:scaleY(.55)!important; transform-origin:center!important; transition:transform .35s ease!important; z-index:1!important; } /* Animated light sweep */ .sidebar-title::after{ content:""; position:absolute!important; top:-30%!important; left:-55%!important; width:32%!important; height:160%!important; background:linear-gradient( 100deg, transparent 0%, rgba(255,255,255,.18) 35%, rgba(255,255,255,.72) 50%, rgba(255,255,255,.18) 65%, transparent 100% )!important; transform:skewX(-22deg)!important; animation:ijbsSidebarHeadingShine 4.5s ease-in-out infinite!important; pointer-events:none!important; z-index:2!important; } .sidebar-title:hover{ transform:translateY(-3px)!important; background-position:100% 50%!important; box-shadow: 0 13px 26px rgba(31,122,61,.18), 0 7px 18px rgba(255,208,76,.34)!important; } .sidebar-title:hover::before{ transform:scaleY(.82)!important; } @keyframes ijbsSidebarHeadingShine{ 0%,55%{ left:-55%; opacity:0; } 65%{ opacity:1; } 85%,100%{ left:125%; opacity:0; } } /* ---------- HEADING TEXT ABOVE THE EFFECT LAYERS ---------- */ .sidebar-title{ isolation:isolate!important; } .sidebar-title{ text-shadow:0 1px 1px rgba(255,255,255,.55)!important; } /* ---------- SPACING BETWEEN SIDEBAR GROUPS ---------- */ .sidebar-title + .gap-2{ margin-bottom:20px!important; } /* Keep the existing menu cards exactly as they are. */ .content .gap-2 .m-menu{ /* no visual redesign here */ } /* ---------- RESPONSIVE ---------- */ @media(max-width:900px){ .sidebar-title{ min-height:52px!important; font-size:17px!important; padding:11px 16px!important; border-radius:13px!important; } } @media(max-width:600px){ .sidebar-title{ min-height:48px!important; margin-bottom:11px!important; padding:10px 14px!important; font-size:16px!important; border-radius:12px!important; } .sidebar-title + .gap-2{ margin-bottom:16px!important; } } /* ---------- REDUCED MOTION ---------- */ @media(prefers-reduced-motion:reduce){ .sidebar-title, .sidebar-title::before, .sidebar-title::after{ animation:none!important; transition:none!important; } .sidebar-title:hover{ transform:none!important; } } /* ========================================================== IJBS — JOURNAL METRICS GREEN–GOLD SIDEBAR STYLE ---------------------------------------------------------- Added as a NEW scoped block. Existing IJBS / OJS styles above are not modified. Compatible with the IJBS Journal Metrics HTML using: .ijbs-journal-metrics .ijbs-metrics-toggle .ijbs-metrics-header .ijbs-metrics-period .ijbs-metrics-grid .ijbs-metric-item .ijbs-diversity-header .ijbs-country-button .ijbs-country-list .ijbs-metrics-button .ijbs-metrics-modal ========================================================== */ .ijbs-journal-metrics{ --ijbs-green:#3CA24C; --ijbs-green-dark:#1F7A3D; --ijbs-green-deep:#155C2E; --ijbs-gold:#FFD04C; --ijbs-gold-light:#FFDD63; --ijbs-soft:#F4FAF5; --ijbs-border:#C9E5CE; position:relative!important; width:100%!important; max-width:100%!important; margin:0 0 24px!important; padding:0!important; box-sizing:border-box!important; background:transparent!important; color:#333333!important; font-family:Arial,Helvetica,sans-serif!important; } .ijbs-journal-metrics *, .ijbs-journal-metrics *::before, .ijbs-journal-metrics *::after{ box-sizing:border-box!important; } /* Hidden checkbox */ .ijbs-metrics-toggle{ position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; clip-path:inset(50%)!important; white-space:nowrap!important; border:0!important; opacity:0!important; } /* Header */ .ijbs-metrics-header{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-height:52px!important; margin:0 0 13px!important; padding:11px 16px!important; background:linear-gradient( 135deg, #3CA24C 0%, #FFD04C 58%, #FFDD63 100% )!important; border:0!important; border-radius:14px!important; box-shadow:0 7px 18px rgba(21,92,46,.18)!important; overflow:hidden!important; position:relative!important; } .ijbs-metrics-header::before{ content:""!important; position:absolute!important; top:0!important; left:-65%!important; width:42%!important; height:100%!important; background:linear-gradient( 100deg, transparent 0%, rgba(255,255,255,.08) 25%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.08) 75%, transparent 100% )!important; transform:skewX(-22deg)!important; animation:ijbsMetricsHeaderShine 3.5s ease-in-out infinite!important; pointer-events:none!important; } .ijbs-metrics-header h3{ position:relative!important; z-index:2!important; margin:0!important; padding:0!important; color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; font-size:20px!important; line-height:1.2!important; font-weight:800!important; text-align:center!important; letter-spacing:.1px!important; } @keyframes ijbsMetricsHeaderShine{ 0%{left:-65%;opacity:0;} 15%{opacity:1;} 48%{left:125%;opacity:1;} 55%,100%{left:125%;opacity:0;} } /* Period */ .ijbs-metrics-period{ display:inline-flex!important; align-items:center!important; gap:7px!important; margin:0 0 18px!important; padding:5px 10px!important; background:#F4FAF5!important; border:1px solid #C9E5CE!important; border-radius:16px!important; color:#155C2E!important; font-size:11px!important; line-height:1.3!important; font-weight:700!important; white-space:nowrap!important; } /* Metrics grid */ .ijbs-metrics-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; column-gap:12px!important; row-gap:12px!important; width:100%!important; margin:0 0 20px!important; padding:0!important; } /* Metric cards */ .ijbs-metric-item{ position:relative!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:flex-start!important; min-width:0!important; width:100%!important; margin:0!important; padding:14px 9px!important; background:#FFFFFF!important; border:1px solid #C9E5CE!important; border-top:3px solid #FFD04C!important; border-radius:10px!important; box-shadow:0 5px 15px rgba(21,92,46,.06)!important; text-align:center!important; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease!important; } .ijbs-metric-item:hover{ transform:translateY(-2px)!important; border-top-color:#3CA24C!important; box-shadow:0 9px 20px rgba(21,92,46,.11)!important; } .ijbs-metric-number{ display:block!important; margin:0 0 5px!important; padding:0!important; color:#155C2E!important; -webkit-text-fill-color:#155C2E!important; font-size:25px!important; line-height:1!important; font-weight:800!important; text-align:center!important; } .ijbs-metric-label{ display:block!important; width:100%!important; max-width:105px!important; margin:0 auto!important; padding:0!important; color:#555555!important; -webkit-text-fill-color:#555555!important; font-size:11px!important; line-height:1.35!important; font-weight:600!important; text-align:center!important; } /* Author Diversity header */ .ijbs-diversity-header{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:8px!important; margin:0 0 10px!important; padding:0!important; } .ijbs-diversity-header h4{ margin:0!important; padding:0!important; color:#155C2E!important; -webkit-text-fill-color:#155C2E!important; font-size:16px!important; line-height:1.3!important; font-weight:800!important; } /* Countries button */ .ijbs-country-button{ display:inline-flex!important; align-items:center!important; gap:4px!important; padding:5px 9px!important; background:linear-gradient(135deg,#FFD04C,#FFDD63)!important; border:0!important; border-radius:20px!important; color:#155C2E!important; -webkit-text-fill-color:#155C2E!important; font-size:10px!important; line-height:1.2!important; font-weight:800!important; white-space:nowrap!important; cursor:pointer!important; box-shadow:0 4px 12px rgba(255,208,76,.25)!important; transition:transform .2s ease,box-shadow .2s ease!important; } .ijbs-country-button:hover{ transform:translateY(-1px)!important; box-shadow:0 6px 16px rgba(255,208,76,.35)!important; } .ijbs-country-button span{ font-size:15px!important; line-height:10px!important; } /* Diversity bar */ .ijbs-diversity-bar{ width:100%!important; height:5px!important; margin:0 0 14px!important; padding:0!important; border-radius:20px!important; background:linear-gradient( 90deg, #155C2E 0%, #3CA24C 60%, #FFD04C 100% )!important; } /* Country list */ .ijbs-country-list{ display:flex!important; flex-direction:column!important; gap:7px!important; width:100%!important; margin:0 0 17px!important; padding:0!important; } .ijbs-country-row{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:8px!important; width:100%!important; margin:0!important; padding:7px 9px!important; background:#FFFFFF!important; border:1px solid #E2EFE4!important; border-radius:8px!important; color:#444444!important; font-size:11px!important; line-height:1.3!important; transition:background .2s ease,transform .2s ease!important; } .ijbs-country-row:hover{ background:#F4FAF5!important; transform:translateX(2px)!important; } .ijbs-country-row strong{ color:#155C2E!important; -webkit-text-fill-color:#155C2E!important; font-size:11px!important; font-weight:800!important; } .ijbs-country-name{ display:flex!important; align-items:center!important; gap:7px!important; min-width:0!important; color:#444444!important; font-weight:600!important; } /* Flags */ .ijbs-country-flag{ display:block!important; width:19px!important; min-width:19px!important; max-width:19px!important; height:13px!important; min-height:13px!important; max-height:13px!important; margin:0!important; padding:0!important; object-fit:cover!important; border:0!important; border-radius:2px!important; box-shadow:0 1px 3px rgba(0,0,0,.15)!important; transform:none!important; } .ijbs-country-flag:hover{ transform:none!important; box-shadow:0 1px 3px rgba(0,0,0,.15)!important; } /* View Details */ .ijbs-metrics-button{ display:block!important; width:100%!important; min-height:37px!important; padding:10px 15px!important; box-sizing:border-box!important; text-align:center!important; border:0!important; border-radius:25px!important; background:linear-gradient(135deg,#155C2E,#1F7A3D)!important; color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; font-size:12px!important; line-height:1.3!important; font-weight:800!important; cursor:pointer!important; box-shadow:0 6px 16px rgba(21,92,46,.18)!important; transition:transform .25s ease,box-shadow .25s ease,background .25s ease,color .25s ease!important; } .ijbs-metrics-button:hover{ transform:translateY(-2px)!important; background:linear-gradient(135deg,#FFD04C,#FFDD63)!important; color:#155C2E!important; -webkit-text-fill-color:#155C2E!important; box-shadow:0 8px 18px rgba(255,208,76,.30)!important; } /* Modal */ .ijbs-metrics-modal{ position:fixed!important; inset:0!important; z-index:99999!important; display:flex!important; align-items:center!important; justify-content:center!important; padding:20px!important; box-sizing:border-box!important; opacity:0!important; visibility:hidden!important; pointer-events:none!important; transition:opacity .25s ease,visibility .25s ease!important; } .ijbs-metrics-toggle:checked ~ .ijbs-metrics-modal{ opacity:1!important; visibility:visible!important; pointer-events:auto!important; } .ijbs-metrics-modal-overlay{ position:absolute!important; inset:0!important; background:rgba(21,92,46,.55)!important; backdrop-filter:blur(4px)!important; cursor:pointer!important; } .ijbs-metrics-modal-box{ position:relative!important; z-index:2!important; width:100%!important; max-width:650px!important; max-height:88vh!important; overflow-y:auto!important; padding:25px!important; background:#FFFFFF!important; border:1px solid #C9E5CE!important; border-top:5px solid #FFD04C!important; border-radius:18px!important; box-shadow:0 25px 70px rgba(0,0,0,.25)!important; box-sizing:border-box!important; animation:ijbsMetricsModalIn .3s ease!important; } @keyframes ijbsMetricsModalIn{ from{opacity:0;transform:translateY(15px) scale(.98);} to{opacity:1;transform:translateY(0) scale(1);} } /* Modal header */ .ijbs-modal-header{ display:flex!important; align-items:flex-start!important; justify-content:space-between!important; gap:20px!important; margin:0 0 20px!important; padding:0 0 17px!important; border-bottom:1px solid #C9E5CE!important; } .ijbs-modal-header h2{ margin:0 0 5px!important; padding:0!important; color:#155C2E!important; -webkit-text-fill-color:#155C2E!important; font-size:24px!important; line-height:1.25!important; font-weight:800!important; } .ijbs-modal-header p{ margin:0!important; padding:0!important; color:#777777!important; font-size:12px!important; line-height:1.4!important; } /* Close */ .ijbs-modal-close{ display:flex!important; align-items:center!important; justify-content:center!important; width:34px!important; height:34px!important; min-width:34px!important; flex:0 0 34px!important; border-radius:50%!important; background:#F4FAF5!important; border:1px solid #C9E5CE!important; color:#155C2E!important; -webkit-text-fill-color:#155C2E!important; font-size:24px!important; line-height:1!important; cursor:pointer!important; transition:background .2s ease,transform .2s ease!important; } .ijbs-modal-close:hover{ background:#FFD04C!important; border-color:#FFD04C!important; transform:rotate(90deg)!important; } /* Modal sections */ .ijbs-modal-section{ margin:0 0 22px!important; padding:17px!important; background:#FFFFFF!important; border:1px solid #E1EEE3!important; border-radius:12px!important; box-shadow:0 5px 15px rgba(21,92,46,.04)!important; } .ijbs-modal-section h3{ margin:0 0 12px!important; padding:0!important; color:#155C2E!important; -webkit-text-fill-color:#155C2E!important; font-size:16px!important; line-height:1.3!important; font-weight:800!important; } .ijbs-modal-section h3::before{ content:""!important; display:inline-block!important; width:4px!important; height:17px!important; margin-right:8px!important; vertical-align:-3px!important; border-radius:5px!important; background:#FFD04C!important; } /* Stat rows */ .ijbs-stat-row{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:20px!important; padding:9px 0!important; border-bottom:1px solid #EDF3EE!important; color:#444444!important; font-size:13px!important; line-height:1.35!important; } .ijbs-stat-row:last-child{ border-bottom:0!important; } .ijbs-stat-row strong{ color:#155C2E!important; -webkit-text-fill-color:#155C2E!important; font-weight:800!important; white-space:nowrap!important; } /* Outcome */ .ijbs-outcome-box{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:20px!important; margin:0 0 4px!important; padding:12px 14px!important; background:linear-gradient(135deg,#FFF8D8,#F4FAF5)!important; border:1px solid #F2D56A!important; border-radius:9px!important; color:#155C2E!important; font-size:13px!important; font-weight:700!important; } .ijbs-outcome-box strong{ color:#155C2E!important; -webkit-text-fill-color:#155C2E!important; font-size:17px!important; } /* Country count */ .ijbs-country-count{ display:inline-block!important; margin-left:5px!important; padding:4px 9px!important; border-radius:20px!important; background:#FFD04C!important; color:#155C2E!important; -webkit-text-fill-color:#155C2E!important; font-size:10px!important; line-height:1.2!important; vertical-align:2px!important; } /* Modal countries */ .ijbs-modal-country{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:15px!important; padding:8px 0!important; border-bottom:1px solid #EDF3EE!important; color:#444444!important; font-size:13px!important; line-height:1.3!important; } .ijbs-modal-country:last-child{ border-bottom:0!important; } .ijbs-modal-country > div{ display:flex!important; align-items:center!important; gap:8px!important; min-width:0!important; } .ijbs-modal-country strong{ color:#155C2E!important; -webkit-text-fill-color:#155C2E!important; font-size:13px!important; font-weight:800!important; white-space:nowrap!important; } /* Prevent global image hover rules from affecting metrics flags */ .ijbs-journal-metrics img, .ijbs-journal-metrics img:hover{ transform:none!important; } /* Responsive */ @media(max-width:600px){ .ijbs-metrics-header{ min-height:48px!important; margin-bottom:13px!important; padding:10px 14px!important; } .ijbs-metrics-header h3{ font-size:18px!important; } .ijbs-metrics-period{ font-size:10.5px!important; margin-bottom:17px!important; } .ijbs-metrics-grid{ column-gap:8px!important; row-gap:10px!important; } .ijbs-metric-item{ padding:12px 8px!important; } .ijbs-metric-number{ font-size:23px!important; } .ijbs-metric-label{ max-width:95px!important; font-size:10.5px!important; line-height:1.25!important; } .ijbs-diversity-header h4{ font-size:15px!important; } .ijbs-country-button{ font-size:9px!important; padding:5px 8px!important; } .ijbs-country-row{ font-size:10.5px!important; } .ijbs-country-row strong{ font-size:10.5px!important; } .ijbs-metrics-modal{ padding:10px!important; } .ijbs-metrics-modal-box{ max-height:94vh!important; padding:18px!important; border-radius:14px!important; } .ijbs-modal-header h2{ font-size:20px!important; } .ijbs-modal-section{ padding:13px!important; } .ijbs-stat-row{ font-size:12px!important; gap:10px!important; } } @media(prefers-reduced-motion:reduce){ .ijbs-metrics-header::before, .ijbs-metrics-modal-box{ animation:none!important; } .ijbs-metric-item, .ijbs-country-button, .ijbs-metrics-button, .ijbs-modal-close{ transition:none!important; } } /* ========================================================== END IJBS — JOURNAL METRICS ========================================================== */ /* ========================================================== IJBS — JOURNAL METRICS V2 SIDEBAR HEADER ANIMATION + PERFECTLY CENTERED PERIOD ---------------------------------------------------------- Purpose: 1. Journal Metrics header follows the same animated sidebar-heading visual language. 2. Publication period is mathematically centered inside the sidebar, independent of text width. 3. Existing metric cards, diversity data, and modal structure remain unchanged. ========================================================== */ /* ---------- JOURNAL METRICS HEADER ---------- */ .ijbs-journal-metrics .ijbs-metrics-header{ position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-height:52px!important; margin:0 0 13px!important; padding:11px 16px!important; overflow:hidden!important; background:linear-gradient( 135deg, #3CA24C 0%, #FFD04C 58%, #FFDD63 100% )!important; border:0!important; border-radius:14px!important; box-shadow: 0 8px 18px rgba(31,122,61,.20), 0 3px 9px rgba(255,208,76,.14)!important; isolation:isolate!important; /* Gentle floating motion, matching the sidebar heading feel */ animation:ijbsJournalMetricsHeaderFloat 4.8s ease-in-out infinite!important; transition: transform .35s ease, box-shadow .35s ease!important; } /* Animated shine — same visual language as the sidebar heading */ .ijbs-journal-metrics .ijbs-metrics-header::before{ content:""!important; position:absolute!important; top:-30%!important; left:-55%!important; width:30%!important; height:160%!important; background:linear-gradient( 90deg, transparent 0%, rgba(255,255,255,.08) 20%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.08) 80%, transparent 100% )!important; transform:skewX(-22deg)!important; animation:ijbsJournalMetricsHeaderShine 4.8s ease-in-out infinite!important; pointer-events:none!important; z-index:1!important; } /* Soft inner highlight */ .ijbs-journal-metrics .ijbs-metrics-header::after{ content:""!important; position:absolute!important; inset:0!important; border-radius:14px!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.24), inset 0 -1px 0 rgba(21,92,46,.08)!important; pointer-events:none!important; z-index:1!important; } /* Header title stays above animation */ .ijbs-journal-metrics .ijbs-metrics-header h3{ position:relative!important; z-index:2!important; display:block!important; width:100%!important; margin:0!important; padding:0!important; text-align:center!important; text-align-last:center!important; color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; font-size:20px!important; line-height:1.2!important; font-weight:800!important; letter-spacing:.1px!important; text-shadow: 0 1px 2px rgba(21,92,46,.16)!important; } /* Floating animation */ @keyframes ijbsJournalMetricsHeaderFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } } /* Shine animation */ @keyframes ijbsJournalMetricsHeaderShine{ 0%,58%{ left:-55%; opacity:0; } 64%{ opacity:1; } 88%{ left:125%; opacity:1; } 94%,100%{ left:125%; opacity:0; } } /* Hover: pause motion and slightly lift the header */ .ijbs-journal-metrics .ijbs-metrics-header:hover{ animation-play-state:paused!important; transform:translateY(-3px)!important; box-shadow: 0 12px 25px rgba(31,122,61,.24), 0 5px 12px rgba(255,208,76,.18)!important; } .ijbs-journal-metrics .ijbs-metrics-header:hover::before{ animation-play-state:paused!important; } /* ---------- PUBLICATION PERIOD — PERFECT CENTER ---------- */ .ijbs-journal-metrics .ijbs-metrics-period{ display:flex!important; align-items:center!important; justify-content:center!important; /* Critical centering rules */ width:max-content!important; max-width:100%!important; margin:0 auto 18px!important; padding:5px 10px!important; text-align:center!important; text-align-last:center!important; background:#F4FAF5!important; border:1px solid #C9E5CE!important; border-radius:16px!important; color:#155C2E!important; -webkit-text-fill-color:#155C2E!important; font-size:11px!important; line-height:1.3!important; font-weight:700!important; white-space:nowrap!important; box-sizing:border-box!important; } /* Prevent inherited/sidebar text alignment from shifting the period */ .ijbs-journal-metrics .ijbs-metrics-period, .ijbs-journal-metrics .ijbs-metrics-period *{ text-align:center!important; text-align-last:center!important; } /* ---------- TABLET ---------- */ @media(max-width:900px){ .ijbs-journal-metrics .ijbs-metrics-header{ min-height:52px!important; padding:11px 15px!important; border-radius:13px!important; } .ijbs-journal-metrics .ijbs-metrics-header h3{ font-size:19px!important; } .ijbs-journal-metrics .ijbs-metrics-period{ margin-left:auto!important; margin-right:auto!important; } } /* ---------- MOBILE ---------- */ @media(max-width:600px){ .ijbs-journal-metrics .ijbs-metrics-header{ min-height:48px!important; margin-bottom:13px!important; padding:10px 14px!important; border-radius:12px!important; } .ijbs-journal-metrics .ijbs-metrics-header h3{ font-size:18px!important; } .ijbs-journal-metrics .ijbs-metrics-period{ width:100%!important; max-width:100%!important; margin-left:auto!important; margin-right:auto!important; padding:5px 8px!important; font-size:10.5px!important; white-space:normal!important; text-align:center!important; text-align-last:center!important; } } /* ---------- REDUCED MOTION ---------- */ @media(prefers-reduced-motion:reduce){ .ijbs-journal-metrics .ijbs-metrics-header, .ijbs-journal-metrics .ijbs-metrics-header::before{ animation:none!important; } .ijbs-journal-metrics .ijbs-metrics-header:hover{ transform:none!important; } } /* ========================================================== END IJBS — JOURNAL METRICS V2 ========================================================== */ /* ========================================================== IJBS — DIGITAL CURRENT TIME WIDGET Added to IJBS_GREEN_GOLD_SIDEBAR_V8 ---------------------------------------------------------- Designed for the native HTML/JavaScript clock: .ijbs-clock-widget .ijbs-clock-title .ijbs-clock-card .ijbs-digital-clock #ijbs-clock-time #ijbs-clock-date .ijbs-clock-location .ijbs-clock-dot ========================================================== */ .ijbs-clock-widget{ width:100%!important; max-width:100%!important; margin:0 0 22px!important; padding:0!important; box-sizing:border-box!important; } /* ---------- HEADER ---------- */ .ijbs-clock-widget .ijbs-clock-title{ position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-height:48px!important; margin:0 0 12px!important; padding:10px 14px!important; box-sizing:border-box!important; overflow:hidden!important; background:linear-gradient( 135deg, #3CA24C 0%, #FFD04C 58%, #FFDD63 100% )!important; border-radius:14px!important; border:0!important; box-shadow: 0 8px 18px rgba(31,122,61,.20), 0 3px 9px rgba(255,208,76,.14)!important; isolation:isolate!important; animation:ijbsClockHeaderFloat 4.8s ease-in-out infinite!important; transition: transform .35s ease, box-shadow .35s ease!important; } /* Moving shine */ .ijbs-clock-widget .ijbs-clock-title::before{ content:""!important; position:absolute!important; top:-30%!important; left:-55%!important; width:30%!important; height:160%!important; background:linear-gradient( 90deg, transparent 0%, rgba(255,255,255,.08) 20%, rgba(255,255,255,.55) 50%, rgba(255,255,255,.08) 80%, transparent 100% )!important; transform:skewX(-22deg)!important; animation:ijbsClockHeaderShine 4.8s ease-in-out infinite!important; pointer-events:none!important; z-index:1!important; } /* Inner highlight */ .ijbs-clock-widget .ijbs-clock-title::after{ content:""!important; position:absolute!important; inset:0!important; border-radius:14px!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.25), inset 0 -1px 0 rgba(21,92,46,.08)!important; pointer-events:none!important; z-index:1!important; } .ijbs-clock-widget .ijbs-clock-title span{ position:relative!important; z-index:2!important; display:block!important; width:100%!important; margin:0!important; padding:0!important; color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif!important; font-size:17px!important; line-height:1.2!important; font-weight:800!important; letter-spacing:.2px!important; text-align:center!important; text-align-last:center!important; text-shadow: 0 1px 2px rgba(21,92,46,.16)!important; } /* ---------- CLOCK CARD ---------- */ .ijbs-clock-card{ position:relative!important; width:100%!important; max-width:100%!important; margin:0!important; padding:12px 8px 10px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid #C9E5CE!important; border-top:3px solid #FFD04C!important; border-radius:13px!important; box-shadow: 0 6px 18px rgba(21,92,46,.07)!important; text-align:center!important; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease!important; } .ijbs-clock-card:hover{ transform:translateY(-3px)!important; border-top-color:#3CA24C!important; box-shadow: 0 11px 25px rgba(21,92,46,.13)!important; } /* ---------- DIGITAL CLOCK DISPLAY ---------- */ .ijbs-digital-clock{ position:relative!important; display:flex!important; flex-direction:column!important; align-items:center!important; justify-content:center!important; width:100%!important; min-height:118px!important; margin:0!important; padding:15px 8px!important; box-sizing:border-box!important; overflow:hidden!important; background:linear-gradient( 145deg, #155C2E 0%, #1F7A3D 62%, #3CA24C 100% )!important; border-radius:10px!important; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 -2px 8px rgba(0,0,0,.10)!important; } /* Display shine */ .ijbs-digital-clock::before{ content:""!important; position:absolute!important; top:-100%!important; left:-45%!important; width:35%!important; height:300%!important; background:linear-gradient( 90deg, transparent, rgba(255,255,255,.08), transparent )!important; transform:rotate(20deg)!important; animation:ijbsDigitalClockShine 6s ease-in-out infinite!important; pointer-events:none!important; } /* ---------- TIME ---------- */ .ijbs-clock-widget #ijbs-clock-time{ position:relative!important; z-index:2!important; display:block!important; width:100%!important; margin:0!important; padding:0!important; color:#FFD04C!important; -webkit-text-fill-color:#FFD04C!important; font-family: "Courier New", Courier, monospace!important; font-size:29px!important; line-height:1.1!important; font-weight:700!important; letter-spacing:2px!important; text-align:center!important; text-align-last:center!important; white-space:nowrap!important; text-shadow: 0 0 8px rgba(255,208,76,.25)!important; } /* ---------- DATE ---------- */ .ijbs-clock-widget #ijbs-clock-date{ position:relative!important; z-index:2!important; display:block!important; width:100%!important; margin:9px 0 0!important; padding:0!important; color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif!important; font-size:11px!important; line-height:1.3!important; font-weight:600!important; letter-spacing:.3px!important; text-align:center!important; text-align-last:center!important; } /* ---------- LOCATION ---------- */ .ijbs-clock-widget .ijbs-clock-location{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; margin:10px auto 1px!important; padding:0!important; box-sizing:border-box!important; gap:6px!important; color:#155C2E!important; -webkit-text-fill-color:#155C2E!important; font-family:Arial,Helvetica,sans-serif!important; font-size:10px!important; line-height:1.4!important; font-weight:700!important; text-align:center!important; text-align-last:center!important; } .ijbs-clock-widget .ijbs-clock-location span:last-child{ color:#155C2E!important; -webkit-text-fill-color:#155C2E!important; } /* Live indicator */ .ijbs-clock-widget .ijbs-clock-dot{ display:inline-block!important; width:7px!important; min-width:7px!important; height:7px!important; margin:0!important; padding:0!important; background:#3CA24C!important; border-radius:50%!important; box-shadow: 0 0 0 3px rgba(60,162,76,.12)!important; animation:ijbsClockPulse 2s ease-in-out infinite!important; } /* ---------- HEADER ANIMATION ---------- */ @keyframes ijbsClockHeaderFloat{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-2px); } } @keyframes ijbsClockHeaderShine{ 0%,58%{ left:-55%; opacity:0; } 64%{ opacity:1; } 88%{ left:125%; opacity:1; } 94%,100%{ left:125%; opacity:0; } } /* ---------- DISPLAY SHINE ---------- */ @keyframes ijbsDigitalClockShine{ 0%,65%{ left:-45%; opacity:0; } 72%{ opacity:1; } 90%{ left:125%; opacity:1; } 100%{ left:125%; opacity:0; } } /* ---------- LIVE DOT ---------- */ @keyframes ijbsClockPulse{ 0%,100%{ opacity:.65; transform:scale(1); } 50%{ opacity:1; transform:scale(1.15); } } /* ---------- HOVER ---------- */ .ijbs-clock-widget .ijbs-clock-title:hover{ animation-play-state:paused!important; transform:translateY(-3px)!important; box-shadow: 0 12px 25px rgba(31,122,61,.24), 0 5px 12px rgba(255,208,76,.18)!important; } .ijbs-clock-widget .ijbs-clock-title:hover::before{ animation-play-state:paused!important; } /* ---------- TABLET ---------- */ @media(max-width:900px){ .ijbs-clock-widget .ijbs-clock-title{ min-height:48px!important; padding:10px 13px!important; } .ijbs-clock-widget .ijbs-clock-title span{ font-size:17px!important; } .ijbs-digital-clock{ min-height:115px!important; } .ijbs-clock-widget #ijbs-clock-time{ font-size:27px!important; } } /* ---------- MOBILE ---------- */ @media(max-width:600px){ .ijbs-clock-widget{ margin-bottom:18px!important; } .ijbs-clock-widget .ijbs-clock-title{ min-height:46px!important; margin-bottom:11px!important; padding:9px 12px!important; border-radius:12px!important; } .ijbs-clock-widget .ijbs-clock-title span{ font-size:16px!important; } .ijbs-clock-card{ padding:10px 6px 9px!important; border-radius:12px!important; } .ijbs-digital-clock{ min-height:108px!important; padding:13px 5px!important; border-radius:9px!important; } .ijbs-clock-widget #ijbs-clock-time{ font-size:24px!important; letter-spacing:1.5px!important; } .ijbs-clock-widget #ijbs-clock-date{ margin-top:8px!important; font-size:10px!important; } .ijbs-clock-widget .ijbs-clock-location{ margin-top:9px!important; font-size:9.5px!important; } } /* ---------- VERY NARROW SIDEBAR ---------- */ @media(max-width:360px){ .ijbs-clock-widget #ijbs-clock-time{ font-size:21px!important; letter-spacing:1px!important; } .ijbs-clock-widget #ijbs-clock-date{ font-size:9.5px!important; } .ijbs-clock-widget .ijbs-clock-location{ font-size:9px!important; } } /* ---------- REDUCED MOTION ---------- */ @media(prefers-reduced-motion:reduce){ .ijbs-clock-widget .ijbs-clock-title, .ijbs-clock-widget .ijbs-clock-title::before, .ijbs-clock-widget .ijbs-digital-clock::before, .ijbs-clock-widget .ijbs-clock-dot{ animation:none!important; } .ijbs-clock-widget .ijbs-clock-title:hover{ transform:none!important; } .ijbs-clock-card{ transition:none!important; } } /* ========================================================== END IJBS — DIGITAL CURRENT TIME WIDGET ========================================================== */ /* ========================================================== IJBS FOOTER — FINAL GREEN / GOLD ---------------------------------------------------------- Fixes: 1. Prevents footer content from appearing as one column 2. Prevents global h3 rules from making headings dark green 3. Uses IJBS Green–Gold palette 4. Keeps the custom footer separate from OJS pageFooter-bottom ID 5. Responsive desktop / tablet / mobile ========================================================== */ /* OJS footer wrapper */ .pkp_structure_footer_wrapper{ background: linear-gradient( 135deg, #155C2E 0%, #1F7A3D 55%, #3CA24C 100% )!important; border:0!important; box-shadow:none!important; } /* OJS footer content */ .pkp_structure_footer, .pkp_footer_content{ background:transparent!important; color:#FFFFFF!important; } .pkp_footer_content{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; } /* Remove default panel styling if OJS wraps Page Footer */ .pkp_footer_content .panel, .pkp_footer_content .panel-success{ background:transparent!important; border:0!important; box-shadow:none!important; } /* ========================================================== MAIN IJBS FOOTER ========================================================== */ .ijbs-footer{ width:100%!important; margin:0!important; padding:0!important; background:transparent!important; color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif!important; box-sizing:border-box!important; } .ijbs-footer *, .ijbs-footer *::before, .ijbs-footer *::after{ box-sizing:border-box!important; } /* Main 3-column area */ .ijbs-footer .ijbs-footer-main{ width:100%!important; margin:0!important; padding:48px 30px 42px!important; background:transparent!important; } /* Critical fix: build the columns */ .ijbs-footer .ijbs-footer-container{ width:100%!important; max-width:1250px!important; margin:0 auto!important; padding:0!important; display:grid!important; grid-template-columns: minmax(0,1.55fr) minmax(180px,.75fr) minmax(230px,1fr)!important; gap:48px!important; align-items:start!important; } /* Columns */ .ijbs-footer .ijbs-footer-column{ min-width:0!important; margin:0!important; padding:0!important; background:transparent!important; } /* Footer headings — explicitly override global h1/h2/h3 rules */ .ijbs-footer h1, .ijbs-footer h2, .ijbs-footer h3, .ijbs-footer h4{ margin:0 0 16px!important; padding:0!important; color:#FFD04C!important; -webkit-text-fill-color:#FFD04C!important; font-family:Arial,Helvetica,sans-serif!important; font-weight:800!important; line-height:1.25!important; text-shadow:none!important; } /* IJBS brand */ .ijbs-footer .ijbs-footer-logo{ margin:0 0 8px!important; } .ijbs-footer .ijbs-footer-logo-mark{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:58px!important; height:30px!important; padding:0 13px!important; background:#FFD04C!important; color:#155C2E!important; -webkit-text-fill-color:#155C2E!important; border-radius:7px!important; font-size:15px!important; font-weight:900!important; letter-spacing:.5px!important; } /* About title */ .ijbs-footer .ijbs-footer-about h3{ font-size:21px!important; color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; margin-bottom:13px!important; } /* About text */ .ijbs-footer .ijbs-footer-about p{ margin:0 0 12px!important; padding:0!important; color:#F5FAF6!important; -webkit-text-fill-color:#F5FAF6!important; font-size:14px!important; line-height:1.7!important; font-weight:400!important; } /* Quick links */ .ijbs-footer .ijbs-footer-menu h3, .ijbs-footer .ijbs-footer-info h3{ font-size:18px!important; } .ijbs-footer .ijbs-footer-menu ul{ margin:0!important; padding:0!important; list-style:none!important; } .ijbs-footer .ijbs-footer-menu li{ margin:0!important; padding:0!important; list-style:none!important; } .ijbs-footer .ijbs-footer-menu li + li{ margin-top:8px!important; } .ijbs-footer .ijbs-footer-menu a{ display:inline-flex!important; align-items:center!important; gap:7px!important; color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; font-size:14px!important; line-height:1.45!important; font-weight:500!important; text-decoration:none!important; transition: color .25s ease, transform .25s ease!important; } .ijbs-footer .ijbs-footer-menu a::before{ content:"›"!important; color:#FFD04C!important; -webkit-text-fill-color:#FFD04C!important; font-size:17px!important; font-weight:800!important; } .ijbs-footer .ijbs-footer-menu a:hover{ color:#FFD04C!important; -webkit-text-fill-color:#FFD04C!important; transform:translateX(4px)!important; } /* Journal information */ .ijbs-footer .ijbs-footer-info-item{ display:grid!important; grid-template-columns:112px minmax(0,1fr)!important; gap:8px!important; margin:0!important; padding:6px 0!important; border-bottom:1px solid rgba(255,255,255,.13)!important; } .ijbs-footer .ijbs-footer-info-item:last-child{ border-bottom:0!important; } .ijbs-footer .ijbs-footer-info-item strong{ color:#FFD04C!important; -webkit-text-fill-color:#FFD04C!important; font-size:13px!important; font-weight:800!important; } .ijbs-footer .ijbs-footer-info-item span{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; font-size:13px!important; line-height:1.45!important; } /* Publisher strip */ .ijbs-footer .ijbs-footer-publisher{ width:100%!important; margin:0!important; padding:20px 30px!important; background:rgba(0,0,0,.14)!important; border-top:1px solid rgba(255,208,76,.45)!important; border-bottom:1px solid rgba(255,255,255,.12)!important; } .ijbs-footer .ijbs-footer-publisher-inner{ width:100%!important; max-width:1250px!important; margin:0 auto!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:25px!important; } .ijbs-footer .ijbs-footer-publisher-text{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; font-size:13px!important; line-height:1.55!important; } .ijbs-footer .ijbs-footer-publisher-text strong{ color:#FFD04C!important; -webkit-text-fill-color:#FFD04C!important; } .ijbs-footer .ijbs-footer-publisher-links{ display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:10px!important; flex-wrap:wrap!important; } .ijbs-footer .ijbs-footer-publisher-links a{ color:#FFD04C!important; -webkit-text-fill-color:#FFD04C!important; font-size:13px!important; font-weight:700!important; text-decoration:none!important; } .ijbs-footer .ijbs-footer-publisher-links a:hover{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; } .ijbs-footer .ijbs-footer-publisher-links span{ color:rgba(255,255,255,.55)!important; -webkit-text-fill-color:rgba(255,255,255,.55)!important; } /* Copyright bottom */ .ijbs-footer .ijbs-footer-bottom{ width:100%!important; margin:0!important; padding:15px 30px!important; background:#155C2E!important; } .ijbs-footer .ijbs-footer-bottom-inner{ width:100%!important; max-width:1250px!important; margin:0 auto!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:20px!important; } .ijbs-footer .ijbs-footer-copyright{ color:#DFF2E2!important; -webkit-text-fill-color:#DFF2E2!important; font-size:12px!important; line-height:1.5!important; } .ijbs-footer .ijbs-footer-license a{ display:inline-flex!important; align-items:center!important; gap:7px!important; color:#FFD04C!important; -webkit-text-fill-color:#FFD04C!important; font-size:12px!important; font-weight:800!important; text-decoration:none!important; } .ijbs-footer .ijbs-cc-icon{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:24px!important; height:24px!important; border:1px solid #FFD04C!important; border-radius:50%!important; color:#FFD04C!important; -webkit-text-fill-color:#FFD04C!important; font-size:9px!important; font-weight:900!important; } /* ========================================================== REMOVE OJS DEFAULT BRAND IMAGE IF CUSTOM FOOTER IS USED ========================================================== */ .pkp_footer_content .pkp_brand_footer{ display:none!important; } /* ========================================================== RESPONSIVE ========================================================== */ @media(max-width:900px){ .ijbs-footer .ijbs-footer-main{ padding:38px 22px 34px!important; } .ijbs-footer .ijbs-footer-container{ grid-template-columns: minmax(0,1.2fr) minmax(180px,.8fr)!important; gap:35px!important; } .ijbs-footer .ijbs-footer-about{ grid-column:1 / -1!important; } .ijbs-footer .ijbs-footer-publisher{ padding:18px 22px!important; } .ijbs-footer .ijbs-footer-bottom{ padding:14px 22px!important; } } @media(max-width:600px){ .ijbs-footer .ijbs-footer-main{ padding:32px 18px 28px!important; } .ijbs-footer .ijbs-footer-container{ display:grid!important; grid-template-columns:1fr!important; gap:28px!important; } .ijbs-footer .ijbs-footer-about{ grid-column:auto!important; } .ijbs-footer .ijbs-footer-about h3{ font-size:19px!important; } .ijbs-footer .ijbs-footer-about p{ font-size:13.5px!important; } .ijbs-footer .ijbs-footer-publisher{ padding:18px!important; } .ijbs-footer .ijbs-footer-publisher-inner{ display:block!important; } .ijbs-footer .ijbs-footer-publisher-links{ justify-content:flex-start!important; margin-top:12px!important; } .ijbs-footer .ijbs-footer-bottom{ padding:14px 18px!important; } .ijbs-footer .ijbs-footer-bottom-inner{ display:block!important; } .ijbs-footer .ijbs-footer-license{ margin-top:9px!important; } } /* Accessibility */ @media(prefers-reduced-motion:reduce){ .ijbs-footer .ijbs-footer-menu a{ transition:none!important; } .ijbs-footer .ijbs-footer-menu a:hover{ transform:none!important; } } /* ========================================================== IJBS FOOTER — FINAL WIDTH FIX ---------------------------------------------------------- Green footer must NOT touch the left/right edges of the browser viewport. White margins are preserved on both sides. ========================================================== */ /* Keep the OJS outer footer area white */ .pkp_structure_footer_wrapper{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; background:#FFFFFF!important; border:0!important; box-shadow:none!important; } /* Keep the OJS footer container transparent */ .pkp_structure_footer, .pkp_footer_content{ background:transparent!important; border:0!important; box-shadow:none!important; } /* ========================================================== CUSTOM IJBS FOOTER — CENTERED GREEN PANEL 1600px gives a wide journal-style footer while preserving visible white margins on large screens. ========================================================== */ .pkp_footer_content .ijbs-footer{ width:100%!important; max-width:1600px!important; margin:0 auto!important; padding:0!important; background: linear-gradient( 135deg, #155C2E 0%, #1F7A3D 55%, #3CA24C 100% )!important; color:#FFFFFF!important; box-sizing:border-box!important; overflow:hidden!important; } /* Ensure every footer section stays inside the green panel */ .pkp_footer_content .ijbs-footer .ijbs-footer-main, .pkp_footer_content .ijbs-footer .ijbs-footer-publisher, .pkp_footer_content .ijbs-footer .ijbs-footer-bottom{ width:100%!important; max-width:none!important; margin:0!important; box-sizing:border-box!important; } /* The content inside the panel remains centered */ .pkp_footer_content .ijbs-footer .ijbs-footer-container, .pkp_footer_content .ijbs-footer .ijbs-footer-publisher-inner, .pkp_footer_content .ijbs-footer .ijbs-footer-bottom-inner{ max-width:1250px!important; margin-left:auto!important; margin-right:auto!important; } /* ========================================================== DESKTOP ========================================================== */ @media(min-width:1601px){ .pkp_footer_content .ijbs-footer{ max-width:1600px!important; } } /* ========================================================== TABLET — reduce side white space gradually ========================================================== */ @media(max-width:1600px){ .pkp_footer_content .ijbs-footer{ width:calc(100% - 60px)!important; max-width:none!important; } } /* ========================================================== MOBILE — full-width footer is appropriate ========================================================== */ @media(max-width:600px){ .pkp_footer_content .ijbs-footer{ width:100%!important; max-width:none!important; margin:0!important; border-radius:0!important; } } /* ========================================================== IMPORTANT: prevent old OJS footer color rules from painting the full-width wrapper orange/green. ========================================================== */ #pageFooter-bottom{ background:transparent!important; color:inherit!important; } #pageFooter-bottom + div, #pageFooter-bottom + div + div, #pageFooter-bottom + div + div + p, #pageFooter-bottom ~ p{ background:transparent!important; } /* ========================================================== IJBS — ABSTRACTING & INDEXING CAROUSEL ---------------------------------------------------------- CSS-only carousel — NO JAVASCRIPT Designed to match the Edu Sportivo indexing style, adapted to the IJBS Green–Gold palette. REQUIRED HTML CLASSES: .ijbs-indexing-area .ijbs-indexing-box .ijbs-indexing-radio .ijbs-indexing-viewport .ijbs-indexing-track .ijbs-indexing-page .ijbs-indexing-controls .ijbs-indexing-arrow .ijbs-indexing-dots ========================================================== */ /* ---------- OUTER AREA ---------- */ .ijbs-indexing-area{ width:100%!important; max-width:1700px!important; margin:34px auto 6px!important; padding:0 18px!important; box-sizing:border-box!important; background:#FFFFFF!important; } /* ---------- MAIN WHITE INDEXING BOX ---------- */ .ijbs-indexing-box{ position:relative!important; width:100%!important; max-width:1700px!important; margin:0 auto!important; padding:30px 58px 48px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid #D9D9D9!important; border-radius:0 0 32px 32px!important; box-shadow: 0 10px 30px rgba(21,92,46,.08)!important; overflow:hidden!important; } /* ---------- HIDE RADIO BUTTONS ---------- */ .ijbs-indexing-radio{ position:absolute!important; width:1px!important; height:1px!important; margin:-1px!important; padding:0!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; clip-path:inset(50%)!important; border:0!important; white-space:nowrap!important; } /* ---------- VIEWPORT ---------- */ .ijbs-indexing-viewport{ width:100%!important; overflow:hidden!important; } /* ---------- TRACK ---------- */ .ijbs-indexing-track{ display:flex!important; width:300%!important; margin:0!important; padding:0!important; transition: transform .65s cubic-bezier(.4,0,.2,1)!important; } /* ---------- EACH PAGE ---------- */ .ijbs-indexing-page{ width:33.333333%!important; min-width:33.333333%!important; flex:0 0 33.333333%!important; display:grid!important; grid-template-columns: repeat(4,minmax(0,1fr))!important; gap:32px!important; margin:0!important; padding:20px 0!important; box-sizing:border-box!important; } /* ---------- INDEXING CARD ---------- */ .ijbs-indexing-page > a{ position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; height:110px!important; min-height:110px!important; margin:0!important; padding:12px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid #D7D7D7!important; border-radius:10px!important; text-decoration:none!important; overflow:hidden!important; box-shadow: 0 3px 10px rgba(0,0,0,.03)!important; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease!important; } /* ---------- GOLD / GREEN TOP ACCENT ---------- */ .ijbs-indexing-page > a::before{ content:""!important; position:absolute!important; top:0!important; left:0!important; width:100%!important; height:3px!important; background: linear-gradient( 90deg, #3CA24C 0%, #FFD04C 55%, #FFDD63 100% )!important; transform:scaleX(0)!important; transform-origin:left!important; transition:transform .35s ease!important; } /* ---------- LOGO ---------- */ .ijbs-indexing-page > a img{ display:block!important; width:auto!important; max-width:78%!important; max-height:68px!important; margin:0!important; padding:0!important; object-fit:contain!important; /* neutral/grayscale presentation like the reference */ filter:grayscale(100%)!important; opacity:.72!important; transform:none!important; transition: transform .3s ease, filter .3s ease, opacity .3s ease!important; } /* ---------- CARD HOVER ---------- */ .ijbs-indexing-page > a:hover{ transform:translateY(-4px)!important; border-color:#C9E5CE!important; box-shadow: 0 10px 24px rgba(31,122,61,.13)!important; } .ijbs-indexing-page > a:hover::before{ transform:scaleX(1)!important; } .ijbs-indexing-page > a:hover img{ filter:grayscale(0%)!important; opacity:1!important; transform:scale(1.04)!important; } /* ---------- PAGE 1 ---------- */ #ijbs-indexing-slide-1:checked ~ .ijbs-indexing-viewport .ijbs-indexing-track{ transform:translateX(0)!important; } /* ---------- PAGE 2 ---------- */ #ijbs-indexing-slide-2:checked ~ .ijbs-indexing-viewport .ijbs-indexing-track{ transform:translateX(-33.333333%)!important; } /* ---------- PAGE 3 ---------- */ #ijbs-indexing-slide-3:checked ~ .ijbs-indexing-viewport .ijbs-indexing-track{ transform:translateX(-66.666666%)!important; } /* ========================================================== ARROWS ========================================================== */ .ijbs-indexing-controls{ position:absolute!important; inset:0!important; pointer-events:none!important; z-index:20!important; } .ijbs-indexing-arrow{ position:absolute!important; top:50%!important; width:48px!important; height:58px!important; align-items:center!important; justify-content:center!important; transform:translateY(-50%)!important; background:#F4FAF5!important; color:#3CA24C!important; font-family:Arial,Helvetica,sans-serif!important; font-size:38px!important; font-weight:300!important; line-height:1!important; border:0!important; border-radius:50%!important; cursor:pointer!important; pointer-events:auto!important; box-shadow: 0 5px 18px rgba(21,92,46,.10)!important; transition: background .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease!important; } .ijbs-arrow-prev{ left:10px!important; } .ijbs-arrow-next{ right:10px!important; } .ijbs-indexing-arrow:hover{ background:#FFD04C!important; color:#155C2E!important; transform: translateY(-50%) scale(1.05)!important; box-shadow: 0 8px 22px rgba(255,208,76,.30)!important; } /* ---------- DEFAULT VISIBILITY ---------- */ .ijbs-prev-2, .ijbs-prev-3, .ijbs-next-1, .ijbs-next-2{ display:none!important; } /* PAGE 1: NEXT */ #ijbs-indexing-slide-1:checked ~ .ijbs-indexing-controls .ijbs-next-1{ display:flex!important; } /* PAGE 2: PREV + NEXT */ #ijbs-indexing-slide-2:checked ~ .ijbs-indexing-controls .ijbs-prev-2, #ijbs-indexing-slide-2:checked ~ .ijbs-indexing-controls .ijbs-next-2{ display:flex!important; } /* PAGE 3: PREV */ #ijbs-indexing-slide-3:checked ~ .ijbs-indexing-controls .ijbs-prev-3{ display:flex!important; } /* ========================================================== DOT INDICATORS ========================================================== */ .ijbs-indexing-dots{ position:absolute!important; left:0!important; bottom:17px!important; width:100%!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:8px!important; z-index:21!important; } .ijbs-indexing-dots label{ display:block!important; width:8px!important; height:8px!important; margin:0!important; padding:0!important; background:#C9E5CE!important; border-radius:50%!important; cursor:pointer!important; transition: width .25s ease, background .25s ease, transform .25s ease!important; } .ijbs-indexing-dots label:hover{ transform:scale(1.2)!important; } #ijbs-indexing-slide-1:checked ~ .ijbs-indexing-dots label:nth-child(1), #ijbs-indexing-slide-2:checked ~ .ijbs-indexing-dots label:nth-child(2), #ijbs-indexing-slide-3:checked ~ .ijbs-indexing-dots label:nth-child(3){ width:25px!important; border-radius:20px!important; background: linear-gradient( 90deg, #3CA24C, #FFD04C )!important; } /* ========================================================== TABLET ========================================================== */ @media(max-width:1000px){ .ijbs-indexing-box{ padding-left:55px!important; padding-right:55px!important; } .ijbs-indexing-page{ gap:20px!important; } .ijbs-indexing-page > a{ height:100px!important; min-height:100px!important; } .ijbs-indexing-page > a img{ max-width:82%!important; max-height:60px!important; } } /* ========================================================== MOBILE ========================================================== */ @media(max-width:700px){ .ijbs-indexing-area{ padding:0 10px!important; margin-top:25px!important; } .ijbs-indexing-box{ padding: 18px 45px 42px!important; border-radius:0 0 22px 22px!important; } .ijbs-indexing-page{ grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:14px!important; padding:10px 0!important; } .ijbs-indexing-page > a{ height:85px!important; min-height:85px!important; } .ijbs-indexing-page > a img{ max-width:80%!important; max-height:50px!important; } .ijbs-indexing-arrow{ width:38px!important; height:46px!important; font-size:30px!important; } .ijbs-arrow-prev{ left:4px!important; } .ijbs-arrow-next{ right:4px!important; } } /* ========================================================== VERY SMALL MOBILE ========================================================== */ @media(max-width:420px){ .ijbs-indexing-box{ padding-left:40px!important; padding-right:40px!important; } .ijbs-indexing-page{ gap:10px!important; } .ijbs-indexing-page > a{ height:75px!important; min-height:75px!important; } .ijbs-indexing-page > a img{ max-height:43px!important; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media(prefers-reduced-motion:reduce){ .ijbs-indexing-track, .ijbs-indexing-page > a, .ijbs-indexing-page > a::before, .ijbs-indexing-page > a img, .ijbs-indexing-arrow, .ijbs-indexing-dots label{ transition:none!important; } .ijbs-indexing-arrow:hover{ transform:translateY(-50%)!important; } .ijbs-indexing-page > a:hover{ transform:none!important; } } /* ========================================================== END IJBS — ABSTRACTING & INDEXING CAROUSEL ========================================================== */ /* ========================================================== IJBS — INDEXING FINAL OVERRIDE Compact box + two indexers precisely centered GARUDA + GOOGLE SCHOLAR ========================================================== */ /* Compact outer section */ .ijbs-indexing-area{ width:100%!important; max-width:100%!important; margin:24px auto 8px!important; padding:0!important; box-sizing:border-box!important; background:#FFFFFF!important; } /* Compact white box */ .ijbs-indexing-box{ position:relative!important; width:min(760px,92%)!important; max-width:760px!important; margin:0 auto!important; padding:22px 30px 24px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid #D9D9D9!important; border-radius:0 0 24px 24px!important; box-shadow:0 8px 22px rgba(21,92,46,.07)!important; overflow:hidden!important; } /* Disable the old 3-page carousel geometry */ .ijbs-indexing-viewport{ width:100%!important; overflow:visible!important; } .ijbs-indexing-track{ display:block!important; width:100%!important; margin:0!important; padding:0!important; transform:none!important; transition:none!important; } /* Exactly two cards, centered as a group */ .ijbs-indexing-page{ width:100%!important; min-width:0!important; max-width:none!important; flex:none!important; display:flex!important; align-items:center!important; justify-content:center!important; gap:28px!important; margin:0 auto!important; padding:8px 0!important; box-sizing:border-box!important; } /* Cards */ .ijbs-indexing-page > a{ flex:0 0 260px!important; width:260px!important; max-width:260px!important; height:105px!important; min-height:105px!important; margin:0!important; padding:10px!important; display:flex!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; } /* Logo size */ .ijbs-indexing-page > a img{ max-width:78%!important; max-height:62px!important; } /* No carousel controls/dots for only two indexers */ .ijbs-indexing-controls, .ijbs-indexing-dots, .ijbs-indexing-radio{ display:none!important; } /* Mobile */ @media(max-width:700px){ .ijbs-indexing-area{ margin:20px auto 8px!important; padding:0 10px!important; } .ijbs-indexing-box{ width:100%!important; max-width:560px!important; padding:18px 15px 20px!important; border-radius:0 0 20px 20px!important; } .ijbs-indexing-page{ gap:14px!important; } .ijbs-indexing-page > a{ flex:1 1 0!important; width:auto!important; max-width:220px!important; height:88px!important; min-height:88px!important; } .ijbs-indexing-page > a img{ max-width:78%!important; max-height:52px!important; } } /* Very small screens: stack neatly */ @media(max-width:480px){ .ijbs-indexing-box{ width:94%!important; padding:16px 12px 18px!important; } .ijbs-indexing-page{ flex-direction:column!important; gap:12px!important; } .ijbs-indexing-page > a{ flex:0 0 82px!important; width:260px!important; max-width:90%!important; height:82px!important; min-height:82px!important; } } /* Reduced motion */ @media(prefers-reduced-motion:reduce){ .ijbs-indexing-page > a, .ijbs-indexing-page > a img{ transition:none!important; } .ijbs-indexing-page > a:hover{ transform:none!important; } } /* ========================================================== END IJBS — INDEXING FINAL OVERRIDE ========================================================== */ /* ========================================================== CEEJ — COMMUNITY EDUCATION ENGAGEMENT JOURNAL FINAL BRAND OVERRIDE Palette matched to CEEJ cover: Deep Green : #0B6E3E Green : #138A4B Orange : #F5A623 Gold : #FFC857 Light Green: #F3FAF6 ========================================================== */ :root{ --cee-primary:#0B6E3E!important; --cee-primary-2:#138A4B!important; --cee-dark:#064B2E!important; --cee-orange:#F5A623!important; --cee-gold:#FFC857!important; --cee-light:#F3FAF6!important; --cee-border:#CFE7D8!important; } /* ---------- GLOBAL CEEJ THEME ---------- */ html, body{ background:#FFFFFF!important; } body{ color:#292929!important; } h1,h2,h3,h4,h5,h6{ color:#0B6E3E!important; } a{ color:#0B6E3E!important; } a:hover{ color:#064B2E!important; } /* ---------- HEADER / LOGO ---------- */ .pkp_structure_head, .pkp_head_wrapper, .pkp_site_name_wrapper, .pkp_site_name{ background:#FFFFFF!important; } .pkp_site_name img{ max-width:min(900px,92vw)!important; max-height:155px!important; object-fit:contain!important; } /* ---------- REGISTER / LOGIN ---------- */ .pkp_structure_head .pkp_navigation_user_wrapper{ z-index:1000000!important; } .pkp_structure_head .pkp_navigation_user > li > a{ color:#0B6E3E!important; -webkit-text-fill-color:#0B6E3E!important; } .pkp_structure_head .pkp_navigation_user > li > a:hover{ color:#064B2E!important; -webkit-text-fill-color:#064B2E!important; } .pkp_structure_head .pkp_navigation_user > li:first-child > a::before, .pkp_structure_head .pkp_navigation_user > li:last-child > a::before{ color:#F5A623!important; -webkit-text-fill-color:#F5A623!important; } /* ---------- PRIMARY NAVIGATION ---------- */ .pkp_site_nav_menu, .pkp_navigation_primary_wrapper, .pkp_navigation_primary_row{ background:#FFFFFF!important; } .pkp_site_nav_menu{ border-bottom:2px solid #F5A623!important; box-shadow:0 5px 16px rgba(11,110,62,.09)!important; } .pkp_navigation_primary > li > a{ color:#0B6E3E!important; -webkit-text-fill-color:#0B6E3E!important; font-weight:700!important; } .pkp_navigation_primary > li > a::before{ color:#F5A623!important; -webkit-text-fill-color:#F5A623!important; } .pkp_navigation_primary > li > a:hover, .pkp_navigation_primary > li > a:focus{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; background:linear-gradient(135deg,#0B6E3E,#138A4B)!important; } /* ---------- DROPDOWN ---------- */ .pkp_navigation_primary .dropdown-menu{ background:#FFFFFF!important; border:1px solid #CFE7D8!important; border-top:3px solid #F5A623!important; box-shadow:0 12px 28px rgba(11,110,62,.15)!important; } .pkp_navigation_primary .dropdown-menu a{ background:#FFFFFF!important; color:#0B6E3E!important; -webkit-text-fill-color:#0B6E3E!important; } .pkp_navigation_primary .dropdown-menu a:hover, .pkp_navigation_primary .dropdown-menu a:focus{ background:#F3FAF6!important; color:#064B2E!important; -webkit-text-fill-color:#064B2E!important; } /* ---------- SEARCH ---------- */ .pkp_navigation_primary_row .pkp_search a, .pkp_navigation_primary_row .pkp_search button, .pkp_navigation_primary_row .pkp_search .search_prompt{ color:#0B6E3E!important; -webkit-text-fill-color:#0B6E3E!important; } .pkp_navigation_primary_row .pkp_search a::before, .pkp_navigation_primary_row .pkp_search button::before, .pkp_navigation_primary_row .pkp_search .search_prompt::before{ color:#F5A623!important; -webkit-text-fill-color:#F5A623!important; } /* ---------- SIDEBAR TITLE ---------- */ .sidebar-title{ background:linear-gradient(135deg,#0B6E3E 0%,#138A4B 68%,#F5A623 100%)!important; color:#FFFFFF!important; box-shadow:0 8px 20px rgba(11,110,62,.20)!important; } /* ---------- SIDEBAR MENU ---------- */ .content .gap-2 .m-menu{ background:#FFFFFF!important; border:1px solid #CFE7D8!important; color:#0B6E3E!important; box-shadow:0 3px 10px rgba(11,110,62,.08)!important; } .content .gap-2 .m-menu::before{ background:linear-gradient(90deg,#0B6E3E 0%,#138A4B 70%,#F5A623 100%)!important; } .content .gap-2 .m-menu em, .content .gap-2 .m-menu::after, .content .gap-2 .m-menu span{ color:#0B6E3E!important; } .content .gap-2 .m-menu:hover{ color:#FFFFFF!important; border-color:#0B6E3E!important; box-shadow:0 9px 20px rgba(11,110,62,.18)!important; } .content .gap-2 .m-menu:hover em, .content .gap-2 .m-menu:hover::after, .content .gap-2 .m-menu:hover span{ color:#FFFFFF!important; } /* ---------- CARDS / INFO BOXES ---------- */ .sp-card, .sp-info{ border-color:#CFE7D8!important; } .sp-card:hover, .sp-info:hover{ box-shadow:0 16px 32px rgba(11,110,62,.16)!important; } .sp-info:hover{ background:#F3FAF6!important; } /* ---------- BUTTONS ---------- */ .sp-btn{ background:linear-gradient(135deg,#0B6E3E,#138A4B)!important; color:#FFFFFF!important; border-color:#0B6E3E!important; box-shadow:0 7px 18px rgba(11,110,62,.18)!important; } .sp-btn:hover{ background:linear-gradient(135deg,#064B2E,#0B6E3E)!important; color:#FFFFFF!important; box-shadow:0 14px 30px rgba(11,110,62,.28)!important; } .sp-btn::before{ background:linear-gradient( 90deg, transparent, rgba(255,200,87,.55), transparent )!important; } /* ---------- HERO / SECTION ACCENTS ---------- */ .hero-banner{ border-bottom:3px solid #F5A623!important; } .hero-banner::after{ background:linear-gradient( 90deg, #0B6E3E, #138A4B, #F5A623 )!important; } /* ---------- COVER ---------- */ .sp-cover img{ border:1px solid #CFE7D8!important; } .sp-cover img:hover{ box-shadow:0 18px 35px rgba(11,110,62,.22)!important; } /* ---------- ARTICLE / CONTENT ACCENTS ---------- */ .pkp_page_index .title, .obj_article_details .title, .obj_issue_toc .title{ color:#0B6E3E!important; } .obj_article_summary .title a, .obj_issue_toc .tocTitle a{ color:#0B6E3E!important; } .obj_article_summary .title a:hover, .obj_issue_toc .tocTitle a:hover{ color:#F5A623!important; } .obj_article_summary{ border-bottom:1px solid #CFE7D8!important; } /* ---------- FORM / INPUT ---------- */ input:focus, textarea:focus, select:focus{ border-color:#138A4B!important; box-shadow:0 0 0 3px rgba(245,166,35,.16)!important; } button, .btn{ border-color:#0B6E3E!important; } .btn-primary, .pkp_button{ background:#0B6E3E!important; color:#FFFFFF!important; } .btn-primary:hover, .pkp_button:hover{ background:#064B2E!important; color:#FFFFFF!important; } /* ---------- BADGES / LABELS ---------- */ .badge, .label{ background:#0B6E3E!important; color:#FFFFFF!important; } .badge-warning, .label-warning{ background:#F5A623!important; color:#292929!important; } /* ---------- INDEXING AREA ---------- */ .ijbs-indexing-box{ border-color:#CFE7D8!important; box-shadow:0 8px 22px rgba(11,110,62,.08)!important; } .ijbs-indexing-page > a{ border:1px solid #CFE7D8!important; } .ijbs-indexing-page > a:hover{ border-color:#F5A623!important; box-shadow:0 8px 20px rgba(11,110,62,.14)!important; } .ijbs-indexing-dots label{ background:#CFE7D8!important; } #ijbs-indexing-slide-1:checked ~ .ijbs-indexing-dots label:nth-child(1), #ijbs-indexing-slide-2:checked ~ .ijbs-indexing-dots label:nth-child(2), #ijbs-indexing-slide-3:checked ~ .ijbs-indexing-dots label:nth-child(3){ background:linear-gradient(90deg,#0B6E3E,#F5A623)!important; } /* ---------- FOOTER ---------- */ .pkp_structure_footer_wrapper, .pkp_structure_footer{ background:#0B6E3E!important; color:#FFFFFF!important; border-top:4px solid #F5A623!important; } .pkp_structure_footer a{ color:#FFFFFF!important; } .pkp_structure_footer a:hover{ color:#FFC857!important; } /* ---------- SELECTION ---------- */ ::selection{ background:#F5A623!important; color:#292929!important; } /* ---------- MOBILE ---------- */ @media(max-width:900px){ .pkp_site_name img{ max-width:88vw!important; max-height:115px!important; } .pkp_navigation_primary > li > a:hover{ background:#F3FAF6!important; color:#0B6E3E!important; -webkit-text-fill-color:#0B6E3E!important; } } @media(max-width:600px){ .pkp_site_name img{ max-width:90vw!important; max-height:90px!important; } .sidebar-title{ background:linear-gradient( 135deg, #0B6E3E, #138A4B )!important; } } /* ========================================================== CEEJ HERO — REMOVE OLD FOOTBALL BACKGROUND Keep the hero overlay/content; remove the football photo. ========================================================== */ .es2026-banner::before{ background:none!important; opacity:0!important; } /* ========================================================== END CEEJ — COMMUNITY EDUCATION ENGAGEMENT JOURNAL ========================================================== */ /* ========================================================== VIEW CURRENT ISSUE — ORANGE FONT ========================================================== */ .es-current-btn, .es-current-btn a, a.es-current-btn, .es-current-btn span{ color:#F57C00!important; -webkit-text-fill-color:#F57C00!important; } .es-current-btn:hover, .es-current-btn:hover a, .es-current-btn:hover span{ color:#EA580C!important; -webkit-text-fill-color:#EA580C!important; } /* ========================================================== CEEJ FOOTER — SISI LAIN REALITA STYLE / FINAL OVERRIDE ---------------------------------------------------------- Purpose: - Prevent the footer from becoming a full-width flat green block. - Use a centered premium panel like the reference footer. - CEEJ palette: deep green + orange. - Keep the existing CEEJ footer HTML/content. ========================================================== */ :root{ --ceej-green:#08722E; --ceej-green-dark:#064D20; --ceej-green-soft:#0D7A2B; --ceej-orange:#F5A623; --ceej-orange-light:#FEA550; --ceej-cream:#FFF9F0; --ceej-white:#FFFFFF; --ceej-text:#D9E8DF; } /* Outer OJS footer area stays white */ .pkp_structure_footer_wrapper{ width:100%!important; max-width:none!important; margin:0!important; padding:0 0 24px!important; background:#FFFFFF!important; border:0!important; box-shadow:none!important; } .pkp_structure_footer{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; background:#FFFFFF!important; border:0!important; box-shadow:none!important; color:var(--ceej-text)!important; } /* Main footer content becomes the centered panel */ .pkp_footer_content{ position:relative!important; width:calc(100% - 110px)!important; max-width:1560px!important; margin:0 auto!important; padding:0!important; background:var(--ceej-green-dark)!important; color:var(--ceej-text)!important; border-radius:28px!important; overflow:hidden!important; box-shadow:0 18px 45px rgba(8,114,46,.16)!important; border:1px solid rgba(245,166,35,.16)!important; } /* Premium top accent */ .pkp_footer_content::before{ content:""!important; display:block!important; width:100%!important; height:5px!important; background:linear-gradient(90deg,var(--ceej-orange),#FFD36B,var(--ceej-orange))!important; } /* Keep default OJS footer brand hidden */ .pkp_footer_content .pkp_brand_footer{ display:none!important; } /* Existing custom CEEJ/IJBS footer, if present */ .pkp_footer_content .ijbs-footer{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; background:linear-gradient(135deg,#063F22 0%,#08722E 58%,#0B6E3E 100%)!important; color:var(--ceej-text)!important; border-radius:0!important; box-shadow:none!important; } /* Custom footer main content */ .pkp_footer_content .ijbs-footer .ijbs-footer-main{ padding:44px 42px 38px!important; background:transparent!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-container{ max-width:1360px!important; grid-template-columns:minmax(0,1.55fr) minmax(190px,.8fr) minmax(270px,1fr)!important; gap:58px!important; } .pkp_footer_content .ijbs-footer h1, .pkp_footer_content .ijbs-footer h2, .pkp_footer_content .ijbs-footer h3, .pkp_footer_content .ijbs-footer h4{ color:var(--ceej-orange-light)!important; -webkit-text-fill-color:var(--ceej-orange-light)!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-about h3{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; font-size:22px!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-logo-mark{ background:var(--ceej-orange)!important; color:var(--ceej-green-dark)!important; -webkit-text-fill-color:var(--ceej-green-dark)!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-menu a, .pkp_footer_content .ijbs-footer .ijbs-footer-info-item span, .pkp_footer_content .ijbs-footer .ijbs-footer-publisher-text, .pkp_footer_content .ijbs-footer .ijbs-footer-copyright{ color:#DCEAE1!important; -webkit-text-fill-color:#DCEAE1!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-menu a::before, .pkp_footer_content .ijbs-footer .ijbs-footer-info-item strong, .pkp_footer_content .ijbs-footer .ijbs-footer-publisher-text strong, .pkp_footer_content .ijbs-footer .ijbs-footer-publisher-links a, .pkp_footer_content .ijbs-footer .ijbs-footer-license a{ color:var(--ceej-orange-light)!important; -webkit-text-fill-color:var(--ceej-orange-light)!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-publisher{ background:rgba(0,0,0,.16)!important; border-top:1px solid rgba(245,166,35,.28)!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-bottom{ background:#04391D!important; } .pkp_footer_content .ijbs-footer .ijbs-cc-icon{ border-color:var(--ceej-orange-light)!important; color:var(--ceej-orange-light)!important; -webkit-text-fill-color:var(--ceej-orange-light)!important; } /* ---------------------------------------------------------- DEFAULT / RAW OJS FOOTER CONTENT The live CEEJ page currently renders the footer as: About CEEJ → Quick Links → Contact Info → metadata/copyright. These rules give that content a Sisi Lain Realita-like panel. ---------------------------------------------------------- */ .pkp_footer_content > h3, .pkp_footer_content > p, .pkp_footer_content > ul, .pkp_footer_content > div:not(.ijbs-footer):not(.pkp_brand_footer), .pkp_footer_content > section{ color:var(--ceej-text)!important; } /* Footer text */ .pkp_footer_content p, .pkp_footer_content li, .pkp_footer_content span{ color:var(--ceej-text)!important; } .pkp_footer_content a{ color:#E7F0EA!important; text-decoration:none!important; transition:color .25s ease,transform .25s ease!important; } .pkp_footer_content a:hover{ color:var(--ceej-orange-light)!important; } /* Footer headings */ .pkp_footer_content h3, .pkp_footer_content h4{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; font-weight:800!important; } /* ---------------------------------------------------------- If the footer uses the common CEEJ flat markup, convert its content into three visual columns without changing HTML. ---------------------------------------------------------- */ .pkp_footer_content .footer-container, .pkp_footer_content .footer-content, .pkp_footer_content .custom-footer, .pkp_footer_content .ceej-footer{ width:100%!important; max-width:1360px!important; margin:0 auto!important; padding:42px!important; box-sizing:border-box!important; } /* Orange headings / links in custom footer containers */ .pkp_footer_content .footer-container h3, .pkp_footer_content .footer-content h3, .pkp_footer_content .custom-footer h3, .pkp_footer_content .ceej-footer h3{ color:var(--ceej-orange-light)!important; -webkit-text-fill-color:var(--ceej-orange-light)!important; } /* ---------------------------------------------------------- Fallback styling for the actual OJS page-footer text seen on the current CEEJ page. ---------------------------------------------------------- */ .pkp_footer_content > *:not(.pkp_brand_footer):not(.ijbs-footer){ box-sizing:border-box!important; } /* Make the outer footer itself dark only inside the panel */ .pkp_footer_content > *:not(.ijbs-footer):not(.pkp_brand_footer){ color:var(--ceej-text)!important; } /* Bottom metadata / license */ .pkp_footer_content .footer-license, .pkp_footer_content .license, .pkp_footer_content .copyright{ border-top:1px solid rgba(255,255,255,.10)!important; color:#BFD3C7!important; } /* ---------------------------------------------------------- Remove old full-width footer paint rules from the uploaded CSS. This final block has higher specificity and wins. ---------------------------------------------------------- */ .pkp_structure_footer_wrapper, .pkp_structure_footer{ background:#FFFFFF!important; border-top:0!important; } /* Keep the panel visually centered on desktop */ @media(min-width:1201px){ .pkp_footer_content{ width:calc(100% - 150px)!important; max-width:1560px!important; } } @media(max-width:900px){ .pkp_footer_content{ width:calc(100% - 40px)!important; border-radius:22px!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-main{ padding:34px 25px 30px!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-container{ grid-template-columns:1fr 1fr!important; gap:34px!important; } } @media(max-width:600px){ .pkp_structure_footer_wrapper{ padding-bottom:12px!important; } .pkp_footer_content{ width:calc(100% - 20px)!important; border-radius:18px!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-main{ padding:30px 20px 26px!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-container{ grid-template-columns:1fr!important; gap:27px!important; } } /* ========================================================== CEEJ — SISI LAIN REALITA HEADER ADAPTATION Adopted from: Journal Sisi Lain Realita — Apple-style header Source structure: - Full-width centered journal logo - White header - Rounded/pill navigation - Clean Apple-style typography - Register/Login at upper-right - Search integrated into navigation CEEJ identity: - Green primary - Orange secondary/accent ========================================================== */ :root{ --ceej-header-green:#08722E; --ceej-header-green-dark:#064D20; --ceej-header-green-soft:#0D7A2B; --ceej-header-orange:#F5A623; --ceej-header-orange-light:#FFD166; --ceej-header-ink:#1D1D1F; --ceej-header-ink-2:#424245; --ceej-header-ink-3:#6E6E73; --ceej-header-line:rgba(60,60,67,.14); --ceej-header-fill:#F5F5F7; --ceej-header-font:-apple-system,BlinkMacSystemFont,"SF Pro Text", "SF Pro Display","Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } /* ---------- PAGE / HEADER FOUNDATION ---------- */ body{ background:#FFFFFF!important; } .pkp_structure_head{ position:relative!important; z-index:100!important; width:100%!important; max-width:none!important; margin:0!important; padding:0!important; background:#FFFFFF!important; background-image:none!important; border:0!important; box-shadow:none!important; overflow:visible!important; } .pkp_head_wrapper{ position:relative!important; width:100%!important; max-width:1180px!important; margin:0 auto!important; padding:0 20px!important; box-sizing:border-box!important; background:#FFFFFF!important; } /* ---------- LOGO AREA ---------- */ .pkp_site_name_wrapper{ position:relative!important; z-index:1!important; width:100%!important; min-height:205px!important; margin:0!important; padding:0!important; background:#FFFFFF!important; border:0!important; box-shadow:none!important; overflow:visible!important; } .pkp_site_name{ position:relative!important; z-index:2!important; display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-height:205px!important; margin:0!important; padding:28px 0 20px!important; box-sizing:border-box!important; background:#FFFFFF!important; } .pkp_site_name .is_img, .pkp_site_name a{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; background:transparent!important; border:0!important; } .pkp_site_name .is_img img, .pkp_site_name img{ display:block!important; width:auto!important; max-width:min(760px,92vw)!important; height:auto!important; max-height:125px!important; margin:0 auto!important; transform:none!important; filter:none!important; border:0!important; box-shadow:none!important; } /* ---------- REGISTER / LOGIN — TOP RIGHT ---------- */ /* The Sisi Lain header keeps these as plain text links. */ .pkp_structure_head .pkp_navigation_user_wrapper{ position:absolute!important; top:12px!important; right:20px!important; z-index:100000!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; transform:none!important; } .pkp_structure_head .pkp_navigation_user{ display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:22px!important; width:auto!important; margin:0!important; padding:0!important; list-style:none!important; } .pkp_structure_head .pkp_navigation_user > li{ display:block!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; } .pkp_structure_head .pkp_navigation_user > li > a{ display:inline-flex!important; align-items:center!important; gap:6px!important; margin:0!important; padding:3px 0!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; color:var(--ceej-header-green)!important; -webkit-text-fill-color:var(--ceej-header-green)!important; font-family:var(--ceej-header-font)!important; font-size:13px!important; font-weight:600!important; line-height:1.3!important; letter-spacing:-.01em!important; text-decoration:none!important; white-space:nowrap!important; } .pkp_structure_head .pkp_navigation_user > li > a:hover, .pkp_structure_head .pkp_navigation_user > li > a:focus{ color:var(--ceej-header-green-dark)!important; -webkit-text-fill-color:var(--ceej-header-green-dark)!important; background:transparent!important; border:0!important; box-shadow:none!important; } /* ---------- APPLE-STYLE NAVIGATION PILL ---------- */ .pkp_site_nav_menu{ position:relative!important; z-index:200!important; width:100%!important; max-width:1180px!important; min-height:58px!important; margin:0 auto!important; padding:0!important; background:#FFFFFF!important; border:0!important; overflow:visible!important; } /* The navigation row becomes the rounded floating pill. */ .pkp_navigation_primary_row{ position:relative!important; display:flex!important; align-items:center!important; justify-content:space-between!important; width:100%!important; min-height:52px!important; margin:0!important; padding:6px 8px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid var(--ceej-header-line)!important; border-radius:25px!important; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px -12px rgba(0,0,0,.14)!important; } /* Remove theme pseudo-elements that disturb the pill. */ .pkp_navigation_primary_wrapper::before, .pkp_navigation_primary_wrapper::after, .pkp_navigation_primary_row::before, .pkp_navigation_primary_row::after{ display:none!important; } .pkp_navigation_primary_wrapper{ display:flex!important; align-items:center!important; width:100%!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; } #navigationPrimary, .pkp_navigation_primary{ display:flex!important; align-items:center!important; flex-wrap:wrap!important; gap:2px!important; width:auto!important; max-width:none!important; margin:0!important; padding:0!important; list-style:none!important; } #navigationPrimary > li, .pkp_navigation_primary > li{ margin:0!important; padding:0!important; } #navigationPrimary > li > a, .pkp_navigation_primary > li > a{ display:inline-flex!important; align-items:center!important; gap:5px!important; min-height:38px!important; margin:0!important; padding:8px 13px!important; box-sizing:border-box!important; background:transparent!important; border:0!important; border-radius:980px!important; color:var(--ceej-header-ink)!important; -webkit-text-fill-color:var(--ceej-header-ink)!important; font-family:var(--ceej-header-font)!important; font-size:14px!important; font-weight:600!important; line-height:20px!important; letter-spacing:-.01em!important; text-transform:none!important; text-decoration:none!important; transition: background-color .25s ease, color .25s ease, transform .2s ease!important; -webkit-font-smoothing:antialiased!important; } #navigationPrimary > li > a:hover, #navigationPrimary > li > a:focus, #navigationPrimary > li:hover > a, #navigationPrimary > li > a[aria-expanded="true"], .pkp_navigation_primary > li > a:hover, .pkp_navigation_primary > li > a:focus{ background:rgba(8,114,46,.10)!important; color:var(--ceej-header-green)!important; -webkit-text-fill-color:var(--ceej-header-green)!important; outline:0!important; } /* Current page */ #navigationPrimary > li.current > a, #navigationPrimary > li > a[aria-current="page"]{ background:rgba(8,114,46,.10)!important; color:var(--ceej-header-green)!important; -webkit-text-fill-color:var(--ceej-header-green)!important; } /* ---------- DROPDOWN — CLEAN APPLE CONTEXT MENU ---------- */ #navigationPrimary ul, .pkp_navigation_primary .dropdown-menu{ top:calc(100% + 8px)!important; min-width:15.5em!important; margin:0!important; padding:6px!important; background:#FFFFFF!important; border:1px solid var(--ceej-header-line)!important; border-radius:14px!important; box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 22px 48px -10px rgba(0,0,0,.20)!important; } #navigationPrimary ul::before{ content:""!important; position:absolute!important; left:0!important; right:0!important; top:-10px!important; height:10px!important; } #navigationPrimary ul a, .pkp_navigation_primary .dropdown-menu a{ display:block!important; width:100%!important; padding:9px 12px!important; box-sizing:border-box!important; background:transparent!important; border:0!important; border-radius:9px!important; color:var(--ceej-header-ink)!important; -webkit-text-fill-color:var(--ceej-header-ink)!important; font-family:var(--ceej-header-font)!important; font-size:14px!important; font-weight:500!important; line-height:1.35!important; text-decoration:none!important; } #navigationPrimary ul a:hover, #navigationPrimary ul a:focus, .pkp_navigation_primary .dropdown-menu a:hover, .pkp_navigation_primary .dropdown-menu a:focus{ background:rgba(8,114,46,.10)!important; color:var(--ceej-header-green)!important; -webkit-text-fill-color:var(--ceej-header-green)!important; } /* ---------- CHEVRON ---------- */ #navigationPrimary > li > a[aria-haspopup]::after{ content:"\f107"!important; display:inline-block!important; width:auto!important; height:auto!important; margin-left:3px!important; border:0!important; overflow:visible!important; font:normal normal normal 12px/1 FontAwesome!important; color:currentColor!important; transition:transform .25s ease!important; } #navigationPrimary > li:hover > a[aria-haspopup]::after, #navigationPrimary > li > a[aria-expanded="true"]::after{ transform:rotate(180deg)!important; } /* ---------- SEARCH — SAME PILL ROW ---------- */ .pkp_navigation_primary_row .pkp_search, .pkp_navigation_primary_wrapper .pkp_search{ position:static!important; display:flex!important; align-items:center!important; flex:0 0 auto!important; width:auto!important; height:auto!important; min-height:0!important; margin:0 0 0 auto!important; padding:0 2px 0 8px!important; background:transparent!important; border:0!important; box-shadow:none!important; float:none!important; clear:none!important; } .pkp_navigation_primary_row .pkp_search a, .pkp_navigation_primary_row .pkp_search button, .pkp_navigation_primary_row .pkp_search .search_prompt{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:38px!important; margin:0!important; padding:8px 14px!important; background:transparent!important; border:0!important; border-radius:980px!important; color:var(--ceej-header-ink)!important; -webkit-text-fill-color:var(--ceej-header-ink)!important; font-family:var(--ceej-header-font)!important; font-size:14px!important; font-weight:600!important; line-height:20px!important; text-decoration:none!important; } .pkp_navigation_primary_row .pkp_search a:hover, .pkp_navigation_primary_row .pkp_search a:focus, .pkp_navigation_primary_row .pkp_search button:hover, .pkp_navigation_primary_row .pkp_search button:focus, .pkp_navigation_primary_row .pkp_search .search_prompt:hover{ background:rgba(8,114,46,.10)!important; color:var(--ceej-header-green)!important; -webkit-text-fill-color:var(--ceej-header-green)!important; } /* ---------- OPTIONAL ICONS, FOLLOWING SISI LAIN STYLE ---------- */ #navigationPrimary > li > a::before{ display:inline-block!important; margin-right:7px!important; font:normal normal normal 13px/1 FontAwesome!important; color:currentColor!important; text-rendering:auto!important; -webkit-font-smoothing:antialiased!important; } /* Keep the generic icon only when the link does not have an icon already. */ #navigationPrimary > li > a::before{ content:"\f15c"; } #navigationPrimary > li > a[href$="/about"]::before, #navigationPrimary > li > a[href="#"]::before{content:"\f05a";} #navigationPrimary > li > a[href$="/issue/current"]::before{content:"\f02d";} #navigationPrimary > li > a[href$="/issue/archive"]::before{content:"\f187";} #navigationPrimary > li > a[href$="/announcement"]::before{content:"\f0a1";} #navigationPrimary > li > a[href$="/about/submissions"]::before{content:"\f1d8";} #navigationPrimary > li > a[href$="/about/editorialTeam"]::before{content:"\f0c0";} #navigationPrimary > li > a[href$="/about/contact"]::before{content:"\f0e0";} /* Home / journal index */ #navigationPrimary > li > a[href$="/ecej"], #navigationPrimary > li > a[href$="/ecej/"], #navigationPrimary > li > a[href$="/ecej/index"]::before{ content:"\f015"; } /* ---------- ACCESSIBILITY ---------- */ #navigationPrimary > li > a:focus-visible, .pkp_navigation_primary_row .pkp_search a:focus-visible, .pkp_structure_head .pkp_navigation_user > li > a:focus-visible{ outline:2px solid var(--ceej-header-orange)!important; outline-offset:2px!important; } /* ---------- RESPONSIVE ---------- */ @media (max-width:991px){ .pkp_head_wrapper{ padding:0 15px!important; } .pkp_site_name_wrapper, .pkp_site_name{ min-height:175px!important; } .pkp_site_name{ padding:25px 0 18px!important; } .pkp_site_name .is_img img, .pkp_site_name img{ max-width:86vw!important; max-height:105px!important; } .pkp_structure_head .pkp_navigation_user_wrapper{ top:9px!important; right:15px!important; } .pkp_navigation_primary_row{ overflow-x:auto!important; justify-content:flex-start!important; gap:4px!important; padding:5px!important; } #navigationPrimary, .pkp_navigation_primary{ flex-wrap:nowrap!important; white-space:nowrap!important; } #navigationPrimary > li > a, .pkp_navigation_primary > li > a{ padding:8px 10px!important; font-size:13px!important; } .pkp_navigation_primary_row .pkp_search{ margin-left:auto!important; position:sticky!important; right:0!important; background:rgba(255,255,255,.94)!important; } } @media (max-width:600px){ .pkp_head_wrapper{ padding:0 10px!important; } .pkp_site_name_wrapper, .pkp_site_name{ min-height:145px!important; } .pkp_site_name{ padding:24px 0 12px!important; } .pkp_site_name .is_img img, .pkp_site_name img{ max-width:88vw!important; max-height:82px!important; } .pkp_structure_head .pkp_navigation_user_wrapper{ top:7px!important; right:10px!important; } .pkp_structure_head .pkp_navigation_user{ gap:12px!important; } .pkp_structure_head .pkp_navigation_user > li > a{ font-size:11.5px!important; } .pkp_site_nav_menu{ min-height:50px!important; } .pkp_navigation_primary_row{ min-height:48px!important; border-radius:18px!important; } #navigationPrimary > li > a, .pkp_navigation_primary > li > a{ min-height:36px!important; padding:7px 9px!important; font-size:12px!important; } .pkp_navigation_primary_row .pkp_search a, .pkp_navigation_primary_row .pkp_search button{ min-height:36px!important; padding:7px 10px!important; font-size:12px!important; } } /* ---------- CEEJ ORANGE ACCENT — SUBTLE, NOT DOMINANT ---------- */ .pkp_navigation_primary_row{ border-top:2px solid rgba(245,166,35,.55)!important; } .pkp_structure_head .pkp_navigation_user > li:last-child > a:hover{ color:var(--ceej-header-orange)!important; -webkit-text-fill-color:var(--ceej-header-orange)!important; } /* ========================================================== CEEJ — FINAL HEADER FIX DIRECTLY ADAPTED FROM JOURNAL SISI LAIN REALITA ---------------------------------------------------------- Main correction: The previous adaptation limited the journal logo to max-height:125px, which made the CEEJ banner visibly small. Sisi Lain Realita uses: - logo area without a small max-height constraint - desktop image width: 100% - clean white header - rounded Apple-style navigation - user menu at the top-right CEEJ keeps its own green/orange identity. ========================================================== */ /* ---------- HEADER BASE ---------- */ .pkp_structure_head{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; background:#FFFFFF!important; background-image:linear-gradient(to bottom,#FFFFFF,#FFFFFF,#FFFFFF,#FFFFFF,#FFFFFF)!important; border-bottom:0!important; box-shadow:none!important; } /* Keep the header wide enough for the CEEJ banner. */ .pkp_head_wrapper{ position:relative!important; width:100%!important; max-width:1160px!important; margin:0 auto!important; padding:0 20px!important; box-sizing:border-box!important; background:#FFFFFF!important; } /* ---------- CEEJ LOGO / JOURNAL BANNER ---------- */ .pkp_site_name_wrapper{ position:relative!important; width:100%!important; min-height:225px!important; margin:0!important; padding:0!important; background:#FFFFFF!important; border:0!important; box-shadow:none!important; overflow:visible!important; } .pkp_site_name{ position:relative!important; z-index:5!important; display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-height:225px!important; margin:0!important; padding:20px 0 12px!important; box-sizing:border-box!important; background:#FFFFFF!important; } /* * IMPORTANT: * Do NOT use the previous max-height:125px rule. * This is the main reason the logo became too small. */ .pkp_site_name .is_img, .pkp_site_name a{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; background:transparent!important; border:0!important; } .pkp_site_name .is_img img, .pkp_site_name img{ display:block!important; width:auto!important; max-width:950px!important; height:auto!important; max-height:205px!important; margin:0 auto!important; transform:none!important; filter:none!important; border:0!important; box-shadow:none!important; } /* Desktop: emulate Sisi Lain Realita's large banner treatment. */ @media (min-width:992px){ .pkp_head_wrapper{ max-width:1160px!important; padding-left:0!important; padding-right:0!important; } .pkp_site_name_wrapper{ min-height:235px!important; padding-left:0!important; padding-right:0!important; } .pkp_site_name, .pkp_site_name .is_img{ display:flex!important; width:100%!important; } .pkp_site_name{ min-height:235px!important; padding:14px 0 10px!important; } .pkp_site_name .is_img img, .pkp_site_name img{ width:auto!important; max-width:1080px!important; max-height:220px!important; height:auto!important; margin:0 auto!important; } } /* ---------- TOP RIGHT REGISTER / LOGIN ---------- */ .pkp_navigation_user_wrapper{ position:absolute!important; top:12px!important; right:0!important; z-index:100001!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; transform:none!important; } .pkp_navigation_user{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-end!important; gap:18px!important; width:auto!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; list-style:none!important; } .pkp_navigation_user > li{ display:block!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; } .pkp_navigation_user > li > a{ display:inline-flex!important; align-items:center!important; gap:6px!important; height:auto!important; min-height:0!important; width:auto!important; margin:0!important; padding:3px 0!important; background:transparent!important; border:0!important; border-radius:0!important; box-shadow:none!important; color:#08722E!important; -webkit-text-fill-color:#08722E!important; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display", "Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important; font-size:14px!important; font-weight:600!important; line-height:1.3!important; letter-spacing:-.01em!important; text-decoration:none!important; white-space:nowrap!important; } .pkp_navigation_user > li > a:hover, .pkp_navigation_user > li > a:focus{ background:transparent!important; border:0!important; box-shadow:none!important; color:#064D20!important; -webkit-text-fill-color:#064D20!important; } /* ---------- NAVIGATION — SISI LAIN APPLE STYLE ---------- */ .pkp_site_nav_menu{ position:relative!important; z-index:200!important; width:100%!important; max-width:1160px!important; min-height:58px!important; margin:0 auto!important; padding:0!important; background:#FFFFFF!important; border:0!important; overflow:visible!important; } .pkp_navigation_primary_wrapper{ display:flex!important; align-items:center!important; justify-content:space-between!important; width:100%!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; } .pkp_navigation_primary_wrapper::before, .pkp_navigation_primary_wrapper::after{ display:none!important; } .pkp_navigation_primary_row{ position:relative!important; display:flex!important; align-items:center!important; justify-content:space-between!important; width:100%!important; min-height:58px!important; margin-top:6px!important; padding:7px 8px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid rgba(60,60,67,.12)!important; border-radius:25px!important; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px -12px rgba(0,0,0,.14)!important; } #navigationPrimary, .pkp_navigation_primary{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:2px!important; max-width:none!important; margin:0!important; padding:0!important; list-style:none!important; } #navigationPrimary > li, .pkp_navigation_primary > li{ margin:0!important; padding:0!important; } #navigationPrimary > li > a, .pkp_navigation_primary > li > a{ display:inline-flex!important; align-items:center!important; min-height:38px!important; margin:0!important; padding:8px 14px!important; border:0!important; border-radius:980px!important; background:transparent!important; color:#1D1D1F!important; -webkit-text-fill-color:#1D1D1F!important; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display", "Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important; font-size:14.5px!important; font-weight:600!important; line-height:20px!important; letter-spacing:-.01em!important; text-transform:none!important; text-decoration:none!important; -webkit-font-smoothing:antialiased!important; } #navigationPrimary > li > a:hover, #navigationPrimary > li > a:focus, #navigationPrimary > li:hover > a, #navigationPrimary > li > a[aria-expanded="true"], .pkp_navigation_primary > li > a:hover, .pkp_navigation_primary > li > a:focus{ background:rgba(8,114,46,.10)!important; color:#08722E!important; -webkit-text-fill-color:#08722E!important; outline:0!important; } /* ---------- SEARCH ---------- */ .pkp_navigation_search_wrapper{ float:none!important; flex:none!important; margin:0!important; } .pkp_navigation_search_wrapper a{ display:inline-flex!important; align-items:center!important; gap:6px!important; margin:0!important; padding:8px 16px!important; border:0!important; border-radius:980px!important; background:transparent!important; color:#1D1D1F!important; -webkit-text-fill-color:#1D1D1F!important; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display", "Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important; font-size:14.5px!important; font-weight:600!important; line-height:20px!important; text-decoration:none!important; } .pkp_navigation_search_wrapper a:hover, .pkp_navigation_search_wrapper a:focus{ background:rgba(8,114,46,.10)!important; color:#08722E!important; -webkit-text-fill-color:#08722E!important; } /* ---------- DROPDOWN ---------- */ #navigationPrimary ul, .pkp_navigation_primary .dropdown-menu{ top:calc(100% + 8px)!important; min-width:15.5em!important; margin:0!important; padding:6px!important; background:#FFFFFF!important; border:1px solid rgba(60,60,67,.12)!important; border-radius:14px!important; box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 22px 48px -10px rgba(0,0,0,.20)!important; } #navigationPrimary ul a, .pkp_navigation_primary .dropdown-menu a{ display:block!important; width:100%!important; padding:9px 12px!important; box-sizing:border-box!important; border:0!important; border-radius:9px!important; background:transparent!important; color:#1D1D1F!important; -webkit-text-fill-color:#1D1D1F!important; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","SF Pro Display", "Inter","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important; font-size:14px!important; font-weight:500!important; text-decoration:none!important; } #navigationPrimary ul a:hover, #navigationPrimary ul a:focus, .pkp_navigation_primary .dropdown-menu a:hover, .pkp_navigation_primary .dropdown-menu a:focus{ background:rgba(8,114,46,.10)!important; color:#08722E!important; -webkit-text-fill-color:#08722E!important; } /* ---------- CHEVRON ---------- */ #navigationPrimary > li > a[aria-haspopup]::after{ content:"\f107"!important; width:auto!important; height:auto!important; margin-left:6px!important; border:0!important; overflow:visible!important; font:normal normal normal 13px/1 FontAwesome!important; color:currentColor!important; transition:transform .25s ease!important; } #navigationPrimary > li:hover > a[aria-haspopup]::after, #navigationPrimary > li > a[aria-expanded="true"]::after{ transform:rotate(180deg)!important; } /* ---------- CEEJ ORANGE ACCENT ---------- */ .pkp_navigation_primary_row{ border-top:2px solid rgba(245,166,35,.60)!important; } .pkp_navigation_user > li:last-child > a:hover{ color:#F5A623!important; -webkit-text-fill-color:#F5A623!important; } /* ---------- RESPONSIVE ---------- */ @media (max-width:991px){ .pkp_head_wrapper{ padding:0 15px!important; } .pkp_site_name_wrapper, .pkp_site_name{ min-height:180px!important; } .pkp_site_name{ padding:22px 0 12px!important; } .pkp_site_name .is_img img, .pkp_site_name img{ max-width:90vw!important; max-height:155px!important; } .pkp_navigation_user_wrapper{ top:8px!important; right:15px!important; } .pkp_navigation_primary_row{ overflow-x:auto!important; justify-content:flex-start!important; gap:4px!important; padding:5px!important; } #navigationPrimary, .pkp_navigation_primary{ flex-wrap:nowrap!important; white-space:nowrap!important; } } @media (max-width:600px){ .pkp_head_wrapper{ padding:0 10px!important; } .pkp_site_name_wrapper, .pkp_site_name{ min-height:145px!important; } .pkp_site_name{ padding:20px 0 10px!important; } .pkp_site_name .is_img img, .pkp_site_name img{ max-width:92vw!important; max-height:110px!important; } .pkp_navigation_user_wrapper{ top:6px!important; right:10px!important; } .pkp_navigation_user{ gap:11px!important; } .pkp_navigation_user > li > a{ font-size:11.5px!important; } .pkp_navigation_primary_row{ min-height:48px!important; margin-top:4px!important; border-radius:18px!important; } #navigationPrimary > li > a, .pkp_navigation_primary > li > a{ min-height:36px!important; padding:7px 9px!important; font-size:12px!important; } } /* ================================================================ CEEJ HEADER — FULL ADOPTION FROM JOURNAL SISI LAIN REALITA FINAL OVERRIDE ---------------------------------------------------------------- Source structure adopted from Sisi Lain Realita: - large/full-width journal banner - no restrictive max-height on desktop logo - white header - iOS / Apple-style rounded navigation - rounded menu items - Apple-style dropdown - search integrated into navigation - user/account menu at top-right CEEJ identity: - Green : #08722E - Dark : #064D20 - Orange : #F5A623 IMPORTANT: This block is intentionally LAST so it overrides the previous CEEJ header rules in this combined CSS file. ================================================================ */ /* ================================================================ 1. HEADER OUTER AREA ================================================================ */ html, body, .pkp_structure_page, .pkp_structure_head{ background:#FFFFFF!important; background-image:none!important; } .pkp_structure_head{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; border:0!important; box-shadow:none!important; position:relative!important; overflow:visible!important; } .pkp_head_wrapper{ position:relative!important; width:100%!important; max-width:1160px!important; margin:0 auto!important; padding:0!important; background:#FFFFFF!important; box-sizing:border-box!important; overflow:visible!important; } /* ================================================================ 2. JOURNAL LOGO / BANNER DIRECT ADOPTION OF SISI LAIN REALITA ================================================================ */ .pkp_site_name_wrapper{ position:relative!important; z-index:1!important; width:100%!important; margin:0!important; padding:0!important; min-height:0!important; background:#FFFFFF!important; border:0!important; box-shadow:none!important; overflow:visible!important; } .pkp_site_name{ position:relative!important; z-index:1!important; display:block!important; width:100%!important; min-height:0!important; margin:0!important; padding:0!important; background:#FFFFFF!important; box-sizing:border-box!important; text-align:center!important; } /* Sisi Lain Realita uses a large banner without a small max-height restriction. The previous CEEJ rules of max-height:125px / 220px are explicitly cancelled here. */ .pkp_site_name .is_img, .pkp_site_name a{ display:block!important; width:100%!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; text-align:center!important; } .pkp_site_name .is_img img, .pkp_site_name img{ display:block!important; /* THE CRITICAL FIX */ width:100%!important; max-width:100%!important; height:auto!important; max-height:none!important; margin:-20px 0 -26px 0!important; padding:0!important; transform:none!important; filter:none!important; border:0!important; box-shadow:none!important; object-fit:contain!important; } /* ================================================================ 3. DESKTOP LOGO EXACT CONCEPT FROM SISI LAIN REALITA ================================================================ */ @media (min-width:992px){ .pkp_head_wrapper{ max-width:1160px!important; padding-left:0!important; padding-right:0!important; } .pkp_site_name_wrapper{ padding-left:0!important; padding-right:0!important; } .pkp_site_name, .pkp_site_name .is_img{ display:block!important; width:100%!important; } .pkp_site_name .is_img img, .pkp_site_name img{ width:100%!important; max-width:100%!important; height:auto!important; max-height:none!important; margin:-20px 0 -26px 0!important; } } /* ================================================================ 4. USER / ACCOUNT MENU — TOP RIGHT Sisi Lain Realita positioning ================================================================ */ .pkp_navigation_user_wrapper{ position:absolute!important; z-index:100001!important; top:10px!important; right:0!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; transform:none!important; visibility:visible!important; opacity:1!important; } #navigationUser, .pkp_navigation_user{ display:flex!important; align-items:center!important; justify-content:flex-end!important; flex-direction:row!important; gap:8px!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-shadow:none!important; list-style:none!important; } #navigationUser::before, #navigationUser::after{ display:none!important; } #navigationUser > li, .pkp_navigation_user > li{ display:block!important; width:auto!important; height:auto!important; margin:0!important; padding:0!important; border:0!important; background:transparent!important; } #navigationUser > li > a, .pkp_navigation_user > li > a{ display:inline-flex!important; align-items:center!important; gap:7px!important; width:auto!important; height:auto!important; min-height:0!important; margin:0!important; padding:7px 15px!important; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text", "SF Pro Display","Inter","Segoe UI",Roboto, "Helvetica Neue",Arial,sans-serif!important; font-size:13.5px!important; font-weight:600!important; line-height:18px!important; letter-spacing:-.01em!important; text-transform:none!important; color:#08722E!important; -webkit-text-fill-color:#08722E!important; background:rgba(255,255,255,.92)!important; border:1px solid rgba(60,60,67,.14)!important; border-radius:980px!important; box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 6px 16px -8px rgba(0,0,0,.18)!important; text-decoration:none!important; white-space:nowrap!important; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease, box-shadow .25s ease!important; } #navigationUser > li > a:hover, #navigationUser > li > a:focus, #navigationUser > li:hover > a, .pkp_navigation_user > li > a:hover, .pkp_navigation_user > li > a:focus{ background:rgba(8,114,46,.10)!important; border-color:transparent!important; color:#064D20!important; -webkit-text-fill-color:#064D20!important; outline:0!important; } #navigationUser > li > a:active{ transform:scale(.96)!important; } /* ================================================================ 5. NAVIGATION — TRUE SISI LAIN REALITA STYLE ================================================================ */ .pkp_site_nav_menu{ position:relative!important; z-index:200!important; width:100%!important; max-width:1160px!important; min-height:58px!important; height:auto!important; margin:0 auto!important; padding:0!important; background:#FFFFFF!important; border:0!important; box-shadow:none!important; overflow:visible!important; } .pkp_navigation_primary_wrapper{ display:flex!important; align-items:center!important; justify-content:space-between!important; width:100%!important; max-width:none!important; min-height:58px!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; box-sizing:border-box!important; } .pkp_navigation_primary_wrapper::before, .pkp_navigation_primary_wrapper::after{ display:none!important; } .pkp_navigation_primary_row{ position:relative!important; display:flex!important; align-items:center!important; justify-content:space-between!important; width:100%!important; min-height:58px!important; margin-top:6px!important; padding:7px 8px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid rgba(60,60,67,.12)!important; border-top:2px solid rgba(245,166,35,.55)!important; border-radius:25px!important; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 10px 30px -12px rgba(0,0,0,.14)!important; overflow:visible!important; } /* ================================================================ 6. PRIMARY MENU ================================================================ */ #navigationPrimary, .pkp_navigation_primary{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:2px!important; width:auto!important; max-width:none!important; margin:0!important; padding:0!important; list-style:none!important; } #navigationPrimary > li, .pkp_navigation_primary > li{ display:block!important; margin:0!important; padding:0!important; } #navigationPrimary > li > a, .pkp_navigation_primary > li > a{ display:inline-flex!important; align-items:center!important; min-height:38px!important; margin:0!important; padding:8px 14px!important; box-sizing:border-box!important; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text", "SF Pro Display","Inter","Segoe UI",Roboto, "Helvetica Neue",Arial,sans-serif!important; font-size:14.5px!important; font-weight:600!important; line-height:20px!important; letter-spacing:-.01em!important; text-transform:none!important; color:#1D1D1F!important; -webkit-text-fill-color:#1D1D1F!important; background:transparent!important; border:0!important; border-radius:980px!important; text-decoration:none!important; transition: background-color .25s ease, color .25s ease, transform .2s ease!important; -webkit-font-smoothing:antialiased!important; } #navigationPrimary > li > a:hover, #navigationPrimary > li > a:focus, #navigationPrimary > li:hover > a, #navigationPrimary > li > a[aria-expanded="true"], .pkp_navigation_primary > li > a:hover, .pkp_navigation_primary > li > a:focus{ background:rgba(8,114,46,.10)!important; color:#08722E!important; -webkit-text-fill-color:#08722E!important; outline:0!important; } #navigationPrimary > li > a:active{ transform:scale(.96)!important; } /* ================================================================ 7. CEEJ MENU ICONS ================================================================ */ #navigationPrimary > li > a::before{ display:inline-block!important; width:18px!important; min-width:18px!important; margin-right:8px!important; font:normal normal normal 14px/1 FontAwesome!important; color:#F5A623!important; -webkit-text-fill-color:#F5A623!important; text-rendering:auto!important; -webkit-font-smoothing:antialiased!important; } /* Home */ #navigationPrimary > li > a[href$="/ecej"], #navigationPrimary > li > a[href$="/ecej/"], #navigationPrimary > li > a[href$="/ecej/index"]::before{ content:"\f015"; } /* Issues */ #navigationPrimary > li > a[href$="/issue/current"]::before{ content:"\f02d"; } /* Archive */ #navigationPrimary > li > a[href*="/issue/archive"]::before{ content:"\f187"; } /* Announcements */ #navigationPrimary > li > a[href*="/announcement"]::before{ content:"\f0a1"; } /* Contact */ #navigationPrimary > li > a[href*="/about/contact"]::before{ content:"\f0e0"; } /* About */ #navigationPrimary > li > a[href*="/about"]::before{ content:"\f05a"; } /* ================================================================ 8. DROPDOWN — SISI LAIN REALITA ================================================================ */ #navigationPrimary ul, .pkp_navigation_primary .dropdown-menu{ top:calc(100% + 8px)!important; min-width:15.5em!important; margin:0!important; padding:6px!important; background:#FFFFFF!important; border:1px solid rgba(60,60,67,.12)!important; border-radius:14px!important; box-shadow: 0 2px 8px rgba(0,0,0,.06), 0 22px 48px -10px rgba(0,0,0,.20)!important; z-index:99999!important; } #navigationPrimary ul::before{ content:""!important; position:absolute!important; left:0!important; right:0!important; top:-10px!important; height:10px!important; } #navigationPrimary ul a, .pkp_navigation_primary .dropdown-menu a{ display:block!important; width:100%!important; padding:9px 12px!important; box-sizing:border-box!important; border:0!important; border-radius:9px!important; background:transparent!important; color:#1D1D1F!important; -webkit-text-fill-color:#1D1D1F!important; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text", "SF Pro Display","Inter","Segoe UI",Roboto, "Helvetica Neue",Arial,sans-serif!important; font-size:14px!important; font-weight:500!important; text-decoration:none!important; transition: background-color .2s ease, color .2s ease!important; } #navigationPrimary ul a:hover, #navigationPrimary ul a:focus, .pkp_navigation_primary .dropdown-menu a:hover, .pkp_navigation_primary .dropdown-menu a:focus{ background:rgba(8,114,46,.10)!important; color:#08722E!important; -webkit-text-fill-color:#08722E!important; } /* ================================================================ 9. CHEVRON ================================================================ */ #navigationPrimary > li > a[aria-haspopup]::after{ content:"\f107"!important; width:auto!important; height:auto!important; margin-left:6px!important; border:0!important; overflow:visible!important; font:normal normal normal 13px/1 FontAwesome!important; color:currentColor!important; transition:transform .25s ease!important; } #navigationPrimary > li:hover > a[aria-haspopup]::after, #navigationPrimary > li > a[aria-expanded="true"]::after{ transform:rotate(180deg)!important; } /* ================================================================ 10. SEARCH — SAME PILL BEHAVIOUR ================================================================ */ .pkp_navigation_search_wrapper{ float:none!important; flex:none!important; margin:0!important; } .pkp_navigation_search_wrapper a{ display:inline-flex!important; align-items:center!important; gap:6px!important; margin:0!important; padding:8px 16px!important; color:#1D1D1F!important; -webkit-text-fill-color:#1D1D1F!important; font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text", "SF Pro Display","Inter","Segoe UI",Roboto, "Helvetica Neue",Arial,sans-serif!important; font-size:14.5px!important; font-weight:600!important; line-height:20px!important; background:transparent!important; border:0!important; border-radius:980px!important; text-decoration:none!important; transition: background-color .25s ease, color .25s ease, transform .2s ease!important; } .pkp_navigation_search_wrapper a:hover, .pkp_navigation_search_wrapper a:focus{ background:rgba(8,114,46,.10)!important; color:#08722E!important; -webkit-text-fill-color:#08722E!important; outline:0!important; } .pkp_navigation_search_wrapper a .fa{ color:inherit!important; } .pkp_navigation_search_wrapper a:active{ transform:scale(.96)!important; } /* ================================================================ 11. DESKTOP — EXACT SISI LAIN DIMENSIONS ================================================================ */ @media (min-width:992px){ .pkp_navigation_primary_row{ margin-top:6px!important; padding:7px 8px!important; } .pkp_navigation_primary_wrapper{ display:flex!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; } #navigationPrimary{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:2px!important; max-width:none!important; margin:0!important; } #navigationPrimary > li > a{ display:inline-flex!important; align-items:center!important; margin:0!important; padding:8px 14px!important; line-height:20px!important; border-radius:980px!important; } #navigationPrimary > li:hover > ul{ left:0!important; } .pkp_navigation_search_wrapper{ float:none!important; flex:none!important; margin:0!important; } .pkp_navigation_search_wrapper a{ display:inline-flex!important; align-items:center!important; gap:6px!important; margin:0!important; padding:8px 16px!important; line-height:20px!important; } } /* ================================================================ 12. MOBILE / TABLET ================================================================ */ @media (max-width:991px){ .pkp_head_wrapper{ width:100%!important; max-width:none!important; padding:0 12px!important; } .pkp_site_name .is_img img, .pkp_site_name img{ width:100%!important; max-width:100%!important; max-height:none!important; height:auto!important; margin:-10px 0 -16px 0!important; } .pkp_navigation_user_wrapper{ top:8px!important; right:12px!important; } .pkp_navigation_primary_row{ overflow-x:auto!important; justify-content:flex-start!important; gap:4px!important; padding:5px!important; } #navigationPrimary, .pkp_navigation_primary{ flex-wrap:nowrap!important; white-space:nowrap!important; } } @media (max-width:600px){ .pkp_head_wrapper{ padding:0 8px!important; } .pkp_site_name .is_img img, .pkp_site_name img{ width:100%!important; max-width:100%!important; max-height:none!important; height:auto!important; margin:-5px 0 -10px 0!important; } .pkp_navigation_user_wrapper{ top:6px!important; right:8px!important; } #navigationUser > li > a, .pkp_navigation_user > li > a{ padding:5px 9px!important; font-size:11px!important; } .pkp_navigation_primary_row{ min-height:52px!important; margin-top:4px!important; border-radius:18px!important; } #navigationPrimary > li > a, .pkp_navigation_primary > li > a{ min-height:36px!important; padding:7px 9px!important; font-size:12px!important; } .pkp_navigation_search_wrapper a{ padding:7px 10px!important; font-size:12px!important; } } /* ================================================================ 13. FINAL CANCELLATION OF THE OLD SMALL-LOGO RULES ================================================================ */ @media (min-width:992px){ .pkp_site_name img, .pkp_site_name .is_img img{ width:100%!important; max-width:100%!important; height:auto!important; max-height:none!important; min-height:0!important; } } /* ================================================================ CEEJ FOOTER — JOURNAL SISI LAIN REALITA STYLE FINAL OVERRIDE ---------------------------------------------------------------- The Sisi Lain Realita footer visual system is adopted here while retaining the existing CEEJ/IJBS footer HTML classes. Mapping: SLR .slr-footer__top -> CEEJ .ijbs-footer-main SLR .slr-footer__logo -> CEEJ .ijbs-footer-logo SLR .slr-footer__about -> CEEJ .ijbs-footer-about SLR information column -> CEEJ .ijbs-footer-menu SLR contact column -> CEEJ .ijbs-footer-info SLR bottom bar -> CEEJ .ijbs-footer-bottom IMPORTANT: This block is LAST and therefore overrides the older CEEJ green/orange footer declarations. ================================================================ */ /* ================================================================ 1. OUTER FOOTER — SISI LAIN REALITA PANEL ================================================================ */ .pkp_structure_footer_wrapper{ position:relative!important; overflow:hidden!important; width:calc(100% - 92px)!important; max-width:1600px!important; margin:48px auto 0!important; padding:0!important; border:0!important; border-radius:25px 25px 0 0!important; background:#051F1E!important; color:rgba(255,255,255,.70)!important; box-shadow:none!important; } .pkp_structure_footer{ position:relative!important; z-index:1!important; width:100%!important; margin:0!important; padding:0!important; background:transparent!important; color:inherit!important; text-align:left!important; } .pkp_footer_content{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; background:transparent!important; color:rgba(255,255,255,.70)!important; font-family:-apple-system,BlinkMacSystemFont, "SF Pro Text","SF Pro Display","Inter", "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important; font-size:14px!important; line-height:1.6!important; -webkit-font-smoothing:antialiased!important; } .pkp_footer_content .pkp_brand_footer{ display:none!important; } /* ================================================================ 2. CEEJ MAIN FOOTER = SLR 3-COLUMN TOP AREA ================================================================ */ .pkp_footer_content .ijbs-footer{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; background:#051F1E!important; color:rgba(255,255,255,.70)!important; font-family:inherit!important; } .pkp_footer_content .ijbs-footer *{ box-sizing:border-box!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-main{ width:100%!important; max-width:none!important; margin:0!important; padding:56px 30px 44px!important; background:transparent!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-container{ width:100%!important; max-width:1250px!important; margin:0 auto!important; padding:0!important; display:grid!important; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr) minmax(0,1.4fr)!important; gap:48px!important; align-items:start!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-column{ min-width:0!important; margin:0!important; padding:0!important; background:transparent!important; } /* ================================================================ 3. TYPOGRAPHY / LINKS ================================================================ */ .pkp_footer_content .ijbs-footer p, .pkp_footer_content .ijbs-footer ul, .pkp_footer_content .ijbs-footer h1, .pkp_footer_content .ijbs-footer h2, .pkp_footer_content .ijbs-footer h3, .pkp_footer_content .ijbs-footer h4{ margin:0!important; } .pkp_footer_content .ijbs-footer a{ color:rgba(255,255,255,.82)!important; -webkit-text-fill-color:rgba(255,255,255,.82)!important; text-decoration:none!important; transition: color .2s ease, background-color .2s ease, transform .2s ease!important; } .pkp_footer_content .ijbs-footer a:hover, .pkp_footer_content .ijbs-footer a:focus{ color:#3FD6CC!important; -webkit-text-fill-color:#3FD6CC!important; text-decoration:none!important; } /* ================================================================ 4. CEEJ BRAND / ABOUT COLUMN ================================================================ */ .pkp_footer_content .ijbs-footer .ijbs-footer-about{ margin:0!important; padding:0!important; text-align:left!important; } /* CEEJ logo mark */ .pkp_footer_content .ijbs-footer .ijbs-footer-logo{ margin:0 0 8px!important; padding:0!important; } /* Keep the existing CEEJ logo/mark but transform its visual treatment toward the Sisi Lain footer. */ .pkp_footer_content .ijbs-footer .ijbs-footer-logo-mark{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-width:60px!important; height:32px!important; padding:0 13px!important; background:#01A39C!important; color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; border-radius:7px!important; font-size:15px!important; font-weight:900!important; letter-spacing:.5px!important; box-shadow:0 6px 16px rgba(1,163,156,.28)!important; } /* About heading */ .pkp_footer_content .ijbs-footer .ijbs-footer-about h3{ margin:0 0 13px!important; color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; font-size:21px!important; font-weight:800!important; line-height:1.2!important; letter-spacing:-.015em!important; text-shadow:none!important; } /* About description */ .pkp_footer_content .ijbs-footer .ijbs-footer-about p{ margin:0 0 12px!important; padding:0!important; color:#C9D5D3!important; -webkit-text-fill-color:#C9D5D3!important; font-size:13.5px!important; font-weight:400!important; line-height:1.7!important; } /* ================================================================ 5. CEEJ INFORMATION / QUICK LINKS COLUMN SLR turquoise uppercase heading + bullet list ================================================================ */ .pkp_footer_content .ijbs-footer .ijbs-footer-menu h3, .pkp_footer_content .ijbs-footer .ijbs-footer-info h3{ margin:0 0 16px!important; color:#3FD6CC!important; -webkit-text-fill-color:#3FD6CC!important; font-family:-apple-system,BlinkMacSystemFont, "SF Pro Text","SF Pro Display","Inter", "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important; font-size:13px!important; font-weight:700!important; line-height:1.3!important; letter-spacing:.08em!important; text-transform:uppercase!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-menu ul{ display:grid!important; gap:10px!important; margin:0!important; padding:0!important; list-style:none!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-menu li{ display:block!important; margin:0!important; padding:0!important; font-size:14px!important; line-height:1.45!important; list-style:none!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-menu a{ display:inline-flex!important; align-items:center!important; gap:8px!important; color:rgba(255,255,255,.82)!important; -webkit-text-fill-color:rgba(255,255,255,.82)!important; font-size:14px!important; font-weight:400!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-menu a::before{ content:""!important; display:inline-block!important; flex:none!important; width:5px!important; height:5px!important; margin:0!important; border-radius:50%!important; background:#01A39C!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-menu a:hover{ color:#3FD6CC!important; -webkit-text-fill-color:#3FD6CC!important; transform:translateX(2px)!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-menu a:hover::before{ background:#3FD6CC!important; transform:scale(1.35)!important; } /* ================================================================ 6. CONTACT / JOURNAL INFORMATION COLUMN ================================================================ */ .pkp_footer_content .ijbs-footer .ijbs-footer-info{ min-width:0!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-info-item{ display:flex!important; align-items:flex-start!important; min-width:0!important; margin:0!important; padding:0 0 10px!important; gap:12px!important; border:0!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-info-item + .ijbs-footer-info-item{ padding-top:10px!important; } /* SLR-style circular contact icon. The existing strong element becomes the label and receives the turquoise icon treatment. */ .pkp_footer_content .ijbs-footer .ijbs-footer-info-item strong{ position:relative!important; display:inline-flex!important; flex:none!important; align-items:center!important; justify-content:center!important; width:30px!important; height:30px!important; margin:0!important; padding:0!important; border-radius:15px!important; background:rgba(1,163,156,.18)!important; box-shadow:inset 0 0 0 1px rgba(63,214,204,.25)!important; color:#3FD6CC!important; -webkit-text-fill-color:#3FD6CC!important; font-size:0!important; font-weight:700!important; } /* Icons for common CEEJ information rows */ .pkp_footer_content .ijbs-footer .ijbs-footer-info-item:nth-child(1) strong::before{ content:"\f041"!important; /* map marker */ font:normal normal normal 14px/1 FontAwesome!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-info-item:nth-child(2) strong::before{ content:"\f0e0"!important; /* envelope */ font:normal normal normal 14px/1 FontAwesome!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-info-item:nth-child(3) strong::before{ content:"\f232"!important; /* WhatsApp */ font:normal normal normal 14px/1 FontAwesome!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-info-item:nth-child(n+4) strong::before{ content:"\f05a"!important; font:normal normal normal 14px/1 FontAwesome!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-info-item span{ display:block!important; min-width:0!important; padding:5px 0 0!important; color:rgba(255,255,255,.82)!important; -webkit-text-fill-color:rgba(255,255,255,.82)!important; font-size:13.5px!important; font-weight:400!important; line-height:1.6!important; overflow-wrap:anywhere!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-info-item span a{ color:rgba(255,255,255,.82)!important; -webkit-text-fill-color:rgba(255,255,255,.82)!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-info-item span a:hover{ color:#3FD6CC!important; -webkit-text-fill-color:#3FD6CC!important; } /* ================================================================ 7. PUBLISHER STRIP ================================================================ */ .pkp_footer_content .ijbs-footer .ijbs-footer-publisher{ width:100%!important; margin:0!important; padding:18px 30px!important; background:rgba(0,0,0,.12)!important; border-top:1px solid rgba(63,214,204,.12)!important; border-bottom:0!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-publisher-inner{ width:100%!important; max-width:1250px!important; margin:0 auto!important; display:flex!important; align-items:center!important; justify-content:space-between!important; gap:25px!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-publisher-text{ color:rgba(255,255,255,.72)!important; -webkit-text-fill-color:rgba(255,255,255,.72)!important; font-size:13px!important; line-height:1.55!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-publisher-text strong{ color:#3FD6CC!important; -webkit-text-fill-color:#3FD6CC!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-publisher-links{ display:flex!important; align-items:center!important; justify-content:flex-end!important; gap:10px!important; flex-wrap:wrap!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-publisher-links a{ color:#3FD6CC!important; -webkit-text-fill-color:#3FD6CC!important; font-size:13px!important; font-weight:700!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-publisher-links a:hover{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-publisher-links span{ color:rgba(255,255,255,.45)!important; -webkit-text-fill-color:rgba(255,255,255,.45)!important; } /* ================================================================ 8. BOTTOM COPYRIGHT / CC BAR ================================================================ */ .pkp_footer_content .ijbs-footer .ijbs-footer-bottom{ width:100%!important; margin:0!important; padding:20px 30px 24px!important; border-top:1px solid rgba(255,255,255,.08)!important; background:rgba(0,0,0,.18)!important; color:rgba(255,255,255,.55)!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-bottom-inner{ width:100%!important; max-width:1250px!important; margin:0 auto!important; display:flex!important; flex-wrap:wrap!important; align-items:center!important; justify-content:space-between!important; gap:12px 24px!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-copyright{ color:rgba(255,255,255,.55)!important; -webkit-text-fill-color:rgba(255,255,255,.55)!important; font-size:12.5px!important; line-height:1.6!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-license{ max-width:640px!important; color:rgba(255,255,255,.55)!important; -webkit-text-fill-color:rgba(255,255,255,.55)!important; font-size:12.5px!important; line-height:1.6!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-license img, .pkp_footer_content .ijbs-footer .ijbs-cc-icon{ display:inline-block!important; margin:-2px 10px 0 0!important; vertical-align:middle!important; } .pkp_footer_content .ijbs-footer .ijbs-cc-icon{ width:19px!important; height:12px!important; border:1px solid rgba(255,255,255,.35)!important; border-radius:3px!important; color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; font-size:9px!important; font-weight:700!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-license a{ color:rgba(255,255,255,.85)!important; -webkit-text-fill-color:rgba(255,255,255,.85)!important; text-decoration:underline!important; text-decoration-color:rgba(63,214,204,.5)!important; text-underline-offset:3px!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-license a:hover{ color:#3FD6CC!important; -webkit-text-fill-color:#3FD6CC!important; } /* ================================================================ 9. REMOVE OLD CEEJ FULL-WIDTH GREEN/ORANGE FOOTER PAINT ================================================================ */ .pkp_structure_footer_wrapper, .pkp_structure_footer{ background:#051F1E!important; border:0!important; } .pkp_footer_content{ background:transparent!important; } /* Ensure old generic footer rules cannot recolor the panel */ .pkp_structure_footer a{ text-decoration:none!important; } /* ================================================================ 10. RESPONSIVE — SLR BEHAVIOUR ================================================================ */ @media (max-width:991px){ .pkp_structure_footer_wrapper{ width:calc(100% - 40px)!important; margin-top:40px!important; border-radius:22px 22px 0 0!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-container{ grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:32px!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-about{ grid-column:1 / -1!important; } } @media (max-width:600px){ .pkp_structure_footer_wrapper{ width:100%!important; max-width:none!important; margin-top:32px!important; border-radius:0!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-main{ padding:40px 20px 32px!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-container{ display:grid!important; grid-template-columns:1fr!important; gap:28px!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-about{ grid-column:auto!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-about h3{ font-size:19px!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-about p{ font-size:13.5px!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-publisher{ padding:18px 20px!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-publisher-inner{ display:block!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-publisher-links{ justify-content:flex-start!important; margin-top:12px!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-bottom{ padding:18px 20px 22px!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-bottom-inner{ display:block!important; } .pkp_footer_content .ijbs-footer .ijbs-footer-license{ margin-top:9px!important; } } /* ================================================================ 11. REDUCED MOTION ================================================================ */ @media (prefers-reduced-motion:reduce){ .pkp_footer_content .ijbs-footer a{ transition:none!important; } .pkp_footer_content .ijbs-footer a:hover{ transform:none!important; } } /* ================================================================ CEEJ FOOTER — ACTUAL HTML FIX IMPORTANT: The CEEJ Page Footer HTML uses: .ceej-footer > .footer-column (3 columns) > .footer-column (3rd = Contact) .footer-bottom .footer-indexing-wrapper (sibling, above the footer) Therefore the previous .ijbs-footer selectors could NOT style the actual CEEJ footer. This block targets the real classes. ================================================================ */ /* ---------- OJS OUTER FOOTER ---------- */ .pkp_structure_footer_wrapper{ width:calc(100% - 92px)!important; max-width:1600px!important; margin:48px auto 0!important; padding:0!important; background:#051F1E!important; border:0!important; border-radius:25px 25px 0 0!important; overflow:hidden!important; box-shadow:none!important; } .pkp_structure_footer{ width:100%!important; margin:0!important; padding:0!important; background:transparent!important; border:0!important; color:rgba(255,255,255,.72)!important; text-align:left!important; } .pkp_footer_content{ width:100%!important; max-width:none!important; margin:0!important; padding:0!important; background:transparent!important; color:rgba(255,255,255,.72)!important; font-family:-apple-system,BlinkMacSystemFont, "SF Pro Text","SF Pro Display","Inter", "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important; font-size:14px!important; line-height:1.6!important; -webkit-font-smoothing:antialiased!important; } .pkp_footer_content .pkp_brand_footer{ display:none!important; } /* ================================================================ INDEXING Keep indexing above the dark Sisi Lain footer panel. ================================================================ */ .pkp_footer_content .footer-indexing-wrapper{ width:100%!important; margin:0!important; padding:24px 30px 0!important; background:#FFFFFF!important; } .pkp_footer_content .footer-indexing-card{ width:100%!important; max-width:1250px!important; margin:0 auto!important; padding:14px 20px!important; background:#FFFFFF!important; border:1px solid rgba(1,163,156,.14)!important; border-radius:14px!important; box-shadow:0 5px 18px rgba(0,0,0,.05)!important; } .pkp_footer_content .footer-indexing-grid{ display:flex!important; align-items:center!important; justify-content:center!important; flex-wrap:wrap!important; gap:14px 20px!important; } .pkp_footer_content .footer-indexing-grid a{ display:flex!important; align-items:center!important; justify-content:center!important; min-height:42px!important; padding:5px 10px!important; background:#FFFFFF!important; border:0!important; text-decoration:none!important; } .pkp_footer_content .footer-indexing-grid img{ display:block!important; width:auto!important; max-width:115px!important; height:38px!important; object-fit:contain!important; transform:none!important; } /* ================================================================ ACTUAL CEEJ FOOTER .ceej-footer = Sisi Lain top 3-column area ================================================================ */ .pkp_footer_content .ceej-footer{ width:100%!important; max-width:1250px!important; margin:0 auto!important; padding:56px 30px 44px!important; display:grid!important; grid-template-columns: minmax(0,1.7fr) minmax(0,1fr) minmax(0,1.4fr)!important; gap:48px!important; align-items:start!important; background:#051F1E!important; color:rgba(255,255,255,.72)!important; } /* ---------- COLUMN ---------- */ .pkp_footer_content .ceej-footer .footer-column{ min-width:0!important; margin:0!important; padding:0!important; background:transparent!important; } /* ---------- HEADINGS ---------- */ .pkp_footer_content .ceej-footer .footer-column h3{ margin:0 0 16px!important; padding:0!important; color:#3FD6CC!important; -webkit-text-fill-color:#3FD6CC!important; font-family:-apple-system,BlinkMacSystemFont, "SF Pro Text","SF Pro Display","Inter", "Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif!important; font-size:13px!important; font-weight:700!important; line-height:1.3!important; letter-spacing:.08em!important; text-transform:uppercase!important; } /* First column — About */ .pkp_footer_content .ceej-footer .footer-column:first-child h3{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; font-size:21px!important; font-weight:800!important; letter-spacing:-.015em!important; text-transform:none!important; margin-bottom:13px!important; } /* ---------- ABOUT TEXT ---------- */ .pkp_footer_content .ceej-footer .footer-column p{ margin:0!important; padding:0!important; color:#C9D5D3!important; -webkit-text-fill-color:#C9D5D3!important; font-size:13.5px!important; font-weight:400!important; line-height:1.7!important; } .pkp_footer_content .ceej-footer .footer-column:first-child p strong{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; } /* ================================================================ QUICK LINKS ================================================================ */ .pkp_footer_content .ceej-footer .footer-menu{ display:grid!important; gap:10px!important; margin:0!important; padding:0!important; list-style:none!important; } .pkp_footer_content .ceej-footer .footer-menu li{ display:block!important; margin:0!important; padding:0!important; list-style:none!important; } .pkp_footer_content .ceej-footer .footer-menu li a{ display:inline-flex!important; align-items:center!important; gap:8px!important; color:rgba(255,255,255,.82)!important; -webkit-text-fill-color:rgba(255,255,255,.82)!important; font-size:14px!important; font-weight:400!important; line-height:1.45!important; text-decoration:none!important; } .pkp_footer_content .ceej-footer .footer-menu li a::before{ content:""!important; width:5px!important; height:5px!important; flex:none!important; border-radius:50%!important; background:#01A39C!important; } .pkp_footer_content .ceej-footer .footer-menu li a:hover{ color:#3FD6CC!important; -webkit-text-fill-color:#3FD6CC!important; transform:translateX(2px)!important; } /* ================================================================ CONTACT ================================================================ */ .pkp_footer_content .ceej-footer .contact-item{ margin:0!important; padding:0 0 9px!important; color:rgba(255,255,255,.82)!important; -webkit-text-fill-color:rgba(255,255,255,.82)!important; font-size:13.5px!important; line-height:1.6!important; } .pkp_footer_content .ceej-footer .contact-item span{ display:block!important; color:inherit!important; -webkit-text-fill-color:inherit!important; } .pkp_footer_content .ceej-footer .contact-item strong{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; } .pkp_footer_content .ceej-footer .contact-item a{ color:rgba(255,255,255,.82)!important; -webkit-text-fill-color:rgba(255,255,255,.82)!important; text-decoration:none!important; } .pkp_footer_content .ceej-footer .contact-item a:hover{ color:#3FD6CC!important; -webkit-text-fill-color:#3FD6CC!important; } /* ---------- SOCIAL / CONTACT ICONS ---------- */ .pkp_footer_content .ceej-footer .footer-social-icons{ display:flex!important; align-items:center!important; gap:10px!important; margin:8px 0 0!important; padding:0!important; } .pkp_footer_content .ceej-footer .icon-btn-round{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:40px!important; height:40px!important; padding:0!important; border-radius:50%!important; background:rgba(1,163,156,.18)!important; box-shadow:inset 0 0 0 1px rgba(63,214,204,.25)!important; color:#3FD6CC!important; -webkit-text-fill-color:#3FD6CC!important; text-decoration:none!important; transition: background-color .2s ease, color .2s ease, transform .2s ease!important; } .pkp_footer_content .ceej-footer .icon-btn-round .fa{ color:inherit!important; -webkit-text-fill-color:inherit!important; font-size:14px!important; } .pkp_footer_content .ceej-footer .icon-btn-round:hover{ background:#01A39C!important; color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; transform:translateY(-2px)!important; } /* ================================================================ FOOTER BOTTOM Actual CEEJ HTML: .footer-bottom ================================================================ */ .pkp_footer_content .footer-bottom{ width:100%!important; max-width:100%!important; margin:0!important; padding:20px 30px 24px!important; box-sizing:border-box!important; display:flex!important; flex-wrap:wrap!important; align-items:center!important; justify-content:space-between!important; gap:8px 24px!important; border-top:1px solid rgba(255,255,255,.08)!important; background:rgba(0,0,0,.18)!important; color:rgba(255,255,255,.55)!important; } .pkp_footer_content .footer-bottom p{ margin:0!important; padding:0!important; color:rgba(255,255,255,.55)!important; -webkit-text-fill-color:rgba(255,255,255,.55)!important; font-size:12.5px!important; line-height:1.6!important; } .pkp_footer_content .footer-bottom strong{ color:rgba(255,255,255,.78)!important; -webkit-text-fill-color:rgba(255,255,255,.78)!important; } .pkp_footer_content .footer-bottom a{ color:rgba(255,255,255,.85)!important; -webkit-text-fill-color:rgba(255,255,255,.85)!important; text-decoration:underline!important; text-decoration-color:rgba(63,214,204,.5)!important; text-underline-offset:3px!important; } .pkp_footer_content .footer-bottom a:hover{ color:#3FD6CC!important; -webkit-text-fill-color:#3FD6CC!important; } /* ================================================================ REMOVE OLD FOOTER PAINT / TOP ACCENT FROM PREVIOUS CEEJ VERSION ================================================================ */ .pkp_structure_footer_wrapper::before, .pkp_footer_content::before{ display:none!important; content:none!important; } /* ================================================================ RESPONSIVE ================================================================ */ @media (max-width:991px){ .pkp_structure_footer_wrapper{ width:calc(100% - 40px)!important; margin-top:40px!important; border-radius:22px 22px 0 0!important; } .pkp_footer_content .ceej-footer{ grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:32px!important; } .pkp_footer_content .ceej-footer .footer-column:first-child{ grid-column:1 / -1!important; } } @media (max-width:600px){ .pkp_structure_footer_wrapper{ width:100%!important; max-width:none!important; margin-top:32px!important; border-radius:0!important; } .pkp_footer_content .footer-indexing-wrapper{ padding:18px 15px 0!important; } .pkp_footer_content .footer-indexing-card{ padding:12px 10px!important; } .pkp_footer_content .ceej-footer{ display:grid!important; grid-template-columns:1fr!important; gap:28px!important; padding:40px 20px 32px!important; } .pkp_footer_content .ceej-footer .footer-column:first-child{ grid-column:auto!important; } .pkp_footer_content .footer-bottom{ display:block!important; padding:18px 20px 22px!important; } .pkp_footer_content .footer-bottom p + p{ margin-top:8px!important; } } /* ================================================================ CEEJ FOOTER — COVER PALETTE EDITION Palette extracted from the CEEJ cover: Green #08732F Green dark #045622 Orange #FF9E4F Gold #FFC056 Dark text #2D2D2D Light gray #EBEBEB White #FFFFFF IMPORTANT: This block intentionally comes LAST so it overrides older Sisi Lain / teal footer colors without changing the HTML. ================================================================ */ /* ---------- OUTER PAGE / FOOTER ---------- */ .pkp_structure_footer_wrapper{ width:calc(100% - 92px)!important; max-width:1600px!important; margin:48px auto 0!important; padding:0!important; background:#08732F!important; border:0!important; border-radius:26px 26px 0 0!important; overflow:hidden!important; box-shadow: 0 -10px 30px rgba(8,115,47,.10), 0 18px 45px rgba(8,115,47,.14)!important; } .pkp_structure_footer{ background:transparent!important; border:0!important; color:#FFFFFF!important; } /* ================================================================ INDEXING CARD White + green/orange accents to match the cover. ================================================================ */ .pkp_footer_content .footer-indexing-wrapper{ background:#FFFFFF!important; padding:24px 30px 10px!important; } .pkp_footer_content .footer-indexing-card{ border:1px solid rgba(8,115,47,.18)!important; border-top:3px solid #FF9E4F!important; background:#FFFFFF!important; box-shadow: 0 5px 18px rgba(8,115,47,.08)!important; } .pkp_footer_content .footer-indexing-grid a{ background:#FFFFFF!important; } .pkp_footer_content .footer-indexing-grid a:hover{ background:#FFF8EE!important; } .pkp_footer_content .footer-indexing-grid img{ filter:none!important; } /* ================================================================ MAIN CEEJ FOOTER Cover green is the dominant brand color. ================================================================ */ .pkp_footer_content .ceej-footer{ position:relative!important; background:#08732F!important; color:rgba(255,255,255,.88)!important; border-top:4px solid #FF9E4F!important; padding:54px 30px 42px!important; box-shadow:none!important; } /* Subtle orange accent line at the top of the content area */ .pkp_footer_content .ceej-footer::before{ content:""!important; position:absolute!important; left:30px!important; top:-4px!important; width:90px!important; height:4px!important; background:#FFC056!important; } /* ---------- COLUMN HEADINGS ---------- */ .pkp_footer_content .ceej-footer .footer-column h3{ color:#FFC056!important; -webkit-text-fill-color:#FFC056!important; font-family:Arial,Helvetica,sans-serif!important; font-size:14px!important; font-weight:800!important; letter-spacing:.08em!important; text-transform:uppercase!important; } /* About CEEJ — white title, like the cover typography */ .pkp_footer_content .ceej-footer .footer-column:first-child h3{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; font-size:22px!important; font-weight:800!important; letter-spacing:.01em!important; text-transform:none!important; } /* ---------- TEXT ---------- */ .pkp_footer_content .ceej-footer .footer-column p{ color:#F5F5F5!important; -webkit-text-fill-color:#F5F5F5!important; } .pkp_footer_content .ceej-footer .footer-column:first-child p strong{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; } /* ================================================================ QUICK LINKS ================================================================ */ .pkp_footer_content .ceej-footer .footer-menu li a{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; } .pkp_footer_content .ceej-footer .footer-menu li a::before{ background:#FF9E4F!important; } .pkp_footer_content .ceej-footer .footer-menu li a:hover{ color:#FFC056!important; -webkit-text-fill-color:#FFC056!important; } /* ================================================================ CONTACT ================================================================ */ .pkp_footer_content .ceej-footer .contact-item{ color:#F5F5F5!important; -webkit-text-fill-color:#F5F5F5!important; } .pkp_footer_content .ceej-footer .contact-item strong{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; } .pkp_footer_content .ceej-footer .contact-item a{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; } .pkp_footer_content .ceej-footer .contact-item a:hover{ color:#FFC056!important; -webkit-text-fill-color:#FFC056!important; } /* ================================================================ SOCIAL BUTTONS Orange / gold from the CEEJ cover. ================================================================ */ .pkp_footer_content .ceej-footer .icon-btn-round{ background:#FF9E4F!important; color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; box-shadow: 0 4px 12px rgba(255,158,79,.28), inset 0 0 0 1px rgba(255,255,255,.25)!important; } .pkp_footer_content .ceej-footer .icon-btn-round:hover{ background:#FFC056!important; color:#2D2D2D!important; -webkit-text-fill-color:#2D2D2D!important; transform:translateY(-2px) scale(1.04)!important; } /* ================================================================ FOOTER BOTTOM Use a slightly darker green so the hierarchy follows the cover. ================================================================ */ .pkp_footer_content .footer-bottom{ background:#045622!important; border-top:1px solid rgba(255,192,86,.28)!important; color:rgba(255,255,255,.72)!important; } .pkp_footer_content .footer-bottom p{ color:rgba(255,255,255,.72)!important; -webkit-text-fill-color:rgba(255,255,255,.72)!important; } .pkp_footer_content .footer-bottom strong{ color:#FFC056!important; -webkit-text-fill-color:#FFC056!important; } .pkp_footer_content .footer-bottom a{ color:#FF9E4F!important; -webkit-text-fill-color:#FF9E4F!important; text-decoration-color:rgba(255,192,86,.65)!important; } .pkp_footer_content .footer-bottom a:hover{ color:#FFC056!important; -webkit-text-fill-color:#FFC056!important; } /* ================================================================ OJS DEFAULT FOOTER BRAND ================================================================ */ .pkp_footer_content .pkp_brand_footer{ display:none!important; } /* ================================================================ RESPONSIVE — preserve the cover palette ================================================================ */ @media (max-width:991px){ .pkp_structure_footer_wrapper{ width:calc(100% - 40px)!important; border-radius:22px 22px 0 0!important; } .pkp_footer_content .ceej-footer{ padding:46px 26px 38px!important; } } @media (max-width:600px){ .pkp_structure_footer_wrapper{ width:100%!important; max-width:none!important; border-radius:0!important; } .pkp_footer_content .footer-indexing-wrapper{ padding:18px 15px 8px!important; } .pkp_footer_content .ceej-footer{ padding:38px 20px 30px!important; border-top-width:4px!important; } .pkp_footer_content .ceej-footer::before{ left:20px!important; width:70px!important; } .pkp_footer_content .footer-bottom{ padding:18px 20px 22px!important; } } /* ================================================================ CEEJ INDEXING AREA — PREMIUM FLOATING / HOVER ZOOM Cover palette: green #08732F + orange #FF9E4F + gold #FFC056 Behaviour: - logos gently "float" with a soft shadow - the whole indexing area has a slow breathing shadow - each indexing logo grows smoothly on hover/focus - hover raises the logo without changing the layout - reduced-motion users get a static accessible state ================================================================ */ .pkp_footer_content .footer-indexing-wrapper{ position:relative!important; z-index:20!important; overflow:visible!important; background:#FFFFFF!important; border:0!important; border-radius:0!important; padding:26px 34px 18px!important; box-shadow: 0 8px 22px rgba(8,115,47,.08), 0 0 0 1px rgba(8,115,47,.10)!important; animation:ceejIndexingBreath 4.5s ease-in-out infinite!important; } .pkp_footer_content .footer-indexing-card{ position:relative!important; z-index:21!important; overflow:visible!important; background:#FFFFFF!important; border:1px solid rgba(8,115,47,.16)!important; border-top:3px solid #FF9E4F!important; border-radius:18px!important; box-shadow: 0 7px 20px rgba(8,115,47,.10), 0 2px 5px rgba(255,158,79,.08)!important; transition: box-shadow .45s ease, border-color .45s ease, transform .45s ease!important; } .pkp_footer_content .footer-indexing-card:hover{ border-color:rgba(255,158,79,.45)!important; box-shadow: 0 14px 32px rgba(8,115,47,.16), 0 5px 16px rgba(255,158,79,.12)!important; transform:translateY(-2px)!important; } .pkp_footer_content .footer-indexing-grid{ display:flex!important; align-items:center!important; justify-content:center!important; flex-wrap:wrap!important; gap:24px 34px!important; overflow:visible!important; } .pkp_footer_content .footer-indexing-grid a{ position:relative!important; z-index:22!important; display:flex!important; align-items:center!important; justify-content:center!important; min-width:140px!important; min-height:64px!important; padding:8px 12px!important; background:#FFFFFF!important; border:1px solid rgba(45,45,45,.10)!important; border-radius:8px!important; box-shadow: 0 3px 8px rgba(0,0,0,.10)!important; transform-origin:center center!important; transition: transform .38s cubic-bezier(.2,.8,.2,1), box-shadow .38s ease, border-color .38s ease, filter .38s ease, background-color .38s ease!important; animation:ceejIndexerFloat 4s ease-in-out infinite!important; } /* Stagger the floating motion so the row feels alive, not mechanical. */ .pkp_footer_content .footer-indexing-grid a:nth-child(2){ animation-delay:-.7s!important; } .pkp_footer_content .footer-indexing-grid a:nth-child(3){ animation-delay:-1.4s!important; } .pkp_footer_content .footer-indexing-grid a:nth-child(4){ animation-delay:-2.1s!important; } .pkp_footer_content .footer-indexing-grid a:nth-child(5){ animation-delay:-2.8s!important; } .pkp_footer_content .footer-indexing-grid a:nth-child(6){ animation-delay:-3.5s!important; } /* Logo itself */ .pkp_footer_content .footer-indexing-grid a img{ display:block!important; max-width:100%!important; height:auto!important; transform:none!important; filter:drop-shadow(0 2px 3px rgba(0,0,0,.10))!important; transition: transform .42s cubic-bezier(.2,.8,.2,1), filter .42s ease!important; } /* Hover / keyboard focus: logo becomes noticeably larger while the surrounding layout stays stable. */ @media (hover:hover) and (pointer:fine){ .pkp_footer_content .footer-indexing-grid a:hover{ z-index:100!important; transform:translateY(-8px) scale(1.16)!important; background:#FFFFFF!important; border-color:#FF9E4F!important; box-shadow: 0 18px 34px rgba(8,115,47,.24), 0 7px 20px rgba(255,158,79,.22)!important; } .pkp_footer_content .footer-indexing-grid a:hover img{ transform:scale(1.04)!important; filter: drop-shadow(0 5px 8px rgba(8,115,47,.20)) drop-shadow(0 2px 5px rgba(255,158,79,.18))!important; } } /* Keyboard accessibility */ .pkp_footer_content .footer-indexing-grid a:focus-visible{ z-index:100!important; outline:3px solid #FFC056!important; outline-offset:4px!important; transform:translateY(-6px) scale(1.12)!important; box-shadow: 0 16px 30px rgba(8,115,47,.22)!important; } /* Pause the gentle motion when the user is interacting with a logo. */ .pkp_footer_content .footer-indexing-grid a:hover, .pkp_footer_content .footer-indexing-grid a:focus-visible{ animation-play-state:paused!important; } @keyframes ceejIndexerFloat{ 0%,100%{ transform:translateY(0); box-shadow:0 3px 8px rgba(0,0,0,.10); } 50%{ transform:translateY(-3px); box-shadow:0 8px 16px rgba(8,115,47,.14); } } @keyframes ceejIndexingBreath{ 0%,100%{ box-shadow: 0 8px 22px rgba(8,115,47,.08), 0 0 0 1px rgba(8,115,47,.10); } 50%{ box-shadow: 0 12px 30px rgba(8,115,47,.14), 0 0 0 1px rgba(255,158,79,.18); } } /* Mobile / touch: no hover is required; keep a modest floating effect and avoid an oversized logo that could cause horizontal clipping. */ @media (max-width:900px){ .pkp_footer_content .footer-indexing-wrapper{ padding:22px 22px 14px!important; } .pkp_footer_content .footer-indexing-grid{ gap:18px 22px!important; } .pkp_footer_content .footer-indexing-grid a{ min-width:125px!important; min-height:58px!important; } } @media (max-width:600px){ .pkp_footer_content .footer-indexing-wrapper{ padding:18px 12px 10px!important; } .pkp_footer_content .footer-indexing-grid{ gap:12px!important; } .pkp_footer_content .footer-indexing-grid a{ min-width:105px!important; min-height:54px!important; padding:6px 9px!important; } } /* Respect users who prefer reduced motion. */ @media (prefers-reduced-motion:reduce){ .pkp_footer_content .footer-indexing-wrapper, .pkp_footer_content .footer-indexing-grid a{ animation:none!important; } .pkp_footer_content .footer-indexing-grid a{ transition:none!important; } .pkp_footer_content .footer-indexing-grid a:hover, .pkp_footer_content .footer-indexing-grid a:focus-visible{ transform:scale(1.08)!important; } } /* ========================================================== PEKA HEADER — DESKTOP LOGO AREA REDUCED TO 185PX Navigation remains 58px. ========================================================== */ @media (min-width:901px){ .pkp_structure_head .pkp_head_wrapper{ min-height:185px!important; } .pkp_structure_head .pkp_site_name_wrapper{ min-height:185px!important; } .pkp_structure_head .pkp_site_name{ min-height:185px!important; } } /* ========================================================== HEADER LOGO → NAVIGATION GAP Memberi ruang putih antara area logo dan menu navigasi. Logo/header tetap 185px; menu tetap 58px. ========================================================== */ @media (min-width:901px){ /* Tambahkan jarak visual setelah logo */ .pkp_structure_head .pkp_site_name_wrapper{ padding-bottom:15px!important; box-sizing:border-box!important; } .pkp_structure_head .pkp_site_name{ margin-bottom:15px!important; } /* Pastikan navigation tidak menempel langsung pada logo */ .pkp_structure_head .pkp_site_nav_menu{ margin-top:15px!important; } } /* Tablet */ @media (min-width:601px) and (max-width:900px){ .pkp_structure_head .pkp_site_nav_menu{ margin-top:12px!important; } } /* Mobile: jarak lebih kecil agar header tetap proporsional */ @media (max-width:600px){ .pkp_structure_head .pkp_site_nav_menu{ margin-top:8px!important; } } /* ========================================================== CEEJ — PDF BUTTON FONT ORANGE Requested: PDF text/icon in orange ========================================================== */ .obj_galley_link, .cmp_galley_link, a.obj_galley_link, a.cmp_galley_link, a[href*="/galley/"], a[href*="galley"]{ color:#F57C00!important; -webkit-text-fill-color:#F57C00!important; } .obj_galley_link *, .cmp_galley_link *, a.obj_galley_link *, a.cmp_galley_link *, a[href*="/galley/"] *, a[href*="galley"] *{ color:#F57C00!important; -webkit-text-fill-color:#F57C00!important; } .obj_galley_link:hover, .cmp_galley_link:hover, a.obj_galley_link:hover, a.cmp_galley_link:hover, a[href*="/galley/"]:hover, a[href*="galley"]:hover{ color:#E65100!important; -webkit-text-fill-color:#E65100!important; } /* PDF icon */ .obj_galley_link::before, .cmp_galley_link::before, a.obj_galley_link::before, a.cmp_galley_link::before{ color:#F57C00!important; -webkit-text-fill-color:#F57C00!important; } /* ========================================================== CEEJ — FINAL PDF BUTTON GREEN Replace yellow PDF button with readable CEEJ green. Text + PDF icon = white for strong contrast. ========================================================== */ .obj_galley_link, .cmp_galley_link, a.obj_galley_link, a.cmp_galley_link, a[href*="similarity"]{ background:#0B6E3E !important; background-image:none !important; border:1px solid #0B6E3E !important; color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; box-shadow:0 4px 10px rgba(11,110,62,.18) !important; } .obj_galley_link *, .cmp_galley_link *, a.obj_galley_link *, a.cmp_galley_link *, a[href*="similarity"] *{ color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; } .obj_galley_link::before, .cmp_galley_link::before, a.obj_galley_link::before, a.cmp_galley_link::before{ color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; } .obj_galley_link:hover, .cmp_galley_link:hover, a.obj_galley_link:hover, a.cmp_galley_link:hover, a[href*="similarity"]:hover{ background:#064B2E !important; background-image:none !important; border-color:#064B2E !important; color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; box-shadow:0 6px 14px rgba(6,75,46,.25) !important; } .obj_galley_link:hover *, .cmp_galley_link:hover *, a.obj_galley_link:hover *, a.cmp_galley_link:hover *, a[href*="similarity"]:hover *{ color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; } .obj_galley_link:hover::before, .cmp_galley_link:hover::before, a.obj_galley_link:hover::before, a.cmp_galley_link:hover::before{ color:#FFFFFF !important; -webkit-text-fill-color:#FFFFFF !important; } /* Accessibility: keyboard focus */ .obj_galley_link:focus-visible, .cmp_galley_link:focus-visible, a.obj_galley_link:focus-visible, a.cmp_galley_link:focus-visible{ outline:3px solid #A7DDBD !important; outline-offset:2px !important; } /* ========================================================== CEEJ TOOLS SIDEBAR — COMPACT LOGO FINAL Added without changing existing sidebar components. HTML target: .ceej-tools ========================================================== */ .pkp_structure_sidebar .ceej-tools{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:10px!important; width:100%!important; margin:0!important; padding:0!important; box-sizing:border-box!important; } .pkp_structure_sidebar .ceej-tools a{ display:flex!important; align-items:center!important; justify-content:center!important; min-height:76px!important; padding:10px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid #E5E5E5!important; border-radius:14px!important; box-shadow:0 4px 12px rgba(8,114,46,.07)!important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease!important; } .pkp_structure_sidebar .ceej-tools a:hover{ transform:translateY(-3px)!important; border-color:#0C8A39!important; box-shadow:0 10px 22px rgba(8,114,46,.16)!important; } .pkp_structure_sidebar .ceej-tools img{ display:block!important; width:150px!important; max-width:100%!important; height:auto!important; max-height:48px!important; object-fit:contain!important; margin:0 auto!important; transform:none!important; filter:none!important; box-shadow:none!important; border:0!important; border-radius:0!important; } .pkp_structure_sidebar .ceej-tools img:hover{ transform:none!important; filter:none!important; box-shadow:none!important; } /* Tablet */ @media(max-width:900px){ .pkp_structure_sidebar .ceej-tools{ gap:9px!important; } .pkp_structure_sidebar .ceej-tools a{ min-height:72px!important; padding:9px!important; } .pkp_structure_sidebar .ceej-tools img{ width:145px!important; max-height:46px!important; } } /* Mobile */ @media(max-width:600px){ .pkp_structure_sidebar .ceej-tools{ grid-template-columns:1fr 1fr!important; gap:8px!important; } .pkp_structure_sidebar .ceej-tools a{ min-height:70px!important; padding:8px!important; border-radius:12px!important; } .pkp_structure_sidebar .ceej-tools img{ width:135px!important; max-height:44px!important; } } /* ========================================================== CEEJ EDITORIAL TEAM — PREMIUM CARD / GRID FINAL OVERRIDE ---------------------------------------------------------- Purpose: - Convert legacy OJS editorial markup into modern cards - Keep existing editorial HTML/content - 2-column leadership cards on desktop - 3-column editorial board cards - Responsive tablet/mobile layout - CEEJ green + orange palette - Does NOT modify header/navigation/sidebar/footer ========================================================== */ :root{ --ceej-green:#08722E; --ceej-green-dark:#064D20; --ceej-green-soft:#0C8A39; --ceej-orange:#FEA550; --ceej-orange-dark:#F28C28; --ceej-cream:#FFF8F0; --ceej-border:#E7E7E7; --ceej-text:#243238; --ceej-muted:#68757A; } /* ---------- Editorial page container ---------- */ .pkp_page_editorialteam .pkp_structure_main, body[class*="editorial"] .pkp_structure_main{ box-sizing:border-box!important; } .pkp_page_editorialteam .pkp_structure_main .page, body[class*="editorial"] .pkp_structure_main .page{ color:var(--ceej-text)!important; } /* ---------- Main page title ---------- */ .pkp_page_editorialteam .page h1, body[class*="editorial"] .page h1{ color:var(--ceej-green)!important; font-weight:800!important; letter-spacing:-.02em!important; margin-bottom:28px!important; } /* ---------- Legacy group headings ---------- */ .pkp_page_editorialteam #groups > .group > h4, body[class*="editorial"] #groups > .group > h4{ position:relative!important; margin:30px 0 18px!important; padding:0 0 11px!important; border-bottom:1px solid var(--ceej-border)!important; color:var(--ceej-green)!important; font-size:21px!important; line-height:1.3!important; font-weight:800!important; } .pkp_page_editorialteam #groups > .group > h4::after, body[class*="editorial"] #groups > .group > h4::after{ content:""!important; display:block!important; width:58px!important; height:3px!important; margin-top:9px!important; border-radius:10px!important; background:linear-gradient(90deg,var(--ceej-green),var(--ceej-orange))!important; } /* ========================================================== LEADERSHIP Existing markup: #groups > .group .editorial-list .img-profile .imgthumb .team-content ========================================================== */ /* Managing Editor + Editor in Chief cards */ .pkp_page_editorialteam #groups > .group .editorial-list, body[class*="editorial"] #groups > .group .editorial-list{ width:100%!important; margin:0!important; padding:0!important; } .pkp_page_editorialteam #groups > .group .editorial-list > ul, body[class*="editorial"] #groups > .group .editorial-list > ul{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:20px!important; width:100%!important; margin:0!important; padding:0!important; list-style:none!important; } /* Individual leadership card */ .pkp_page_editorialteam #groups > .group .editorial-list > ul > li, body[class*="editorial"] #groups > .group .editorial-list > ul > li{ display:flex!important; align-items:flex-start!important; gap:20px!important; min-width:0!important; margin:0!important; padding:20px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid var(--ceej-border)!important; border-radius:16px!important; box-shadow:0 7px 22px rgba(8,114,46,.08)!important; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease!important; } .pkp_page_editorialteam #groups > .group .editorial-list > ul > li:hover, body[class*="editorial"] #groups > .group .editorial-list > ul > li:hover{ transform:translateY(-4px)!important; border-color:#B9DCC5!important; box-shadow:0 14px 30px rgba(8,114,46,.14)!important; } /* Profile image wrapper */ .pkp_page_editorialteam .img-profile, body[class*="editorial"] .img-profile{ flex:0 0 118px!important; width:118px!important; margin:0!important; padding:0!important; } /* Profile image */ .pkp_page_editorialteam .img-profile .imgthumb, body[class*="editorial"] .img-profile .imgthumb{ width:118px!important; height:145px!important; overflow:hidden!important; margin:0!important; padding:0!important; border-radius:14px!important; background:linear-gradient(145deg,#F4FAF5,#FFF8F0)!important; border:1px solid #DCE9DF!important; box-shadow:0 5px 15px rgba(8,114,46,.10)!important; } .pkp_page_editorialteam .img-profile img, body[class*="editorial"] .img-profile img{ display:block!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; margin:0!important; padding:0!important; object-fit:cover!important; object-position:center top!important; border:0!important; border-radius:14px!important; box-shadow:none!important; transform:none!important; filter:none!important; } /* Prevent global img:hover rule from enlarging editorial photos */ .pkp_page_editorialteam .img-profile img:hover, body[class*="editorial"] .img-profile img:hover{ transform:none!important; box-shadow:none!important; } /* Team information */ .pkp_page_editorialteam .team-content, body[class*="editorial"] .team-content{ flex:1 1 auto!important; min-width:0!important; margin:0!important; padding:0!important; } /* Person name */ .pkp_page_editorialteam .team-content > strong, body[class*="editorial"] .team-content > strong{ display:block!important; margin:1px 0 9px!important; color:var(--ceej-green)!important; font-size:18px!important; line-height:1.35!important; font-weight:800!important; } /* Small label icons */ .pkp_page_editorialteam .ico-label, body[class*="editorial"] .ico-label{ width:17px!important; height:17px!important; max-width:17px!important; max-height:17px!important; object-fit:contain!important; vertical-align:-3px!important; margin:0 6px 0 0!important; padding:0!important; border:0!important; border-radius:0!important; box-shadow:none!important; transform:none!important; } .pkp_page_editorialteam .ico-label:hover, body[class*="editorial"] .ico-label:hover{ transform:none!important; box-shadow:none!important; } /* Affiliation / IDs */ .pkp_page_editorialteam .team-aff, body[class*="editorial"] .team-aff{ margin:0!important; padding:0!important; } .pkp_page_editorialteam .team-aff ul, body[class*="editorial"] .team-aff ul{ margin:0!important; padding:0!important; list-style:none!important; } .pkp_page_editorialteam .team-aff li, body[class*="editorial"] .team-aff li{ margin:0 0 7px!important; padding:0!important; color:var(--ceej-muted)!important; font-size:13px!important; line-height:1.5!important; } .pkp_page_editorialteam .team-aff li:last-child, body[class*="editorial"] .team-aff li:last-child{ margin-bottom:0!important; } .pkp_page_editorialteam .team-aff a, body[class*="editorial"] .team-aff a{ color:var(--ceej-green)!important; font-weight:600!important; text-decoration:none!important; overflow-wrap:anywhere!important; } .pkp_page_editorialteam .team-aff a:hover, body[class*="editorial"] .team-aff a:hover{ color:var(--ceej-orange-dark)!important; text-decoration:underline!important; } /* ========================================================== EDITORIAL BOARDS Legacy board markup often uses separate tables/divs. Convert each board table into a clean card. ========================================================== */ .pkp_page_editorialteam #groups > div:not(.group) table, body[class*="editorial"] #groups > div:not(.group) table{ width:100%!important; margin:0 0 16px!important; padding:0!important; border:1px solid var(--ceej-border)!important; border-collapse:separate!important; border-spacing:0!important; border-radius:15px!important; background:#FFFFFF!important; box-shadow:0 5px 18px rgba(8,114,46,.07)!important; overflow:hidden!important; } /* Name row */ .pkp_page_editorialteam #groups > div:not(.group) table tr:first-child td, body[class*="editorial"] #groups > div:not(.group) table tr:first-child td{ padding:15px 18px 8px!important; border:0!important; background:#FFFFFF!important; color:var(--ceej-green)!important; font-size:16px!important; line-height:1.4!important; font-weight:800!important; } /* Logo row */ .pkp_page_editorialteam #groups > div:not(.group) table tr:nth-child(2) td, body[class*="editorial"] #groups > div:not(.group) table tr:nth-child(2) td{ padding:4px 18px 15px!important; border:0!important; background:#FFFFFF!important; vertical-align:middle!important; } /* Board logos */ .pkp_page_editorialteam #groups > div:not(.group) table tr:nth-child(2) img, body[class*="editorial"] #groups > div:not(.group) table tr:nth-child(2) img{ display:inline-block!important; width:auto!important; max-width:90px!important; height:auto!important; max-height:34px!important; margin:0 7px 0 0!important; padding:0!important; object-fit:contain!important; border:0!important; border-radius:0!important; box-shadow:none!important; transform:none!important; } .pkp_page_editorialteam #groups > div:not(.group) table img:hover, body[class*="editorial"] #groups > div:not(.group) table img:hover{ transform:none!important; box-shadow:none!important; } /* ========================================================== GENERIC EDITORIAL PAGE CLEANUP ========================================================== */ .pkp_page_editorialteam #groups p, body[class*="editorial"] #groups p{ margin:0!important; } .pkp_page_editorialteam #groups strong, body[class*="editorial"] #groups strong{ color:inherit; } .pkp_page_editorialteam #groups > .group, body[class*="editorial"] #groups > .group{ margin-bottom:28px!important; } /* Hide accidental empty div/table spacing */ .pkp_page_editorialteam #groups > .group > div:empty, body[class*="editorial"] #groups > .group > div:empty{ display:none!important; } /* ========================================================== RESPONSIVE — TABLET ========================================================== */ @media(max-width:900px){ .pkp_page_editorialteam #groups > .group .editorial-list > ul, body[class*="editorial"] #groups > .group .editorial-list > ul{ grid-template-columns:1fr!important; gap:16px!important; } .pkp_page_editorialteam #groups > .group .editorial-list > ul > li, body[class*="editorial"] #groups > .group .editorial-list > ul > li{ padding:18px!important; } .pkp_page_editorialteam .img-profile, body[class*="editorial"] .img-profile{ flex-basis:105px!important; width:105px!important; } .pkp_page_editorialteam .img-profile .imgthumb, body[class*="editorial"] .img-profile .imgthumb{ width:105px!important; height:132px!important; } } /* ========================================================== RESPONSIVE — MOBILE ========================================================== */ @media(max-width:600px){ .pkp_page_editorialteam #groups > .group > h4, body[class*="editorial"] #groups > .group > h4{ font-size:19px!important; margin-top:24px!important; } .pkp_page_editorialteam #groups > .group .editorial-list > ul, body[class*="editorial"] #groups > .group .editorial-list > ul{ grid-template-columns:1fr!important; gap:14px!important; } .pkp_page_editorialteam #groups > .group .editorial-list > ul > li, body[class*="editorial"] #groups > .group .editorial-list > ul > li{ display:block!important; padding:16px!important; border-radius:14px!important; } .pkp_page_editorialteam .img-profile, body[class*="editorial"] .img-profile{ width:110px!important; margin:0 auto 14px!important; } .pkp_page_editorialteam .img-profile .imgthumb, body[class*="editorial"] .img-profile .imgthumb{ width:110px!important; height:135px!important; margin:0 auto!important; } .pkp_page_editorialteam .team-content, body[class*="editorial"] .team-content{ text-align:center!important; } .pkp_page_editorialteam .team-content > strong, body[class*="editorial"] .team-content > strong{ font-size:17px!important; } .pkp_page_editorialteam .team-aff li, body[class*="editorial"] .team-aff li{ font-size:12.5px!important; } .pkp_page_editorialteam #groups > div:not(.group) table, body[class*="editorial"] #groups > div:not(.group) table{ border-radius:13px!important; } .pkp_page_editorialteam #groups > div:not(.group) table tr:first-child td, body[class*="editorial"] #groups > div:not(.group) table tr:first-child td{ padding:13px 14px 7px!important; font-size:15px!important; } .pkp_page_editorialteam #groups > div:not(.group) table tr:nth-child(2) td, body[class*="editorial"] #groups > div:not(.group) table tr:nth-child(2) td{ padding:4px 14px 13px!important; } } /* ========================================================== ACCESSIBILITY / MOTION ========================================================== */ @media(prefers-reduced-motion:reduce){ .pkp_page_editorialteam #groups > .group .editorial-list > ul > li, body[class*="editorial"] #groups > .group .editorial-list > ul > li{ transition:none!important; } } /* ========================================================== CEEJ EDITORIAL TEAM — IJBS-STYLE PREMIUM OVERRIDE ---------------------------------------------------------- Adopted concept from the IJBS reference: - Large horizontal leadership cards - Strong green/gold editorial hierarchy - Circular/portrait profile treatment - Compact metadata badges - 3-column editorial board - Clean white cards + soft green background - Hover elevation + image zoom + shine animation - Responsive tablet/mobile IMPORTANT: This block targets the NEW .ceej-editorial HTML. The legacy #groups markup is hidden so two editorial systems cannot render at the same time. ========================================================== */ :root{ --ceeji-green:#176B38; --ceeji-green-dark:#0D4F29; --ceeji-green-mid:#21864A; --ceeji-green-soft:#EEF8F1; --ceeji-gold:#F4C542; --ceeji-gold-dark:#C9920B; --ceeji-orange:#F5A623; --ceeji-text:#26352D; --ceeji-muted:#68756E; --ceeji-border:#D9EBDD; --ceeji-white:#FFFFFF; --ceeji-shadow:rgba(23,107,56,.12); } /* ---------------------------------------------------------- REMOVE LEGACY OJS EDITORIAL TEAM ---------------------------------------------------------- */ .pkp_page_editorialteam #groups, body[class*="editorial"] #groups{ display:none!important; } .pkp_page_editorialteam .ceej-editorial + p, body[class*="editorial"] .ceej-editorial + p, .pkp_page_editorialteam .ceej-editorial + p + p, body[class*="editorial"] .ceej-editorial + p + p{ display:none!important; } /* ---------------------------------------------------------- MAIN EDITORIAL WRAPPER ---------------------------------------------------------- */ .pkp_page_editorialteam .ceej-editorial, body[class*="editorial"] .ceej-editorial{ width:100%!important; max-width:1180px!important; margin:0 auto!important; padding:10px 0 45px!important; box-sizing:border-box!important; color:var(--ceeji-text)!important; } /* ---------------------------------------------------------- HEADER / INTRO The OJS page title already says "Editorial Team", so the duplicate custom H2 is reduced to a clean journal eyebrow. ---------------------------------------------------------- */ .ceej-editorial .section-head{ margin:0 0 28px!important; padding:0 4px 22px!important; border-bottom:1px solid var(--ceeji-border)!important; position:relative!important; } .ceej-editorial .section-head::after{ content:""!important; display:block!important; position:absolute!important; left:4px!important; bottom:-2px!important; width:72px!important; height:4px!important; border-radius:20px!important; background:linear-gradient(90deg,var(--ceeji-green),var(--ceeji-gold))!important; } .ceej-editorial .section-head h2{ margin:0 0 6px!important; color:var(--ceeji-green)!important; font-size:13px!important; font-weight:800!important; letter-spacing:.16em!important; text-transform:uppercase!important; } .ceej-editorial .section-head p{ margin:0!important; color:var(--ceeji-muted)!important; font-size:14px!important; line-height:1.6!important; } /* ---------------------------------------------------------- SECTION LABELS ---------------------------------------------------------- */ .ceej-editorial .role-title{ display:flex!important; align-items:center!important; gap:11px!important; margin:32px 0 17px!important; padding:0!important; color:var(--ceeji-green)!important; font-size:20px!important; font-weight:800!important; line-height:1.3!important; } .ceej-editorial .role-title::after{ content:""!important; flex:1 1 auto!important; height:1px!important; margin-left:8px!important; background:linear-gradient(90deg,var(--ceeji-border),transparent)!important; } .ceej-editorial .role-title:first-letter{ color:var(--ceeji-green)!important; } /* ---------------------------------------------------------- LEADERSHIP — IJBS-STYLE LARGE HORIZONTAL CARDS ---------------------------------------------------------- */ .ceej-editorial .featured-grid{ display:grid!important; grid-template-columns:1fr!important; gap:16px!important; width:100%!important; } .ceej-editorial .featured-card{ position:relative!important; display:flex!important; align-items:center!important; gap:28px!important; min-height:185px!important; padding:25px 30px!important; box-sizing:border-box!important; overflow:hidden!important; background: linear-gradient(135deg,#FFFFFF 0%,#FBFEFC 68%,#F1F9F3 100%)!important; border:1px solid var(--ceeji-border)!important; border-left:7px solid var(--ceeji-green)!important; border-radius:18px!important; box-shadow: 0 8px 24px rgba(23,107,56,.08)!important; transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease!important; } .ceej-editorial .featured-card:nth-child(2){ border-left-color:var(--ceeji-gold)!important; background: linear-gradient(135deg,#FFFFFF 0%,#FFFDF7 68%,#FFF8E5 100%)!important; } .ceej-editorial .featured-card::before{ content:""!important; position:absolute!important; top:0!important; right:0!important; width:145px!important; height:100%!important; background: radial-gradient(circle at 100% 0, rgba(244,197,66,.18), transparent 66%)!important; pointer-events:none!important; } .ceej-editorial .featured-card::after{ content:""!important; position:absolute!important; top:0!important; left:-120%!important; width:35%!important; height:100%!important; background:linear-gradient( 90deg, transparent, rgba(255,255,255,.65), transparent )!important; transform:skewX(-22deg)!important; transition:left .8s ease!important; pointer-events:none!important; } .ceej-editorial .featured-card:hover{ transform:translateY(-6px)!important; border-color:#B9DCC3!important; box-shadow: 0 18px 38px rgba(23,107,56,.16)!important; } .ceej-editorial .featured-card:hover::after{ left:155%!important; } /* Portrait */ .ceej-editorial .profile-photo{ position:relative!important; z-index:2!important; flex:0 0 128px!important; width:128px!important; height:128px!important; object-fit:cover!important; object-position:center top!important; margin:0!important; padding:5px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:4px solid var(--ceeji-green)!important; border-radius:50%!important; box-shadow: 0 7px 20px rgba(23,107,56,.16)!important; transition: transform .4s ease, box-shadow .4s ease!important; } .ceej-editorial .featured-card:nth-child(2) .profile-photo{ border-color:var(--ceeji-gold)!important; } .ceej-editorial .featured-card:hover .profile-photo{ transform:scale(1.06) rotate(1deg)!important; box-shadow: 0 12px 28px rgba(23,107,56,.23)!important; } .ceej-editorial .featured-info{ position:relative!important; z-index:2!important; min-width:0!important; flex:1 1 auto!important; } .ceej-editorial .position{ display:inline-flex!important; align-items:center!important; min-height:26px!important; margin:0 0 7px!important; padding:5px 12px!important; box-sizing:border-box!important; background:var(--ceeji-green-soft)!important; color:var(--ceeji-green)!important; border-radius:999px!important; font-size:11px!important; font-weight:900!important; letter-spacing:.08em!important; text-transform:uppercase!important; } .ceej-editorial .featured-card:nth-child(2) .position{ background:#FFF4CF!important; color:#9B7105!important; } .ceej-editorial .featured-card h3{ margin:0 0 7px!important; color:var(--ceeji-green)!important; font-size:27px!important; line-height:1.2!important; font-weight:850!important; letter-spacing:-.02em!important; } .ceej-editorial .institution{ margin:0 0 16px!important; color:var(--ceeji-muted)!important; font-size:14px!important; line-height:1.55!important; } .ceej-editorial .profile-links{ display:flex!important; align-items:center!important; flex-wrap:wrap!important; gap:7px!important; margin:0!important; } .ceej-editorial .profile-links a, .ceej-editorial .profile-links span{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:28px!important; padding:5px 10px!important; box-sizing:border-box!important; border:1px solid var(--ceeji-border)!important; border-radius:999px!important; background:#FFFFFF!important; color:var(--ceeji-green)!important; font-size:10.5px!important; font-weight:800!important; line-height:1.2!important; text-decoration:none!important; transition: transform .25s ease, color .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease!important; } .ceej-editorial .profile-links a:hover{ transform:translateY(-2px)!important; color:#FFFFFF!important; background:var(--ceeji-green)!important; border-color:var(--ceeji-green)!important; box-shadow:0 6px 14px rgba(23,107,56,.18)!important; } /* Badge accents */ .ceej-editorial .badge-scopus{ border-color:#CBE2D1!important; } .ceej-editorial .badge-sinta{ border-color:#F2D98A!important; } .ceej-editorial .badge-scholar{ border-color:#C7DCEB!important; } .ceej-editorial .badge-orcid{ border-color:#B8DCC1!important; } /* ---------------------------------------------------------- EDITORIAL BOARD — 3 COLUMNS ---------------------------------------------------------- */ .ceej-editorial .board-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:15px!important; width:100%!important; } .ceej-editorial .board-card{ position:relative!important; min-width:0!important; min-height:215px!important; padding:22px 20px 18px!important; box-sizing:border-box!important; overflow:hidden!important; background:#FFFFFF!important; border:1px solid var(--ceeji-border)!important; border-radius:16px!important; box-shadow:0 6px 20px rgba(23,107,56,.07)!important; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease!important; } .ceej-editorial .board-card::before{ content:""!important; position:absolute!important; top:0!important; left:0!important; width:100%!important; height:4px!important; background:linear-gradient( 90deg, var(--ceeji-green), var(--ceeji-gold) )!important; } .ceej-editorial .board-card:hover{ transform:translateY(-6px)!important; border-color:#BBDDC5!important; box-shadow:0 16px 32px rgba(23,107,56,.14)!important; } .ceej-editorial .avatar{ display:flex!important; align-items:center!important; justify-content:center!important; width:64px!important; height:64px!important; margin:0 0 15px!important; border:3px solid #D7ECDD!important; border-radius:50%!important; background: linear-gradient(145deg,#DDF2E2,#F7FCF8)!important; color:var(--ceeji-green)!important; font-size:19px!important; font-weight:900!important; letter-spacing:.02em!important; box-shadow:0 5px 13px rgba(23,107,56,.10)!important; transition: transform .35s ease, background .35s ease, border-color .35s ease!important; } .ceej-editorial .board-card:nth-child(even) .avatar{ background:linear-gradient(145deg,#FFF2C9,#FFFDF4)!important; border-color:#F2D67B!important; color:#9B7105!important; } .ceej-editorial .board-card:hover .avatar{ transform:rotate(5deg) scale(1.08)!important; } .ceej-editorial .board-card h3{ margin:0 0 7px!important; color:var(--ceeji-green)!important; font-size:17px!important; line-height:1.3!important; font-weight:850!important; } .ceej-editorial .board-card .institution{ min-height:43px!important; margin-bottom:15px!important; font-size:12.5px!important; line-height:1.5!important; } /* ---------------------------------------------------------- ROLE CARDS — COPY / TRANSLATOR / LAYOUT ---------------------------------------------------------- */ .ceej-editorial .role-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:15px!important; } .ceej-editorial .role-card{ position:relative!important; min-width:0!important; padding:21px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid var(--ceeji-border)!important; border-radius:15px!important; box-shadow:0 5px 18px rgba(23,107,56,.06)!important; transition: transform .3s ease, box-shadow .3s ease!important; } .ceej-editorial .role-card::before{ content:""!important; position:absolute!important; left:0!important; top:0!important; width:4px!important; height:100%!important; border-radius:15px 0 0 15px!important; background:var(--ceeji-gold)!important; } .ceej-editorial .role-card:hover{ transform:translateY(-5px)!important; box-shadow:0 14px 28px rgba(23,107,56,.13)!important; } .ceej-editorial .role-card h3{ margin:0 0 6px!important; color:var(--ceeji-green)!important; font-size:18px!important; line-height:1.35!important; font-weight:850!important; } .ceej-editorial .person{ margin:0 0 14px!important; color:var(--ceeji-muted)!important; font-size:12.5px!important; line-height:1.5!important; } /* ---------------------------------------------------------- OJS PAGE SPACING ---------------------------------------------------------- */ .pkp_page_editorialteam .page{ overflow:visible!important; } .pkp_page_editorialteam .page h1{ margin-bottom:10px!important; } /* Avoid global image hover rules interfering with editorial cards */ .pkp_page_editorialteam .ceej-editorial img, .pkp_page_editorialteam .ceej-editorial img:hover{ filter:none!important; } /* ---------------------------------------------------------- ENTRY ANIMATION ---------------------------------------------------------- */ .ceej-editorial .featured-card, .ceej-editorial .board-card, .ceej-editorial .role-card{ animation:ceejEditorialIn .65s both ease-out!important; } .ceej-editorial .featured-card:nth-child(1){animation-delay:.05s!important;} .ceej-editorial .featured-card:nth-child(2){animation-delay:.12s!important;} .ceej-editorial .board-card:nth-child(1){animation-delay:.06s!important;} .ceej-editorial .board-card:nth-child(2){animation-delay:.10s!important;} .ceej-editorial .board-card:nth-child(3){animation-delay:.14s!important;} .ceej-editorial .board-card:nth-child(4){animation-delay:.18s!important;} .ceej-editorial .board-card:nth-child(5){animation-delay:.22s!important;} .ceej-editorial .board-card:nth-child(6){animation-delay:.26s!important;} .ceej-editorial .board-card:nth-child(7){animation-delay:.30s!important;} .ceej-editorial .board-card:nth-child(8){animation-delay:.34s!important;} .ceej-editorial .board-card:nth-child(9){animation-delay:.38s!important;} .ceej-editorial .board-card:nth-child(10){animation-delay:.42s!important;} @keyframes ceejEditorialIn{ from{ opacity:0; transform:translateY(18px); } to{ opacity:1; transform:translateY(0); } } /* ---------------------------------------------------------- TABLET ---------------------------------------------------------- */ @media(max-width:991px){ .pkp_page_editorialteam .ceej-editorial{ padding-left:4px!important; padding-right:4px!important; } .ceej-editorial .board-grid, .ceej-editorial .role-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; } .ceej-editorial .featured-card{ gap:22px!important; padding:22px!important; } .ceej-editorial .profile-photo{ flex-basis:112px!important; width:112px!important; height:112px!important; } .ceej-editorial .featured-card h3{ font-size:24px!important; } } /* ---------------------------------------------------------- MOBILE ---------------------------------------------------------- */ @media(max-width:600px){ .pkp_page_editorialteam .ceej-editorial{ padding:5px 0 30px!important; } .ceej-editorial .section-head{ padding-bottom:17px!important; margin-bottom:22px!important; } .ceej-editorial .section-head p{ font-size:12.5px!important; } .ceej-editorial .role-title{ margin:25px 0 13px!important; font-size:18px!important; } .ceej-editorial .featured-card{ display:block!important; min-height:0!important; padding:22px 18px!important; text-align:center!important; border-left-width:5px!important; } .ceej-editorial .profile-photo{ display:block!important; width:112px!important; height:112px!important; margin:0 auto 15px!important; } .ceej-editorial .featured-info{ width:100%!important; } .ceej-editorial .featured-card h3{ font-size:22px!important; } .ceej-editorial .institution{ font-size:12.5px!important; } .ceej-editorial .profile-links{ justify-content:center!important; } .ceej-editorial .profile-links a, .ceej-editorial .profile-links span{ font-size:9.5px!important; padding:5px 8px!important; } .ceej-editorial .board-grid, .ceej-editorial .role-grid{ grid-template-columns:1fr!important; gap:12px!important; } .ceej-editorial .board-card{ min-height:0!important; padding:19px!important; } .ceej-editorial .board-card .institution{ min-height:0!important; } .ceej-editorial .avatar{ width:58px!important; height:58px!important; font-size:17px!important; } } /* ---------------------------------------------------------- REDUCED MOTION ---------------------------------------------------------- */ @media(prefers-reduced-motion:reduce){ .ceej-editorial .featured-card, .ceej-editorial .board-card, .ceej-editorial .role-card{ animation:none!important; transition:none!important; } .ceej-editorial .featured-card:hover, .ceej-editorial .board-card:hover, .ceej-editorial .role-card:hover, .ceej-editorial .featured-card:hover .profile-photo, .ceej-editorial .board-card:hover .avatar{ transform:none!important; } } /* ========================================================== CEEJ EDITORIAL TEAM — INDONESIAN FLAG ---------------------------------------------------------- Dipakai untuk HTML: Indonesia ---------------------------------------------------------- */ .ceej-editorial .flag-id{ display:inline-block!important; width:22px!important; height:14px!important; min-width:22px!important; min-height:14px!important; margin-right:7px!important; vertical-align:middle!important; border-radius:2px!important; background:linear-gradient( to bottom, #E31E24 0%, #E31E24 50%, #FFFFFF 50%, #FFFFFF 100% )!important; border:1px solid rgba(0,0,0,.10)!important; box-shadow: 0 1px 3px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.20)!important; position:relative!important; overflow:hidden!important; } /* Flag pada baris negara */ .ceej-editorial .country{ display:flex!important; align-items:center!important; width:max-content!important; max-width:100%!important; margin:0 0 12px!important; color:var(--ceeji-muted,#68756E)!important; font-size:12.5px!important; line-height:1.4!important; font-weight:600!important; } /* Flag khusus pada leadership */ .ceej-editorial .country-flag{ display:inline-block!important; flex:0 0 auto!important; margin-right:7px!important; } /* Jika flag langsung berada di samping teks */ .ceej-editorial .country .flag-id{ flex:0 0 22px!important; } /* Flag pada kartu Editorial Board */ .ceej-editorial .board-card .country{ margin-bottom:12px!important; } /* Flag pada kartu support team */ .ceej-editorial .role-card .country{ margin-bottom:12px!important; } /* Desktop leadership */ @media(min-width:992px){ .ceej-editorial .featured-card .country{ margin-top:2px!important; margin-bottom:13px!important; } } /* Tablet */ @media(max-width:991px){ .ceej-editorial .flag-id{ width:21px!important; height:13px!important; min-width:21px!important; min-height:13px!important; } } /* Mobile */ @media(max-width:600px){ .ceej-editorial .flag-id{ width:20px!important; height:13px!important; min-width:20px!important; min-height:13px!important; margin-right:6px!important; } .ceej-editorial .country{ justify-content:center!important; margin-left:auto!important; margin-right:auto!important; } } /* ========================================================== CEEJ EDITORIAL — FLAG + PHOTO PLACEHOLDERS DEFINITIVE FIX ---------------------------------------------------------- HTML saat ini menggunakan: .avatar-circle .avatar-circle.small .country ---------------------------------------------------------- */ /* INDONESIAN FLAG CSS flag — tidak bergantung pada emoji/font OJS */ .ceej-editorial .country{ display:flex!important; align-items:center!important; gap:7px!important; color:#68756E!important; font-size:12.5px!important; font-weight:600!important; line-height:1.4!important; } /* Buat bendera melalui pseudo-element karena HTML saat ini hanya berisi teks "Indonesia". */ .ceej-editorial .country::before{ content:""!important; display:inline-block!important; width:22px!important; height:14px!important; min-width:22px!important; border-radius:2px!important; background:linear-gradient( to bottom, #E31E24 0%, #E31E24 50%, #FFFFFF 50%, #FFFFFF 100% )!important; border:1px solid rgba(0,0,0,.12)!important; box-shadow: 0 1px 3px rgba(0,0,0,.18), inset 0 0 0 1px rgba(255,255,255,.25)!important; } /* ========================================================== PHOTO PLACEHOLDER — EDITORIAL BOARD ---------------------------------------------------------- Semua editor yang belum memiliki foto mendapat lingkaran profesional dengan inisial. Nantinya bisa diganti
menjadi tanpa mengubah layout. ========================================================== */ .ceej-editorial .board-card .avatar-circle{ display:flex!important; align-items:center!important; justify-content:center!important; flex:0 0 76px!important; width:76px!important; height:76px!important; margin:0 18px 0 0!important; box-sizing:border-box!important; border-radius:50%!important; overflow:hidden!important; background: linear-gradient(145deg,#1F7A3D,#155C2E)!important; border:4px solid #FFFFFF!important; outline:2px solid #D8EEDC!important; color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif!important; font-size:22px!important; font-weight:800!important; letter-spacing:.5px!important; box-shadow: 0 7px 18px rgba(31,122,61,.20)!important; text-transform:uppercase!important; transition: transform .3s ease, box-shadow .3s ease!important; } /* Hover placeholder */ .ceej-editorial .board-card:hover .avatar-circle{ transform:scale(1.07)!important; box-shadow: 0 10px 24px rgba(31,122,61,.28)!important; } /* ========================================================== SUPPORT TEAM PHOTO PLACEHOLDER ========================================================== */ .ceej-editorial .role-card .avatar-circle.small{ display:flex!important; align-items:center!important; justify-content:center!important; flex:0 0 64px!important; width:64px!important; height:64px!important; margin:0 16px 0 0!important; border-radius:50%!important; overflow:hidden!important; background: linear-gradient(145deg,#D99A20,#B87900)!important; border:4px solid #FFFFFF!important; outline:2px solid #F3D58A!important; color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif!important; font-size:19px!important; font-weight:800!important; box-shadow: 0 6px 16px rgba(184,121,0,.20)!important; transition: transform .3s ease, box-shadow .3s ease!important; } .ceej-editorial .role-card:hover .avatar-circle.small{ transform:scale(1.07)!important; box-shadow: 0 10px 22px rgba(184,121,0,.28)!important; } /* ========================================================== BOARD CARD LAYOUT ========================================================== */ .ceej-editorial .board-card{ display:flex!important; align-items:flex-start!important; gap:0!important; } .ceej-editorial .board-info{ flex:1 1 auto!important; min-width:0!important; } /* ========================================================== SUPPORT CARD LAYOUT ========================================================== */ .ceej-editorial .role-card{ display:flex!important; align-items:flex-start!important; } .ceej-editorial .role-card > div:last-child{ flex:1 1 auto!important; min-width:0!important; } /* ========================================================== LEADERSHIP PHOTO — FORCE CIRCULAR PHOTO ========================================================== */ .ceej-editorial .avatar-wrap{ flex:0 0 132px!important; width:132px!important; height:132px!important; display:flex!important; align-items:center!important; justify-content:center!important; } .ceej-editorial .featured-card .profile-photo{ display:block!important; width:128px!important; height:128px!important; max-width:128px!important; max-height:128px!important; object-fit:cover!important; object-position:center!important; border-radius:50%!important; border:5px solid #FFFFFF!important; outline:2px solid #D8EEDC!important; box-shadow: 0 8px 22px rgba(31,122,61,.22)!important; transform:none!important; } .ceej-editorial .featured-card:hover .profile-photo{ transform:scale(1.04)!important; } /* ========================================================== MOBILE ========================================================== */ @media(max-width:600px){ .ceej-editorial .country{ justify-content:center!important; } .ceej-editorial .board-card{ display:flex!important; align-items:flex-start!important; } .ceej-editorial .board-card .avatar-circle{ flex:0 0 64px!important; width:64px!important; height:64px!important; margin-right:14px!important; font-size:19px!important; } .ceej-editorial .role-card .avatar-circle.small{ flex:0 0 58px!important; width:58px!important; height:58px!important; margin-right:13px!important; font-size:17px!important; } .ceej-editorial .avatar-wrap{ width:112px!important; height:112px!important; margin:0 auto 15px!important; } .ceej-editorial .featured-card .profile-photo{ width:108px!important; height:108px!important; max-width:108px!important; max-height:108px!important; } } /* ========================================================== CEEJ EDITORIAL TEAM — FINAL OVERRIDE Compatible with the NEW HTML: - .leadership-section - .role-badge - .ceej-academic-links - .ceej-academic-icon - .ceej-academic-symbol - .ceej-academic-label - .section-divider - .board-role - .avatar-circle ========================================================== */ /* ---------------------------------------------------------- LEADERSHIP SECTION ---------------------------------------------------------- */ .ceej-editorial .leadership-section{ display:grid!important; grid-template-columns:1fr!important; gap:16px!important; width:100%!important; margin:0!important; padding:0!important; } /* ---------------------------------------------------------- LEADERSHIP CARDS ---------------------------------------------------------- */ .ceej-editorial .leadership-section .featured-card{ display:flex!important; align-items:center!important; gap:28px!important; min-height:185px!important; width:100%!important; box-sizing:border-box!important; } /* First leadership card = Editor in Chief */ .ceej-editorial .leadership-section .featured-card:first-child{ border-left-color:#176B38!important; background: linear-gradient( 135deg, #FFFFFF 0%, #FBFEFC 68%, #F1F9F3 100% )!important; } /* Second leadership card = Journal Manager */ .ceej-editorial .leadership-section .featured-card:nth-child(2){ border-left-color:#F4C542!important; background: linear-gradient( 135deg, #FFFFFF 0%, #FFFDF7 68%, #FFF8E5 100% )!important; } /* ---------------------------------------------------------- ROLE BADGE Replaces the old .position selector. ---------------------------------------------------------- */ .ceej-editorial .role-badge{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:26px!important; margin:0 0 7px!important; padding:5px 13px!important; box-sizing:border-box!important; background:#EEF8F1!important; color:#176B38!important; border-radius:999px!important; font-size:11px!important; font-weight:900!important; letter-spacing:.08em!important; line-height:1.2!important; text-transform:uppercase!important; transition: transform .25s ease, box-shadow .25s ease!important; } .ceej-editorial .featured-card:nth-child(2) .role-badge{ background:#FFF4CF!important; color:#9B7105!important; } .ceej-editorial .featured-card:hover .role-badge{ transform:translateY(-2px)!important; } /* ---------------------------------------------------------- ACADEMIC ICON LINKS Replaces the old .profile-links for leadership cards. ---------------------------------------------------------- */ .ceej-editorial .ceej-academic-links{ display:flex!important; align-items:center!important; flex-wrap:wrap!important; gap:9px!important; margin:14px 0 0!important; padding:0!important; } /* Individual icon pill */ .ceej-editorial .ceej-academic-icon{ position:relative!important; display:inline-flex!important; align-items:center!important; justify-content:flex-start!important; min-width:0!important; height:38px!important; margin:0!important; padding:4px 12px 4px 5px!important; box-sizing:border-box!important; border:1px solid #D9E9DF!important; border-radius:999px!important; background:#FFFFFF!important; color:#176F3C!important; text-decoration:none!important; box-shadow: 0 4px 12px rgba(20,90,50,.08)!important; overflow:hidden!important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease!important; } /* Hover */ .ceej-editorial .ceej-academic-icon:hover{ transform:translateY(-4px)!important; background:#F8FCF9!important; border-color:#B8DCCA!important; color:#176F3C!important; box-shadow: 0 10px 22px rgba(20,100,55,.16)!important; text-decoration:none!important; } /* Icon circle */ .ceej-editorial .ceej-academic-symbol{ width:28px!important; height:28px!important; flex:0 0 28px!important; display:flex!important; align-items:center!important; justify-content:center!important; margin:0!important; padding:0!important; box-sizing:border-box!important; border-radius:50%!important; color:#FFFFFF!important; font-size:11px!important; font-weight:800!important; line-height:1!important; letter-spacing:-.2px!important; box-shadow: 0 3px 8px rgba(0,0,0,.15)!important; transition: transform .25s ease, box-shadow .25s ease!important; animation:ceejAcademicPulse 3.5s ease-in-out infinite!important; } /* Hover icon */ .ceej-editorial .ceej-academic-icon:hover .ceej-academic-symbol{ transform:scale(1.13) rotate(-4deg)!important; box-shadow: 0 5px 14px rgba(0,0,0,.22)!important; } /* Text */ .ceej-editorial .ceej-academic-label{ display:inline-block!important; margin-left:7px!important; padding:0!important; color:#176F3C!important; font-size:12px!important; font-weight:700!important; line-height:1!important; white-space:nowrap!important; } /* Brand colors */ .ceej-editorial .ceej-scopus .ceej-academic-symbol{ background:#087C8C!important; } .ceej-editorial .ceej-sinta .ceej-academic-symbol{ background:#D89B00!important; } .ceej-editorial .ceej-scholar .ceej-academic-symbol{ background:#4285F4!important; } .ceej-editorial .ceej-orcid .ceej-academic-symbol{ background:#A6CE39!important; } /* Brand hover borders */ .ceej-editorial .ceej-scopus:hover{ border-color:#087C8C!important; } .ceej-editorial .ceej-sinta:hover{ border-color:#D89B00!important; } .ceej-editorial .ceej-scholar:hover{ border-color:#4285F4!important; } .ceej-editorial .ceej-orcid:hover{ border-color:#A6CE39!important; } /* Academic icon animation */ @keyframes ceejAcademicPulse{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.06); } } /* ---------------------------------------------------------- SECTION DIVIDER Compatible with:

Editorial Board

---------------------------------------------------------- */ .ceej-editorial .section-divider{ display:flex!important; align-items:center!important; gap:14px!important; width:100%!important; margin:34px 0 18px!important; padding:0!important; } .ceej-editorial .section-divider h2{ flex:0 0 auto!important; margin:0!important; padding:0!important; color:#176B38!important; font-size:21px!important; font-weight:800!important; line-height:1.3!important; } .ceej-editorial .section-divider::after{ content:""!important; flex:1 1 auto!important; height:1px!important; background: linear-gradient( 90deg, #D9EBDD, transparent )!important; } /* ---------------------------------------------------------- EDITORIAL BOARD ---------------------------------------------------------- */ .ceej-editorial .board-grid{ display:grid!important; grid-template-columns: repeat(3,minmax(0,1fr))!important; gap:15px!important; width:100%!important; } /* Board card */ .ceej-editorial .board-card{ display:flex!important; align-items:flex-start!important; position:relative!important; min-width:0!important; min-height:215px!important; padding:25px 20px 18px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid #D9EBDD!important; border-radius:16px!important; box-shadow: 0 6px 20px rgba(23,107,56,.07)!important; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease!important; } .ceej-editorial .board-card::before{ content:""!important; position:absolute!important; top:0!important; left:0!important; width:100%!important; height:4px!important; background: linear-gradient( 90deg, #176B38, #F4C542 )!important; } .ceej-editorial .board-card:hover{ transform:translateY(-6px)!important; border-color:#BBDDC5!important; box-shadow: 0 16px 32px rgba(23,107,56,.14)!important; } /* ---------------------------------------------------------- BOARD AVATAR ---------------------------------------------------------- */ .ceej-editorial .board-card .avatar-circle{ display:flex!important; align-items:center!important; justify-content:center!important; flex:0 0 76px!important; width:76px!important; height:76px!important; margin:0 18px 0 0!important; box-sizing:border-box!important; border-radius:50%!important; overflow:hidden!important; background: linear-gradient( 145deg, #1F7A3D, #155C2E )!important; border:4px solid #FFFFFF!important; outline:2px solid #D8EEDC!important; color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif!important; font-size:22px!important; font-weight:800!important; box-shadow: 0 7px 18px rgba(31,122,61,.20)!important; transition: transform .3s ease, box-shadow .3s ease!important; } /* If an image is inserted later */ .ceej-editorial .board-card .avatar-circle img{ display:block!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; object-fit:cover!important; object-position:center!important; border:0!important; border-radius:50%!important; margin:0!important; padding:0!important; transform:none!important; } .ceej-editorial .board-card:hover .avatar-circle{ transform:scale(1.07)!important; box-shadow: 0 10px 24px rgba(31,122,61,.28)!important; } /* ---------------------------------------------------------- BOARD INFORMATION ---------------------------------------------------------- */ .ceej-editorial .board-info{ flex:1 1 auto!important; min-width:0!important; } .ceej-editorial .board-role{ margin:0 0 5px!important; color:#3D4641!important; font-size:13px!important; font-weight:500!important; line-height:1.35!important; } .ceej-editorial .board-card h3{ margin:0 0 10px!important; color:#176B38!important; font-size:18px!important; font-weight:850!important; line-height:1.3!important; } .ceej-editorial .board-card p{ margin:0 0 10px!important; color:#4F5D55!important; font-size:13px!important; line-height:1.6!important; } /* ---------------------------------------------------------- SUPPORT TEAM ---------------------------------------------------------- */ .ceej-editorial .support-section{ width:100%!important; margin:0!important; padding:0!important; } .ceej-editorial .support-section .section-divider{ margin-top:38px!important; } .ceej-editorial .role-grid{ display:grid!important; grid-template-columns: repeat(3,minmax(0,1fr))!important; gap:15px!important; } .ceej-editorial .role-card{ display:flex!important; align-items:flex-start!important; position:relative!important; min-width:0!important; padding:21px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid #D9EBDD!important; border-radius:15px!important; box-shadow: 0 5px 18px rgba(23,107,56,.06)!important; transition: transform .3s ease, box-shadow .3s ease!important; } .ceej-editorial .role-card::before{ content:""!important; position:absolute!important; left:0!important; top:0!important; width:4px!important; height:100%!important; border-radius:15px 0 0 15px!important; background:#F4C542!important; } .ceej-editorial .role-card:hover{ transform:translateY(-5px)!important; box-shadow: 0 14px 28px rgba(23,107,56,.13)!important; } /* Support avatar */ .ceej-editorial .role-card .avatar-circle.small{ display:flex!important; align-items:center!important; justify-content:center!important; flex:0 0 64px!important; width:64px!important; height:64px!important; margin:0 16px 0 0!important; border-radius:50%!important; overflow:hidden!important; background: linear-gradient( 145deg, #D99A20, #B87900 )!important; border:4px solid #FFFFFF!important; outline:2px solid #F3D58A!important; color:#FFFFFF!important; font-size:19px!important; font-weight:800!important; box-shadow: 0 6px 16px rgba(184,121,0,.20)!important; transition: transform .3s ease, box-shadow .3s ease!important; } .ceej-editorial .role-card .avatar-circle.small img{ display:block!important; width:100%!important; height:100%!important; max-width:none!important; max-height:none!important; object-fit:cover!important; border:0!important; border-radius:50%!important; margin:0!important; padding:0!important; transform:none!important; } .ceej-editorial .role-card:hover .avatar-circle.small{ transform:scale(1.07)!important; box-shadow: 0 10px 22px rgba(184,121,0,.28)!important; } .ceej-editorial .role-card .board-info{ flex:1 1 auto!important; min-width:0!important; } .ceej-editorial .role-card .board-role{ margin-bottom:5px!important; } .ceej-editorial .role-card h3{ margin:0 0 8px!important; color:#176B38!important; font-size:18px!important; font-weight:850!important; line-height:1.35!important; } .ceej-editorial .role-card p{ margin:0 0 10px!important; color:#68756E!important; font-size:12.5px!important; line-height:1.5!important; } /* ---------------------------------------------------------- COUNTRY + AUTOMATIC INDONESIAN FLAG ---------------------------------------------------------- */ .ceej-editorial .country{ display:flex!important; align-items:center!important; gap:7px!important; width:max-content!important; max-width:100%!important; margin:0 0 12px!important; color:#68756E!important; font-size:12.5px!important; font-weight:600!important; line-height:1.4!important; } .ceej-editorial .country::before{ content:""!important; display:inline-block!important; width:22px!important; height:14px!important; min-width:22px!important; border-radius:2px!important; background: linear-gradient( to bottom, #E31E24 0%, #E31E24 50%, #FFFFFF 50%, #FFFFFF 100% )!important; border:1px solid rgba(0,0,0,.12)!important; box-shadow: 0 1px 3px rgba(0,0,0,.18)!important; flex:0 0 22px!important; } /* ---------------------------------------------------------- RESPONSIVE — TABLET ---------------------------------------------------------- */ @media(max-width:991px){ .ceej-editorial .board-grid, .ceej-editorial .role-grid{ grid-template-columns: repeat(2,minmax(0,1fr))!important; } .ceej-editorial .leadership-section .featured-card{ gap:22px!important; padding:22px!important; } .ceej-editorial .ceej-academic-links{ gap:7px!important; } .ceej-editorial .ceej-academic-icon{ height:37px!important; } } /* ---------------------------------------------------------- RESPONSIVE — MOBILE ---------------------------------------------------------- */ @media(max-width:600px){ .ceej-editorial .leadership-section{ gap:14px!important; } .ceej-editorial .leadership-section .featured-card{ display:block!important; min-height:0!important; padding:22px 18px!important; text-align:center!important; } .ceej-editorial .leadership-section .avatar-wrap{ width:112px!important; height:112px!important; margin:0 auto 15px!important; } .ceej-editorial .leadership-section .profile-photo{ width:108px!important; height:108px!important; max-width:108px!important; max-height:108px!important; } .ceej-editorial .leadership-section .featured-info{ width:100%!important; } .ceej-editorial .role-badge{ font-size:10px!important; } .ceej-editorial .ceej-academic-links{ justify-content:center!important; gap:6px!important; margin-top:12px!important; } .ceej-editorial .ceej-academic-icon{ height:35px!important; padding-right:9px!important; } .ceej-editorial .ceej-academic-symbol{ width:26px!important; height:26px!important; flex-basis:26px!important; } .ceej-editorial .ceej-academic-label{ font-size:11px!important; } .ceej-editorial .section-divider{ margin:28px 0 14px!important; } .ceej-editorial .section-divider h2{ font-size:19px!important; } .ceej-editorial .board-grid, .ceej-editorial .role-grid{ grid-template-columns:1fr!important; gap:12px!important; } .ceej-editorial .board-card{ min-height:0!important; padding:19px!important; } .ceej-editorial .board-card .avatar-circle{ flex:0 0 64px!important; width:64px!important; height:64px!important; margin-right:14px!important; font-size:19px!important; } .ceej-editorial .role-card .avatar-circle.small{ flex:0 0 58px!important; width:58px!important; height:58px!important; margin-right:13px!important; font-size:17px!important; } .ceej-editorial .country{ font-size:12px!important; } .ceej-editorial .country::before{ width:20px!important; height:13px!important; min-width:20px!important; flex-basis:20px!important; } } /* ---------------------------------------------------------- ACCESSIBILITY — REDUCED MOTION ---------------------------------------------------------- */ @media(prefers-reduced-motion:reduce){ .ceej-editorial .ceej-academic-symbol{ animation:none!important; } .ceej-editorial .ceej-academic-icon, .ceej-editorial .board-card, .ceej-editorial .role-card, .ceej-editorial .avatar-circle, .ceej-editorial .profile-photo{ transition:none!important; } } /* ========================================================== FIX: ACADEMIC PROFILE LINKS IN CURRENT HTML Current HTML uses .board-links, NOT .ceej-academic-links. Add visible brand icons without changing the HTML. ========================================================== */ .ceej-editorial .board-links{ display:flex!important; align-items:center!important; flex-wrap:wrap!important; gap:8px!important; margin:12px 0 0!important; padding:0!important; } .ceej-editorial .board-links > a{ position:relative!important; display:inline-flex!important; align-items:center!important; gap:7px!important; min-height:34px!important; margin:0!important; padding:4px 11px 4px 6px!important; box-sizing:border-box!important; border:1px solid #DCEBE1!important; border-radius:999px!important; background:#FFFFFF!important; color:#176F3C!important; font-size:12px!important; font-weight:700!important; line-height:1!important; text-decoration:none!important; box-shadow:0 3px 10px rgba(23,107,56,.07)!important; transition:transform .22s ease, box-shadow .22s ease, border-color .22s ease!important; } .ceej-editorial .board-links > a::before{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:25px!important; height:25px!important; min-width:25px!important; box-sizing:border-box!important; border-radius:50%!important; color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif!important; font-size:10px!important; font-weight:900!important; line-height:1!important; letter-spacing:-.3px!important; box-shadow:0 2px 6px rgba(0,0,0,.14)!important; } /* Scopus */ .ceej-editorial .board-links > a[href*="scopus.com"]::before{ content:"S"!important; background:#087C8C!important; } /* SINTA */ .ceej-editorial .board-links > a[href*="sinta."]::before, .ceej-editorial .board-links > a[href*="sinta.ristekbrin.go.id"]::before{ content:"SI"!important; background:#D89B00!important; font-size:8px!important; } /* Google Scholar */ .ceej-editorial .board-links > a[href*="scholar.google."]::before{ content:"G"!important; background:#4285F4!important; font-size:12px!important; } /* ORCID */ .ceej-editorial .board-links > a[href*="orcid.org"]::before{ content:"iD"!important; background:#A6CE39!important; font-size:9px!important; } .ceej-editorial .board-links > a:hover{ transform:translateY(-3px)!important; background:#F9FCFA!important; color:#176F3C!important; text-decoration:none!important; box-shadow:0 8px 16px rgba(23,107,56,.14)!important; } .ceej-editorial .board-links > a[href*="scopus.com"]:hover{ border-color:#087C8C!important; } .ceej-editorial .board-links > a[href*="sinta."]:hover, .ceej-editorial .board-links > a[href*="sinta.ristekbrin.go.id"]:hover{ border-color:#D89B00!important; } .ceej-editorial .board-links > a[href*="scholar.google."]:hover{ border-color:#4285F4!important; } .ceej-editorial .board-links > a[href*="orcid.org"]:hover{ border-color:#A6CE39!important; } /* Leadership links: slightly larger */ .ceej-editorial .leadership-section .board-links > a{ min-height:38px!important; padding-right:13px!important; font-size:13px!important; } .ceej-editorial .leadership-section .board-links > a::before{ width:28px!important; height:28px!important; min-width:28px!important; font-size:11px!important; } .ceej-editorial .leadership-section .board-links > a[href*="scholar.google."]::before{ font-size:13px!important; } .ceej-editorial .leadership-section .board-links > a[href*="sinta."]::before, .ceej-editorial .leadership-section .board-links > a[href*="sinta.ristekbrin.go.id"]::before{ font-size:9px!important; } .ceej-editorial .leadership-section .board-links > a[href*="orcid.org"]::before{ font-size:10px!important; } @media(max-width:600px){ .ceej-editorial .leadership-section .board-links{ justify-content:center!important; } .ceej-editorial .board-links{ gap:6px!important; } .ceej-editorial .board-links > a{ min-height:32px!important; padding-right:9px!important; font-size:11px!important; } .ceej-editorial .board-links > a::before{ width:24px!important; height:24px!important; min-width:24px!important; } } /* ========================================================== CEEJ EDITORIAL TEAM — FINAL HTML/CSS MATCH ---------------------------------------------------------- Designed for the CURRENT HTML structure: .ceej-editorial .featured-card .profile-links .badge-scopus .badge-sinta .badge-scholar .badge-orcid .board-card .role-card ---------------------------------------------------------- IMPORTANT: The previous .ceej-academic-* / .board-links rules are intentionally overridden here so the CSS follows the current HTML exactly. ========================================================== */ /* ---------- ACADEMIC PROFILE LINK CONTAINER ---------- */ .ceej-editorial .profile-links{ display:flex!important; align-items:center!important; flex-wrap:wrap!important; gap:8px!important; margin:14px 0 0!important; padding:0!important; } /* ---------- BASE BADGE ---------- */ .ceej-editorial .profile-links a, .ceej-editorial .profile-links span{ position:relative!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:34px!important; padding:4px 11px 4px 7px!important; box-sizing:border-box!important; border:1px solid #D8E8DE!important; border-radius:999px!important; background:#FFFFFF!important; color:#176B38!important; font-family:Arial,Helvetica,sans-serif!important; font-size:10.5px!important; font-weight:800!important; line-height:1.15!important; text-decoration:none!important; white-space:nowrap!important; box-shadow:0 4px 12px rgba(23,107,56,.08)!important; transition: transform .25s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease!important; } /* ---------- LOGO HOLDER ---------- */ .ceej-editorial .profile-links a::before, .ceej-editorial .profile-links span::before{ content:""!important; display:inline-block!important; width:25px!important; height:25px!important; min-width:25px!important; margin-right:7px!important; box-sizing:border-box!important; border-radius:50%!important; background-color:#FFFFFF!important; background-repeat:no-repeat!important; background-position:center!important; background-size:contain!important; box-shadow:0 2px 6px rgba(0,0,0,.10)!important; transition: transform .25s ease, box-shadow .25s ease!important; } /* ========================================================== AUTHENTIC BRAND IMAGE ASSETS ---------------------------------------------------------- These use the logo image files already referenced by the journal's OJS installation. ========================================================== */ /* Scopus */ .ceej-editorial .profile-links .badge-scopus::before{ background-image:url("/public/site/images/novri/scopus-445x329@2x1.png")!important; background-size:contain!important; } /* SINTA */ .ceej-editorial .profile-links .badge-sinta::before{ background-image:url("/public/site/images/novri/sinta_logo11.png")!important; background-size:contain!important; } /* Google Scholar */ .ceej-editorial .profile-links .badge-scholar::before{ background-image:url("/public/site/images/novri/pageHeaderLogoImage_en_US1.png")!important; background-size:contain!important; } /* ORCID Use the ORCID logo asset if it has been uploaded to OJS. Fallback is the official ORCID green mark represented by a simple text-free green circular treatment. */ .ceej-editorial .profile-links .badge-orcid::before{ background-image:url("/public/site/images/novri/orcid.jpg")!important; background-size:contain!important; } /* ---------- BRAND-SPECIFIC BORDER / TEXT ---------- */ .ceej-editorial .profile-links .badge-scopus{ border-color:#C9DDEB!important; } .ceej-editorial .profile-links .badge-sinta{ border-color:#E9D27D!important; } .ceej-editorial .profile-links .badge-scholar{ border-color:#C8DDEA!important; } .ceej-editorial .profile-links .badge-orcid{ border-color:#B9DCC4!important; } /* ---------- HOVER ---------- */ .ceej-editorial .profile-links a:hover{ transform:translateY(-3px)!important; background:#F8FCF9!important; color:#176B38!important; text-decoration:none!important; box-shadow:0 9px 20px rgba(23,107,56,.16)!important; } .ceej-editorial .profile-links a:hover::before{ transform:scale(1.10)!important; box-shadow:0 4px 10px rgba(0,0,0,.16)!important; } /* Individual hover accents */ .ceej-editorial .profile-links .badge-scopus:hover{ border-color:#2B6EA6!important; } .ceej-editorial .profile-links .badge-sinta:hover{ border-color:#D6A900!important; } .ceej-editorial .profile-links .badge-scholar:hover{ border-color:#4285F4!important; } .ceej-editorial .profile-links .badge-orcid:hover{ border-color:#A6CE39!important; } /* ---------- DO NOT USE OLD SYMBOL/INITIAL ICONS ---------- */ .ceej-editorial .profile-links .ceej-academic-symbol, .ceej-editorial .profile-links .academic-symbol{ display:none!important; } /* ---------- LEADERSHIP CARDS ---------- */ .ceej-editorial .featured-card .profile-links{ justify-content:flex-start!important; } .ceej-editorial .featured-card .profile-links a, .ceej-editorial .featured-card .profile-links span{ flex:0 0 auto!important; } /* ---------- BOARD / SUPPORT CARDS ---------- */ .ceej-editorial .board-card .profile-links, .ceej-editorial .role-card .profile-links{ margin-top:12px!important; } .ceej-editorial .board-card .profile-links a, .ceej-editorial .board-card .profile-links span, .ceej-editorial .role-card .profile-links a, .ceej-editorial .role-card .profile-links span{ min-height:31px!important; padding:3px 9px 3px 6px!important; font-size:9.5px!important; } .ceej-editorial .board-card .profile-links a::before, .ceej-editorial .board-card .profile-links span::before, .ceej-editorial .role-card .profile-links a::before, .ceej-editorial .role-card .profile-links span::before{ width:22px!important; height:22px!important; min-width:22px!important; margin-right:6px!important; } /* ---------- MOBILE ---------- */ @media(max-width:600px){ .ceej-editorial .profile-links{ justify-content:center!important; gap:6px!important; } .ceej-editorial .profile-links a, .ceej-editorial .profile-links span{ min-height:32px!important; padding:4px 8px 4px 6px!important; font-size:9px!important; } .ceej-editorial .profile-links a::before, .ceej-editorial .profile-links span::before{ width:23px!important; height:23px!important; min-width:23px!important; margin-right:6px!important; } .ceej-editorial .board-card .profile-links a, .ceej-editorial .board-card .profile-links span, .ceej-editorial .role-card .profile-links a, .ceej-editorial .role-card .profile-links span{ font-size:8.8px!important; } } /* ---------- REDUCED MOTION ---------- */ @media(prefers-reduced-motion:reduce){ .ceej-editorial .profile-links a, .ceej-editorial .profile-links span, .ceej-editorial .profile-links a::before, .ceej-editorial .profile-links span::before{ transition:none!important; } .ceej-editorial .profile-links a:hover{ transform:none!important; } .ceej-editorial .profile-links a:hover::before{ transform:none!important; } } /* ========================================================== FINAL FIX — CURRENT HTML USES: .profile-links.academic-links .academic-badge.scopus .academic-badge.sinta .academic-badge.scholar .academic-badge.orcid IMPORTANT: The logo is a REAL inside each badge. Therefore the image itself MUST be constrained. ========================================================== */ /* Remove the previous pseudo-logo treatment */ .ceej-editorial .profile-links.academic-links a::before, .ceej-editorial .profile-links.academic-links span::before{ content:none!important; display:none!important; } /* Academic badge */ .ceej-editorial .profile-links.academic-links{ display:flex!important; align-items:center!important; flex-wrap:wrap!important; gap:8px!important; width:100%!important; margin:14px 0 0!important; padding:0!important; } .ceej-editorial .profile-links.academic-links .academic-badge{ display:inline-flex!important; align-items:center!important; justify-content:center!important; flex:0 0 auto!important; width:auto!important; min-width:0!important; height:44px!important; min-height:44px!important; margin:0!important; padding:5px 10px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid #DCEBE1!important; border-radius:999px!important; color:#176B38!important; font-size:0!important; line-height:0!important; text-decoration:none!important; white-space:nowrap!important; overflow:hidden!important; box-shadow:0 4px 12px rgba(23,107,56,.08)!important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease!important; } /* REAL LOGO IMAGE — prevent giant native image dimensions */ .ceej-editorial .profile-links.academic-links .academic-badge img{ display:block!important; width:auto!important; height:32px!important; max-width:125px!important; max-height:32px!important; min-width:0!important; min-height:0!important; margin:0!important; padding:0!important; object-fit:contain!important; object-position:center!important; border:0!important; border-radius:0!important; box-shadow:none!important; transform:none!important; transition:transform .25s ease!important; } /* Do NOT let the global img:hover rule enlarge academic logos */ .ceej-editorial .profile-links.academic-links .academic-badge:hover img, .ceej-editorial .profile-links.academic-links .academic-badge img:hover{ transform:scale(1.04)!important; } /* Brand-specific sizing */ .ceej-editorial .profile-links.academic-links .academic-badge.scopus{ min-width:112px!important; } .ceej-editorial .profile-links.academic-links .academic-badge.sinta{ min-width:118px!important; } .ceej-editorial .profile-links.academic-links .academic-badge.scholar{ min-width:126px!important; } .ceej-editorial .profile-links.academic-links .academic-badge.orcid{ min-width:88px!important; } /* Hover */ .ceej-editorial .profile-links.academic-links .academic-badge:hover{ transform:translateY(-3px)!important; background:#F8FCF9!important; box-shadow:0 9px 20px rgba(23,107,56,.15)!important; text-decoration:none!important; } .ceej-editorial .profile-links.academic-links .academic-badge.scopus:hover{ border-color:#0B7180!important; } .ceej-editorial .profile-links.academic-links .academic-badge.sinta:hover{ border-color:#D79A00!important; } .ceej-editorial .profile-links.academic-links .academic-badge.scholar:hover{ border-color:#4285F4!important; } .ceej-editorial .profile-links.academic-links .academic-badge.orcid:hover{ border-color:#A6CE39!important; } /* Leadership cards */ .ceej-editorial .featured-card .profile-links.academic-links{ justify-content:flex-start!important; } /* Board cards */ .ceej-editorial .board-card .profile-links.academic-links, .ceej-editorial .role-card .profile-links.academic-links{ margin-top:12px!important; } .ceej-editorial .board-card .profile-links.academic-links .academic-badge, .ceej-editorial .role-card .profile-links.academic-links .academic-badge{ height:38px!important; min-height:38px!important; padding:4px 8px!important; } .ceej-editorial .board-card .profile-links.academic-links .academic-badge img, .ceej-editorial .role-card .profile-links.academic-links .academic-badge img{ height:27px!important; max-height:27px!important; max-width:105px!important; } /* Mobile */ @media(max-width:600px){ .ceej-editorial .profile-links.academic-links{ justify-content:center!important; gap:6px!important; } .ceej-editorial .profile-links.academic-links .academic-badge{ height:38px!important; min-height:38px!important; padding:4px 8px!important; } .ceej-editorial .profile-links.academic-links .academic-badge img{ height:27px!important; max-height:27px!important; max-width:100px!important; } .ceej-editorial .profile-links.academic-links .academic-badge.scopus, .ceej-editorial .profile-links.academic-links .academic-badge.sinta, .ceej-editorial .profile-links.academic-links .academic-badge.scholar, .ceej-editorial .profile-links.academic-links .academic-badge.orcid{ min-width:0!important; } } /* Reduced motion */ @media(prefers-reduced-motion:reduce){ .ceej-editorial .profile-links.academic-links .academic-badge, .ceej-editorial .profile-links.academic-links .academic-badge img{ transition:none!important; } .ceej-editorial .profile-links.academic-links .academic-badge:hover{ transform:none!important; } .ceej-editorial .profile-links.academic-links .academic-badge:hover img{ transform:none!important; } } /* ========================================================== CEEJ — FINAL EDITORIAL BOARD REVISION Desktop: 2 columns Tablet : 2 columns Mobile : 1 column ---------------------------------------------------------- This override is intentionally placed at the END so it takes precedence over earlier 3-column Editorial Board definitions in this stylesheet. ========================================================== */ /* Editorial Board — 2 cards per row */ .ceej-editorial .board-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:24px!important; width:100%!important; align-items:stretch!important; } /* Board card */ .ceej-editorial .board-grid .board-card{ display:flex!important; align-items:flex-start!important; width:100%!important; min-width:0!important; min-height:245px!important; padding:28px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid #D9EBDD!important; border-radius:20px!important; box-shadow:0 7px 22px rgba(23,107,56,.07)!important; position:relative!important; overflow:hidden!important; transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease!important; } /* Premium top accent */ .ceej-editorial .board-grid .board-card::before{ content:""!important; position:absolute!important; top:0!important; left:0!important; width:100%!important; height:4px!important; background:linear-gradient( 90deg, #176B38 0%, #3CA24C 52%, #F4C542 100% )!important; } /* Card hover */ .ceej-editorial .board-grid .board-card:hover{ transform:translateY(-5px)!important; border-color:#BBDDC5!important; box-shadow: 0 15px 34px rgba(23,107,56,.13)!important; } /* ========================================================== BOARD AVATAR ========================================================== */ .ceej-editorial .board-grid .board-card .avatar-circle{ flex:0 0 92px!important; width:92px!important; height:92px!important; margin:4px 25px 0 0!important; display:flex!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; border-radius:50%!important; overflow:hidden!important; background:linear-gradient( 145deg, #1F7A3D 0%, #155C2E 100% )!important; border:4px solid #FFFFFF!important; outline:2px solid #D8EEDC!important; color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif!important; font-size:28px!important; font-weight:800!important; box-shadow: 0 8px 22px rgba(31,122,61,.18)!important; transition: transform .3s ease, box-shadow .3s ease!important; } .ceej-editorial .board-grid .board-card:hover .avatar-circle{ transform:scale(1.05)!important; box-shadow: 0 11px 26px rgba(31,122,61,.25)!important; } /* ========================================================== BOARD INFORMATION ========================================================== */ .ceej-editorial .board-grid .board-info{ flex:1 1 auto!important; min-width:0!important; padding-top:3px!important; } .ceej-editorial .board-grid .board-card h3{ margin:0 0 12px!important; color:#176B38!important; font-size:21px!important; font-weight:800!important; line-height:1.3!important; } .ceej-editorial .board-grid .board-card .institution, .ceej-editorial .board-grid .board-card p{ margin:0 0 17px!important; color:#526057!important; font-size:14px!important; line-height:1.65!important; } /* ========================================================== BOARD ACADEMIC BADGES ========================================================== */ .ceej-editorial .board-grid .board-card .profile-links.academic-links{ display:flex!important; align-items:center!important; justify-content:flex-start!important; flex-wrap:wrap!important; gap:9px!important; width:100%!important; margin:12px 0 0!important; padding:0!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge{ display:inline-flex!important; align-items:center!important; justify-content:center!important; flex:0 0 auto!important; height:43px!important; min-height:43px!important; padding:5px 12px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid #DCEBE1!important; border-radius:999px!important; overflow:hidden!important; text-decoration:none!important; white-space:nowrap!important; font-size:0!important; line-height:0!important; box-shadow: 0 4px 13px rgba(23,107,56,.05)!important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease!important; } /* Real logo images */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge img{ display:block!important; width:auto!important; height:29px!important; max-width:108px!important; max-height:29px!important; min-width:0!important; min-height:0!important; margin:0!important; padding:0!important; object-fit:contain!important; object-position:center!important; border:0!important; border-radius:0!important; box-shadow:none!important; transform:none!important; transition:transform .25s ease!important; } /* Brand widths */ .ceej-editorial .board-grid .academic-badge.scopus{ min-width:112px!important; } .ceej-editorial .board-grid .academic-badge.sinta{ min-width:118px!important; } .ceej-editorial .board-grid .academic-badge.scholar{ min-width:126px!important; } .ceej-editorial .board-grid .academic-badge.orcid{ min-width:88px!important; } /* Badge hover */ .ceej-editorial .board-grid .academic-badge:hover{ transform:translateY(-3px)!important; background:#F8FCF9!important; box-shadow: 0 8px 18px rgba(23,107,56,.12)!important; } .ceej-editorial .board-grid .academic-badge:hover img{ transform:scale(1.03)!important; } .ceej-editorial .board-grid .academic-badge.scopus:hover{ border-color:#0B7180!important; } .ceej-editorial .board-grid .academic-badge.sinta:hover{ border-color:#D79A00!important; } .ceej-editorial .board-grid .academic-badge.scholar:hover{ border-color:#4285F4!important; } .ceej-editorial .board-grid .academic-badge.orcid:hover{ border-color:#A6CE39!important; } /* ========================================================== TABLET ========================================================== */ @media(max-width:991px){ .ceej-editorial .board-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:18px!important; } .ceej-editorial .board-grid .board-card{ min-height:230px!important; padding:22px!important; } .ceej-editorial .board-grid .board-card .avatar-circle{ flex-basis:82px!important; width:82px!important; height:82px!important; margin-right:20px!important; font-size:25px!important; } .ceej-editorial .board-grid .board-card h3{ font-size:19px!important; } .ceej-editorial .board-grid .board-card .institution, .ceej-editorial .board-grid .board-card p{ font-size:13px!important; } } /* ========================================================== MOBILE ========================================================== */ @media(max-width:600px){ .ceej-editorial .board-grid{ grid-template-columns:1fr!important; gap:15px!important; } .ceej-editorial .board-grid .board-card{ min-height:0!important; padding:22px!important; } .ceej-editorial .board-grid .board-card .avatar-circle{ flex-basis:76px!important; width:76px!important; height:76px!important; margin-right:18px!important; font-size:23px!important; } .ceej-editorial .board-grid .board-card h3{ font-size:18px!important; } .ceej-editorial .board-grid .board-card .institution, .ceej-editorial .board-grid .board-card p{ font-size:12.5px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links{ gap:7px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge{ height:40px!important; min-height:40px!important; padding:4px 9px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge img{ height:27px!important; max-height:27px!important; max-width:100px!important; } .ceej-editorial .board-grid .academic-badge.scopus, .ceej-editorial .board-grid .academic-badge.sinta, .ceej-editorial .board-grid .academic-badge.scholar, .ceej-editorial .board-grid .academic-badge.orcid{ min-width:0!important; } } /* ========================================================== VERY SMALL MOBILE ========================================================== */ @media(max-width:430px){ .ceej-editorial .board-grid .board-card{ display:block!important; text-align:center!important; } .ceej-editorial .board-grid .board-card .avatar-circle{ margin:0 auto 17px!important; } .ceej-editorial .board-grid .board-info{ width:100%!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links{ justify-content:center!important; } } /* Reduced motion */ @media(prefers-reduced-motion:reduce){ .ceej-editorial .board-grid .board-card, .ceej-editorial .board-grid .board-card .avatar-circle, .ceej-editorial .board-grid .academic-badge, .ceej-editorial .board-grid .academic-badge img{ transition:none!important; } .ceej-editorial .board-grid .board-card:hover, .ceej-editorial .board-grid .board-card:hover .avatar-circle, .ceej-editorial .board-grid .academic-badge:hover{ transform:none!important; } } /* ========================================================== CEEJ — JOURNAL SUPPORT TEAM FINAL REVISION ---------------------------------------------------------- Target HTML: .role-title .role-grid .role-card .avatar-circle.small .role-info .role-badge .profile-links.academic-links .academic-badge.scholar .academic-badge.sinta Tujuan: - 3 kartu sejajar pada desktop - tinggi kartu seragam - avatar lebih proporsional - badge jabatan tetap rapi - "Translator / Proofreader" tidak merusak alignment - Google Scholar + SINTA sejajar dan konsisten - responsive 2 kolom tablet / 1 kolom mobile ========================================================== */ /* ---------------------------------------------------------- SUPPORT TEAM GRID ---------------------------------------------------------- */ .ceej-editorial .role-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:20px!important; width:100%!important; align-items:stretch!important; } /* ---------------------------------------------------------- SUPPORT TEAM CARD ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card{ position:relative!important; display:flex!important; flex-direction:row!important; align-items:flex-start!important; width:100%!important; min-width:0!important; min-height:375px!important; padding:27px 22px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid #D9EBDD!important; border-radius:17px!important; box-shadow: 0 7px 22px rgba(23,107,56,.07)!important; overflow:hidden!important; transition: transform .30s ease, box-shadow .30s ease, border-color .30s ease!important; } /* Gold vertical accent */ .ceej-editorial .role-grid .role-card::before{ content:""!important; position:absolute!important; left:0!important; top:0!important; width:5px!important; height:100%!important; border-radius:17px 0 0 17px!important; background:#F4C542!important; } /* Hover */ .ceej-editorial .role-grid .role-card:hover{ transform:translateY(-5px)!important; border-color:#C8E2CF!important; box-shadow: 0 15px 30px rgba(23,107,56,.13)!important; } /* ---------------------------------------------------------- SUPPORT TEAM AVATAR ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .avatar-circle.small{ display:flex!important; align-items:center!important; justify-content:center!important; flex:0 0 86px!important; width:86px!important; height:86px!important; min-width:86px!important; min-height:86px!important; margin:0 20px 0 0!important; box-sizing:border-box!important; border-radius:50%!important; overflow:hidden!important; background: linear-gradient( 145deg, #D99A20 0%, #B87900 100% )!important; border:4px solid #FFFFFF!important; outline:2px solid #F3D58A!important; color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif!important; font-size:27px!important; font-weight:800!important; line-height:1!important; box-shadow: 0 8px 20px rgba(184,121,0,.22)!important; transition: transform .30s ease, box-shadow .30s ease!important; z-index:2!important; } .ceej-editorial .role-grid .role-card:hover .avatar-circle.small{ transform:scale(1.06)!important; box-shadow: 0 11px 24px rgba(184,121,0,.30)!important; } /* ---------------------------------------------------------- SUPPORT TEAM CONTENT ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .role-info{ flex:1 1 auto!important; min-width:0!important; width:auto!important; } /* ---------------------------------------------------------- ROLE BADGE ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .role-badge{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:max-content!important; max-width:100%!important; min-height:34px!important; margin:0 0 9px!important; padding:7px 14px!important; box-sizing:border-box!important; background:#EEF8F1!important; color:#176B38!important; border-radius:999px!important; font-size:11px!important; font-weight:900!important; letter-spacing:.08em!important; line-height:1.25!important; text-transform:uppercase!important; white-space:nowrap!important; transition: transform .25s ease, box-shadow .25s ease!important; } .ceej-editorial .role-grid .role-card:hover .role-badge{ transform:translateY(-2px)!important; box-shadow: 0 5px 12px rgba(23,107,56,.10)!important; } /* Translator badge gets enough width */ .ceej-editorial .role-grid .role-card:nth-child(2) .role-badge{ min-width:178px!important; } /* ---------------------------------------------------------- SUPPORT TEAM NAME ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card h3{ margin:0 0 10px!important; color:#176B38!important; font-size:21px!important; line-height:1.30!important; font-weight:850!important; letter-spacing:0!important; } /* ---------------------------------------------------------- INSTITUTION ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .institution{ margin:0 0 17px!important; color:#68756E!important; font-size:13px!important; line-height:1.65!important; font-weight:500!important; } /* ---------------------------------------------------------- ACADEMIC LINKS ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:flex-start!important; gap:10px!important; width:100%!important; margin:0!important; padding:0!important; } /* ---------------------------------------------------------- ACADEMIC BADGES ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ position:relative!important; display:flex!important; align-items:center!important; justify-content:center!important; width:170px!important; min-width:170px!important; max-width:170px!important; height:50px!important; min-height:50px!important; margin:0!important; padding:5px 10px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid #D9EBDD!important; border-radius:999px!important; color:transparent!important; font-size:0!important; text-decoration:none!important; box-shadow: 0 5px 14px rgba(23,107,56,.07)!important; overflow:hidden!important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease!important; } /* Hover */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge:hover{ transform:translateY(-3px)!important; background:#FBFEFC!important; box-shadow: 0 9px 20px rgba(23,107,56,.13)!important; text-decoration:none!important; } /* ---------------------------------------------------------- REAL LOGO IMAGES ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge img{ display:block!important; width:auto!important; height:34px!important; max-width:135px!important; max-height:34px!important; margin:0 auto!important; padding:0!important; object-fit:contain!important; transform:none!important; filter:none!important; transition: transform .25s ease!important; } /* Prevent global img hover scale */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge:hover img{ transform:scale(1.035)!important; } /* Brand-specific border hover */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.scholar:hover{ border-color:#4285F4!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.sinta:hover{ border-color:#D89B00!important; } /* ---------------------------------------------------------- SUPPORT TEAM — TABLET ---------------------------------------------------------- */ @media(max-width:991px){ .ceej-editorial .role-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:16px!important; } .ceej-editorial .role-grid .role-card{ min-height:350px!important; padding:23px 18px!important; } .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex-basis:74px!important; width:74px!important; height:74px!important; min-width:74px!important; min-height:74px!important; margin-right:16px!important; font-size:23px!important; } .ceej-editorial .role-grid .role-card h3{ font-size:19px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ width:165px!important; min-width:165px!important; max-width:165px!important; } } /* ---------------------------------------------------------- SUPPORT TEAM — MOBILE ---------------------------------------------------------- */ @media(max-width:600px){ .ceej-editorial .role-grid{ grid-template-columns:1fr!important; gap:14px!important; } .ceej-editorial .role-grid .role-card{ min-height:0!important; padding:22px 18px!important; } .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex-basis:70px!important; width:70px!important; height:70px!important; min-width:70px!important; min-height:70px!important; margin-right:15px!important; font-size:22px!important; } .ceej-editorial .role-grid .role-card .role-badge{ max-width:100%!important; min-height:31px!important; padding:6px 11px!important; font-size:10px!important; white-space:normal!important; text-align:center!important; } .ceej-editorial .role-grid .role-card:nth-child(2) .role-badge{ min-width:0!important; } .ceej-editorial .role-grid .role-card h3{ font-size:19px!important; } .ceej-editorial .role-grid .role-card .institution{ font-size:12.5px!important; line-height:1.55!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links{ align-items:flex-start!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ width:160px!important; min-width:160px!important; max-width:160px!important; height:48px!important; min-height:48px!important; } } /* ---------------------------------------------------------- VERY SMALL MOBILE ---------------------------------------------------------- */ @media(max-width:430px){ .ceej-editorial .role-grid .role-card{ display:block!important; text-align:center!important; } .ceej-editorial .role-grid .role-card .avatar-circle.small{ margin:0 auto 15px!important; } .ceej-editorial .role-grid .role-card .role-info{ width:100%!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links{ align-items:center!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ width:170px!important; min-width:170px!important; max-width:170px!important; } } /* ---------------------------------------------------------- SUPPORT TEAM — REDUCED MOTION ---------------------------------------------------------- */ @media(prefers-reduced-motion:reduce){ .ceej-editorial .role-grid .role-card, .ceej-editorial .role-grid .role-card .avatar-circle.small, .ceej-editorial .role-grid .role-card .role-badge, .ceej-editorial .role-grid .role-card .academic-badge, .ceej-editorial .role-grid .role-card .academic-badge img{ transition:none!important; animation:none!important; } .ceej-editorial .role-grid .role-card:hover, .ceej-editorial .role-grid .role-card:hover .avatar-circle.small, .ceej-editorial .role-grid .role-card:hover .role-badge, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge:hover{ transform:none!important; } } /* ========================================================== CEEJ EDITORIAL — SUPPORT TEAM FINAL FIX: MAXIMUM 2 COLUMNS ========================================================== */ /* Desktop: maximum 2 cards per row */ .ceej-editorial .role-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:18px!important; width:100%!important; align-items:stretch!important; } /* Support card: compact and balanced */ .ceej-editorial .role-grid .role-card{ display:flex!important; flex-direction:row!important; align-items:flex-start!important; min-height:330px!important; padding:24px 20px!important; box-sizing:border-box!important; } /* Avatar */ .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 82px!important; width:82px!important; height:82px!important; min-width:82px!important; min-height:82px!important; margin:0 18px 0 0!important; font-size:25px!important; } /* Content */ .ceej-editorial .role-grid .role-card .role-info{ flex:1 1 auto!important; min-width:0!important; } /* Job title */ .ceej-editorial .role-grid .role-card .role-badge{ display:inline-flex!important; max-width:100%!important; min-width:0!important; min-height:32px!important; margin-bottom:9px!important; padding:6px 12px!important; font-size:10.5px!important; line-height:1.25!important; white-space:normal!important; text-align:center!important; } /* Remove the excessive special width from Translator / Proofreader */ .ceej-editorial .role-grid .role-card:nth-child(2) .role-badge{ min-width:0!important; width:auto!important; } /* Name */ .ceej-editorial .role-grid .role-card h3{ margin:0 0 9px!important; font-size:20px!important; line-height:1.3!important; } /* Institution */ .ceej-editorial .role-grid .role-card .institution{ margin:0 0 15px!important; font-size:12.5px!important; line-height:1.55!important; } /* Academic links */ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ display:flex!important; flex-direction:column!important; align-items:flex-start!important; gap:9px!important; width:100%!important; margin:0!important; } /* Logo pills */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ width:155px!important; min-width:155px!important; max-width:155px!important; height:47px!important; min-height:47px!important; padding:4px 9px!important; } /* Real logo image */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge img{ width:auto!important; height:32px!important; max-width:128px!important; max-height:32px!important; object-fit:contain!important; margin:0 auto!important; transform:none!important; } /* ========================================================== TABLET ========================================================== */ @media(max-width:991px){ .ceej-editorial .role-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:15px!important; } .ceej-editorial .role-grid .role-card{ min-height:310px!important; padding:20px 17px!important; } .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex-basis:70px!important; width:70px!important; height:70px!important; min-width:70px!important; min-height:70px!important; margin-right:14px!important; font-size:22px!important; } .ceej-editorial .role-grid .role-card h3{ font-size:18px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ width:145px!important; min-width:145px!important; max-width:145px!important; } } /* ========================================================== MOBILE: 1 COLUMN ========================================================== */ @media(max-width:600px){ .ceej-editorial .role-grid{ grid-template-columns:1fr!important; gap:13px!important; } .ceej-editorial .role-grid .role-card{ min-height:0!important; padding:21px 17px!important; } .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex-basis:68px!important; width:68px!important; height:68px!important; min-width:68px!important; min-height:68px!important; margin-right:14px!important; font-size:21px!important; } .ceej-editorial .role-grid .role-card h3{ font-size:19px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ width:150px!important; min-width:150px!important; max-width:150px!important; height:46px!important; min-height:46px!important; } } /* Very small screens */ @media(max-width:430px){ .ceej-editorial .role-grid .role-card{ display:block!important; text-align:center!important; } .ceej-editorial .role-grid .role-card .avatar-circle.small{ margin:0 auto 14px!important; } .ceej-editorial .role-grid .role-card .role-info{ width:100%!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links{ align-items:center!important; } } /* ========================================================== CEEJ EDITORIAL BOARD — COMPACT + ICONS SEJAJAR FINAL OVERRIDE ---------------------------------------------------------- Desktop: - 2 cards per row - compact horizontal card - academic icons in ONE horizontal row - equal-size icon pills ========================================================== */ /* 2 cards per row */ .ceej-editorial .board-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:18px!important; width:100%!important; align-items:stretch!important; } /* Compact board card */ .ceej-editorial .board-grid .board-card{ display:flex!important; align-items:flex-start!important; min-width:0!important; min-height:185px!important; padding:20px 18px!important; box-sizing:border-box!important; } /* Smaller profile photo / avatar */ .ceej-editorial .board-grid .board-card .avatar-circle{ flex:0 0 88px!important; width:88px!important; height:88px!important; min-width:88px!important; min-height:88px!important; margin:4px 18px 0 0!important; font-size:24px!important; } /* Information area */ .ceej-editorial .board-grid .board-info{ flex:1 1 auto!important; min-width:0!important; padding-top:2px!important; } /* Name */ .ceej-editorial .board-grid .board-card h3{ margin:0 0 7px!important; font-size:19px!important; line-height:1.25!important; } /* Institution */ .ceej-editorial .board-grid .board-card .institution, .ceej-editorial .board-grid .board-card p{ margin:0 0 11px!important; font-size:12.5px!important; line-height:1.45!important; } /* Academic icons: FORCE ONE HORIZONTAL ROW */ .ceej-editorial .board-grid .board-card .profile-links.academic-links{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important; flex-wrap:nowrap!important; gap:7px!important; width:100%!important; margin:5px 0 0!important; padding:0!important; } /* All icon pills have exactly the same compact size */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge{ display:flex!important; flex:0 0 104px!important; width:104px!important; min-width:104px!important; max-width:104px!important; height:38px!important; min-height:38px!important; max-height:38px!important; padding:3px 6px!important; box-sizing:border-box!important; border-radius:999px!important; overflow:hidden!important; } /* Override brand-specific widths */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.scopus, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.sinta, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.scholar, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.orcid{ flex:0 0 104px!important; width:104px!important; min-width:104px!important; max-width:104px!important; } /* Logo images */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge img{ display:block!important; width:auto!important; height:26px!important; max-width:92px!important; max-height:26px!important; min-width:0!important; min-height:0!important; margin:0 auto!important; object-fit:contain!important; object-position:center!important; transform:none!important; } /* Keep 3 icons on one line even when all 3 exist */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge:hover img{ transform:scale(1.025)!important; } /* ========================================================== TABLET ========================================================== */ @media(max-width:991px){ .ceej-editorial .board-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:14px!important; } .ceej-editorial .board-grid .board-card{ min-height:170px!important; padding:18px 15px!important; } .ceej-editorial .board-grid .board-card .avatar-circle{ flex-basis:76px!important; width:76px!important; height:76px!important; min-width:76px!important; min-height:76px!important; margin-right:14px!important; } .ceej-editorial .board-grid .board-card h3{ font-size:18px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links{ gap:5px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.scopus, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.sinta, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.scholar, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.orcid{ flex-basis:88px!important; width:88px!important; min-width:88px!important; max-width:88px!important; height:35px!important; min-height:35px!important; max-height:35px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge img{ height:23px!important; max-height:23px!important; max-width:78px!important; } } /* ========================================================== MOBILE ========================================================== */ @media(max-width:600px){ .ceej-editorial .board-grid{ grid-template-columns:1fr!important; gap:13px!important; } .ceej-editorial .board-grid .board-card{ min-height:0!important; padding:18px!important; } .ceej-editorial .board-grid .board-card .avatar-circle{ flex-basis:76px!important; width:76px!important; height:76px!important; min-width:76px!important; min-height:76px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links{ flex-wrap:wrap!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.scopus, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.sinta, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.scholar, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.orcid{ flex-basis:104px!important; width:104px!important; min-width:104px!important; max-width:104px!important; height:38px!important; min-height:38px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge img{ height:26px!important; max-height:26px!important; max-width:92px!important; } } /* Very small mobile */ @media(max-width:430px){ .ceej-editorial .board-grid .board-card{ display:block!important; text-align:center!important; } .ceej-editorial .board-grid .board-card .avatar-circle{ margin:0 auto 13px!important; } .ceej-editorial .board-grid .board-info{ width:100%!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links{ justify-content:center!important; } } /* ========================================================== CEEJ EDITORIAL BOARD — FINAL COMPACT & RAPIH ---------------------------------------------------------- FIX: 1. Semua card tetap 2 kolom. 2. Avatar + informasi tetap horizontal. 3. Badge akademik berada DI BAWAH institusi. 4. Google Scholar / SINTA / Scopus selalu satu baris bila 3 badge tersedia. 5. Badge diperkecil agar tidak keluar dari card. 6. Semua badge memiliki ukuran seragam. ========================================================== */ /* ---------- GRID ---------- */ .ceej-editorial .board-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:20px!important; width:100%!important; align-items:stretch!important; } /* ---------- CARD ---------- */ .ceej-editorial .board-grid .board-card{ display:flex!important; flex-direction:row!important; align-items:flex-start!important; width:100%!important; min-width:0!important; min-height:205px!important; padding:20px 18px!important; box-sizing:border-box!important; overflow:hidden!important; } /* ---------- AVATAR ---------- */ .ceej-editorial .board-grid .board-card .avatar-circle{ flex:0 0 82px!important; width:82px!important; height:82px!important; min-width:82px!important; min-height:82px!important; margin:4px 18px 0 0!important; } /* ---------- INFORMATION COLUMN ---------- */ .ceej-editorial .board-grid .board-info{ flex:1 1 0!important; width:0!important; min-width:0!important; padding:2px 0 0!important; display:flex!important; flex-direction:column!important; align-items:flex-start!important; } /* ---------- NAME ---------- */ .ceej-editorial .board-grid .board-card h3{ width:100%!important; margin:0 0 6px!important; font-size:19px!important; line-height:1.25!important; white-space:normal!important; overflow:visible!important; } /* ---------- INSTITUTION ---------- */ .ceej-editorial .board-grid .board-card .institution, .ceej-editorial .board-grid .board-card p{ width:100%!important; margin:0!important; font-size:12.5px!important; line-height:1.4!important; white-space:normal!important; } /* ---------- ACADEMIC LINKS ---------- */ /* The row gets the full available width of board-info. */ .ceej-editorial .board-grid .board-card .profile-links.academic-links{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important; flex-wrap:nowrap!important; width:100%!important; max-width:100%!important; margin:18px 0 0!important; padding:0!important; gap:6px!important; box-sizing:border-box!important; overflow:visible!important; } /* ---------- BADGES ---------- */ /* 84px x 34px = compact enough for 3 badges */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.scopus, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.sinta, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.scholar, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.orcid{ display:flex!important; align-items:center!important; justify-content:center!important; flex:0 0 84px!important; width:84px!important; min-width:84px!important; max-width:84px!important; height:34px!important; min-height:34px!important; max-height:34px!important; padding:2px 4px!important; margin:0!important; box-sizing:border-box!important; overflow:hidden!important; border-radius:999px!important; font-size:0!important; line-height:0!important; } /* ---------- REAL LOGOS ---------- */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge img{ display:block!important; width:auto!important; height:23px!important; max-width:75px!important; max-height:23px!important; min-width:0!important; min-height:0!important; margin:0 auto!important; padding:0!important; object-fit:contain!important; object-position:center!important; transform:none!important; } /* Prevent global image hover rules from enlarging the logos */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge:hover img{ transform:scale(1.02)!important; } /* ---------- CARD WITH ONLY 2 ICONS ---------- */ /* Keep the icons at the same left position as cards with 3 icons. */ .ceej-editorial .board-grid .board-card .profile-links.academic-links{ align-self:flex-start!important; } /* ========================================================== TABLET ========================================================== */ @media(max-width:991px){ .ceej-editorial .board-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:15px!important; } .ceej-editorial .board-grid .board-card{ min-height:190px!important; padding:17px 14px!important; } .ceej-editorial .board-grid .board-card .avatar-circle{ flex-basis:72px!important; width:72px!important; height:72px!important; min-width:72px!important; min-height:72px!important; margin-right:13px!important; } .ceej-editorial .board-grid .board-card h3{ font-size:18px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links{ gap:4px!important; margin-top:15px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.scopus, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.sinta, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.scholar, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.orcid{ flex-basis:78px!important; width:78px!important; min-width:78px!important; max-width:78px!important; height:32px!important; min-height:32px!important; max-height:32px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge img{ height:21px!important; max-height:21px!important; max-width:69px!important; } } /* ========================================================== MOBILE ========================================================== */ @media(max-width:600px){ .ceej-editorial .board-grid{ grid-template-columns:1fr!important; gap:14px!important; } .ceej-editorial .board-grid .board-card{ min-height:0!important; padding:18px!important; } .ceej-editorial .board-grid .board-card .avatar-circle{ flex-basis:76px!important; width:76px!important; height:76px!important; min-width:76px!important; min-height:76px!important; margin-right:15px!important; } .ceej-editorial .board-grid .board-card h3{ font-size:18px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links{ flex-wrap:wrap!important; gap:6px!important; margin-top:14px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.scopus, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.sinta, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.scholar, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.orcid{ flex:0 0 84px!important; width:84px!important; min-width:84px!important; max-width:84px!important; height:34px!important; min-height:34px!important; max-height:34px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge img{ height:23px!important; max-height:23px!important; max-width:75px!important; } } /* ========================================================== VERY SMALL MOBILE ========================================================== */ @media(max-width:430px){ .ceej-editorial .board-grid .board-card{ display:block!important; text-align:center!important; } .ceej-editorial .board-grid .board-card .avatar-circle{ margin:0 auto 13px!important; } .ceej-editorial .board-grid .board-info{ width:100%!important; align-items:center!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links{ justify-content:center!important; } } /* ========================================================== CEEJ — EDITORIAL BOARD + JOURNAL SUPPORT TEAM FINAL CLEANUP ---------------------------------------------------------- 1. Editorial Board: icons stay inside the card. 2. Journal Support Team: Google + SINTA horizontal. 3. Cards are compact; remove excessive empty height. 4. Indonesia flag restored with CSS — NO HTML change. 5. Flag is generated on the institution/country line. ========================================================== */ /* ========================================================== INDONESIA FLAG — CSS GENERATED ---------------------------------------------------------- No need to add to HTML. ========================================================== */ .ceej-editorial .country::before, .ceej-editorial .board-grid .board-card .institution::after, .ceej-editorial .role-grid .role-card .institution::after{ content:""!important; display:inline-block!important; width:20px!important; height:13px!important; min-width:20px!important; min-height:13px!important; margin:0 7px 0 0!important; vertical-align:middle!important; border-radius:2px!important; background: linear-gradient( to bottom, #E31E24 0%, #E31E24 50%, #FFFFFF 50%, #FFFFFF 100% )!important; border:1px solid rgba(0,0,0,.10)!important; box-shadow: 0 1px 3px rgba(0,0,0,.16), inset 0 0 0 1px rgba(255,255,255,.25)!important; box-sizing:border-box!important; position:relative!important; } /* Leadership country line */ .ceej-editorial .country{ display:flex!important; align-items:center!important; width:max-content!important; max-width:100%!important; } /* Board / Support institution line: flag appears AFTER the institution text, so it represents "Indonesia" without changing HTML. */ .ceej-editorial .board-grid .board-card .institution, .ceej-editorial .role-grid .role-card .institution{ display:flex!important; align-items:center!important; flex-wrap:wrap!important; width:100%!important; } .ceej-editorial .board-grid .board-card .institution::after, .ceej-editorial .role-grid .role-card .institution::after{ margin:0 0 0 7px!important; } /* ========================================================== EDITORIAL BOARD — FINAL COMPACT ========================================================== */ .ceej-editorial .board-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:18px!important; width:100%!important; align-items:stretch!important; } .ceej-editorial .board-grid .board-card{ display:flex!important; flex-direction:row!important; align-items:flex-start!important; width:100%!important; min-width:0!important; min-height:185px!important; padding:20px 18px!important; box-sizing:border-box!important; overflow:hidden!important; } /* Board avatar */ .ceej-editorial .board-grid .board-card .avatar-circle{ flex:0 0 82px!important; width:82px!important; height:82px!important; min-width:82px!important; min-height:82px!important; margin:4px 18px 0 0!important; } /* Board content */ .ceej-editorial .board-grid .board-info{ flex:1 1 0!important; width:0!important; min-width:0!important; padding:2px 0 0!important; display:flex!important; flex-direction:column!important; align-items:flex-start!important; } .ceej-editorial .board-grid .board-card h3{ width:100%!important; margin:0 0 6px!important; font-size:19px!important; line-height:1.25!important; white-space:normal!important; } .ceej-editorial .board-grid .board-card .institution{ width:100%!important; margin:0!important; font-size:12.5px!important; line-height:1.4!important; } /* Board academic links */ .ceej-editorial .board-grid .board-card .profile-links.academic-links{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important; flex-wrap:nowrap!important; width:100%!important; max-width:100%!important; margin:15px 0 0!important; padding:0!important; gap:5px!important; box-sizing:border-box!important; overflow:hidden!important; } /* Board badges */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.scopus, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.sinta, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.scholar, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.orcid{ display:flex!important; align-items:center!important; justify-content:center!important; flex:0 0 84px!important; width:84px!important; min-width:84px!important; max-width:84px!important; height:34px!important; min-height:34px!important; max-height:34px!important; margin:0!important; padding:2px 4px!important; box-sizing:border-box!important; border-radius:999px!important; overflow:hidden!important; font-size:0!important; line-height:0!important; } /* Board logos */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge img{ display:block!important; width:auto!important; height:23px!important; max-width:75px!important; max-height:23px!important; min-width:0!important; min-height:0!important; margin:0 auto!important; padding:0!important; object-fit:contain!important; object-position:center!important; transform:none!important; } /* ========================================================== JOURNAL SUPPORT TEAM — FINAL CLEANUP ========================================================== */ /* 2 cards per row on desktop */ .ceej-editorial .role-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:18px!important; width:100%!important; align-items:stretch!important; } /* Compact support card */ .ceej-editorial .role-grid .role-card{ display:flex!important; flex-direction:row!important; align-items:flex-start!important; width:100%!important; min-width:0!important; min-height:225px!important; padding:20px 18px!important; box-sizing:border-box!important; overflow:hidden!important; } /* Support avatar */ .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 82px!important; width:82px!important; height:82px!important; min-width:82px!important; min-height:82px!important; margin:4px 18px 0 0!important; } /* Support content */ .ceej-editorial .role-grid .role-card .role-info{ flex:1 1 0!important; width:0!important; min-width:0!important; padding:2px 0 0!important; } /* Role badge */ .ceej-editorial .role-grid .role-card .role-badge{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:max-content!important; max-width:100%!important; min-height:32px!important; margin:0 0 7px!important; padding:6px 12px!important; box-sizing:border-box!important; font-size:10.5px!important; line-height:1.2!important; white-space:normal!important; text-align:center!important; } /* Remove previous forced translator width */ .ceej-editorial .role-grid .role-card:nth-child(2) .role-badge{ width:auto!important; min-width:0!important; max-width:100%!important; } /* Support name */ .ceej-editorial .role-grid .role-card h3{ margin:0 0 7px!important; font-size:19px!important; line-height:1.25!important; } /* Support institution */ .ceej-editorial .role-grid .role-card .institution{ margin:0!important; font-size:12.5px!important; line-height:1.4!important; } /* ---------------------------------------------------------- SUPPORT ACADEMIC ICONS Google Scholar + SINTA MUST BE HORIZONTAL ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important; flex-wrap:nowrap!important; gap:6px!important; width:100%!important; margin:15px 0 0!important; padding:0!important; box-sizing:border-box!important; overflow:hidden!important; } /* Support badge */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.scholar, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.sinta{ display:flex!important; align-items:center!important; justify-content:center!important; flex:0 0 84px!important; width:84px!important; min-width:84px!important; max-width:84px!important; height:34px!important; min-height:34px!important; max-height:34px!important; margin:0!important; padding:2px 4px!important; box-sizing:border-box!important; border-radius:999px!important; overflow:hidden!important; font-size:0!important; line-height:0!important; } /* Support real logos */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge img{ display:block!important; width:auto!important; height:23px!important; max-width:75px!important; max-height:23px!important; min-width:0!important; min-height:0!important; margin:0 auto!important; padding:0!important; object-fit:contain!important; object-position:center!important; transform:none!important; } /* ========================================================== TABLET ========================================================== */ @media(max-width:991px){ .ceej-editorial .board-grid, .ceej-editorial .role-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:14px!important; } .ceej-editorial .board-grid .board-card, .ceej-editorial .role-grid .role-card{ min-height:180px!important; padding:17px 14px!important; } .ceej-editorial .board-grid .board-card .avatar-circle, .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex-basis:72px!important; width:72px!important; height:72px!important; min-width:72px!important; min-height:72px!important; margin-right:13px!important; } .ceej-editorial .board-grid .board-card h3, .ceej-editorial .role-grid .role-card h3{ font-size:18px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links, .ceej-editorial .role-grid .role-card .profile-links.academic-links{ gap:4px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.scopus, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.sinta, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.scholar, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.orcid, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.scholar, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.sinta{ flex-basis:78px!important; width:78px!important; min-width:78px!important; max-width:78px!important; height:32px!important; min-height:32px!important; max-height:32px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge img, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge img{ height:21px!important; max-height:21px!important; max-width:69px!important; } } /* ========================================================== MOBILE ========================================================== */ @media(max-width:600px){ .ceej-editorial .board-grid, .ceej-editorial .role-grid{ grid-template-columns:1fr!important; gap:13px!important; } .ceej-editorial .board-grid .board-card, .ceej-editorial .role-grid .role-card{ min-height:0!important; padding:18px!important; } .ceej-editorial .board-grid .board-card .avatar-circle, .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex-basis:76px!important; width:76px!important; height:76px!important; min-width:76px!important; min-height:76px!important; margin-right:15px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links, .ceej-editorial .role-grid .role-card .profile-links.academic-links{ flex-wrap:wrap!important; gap:6px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.scopus, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.sinta, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.scholar, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.orcid, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.scholar, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.sinta{ flex:0 0 84px!important; width:84px!important; min-width:84px!important; max-width:84px!important; height:34px!important; min-height:34px!important; max-height:34px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge img, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge img{ height:23px!important; max-height:23px!important; max-width:75px!important; } } /* ========================================================== VERY SMALL MOBILE ========================================================== */ @media(max-width:430px){ .ceej-editorial .board-grid .board-card, .ceej-editorial .role-grid .role-card{ display:block!important; text-align:center!important; } .ceej-editorial .board-grid .board-card .avatar-circle, .ceej-editorial .role-grid .role-card .avatar-circle.small{ margin:0 auto 13px!important; } .ceej-editorial .board-grid .board-info, .ceej-editorial .role-grid .role-card .role-info{ width:100%!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links, .ceej-editorial .role-grid .role-card .profile-links.academic-links{ justify-content:center!important; } } /* ========================================================== CEEJ — FINAL V2 EDITORIAL BOARD + JOURNAL SUPPORT TEAM CLEAN / COMPACT / PROFESSIONAL ========================================================== */ /* ---------- SECTION HEADINGS ---------- */ .ceej-editorial .section-head{ margin:0 0 20px!important; display:flex!important; align-items:center!important; gap:18px!important; } .ceej-editorial .section-head h2{ margin:0!important; flex:0 0 auto!important; font-size:25px!important; line-height:1.15!important; letter-spacing:-.2px!important; } .ceej-editorial .section-head::after{ content:""!important; flex:1 1 auto!important; height:1px!important; background:linear-gradient( 90deg, #CDE5D3 0%, rgba(205,229,211,.20) 100% )!important; } /* ========================================================== EDITORIAL BOARD ========================================================== */ .ceej-editorial .board-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:18px!important; width:100%!important; align-items:stretch!important; } .ceej-editorial .board-grid .board-card{ position:relative!important; display:flex!important; flex-direction:row!important; align-items:flex-start!important; width:100%!important; min-width:0!important; min-height:172px!important; padding:18px 18px!important; box-sizing:border-box!important; overflow:hidden!important; background:#FFFFFF!important; border:1px solid #D8EBDD!important; border-radius:20px!important; box-shadow: 0 8px 22px rgba(31,122,61,.07)!important; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease!important; } /* Green-yellow top accent */ .ceej-editorial .board-grid .board-card::before{ content:""!important; position:absolute!important; left:0!important; top:0!important; width:100%!important; height:4px!important; background:linear-gradient( 90deg, #1F7A3D 0%, #3CA24C 52%, #E6C83E 100% )!important; border-radius:20px 20px 0 0!important; } .ceej-editorial .board-grid .board-card:hover{ transform:translateY(-3px)!important; border-color:#BFDCC7!important; box-shadow: 0 14px 30px rgba(31,122,61,.12)!important; } /* ---------- BOARD AVATAR ---------- */ .ceej-editorial .board-grid .board-card .avatar-circle{ flex:0 0 82px!important; width:82px!important; height:82px!important; min-width:82px!important; min-height:82px!important; margin:4px 17px 0 0!important; border:3px solid #FFFFFF!important; box-shadow: 0 0 0 2px #D9EDDE, 0 10px 22px rgba(31,122,61,.13)!important; } /* ---------- BOARD CONTENT ---------- */ .ceej-editorial .board-grid .board-info{ flex:1 1 auto!important; width:auto!important; min-width:0!important; padding:3px 0 0!important; display:flex!important; flex-direction:column!important; align-items:flex-start!important; } .ceej-editorial .board-grid .board-card h3{ width:100%!important; margin:0 0 5px!important; color:#176D37!important; font-size:19px!important; font-weight:700!important; line-height:1.25!important; letter-spacing:-.1px!important; } .ceej-editorial .board-grid .board-card .institution{ display:block!important; width:100%!important; margin:0!important; color:#69766E!important; font-size:12.5px!important; line-height:1.45!important; } /* ---------- FLAG ---------- */ .ceej-editorial .board-grid .board-card .institution::after, .ceej-editorial .role-grid .role-card .institution::after{ content:""!important; display:inline-block!important; width:19px!important; height:12px!important; min-width:19px!important; min-height:12px!important; margin:0 0 0 7px!important; vertical-align:middle!important; border-radius:2px!important; background: linear-gradient( to bottom, #E31E24 0%, #E31E24 50%, #FFFFFF 50%, #FFFFFF 100% )!important; border:1px solid rgba(0,0,0,.10)!important; box-shadow: 0 1px 3px rgba(0,0,0,.15)!important; box-sizing:border-box!important; } /* ---------- BOARD ACADEMIC ICONS ---------- */ .ceej-editorial .board-grid .board-card .profile-links.academic-links{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important; flex-wrap:nowrap!important; width:100%!important; max-width:100%!important; margin:14px 0 0!important; padding:0!important; gap:5px!important; box-sizing:border-box!important; overflow:visible!important; } /* Critical fix: badges are allowed to shrink slightly instead of pushing Scopus outside the card. */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge{ display:flex!important; align-items:center!important; justify-content:center!important; flex:0 1 82px!important; width:82px!important; min-width:0!important; max-width:82px!important; height:34px!important; min-height:34px!important; max-height:34px!important; margin:0!important; padding:2px 4px!important; box-sizing:border-box!important; border:1px solid #D9EBDD!important; border-radius:999px!important; background:#FFFFFF!important; overflow:hidden!important; font-size:0!important; line-height:0!important; box-shadow: 0 5px 13px rgba(31,122,61,.07)!important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge:hover{ transform:translateY(-2px)!important; border-color:#B7D9C0!important; box-shadow: 0 8px 17px rgba(31,122,61,.12)!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge img{ display:block!important; width:auto!important; height:22px!important; max-width:72px!important; max-height:22px!important; min-width:0!important; min-height:0!important; margin:0 auto!important; padding:0!important; object-fit:contain!important; object-position:center!important; transform:none!important; } /* ========================================================== JOURNAL SUPPORT TEAM ========================================================== */ .ceej-editorial .role-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:18px!important; width:100%!important; align-items:stretch!important; } .ceej-editorial .role-grid .role-card{ position:relative!important; display:flex!important; flex-direction:row!important; align-items:flex-start!important; width:100%!important; min-width:0!important; min-height:190px!important; padding:18px 18px!important; box-sizing:border-box!important; overflow:hidden!important; background:#FFFFFF!important; border:1px solid #D8EBDD!important; border-radius:20px!important; box-shadow: 0 8px 22px rgba(31,122,61,.07)!important; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease!important; } /* Yellow support accent */ .ceej-editorial .role-grid .role-card::before{ content:""!important; position:absolute!important; left:0!important; top:0!important; width:5px!important; height:100%!important; background:linear-gradient( 180deg, #F2C532 0%, #FFD94F 100% )!important; border-radius:20px 0 0 20px!important; } .ceej-editorial .role-grid .role-card:hover{ transform:translateY(-3px)!important; border-color:#BFDCC7!important; box-shadow: 0 14px 30px rgba(31,122,61,.12)!important; } /* ---------- SUPPORT AVATAR ---------- */ .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 82px!important; width:82px!important; height:82px!important; min-width:82px!important; min-height:82px!important; margin:4px 17px 0 0!important; border:3px solid #FFFFFF!important; box-shadow: 0 0 0 2px #F4D06A, 0 10px 22px rgba(214,155,24,.13)!important; } /* ---------- SUPPORT CONTENT ---------- */ .ceej-editorial .role-grid .role-card .role-info{ flex:1 1 auto!important; width:auto!important; min-width:0!important; padding:3px 0 0!important; } .ceej-editorial .role-grid .role-card .role-badge{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; max-width:100%!important; min-height:30px!important; margin:0 0 7px!important; padding:6px 12px!important; box-sizing:border-box!important; border-radius:999px!important; background:#EEF8F1!important; color:#18733C!important; font-size:10px!important; font-weight:700!important; line-height:1.2!important; letter-spacing:.7px!important; white-space:normal!important; } .ceej-editorial .role-grid .role-card h3{ margin:0 0 6px!important; color:#176D37!important; font-size:19px!important; font-weight:700!important; line-height:1.25!important; } .ceej-editorial .role-grid .role-card .institution{ display:block!important; width:100%!important; margin:0!important; color:#69766E!important; font-size:12.5px!important; line-height:1.45!important; } /* ---------- SUPPORT ACADEMIC ICONS ---------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important; flex-wrap:nowrap!important; width:100%!important; max-width:100%!important; margin:14px 0 0!important; padding:0!important; gap:5px!important; box-sizing:border-box!important; overflow:visible!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ display:flex!important; align-items:center!important; justify-content:center!important; flex:0 1 82px!important; width:82px!important; min-width:0!important; max-width:82px!important; height:34px!important; min-height:34px!important; max-height:34px!important; margin:0!important; padding:2px 4px!important; box-sizing:border-box!important; border:1px solid #D9EBDD!important; border-radius:999px!important; background:#FFFFFF!important; overflow:hidden!important; font-size:0!important; line-height:0!important; box-shadow: 0 5px 13px rgba(31,122,61,.07)!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge img{ display:block!important; width:auto!important; height:22px!important; max-width:72px!important; max-height:22px!important; min-width:0!important; min-height:0!important; margin:0 auto!important; padding:0!important; object-fit:contain!important; object-position:center!important; transform:none!important; } /* ========================================================== RESPONSIVE ========================================================== */ @media(max-width:991px){ .ceej-editorial .board-grid, .ceej-editorial .role-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:14px!important; } .ceej-editorial .board-grid .board-card, .ceej-editorial .role-grid .role-card{ padding:16px 14px!important; } .ceej-editorial .board-grid .board-card .avatar-circle, .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex-basis:70px!important; width:70px!important; height:70px!important; min-width:70px!important; min-height:70px!important; margin-right:12px!important; } .ceej-editorial .board-grid .board-card h3, .ceej-editorial .role-grid .role-card h3{ font-size:18px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links, .ceej-editorial .role-grid .role-card .profile-links.academic-links{ gap:4px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ flex-basis:76px!important; width:76px!important; max-width:76px!important; height:32px!important; min-height:32px!important; max-height:32px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge img, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge img{ height:20px!important; max-height:20px!important; max-width:67px!important; } } @media(max-width:700px){ .ceej-editorial .board-grid, .ceej-editorial .role-grid{ grid-template-columns:1fr!important; } } @media(max-width:600px){ .ceej-editorial .section-head{ gap:12px!important; margin-bottom:16px!important; } .ceej-editorial .section-head h2{ font-size:22px!important; } .ceej-editorial .board-grid, .ceej-editorial .role-grid{ grid-template-columns:1fr!important; gap:13px!important; } .ceej-editorial .board-grid .board-card, .ceej-editorial .role-grid .role-card{ min-height:0!important; padding:17px!important; } .ceej-editorial .board-grid .board-card .avatar-circle, .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex-basis:76px!important; width:76px!important; height:76px!important; min-width:76px!important; min-height:76px!important; margin-right:14px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links, .ceej-editorial .role-grid .role-card .profile-links.academic-links{ flex-wrap:wrap!important; gap:5px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ flex:0 0 82px!important; width:82px!important; min-width:82px!important; max-width:82px!important; height:34px!important; min-height:34px!important; max-height:34px!important; } } @media(max-width:430px){ .ceej-editorial .board-grid .board-card, .ceej-editorial .role-grid .role-card{ display:block!important; text-align:center!important; } .ceej-editorial .board-grid .board-card .avatar-circle, .ceej-editorial .role-grid .role-card .avatar-circle.small{ margin:0 auto 13px!important; } .ceej-editorial .board-grid .board-info, .ceej-editorial .role-grid .role-card .role-info{ width:100%!important; align-items:center!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links, .ceej-editorial .role-grid .role-card .profile-links.academic-links{ justify-content:center!important; } } /* ========================================================== CEEJ — DEFINITIVE LEADERSHIP PHOTO FIX EIC + JOURNAL MANAGER = SQUARE PHOTOS ---------------------------------------------------------- This override is intentionally placed at the END of the stylesheet so it wins over all previous circular-photo declarations, including .profile-photo. Editorial Board + Journal Support remain circular. ========================================================== */ /* ---------------------------------------------------------- LEADERSHIP PHOTO CONTAINER ---------------------------------------------------------- */ .ceej-editorial .featured-card .avatar-wrap{ flex:0 0 180px!important; width:180px!important; height:180px!important; display:block!important; margin:0!important; padding:0!important; overflow:hidden!important; border:0!important; border-radius:0!important; outline:0!important; background:#F3F6F4!important; box-shadow:none!important; } /* ---------------------------------------------------------- EIC + JOURNAL MANAGER PHOTOS FORCE SQUARE — INCLUDING .profile-photo ---------------------------------------------------------- */ .ceej-editorial .featured-card .avatar-wrap img, .ceej-editorial .featured-card .avatar-wrap img.profile-photo, .ceej-editorial .featured-card > img.profile-photo{ display:block!important; flex:0 0 180px!important; width:180px!important; height:180px!important; min-width:180px!important; min-height:180px!important; max-width:180px!important; max-height:180px!important; margin:0!important; padding:0!important; box-sizing:border-box!important; object-fit:cover!important; object-position:center center!important; border:0!important; border-radius:0!important; outline:0!important; box-shadow:none!important; transform:none!important; } /* ---------------------------------------------------------- REMOVE OLD CIRCULAR HOVER EFFECT ---------------------------------------------------------- */ .ceej-editorial .featured-card:hover .avatar-wrap img, .ceej-editorial .featured-card:hover .avatar-wrap img.profile-photo, .ceej-editorial .featured-card:hover > img.profile-photo{ width:180px!important; height:180px!important; min-width:180px!important; min-height:180px!important; max-width:180px!important; max-height:180px!important; border-radius:0!important; border:0!important; outline:0!important; transform:none!important; box-shadow:none!important; } /* ---------------------------------------------------------- KEEP LEADERSHIP CARD CONSISTENT ---------------------------------------------------------- */ .ceej-editorial .featured-card{ align-items:center!important; } .ceej-editorial .featured-card .featured-info{ min-width:0!important; flex:1 1 auto!important; } /* ---------------------------------------------------------- TABLET ---------------------------------------------------------- */ @media(max-width:991px){ .ceej-editorial .featured-card .avatar-wrap{ flex:0 0 150px!important; width:150px!important; height:150px!important; } .ceej-editorial .featured-card .avatar-wrap img, .ceej-editorial .featured-card .avatar-wrap img.profile-photo, .ceej-editorial .featured-card > img.profile-photo{ flex:0 0 150px!important; width:150px!important; height:150px!important; min-width:150px!important; min-height:150px!important; max-width:150px!important; max-height:150px!important; border-radius:0!important; border:0!important; outline:0!important; transform:none!important; } .ceej-editorial .featured-card:hover .avatar-wrap img, .ceej-editorial .featured-card:hover .avatar-wrap img.profile-photo, .ceej-editorial .featured-card:hover > img.profile-photo{ width:150px!important; height:150px!important; min-width:150px!important; min-height:150px!important; max-width:150px!important; max-height:150px!important; border-radius:0!important; border:0!important; outline:0!important; transform:none!important; } } /* ---------------------------------------------------------- MOBILE ---------------------------------------------------------- */ @media(max-width:600px){ .ceej-editorial .featured-card{ display:block!important; text-align:center!important; } .ceej-editorial .featured-card .avatar-wrap{ flex:0 0 150px!important; width:150px!important; height:150px!important; margin:0 auto 16px!important; } .ceej-editorial .featured-card .avatar-wrap img, .ceej-editorial .featured-card .avatar-wrap img.profile-photo, .ceej-editorial .featured-card > img.profile-photo{ display:block!important; flex:0 0 150px!important; width:150px!important; height:150px!important; min-width:150px!important; min-height:150px!important; max-width:150px!important; max-height:150px!important; margin:0 auto!important; border-radius:0!important; border:0!important; outline:0!important; object-fit:cover!important; object-position:center center!important; transform:none!important; box-shadow:none!important; } .ceej-editorial .featured-card:hover .avatar-wrap img, .ceej-editorial .featured-card:hover .avatar-wrap img.profile-photo, .ceej-editorial .featured-card:hover > img.profile-photo{ width:150px!important; height:150px!important; min-width:150px!important; min-height:150px!important; max-width:150px!important; max-height:150px!important; border-radius:0!important; border:0!important; outline:0!important; transform:none!important; box-shadow:none!important; } } /* ---------------------------------------------------------- IMPORTANT: EDITORIAL BOARD AND JOURNAL SUPPORT STAY CIRCULAR ---------------------------------------------------------- */ .ceej-editorial .board-card .avatar-circle, .ceej-editorial .role-card .avatar-circle.small{ border-radius:50%!important; } .ceej-editorial .board-card .avatar-circle img, .ceej-editorial .role-card .avatar-circle.small img{ border-radius:50%!important; } /* ========================================================== CEEJ — FINAL PREMIUM LEADERSHIP DESIGN EIC + JOURNAL MANAGER ---------------------------------------------------------- Purpose: - Square portrait photos with rounded corners (NOT circles) - More compact and premium horizontal profile cards - EIC = green accent - Journal Manager = gold accent - Editorial Board + Journal Support remain circular - Compatible with the existing CEEJ HTML ---------------------------------------------------------- IMPORTANT: This block is intentionally at the END of the stylesheet so it overrides the previous leadership-photo declarations. ========================================================== */ /* ---------------------------------------------------------- LEADERSHIP GRID ---------------------------------------------------------- */ .ceej-editorial .featured-grid{ display:grid!important; grid-template-columns:1fr!important; gap:22px!important; width:100%!important; margin:0!important; } /* ---------------------------------------------------------- PREMIUM LEADERSHIP CARD ---------------------------------------------------------- */ .ceej-editorial .featured-grid .featured-card{ position:relative!important; display:flex!important; align-items:center!important; gap:30px!important; width:100%!important; min-height:254px!important; padding:17px 28px 17px 17px!important; box-sizing:border-box!important; overflow:hidden!important; background:#FFFFFF!important; border:1px solid #D9EBDD!important; border-left:6px solid #176B38!important; border-radius:22px!important; box-shadow: 0 8px 24px rgba(23,107,56,.08), 0 2px 6px rgba(23,107,56,.04)!important; transition: transform .30s ease, box-shadow .30s ease, border-color .30s ease!important; } /* Gold identity for Journal Manager */ .ceej-editorial .featured-grid .featured-card:nth-child(2){ border-left-color:#E4B52E!important; border-color:#EEE2B9!important; background: linear-gradient( 135deg, #FFFFFF 0%, #FFFDF8 72%, #FFF8E7 100% )!important; } /* Subtle decorative glow */ .ceej-editorial .featured-grid .featured-card::before{ content:""!important; position:absolute!important; top:-80px!important; right:-65px!important; width:230px!important; height:230px!important; border-radius:50%!important; background:radial-gradient( circle, rgba(31,122,61,.10) 0%, rgba(31,122,61,0) 70% )!important; pointer-events:none!important; } .ceej-editorial .featured-grid .featured-card:nth-child(2)::before{ background:radial-gradient( circle, rgba(244,197,66,.16) 0%, rgba(244,197,66,0) 70% )!important; } /* Premium hover */ .ceej-editorial .featured-grid .featured-card:hover{ transform:translateY(-5px)!important; border-color:#B8D9C1!important; box-shadow: 0 18px 40px rgba(23,107,56,.14), 0 5px 12px rgba(23,107,56,.06)!important; } .ceej-editorial .featured-grid .featured-card:nth-child(2):hover{ border-color:#E6CF86!important; box-shadow: 0 18px 40px rgba(184,121,0,.13), 0 5px 12px rgba(184,121,0,.05)!important; } /* ---------------------------------------------------------- SQUARE PHOTO FRAME ---------------------------------------------------------- */ .ceej-editorial .featured-grid .featured-card .avatar-wrap{ position:relative!important; z-index:2!important; flex:0 0 220px!important; width:220px!important; height:220px!important; margin:0!important; padding:0!important; overflow:hidden!important; box-sizing:border-box!important; background:#F3F7F4!important; border:1px solid #CFE4D5!important; border-radius:16px!important; box-shadow: 0 8px 22px rgba(23,107,56,.13), inset 0 0 0 5px rgba(255,255,255,.88)!important; } .ceej-editorial .featured-grid .featured-card:nth-child(2) .avatar-wrap{ border-color:#E7D69D!important; background:#FFF9EA!important; box-shadow: 0 8px 22px rgba(184,121,0,.12), inset 0 0 0 5px rgba(255,255,255,.90)!important; } /* Image itself remains square */ .ceej-editorial .featured-grid .featured-card .avatar-wrap img, .ceej-editorial .featured-grid .featured-card .avatar-wrap img.profile-photo, .ceej-editorial .featured-grid .featured-card > img.profile-photo{ position:relative!important; z-index:2!important; display:block!important; width:100%!important; height:100%!important; min-width:100%!important; min-height:100%!important; max-width:none!important; max-height:none!important; margin:0!important; padding:0!important; box-sizing:border-box!important; object-fit:cover!important; object-position:center top!important; border:0!important; outline:0!important; border-radius:0!important; box-shadow:none!important; transform:none!important; transition:transform .45s ease!important; } /* Elegant zoom only inside the square frame */ .ceej-editorial .featured-grid .featured-card:hover .avatar-wrap img, .ceej-editorial .featured-grid .featured-card:hover .avatar-wrap img.profile-photo{ width:100%!important; height:100%!important; border-radius:0!important; transform:scale(1.035)!important; } /* ---------------------------------------------------------- INFORMATION AREA ---------------------------------------------------------- */ .ceej-editorial .featured-grid .featured-card .featured-info{ position:relative!important; z-index:3!important; flex:1 1 auto!important; min-width:0!important; padding:4px 0!important; } /* Existing .position OR newer .role-badge */ .ceej-editorial .featured-grid .featured-card .position, .ceej-editorial .featured-grid .featured-card .role-badge{ display:inline-flex!important; align-items:center!important; justify-content:center!important; min-height:30px!important; margin:0 0 10px!important; padding:6px 14px!important; box-sizing:border-box!important; background:#ECF8F0!important; color:#176B38!important; border:1px solid #D5ECDC!important; border-radius:999px!important; font-size:11px!important; font-weight:900!important; letter-spacing:.10em!important; line-height:1.2!important; text-transform:uppercase!important; } .ceej-editorial .featured-grid .featured-card:nth-child(2) .position, .ceej-editorial .featured-grid .featured-card:nth-child(2) .role-badge{ background:#FFF5D6!important; color:#946D05!important; border-color:#F0DFAB!important; } /* Name */ .ceej-editorial .featured-grid .featured-card .featured-info h3{ margin:0 0 8px!important; padding:0!important; color:#176B38!important; font-size:29px!important; line-height:1.18!important; font-weight:850!important; letter-spacing:-.025em!important; } .ceej-editorial .featured-grid .featured-card:nth-child(2) .featured-info h3{ color:#1F7A3D!important; } /* Institution */ .ceej-editorial .featured-grid .featured-card .institution{ margin:0 0 10px!important; color:#69776F!important; font-size:14px!important; line-height:1.55!important; } /* Country row */ .ceej-editorial .featured-grid .featured-card .country{ display:flex!important; align-items:center!important; gap:8px!important; margin:0 0 13px!important; color:#647168!important; font-size:13px!important; font-weight:700!important; } /* ---------------------------------------------------------- ACADEMIC PROFILE BADGES ---------------------------------------------------------- */ .ceej-editorial .featured-grid .featured-card .profile-links.academic-links{ display:flex!important; align-items:center!important; justify-content:flex-start!important; flex-wrap:wrap!important; gap:8px!important; margin:0!important; padding:0!important; } .ceej-editorial .featured-grid .featured-card .profile-links.academic-links .academic-badge{ display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:5px!important; min-width:0!important; min-height:42px!important; height:42px!important; padding:5px 12px!important; box-sizing:border-box!important; background:rgba(255,255,255,.94)!important; border:1px solid #D7E8DC!important; border-radius:999px!important; color:#35503E!important; text-decoration:none!important; font-size:11px!important; font-weight:800!important; box-shadow:0 4px 12px rgba(23,107,56,.06)!important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease!important; } .ceej-editorial .featured-grid .featured-card:nth-child(2) .profile-links.academic-links .academic-badge{ border-color:#E8DEBE!important; } .ceej-editorial .featured-grid .featured-card .profile-links.academic-links .academic-badge:hover{ transform:translateY(-2px)!important; border-color:#A9D1B4!important; box-shadow:0 8px 18px rgba(23,107,56,.12)!important; } .ceej-editorial .featured-grid .featured-card:nth-child(2) .profile-links.academic-links .academic-badge:hover{ border-color:#DDBE63!important; box-shadow:0 8px 18px rgba(184,121,0,.11)!important; } .ceej-editorial .featured-grid .featured-card .profile-links.academic-links .academic-badge img{ display:block!important; width:auto!important; height:28px!important; max-width:92px!important; max-height:28px!important; margin:0!important; padding:0!important; object-fit:contain!important; transform:none!important; } .ceej-editorial .featured-grid .featured-card .profile-links.academic-links .academic-badge.orcid img{ width:27px!important; height:27px!important; max-width:27px!important; max-height:27px!important; } /* ---------------------------------------------------------- TABLET ---------------------------------------------------------- */ @media(max-width:991px){ .ceej-editorial .featured-grid .featured-card{ gap:22px!important; min-height:220px!important; padding:15px 20px 15px 15px!important; } .ceej-editorial .featured-grid .featured-card .avatar-wrap{ flex:0 0 190px!important; width:190px!important; height:190px!important; border-radius:14px!important; } .ceej-editorial .featured-grid .featured-card .featured-info h3{ font-size:26px!important; } .ceej-editorial .featured-grid .featured-card .profile-links.academic-links{ gap:6px!important; } } /* ---------------------------------------------------------- MOBILE ---------------------------------------------------------- */ @media(max-width:600px){ .ceej-editorial .featured-grid{ gap:18px!important; } .ceej-editorial .featured-grid .featured-card{ display:block!important; min-height:0!important; padding:14px!important; text-align:center!important; border-left-width:5px!important; border-radius:18px!important; } .ceej-editorial .featured-grid .featured-card .avatar-wrap{ width:190px!important; height:190px!important; margin:0 auto 18px!important; border-radius:14px!important; } .ceej-editorial .featured-grid .featured-card .featured-info{ width:100%!important; padding:0 3px 5px!important; } .ceej-editorial .featured-grid .featured-card .position, .ceej-editorial .featured-grid .featured-card .role-badge{ margin-left:auto!important; margin-right:auto!important; } .ceej-editorial .featured-grid .featured-card .featured-info h3{ font-size:24px!important; } .ceej-editorial .featured-grid .featured-card .institution{ font-size:13px!important; margin-bottom:9px!important; } .ceej-editorial .featured-grid .featured-card .country{ justify-content:center!important; margin-bottom:13px!important; } .ceej-editorial .featured-grid .featured-card .profile-links.academic-links{ justify-content:center!important; gap:6px!important; } .ceej-editorial .featured-grid .featured-card .profile-links.academic-links .academic-badge{ min-height:40px!important; height:40px!important; padding:4px 9px!important; font-size:10px!important; } .ceej-editorial .featured-grid .featured-card .profile-links.academic-links .academic-badge img{ height:25px!important; max-height:25px!important; max-width:84px!important; } .ceej-editorial .featured-grid .featured-card .profile-links.academic-links .academic-badge.orcid img{ width:25px!important; height:25px!important; max-width:25px!important; max-height:25px!important; } } /* ---------------------------------------------------------- VERY SMALL MOBILE ---------------------------------------------------------- */ @media(max-width:400px){ .ceej-editorial .featured-grid .featured-card .avatar-wrap{ width:165px!important; height:165px!important; } .ceej-editorial .featured-grid .featured-card .featured-info h3{ font-size:22px!important; } .ceej-editorial .featured-grid .featured-card .profile-links.academic-links .academic-badge{ padding:4px 7px!important; } } /* ---------------------------------------------------------- REDUCED MOTION ---------------------------------------------------------- */ @media(prefers-reduced-motion:reduce){ .ceej-editorial .featured-grid .featured-card, .ceej-editorial .featured-grid .featured-card .avatar-wrap img, .ceej-editorial .featured-grid .featured-card .profile-links.academic-links .academic-badge{ transition:none!important; } .ceej-editorial .featured-grid .featured-card:hover{ transform:none!important; } .ceej-editorial .featured-grid .featured-card:hover .avatar-wrap img{ transform:none!important; } } /* ---------------------------------------------------------- PROTECT BOARD + SUPPORT PHOTOS ---------------------------------------------------------- */ .ceej-editorial .board-card .avatar-circle, .ceej-editorial .role-card .avatar-circle.small{ border-radius:50%!important; } .ceej-editorial .board-card .avatar-circle img, .ceej-editorial .role-card .avatar-circle.small img{ border-radius:50%!important; } /* ========================================================== CEEJ — COMPACT LEADERSHIP CARDS V3 EIC + JOURNAL MANAGER ---------------------------------------------------------- Diperkecil berdasarkan tampilan terbaru: - Foto: 180 x 180 px - Card lebih pendek dan compact - Jarak foto dan informasi diperkecil - Nama dan badge diperkecil - Editorial Board & Journal Support TIDAK berubah ========================================================== */ .ceej-editorial .featured-grid{ grid-template-columns:1fr!important; gap:18px!important; } .ceej-editorial .featured-grid .featured-card{ gap:20px!important; min-height:204px!important; padding:12px 20px 12px 12px!important; border-radius:18px!important; border-left-width:5px!important; } /* Foto EIC + Journal Manager */ .ceej-editorial .featured-grid .featured-card .avatar-wrap{ flex:0 0 180px!important; width:180px!important; height:180px!important; border-radius:13px!important; box-shadow: 0 6px 16px rgba(23,107,56,.10), inset 0 0 0 4px rgba(255,255,255,.88)!important; } /* Foto tetap square */ .ceej-editorial .featured-grid .featured-card .avatar-wrap img, .ceej-editorial .featured-grid .featured-card .avatar-wrap img.profile-photo, .ceej-editorial .featured-grid .featured-card > img.profile-photo{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:center top!important; border-radius:0!important; } /* Label posisi */ .ceej-editorial .featured-grid .featured-card .position, .ceej-editorial .featured-grid .featured-card .role-badge{ min-height:27px!important; margin-bottom:7px!important; padding:5px 12px!important; font-size:10px!important; letter-spacing:.08em!important; } /* Nama */ .ceej-editorial .featured-grid .featured-card .featured-info h3{ margin-bottom:5px!important; font-size:25px!important; line-height:1.15!important; } /* Institusi */ .ceej-editorial .featured-grid .featured-card .institution{ margin-bottom:7px!important; font-size:13px!important; line-height:1.4!important; } /* Country */ .ceej-editorial .featured-grid .featured-card .country{ margin-bottom:9px!important; font-size:12px!important; gap:7px!important; } /* Academic badges */ .ceej-editorial .featured-grid .featured-card .profile-links.academic-links{ gap:6px!important; } .ceej-editorial .featured-grid .featured-card .profile-links.academic-links .academic-badge{ min-height:37px!important; height:37px!important; padding:4px 9px!important; font-size:10px!important; border-radius:999px!important; } .ceej-editorial .featured-grid .featured-card .profile-links.academic-links .academic-badge img{ height:24px!important; max-height:24px!important; max-width:82px!important; } .ceej-editorial .featured-grid .featured-card .profile-links.academic-links .academic-badge.orcid img{ width:24px!important; height:24px!important; max-width:24px!important; max-height:24px!important; } /* Hover lebih halus */ .ceej-editorial .featured-grid .featured-card:hover{ transform:translateY(-3px)!important; box-shadow: 0 12px 26px rgba(23,107,56,.11), 0 3px 8px rgba(23,107,56,.04)!important; } /* Tablet */ @media(max-width:991px){ .ceej-editorial .featured-grid .featured-card{ gap:18px!important; min-height:194px!important; padding:10px 16px 10px 10px!important; } .ceej-editorial .featured-grid .featured-card .avatar-wrap{ flex:0 0 165px!important; width:165px!important; height:165px!important; border-radius:12px!important; } .ceej-editorial .featured-grid .featured-card .featured-info h3{ font-size:23px!important; } } /* Mobile */ @media(max-width:600px){ .ceej-editorial .featured-grid{ gap:15px!important; } .ceej-editorial .featured-grid .featured-card{ display:block!important; min-height:0!important; padding:12px!important; text-align:center!important; border-radius:16px!important; } .ceej-editorial .featured-grid .featured-card .avatar-wrap{ width:160px!important; height:160px!important; margin:0 auto 14px!important; border-radius:12px!important; } .ceej-editorial .featured-grid .featured-card .featured-info{ padding:0 2px 3px!important; } .ceej-editorial .featured-grid .featured-card .featured-info h3{ font-size:22px!important; } .ceej-editorial .featured-grid .featured-card .institution{ font-size:12.5px!important; } .ceej-editorial .featured-grid .featured-card .country{ justify-content:center!important; } .ceej-editorial .featured-grid .featured-card .profile-links.academic-links{ justify-content:center!important; } .ceej-editorial .featured-grid .featured-card .profile-links.academic-links .academic-badge{ min-height:35px!important; height:35px!important; padding:4px 8px!important; } .ceej-editorial .featured-grid .featured-card .profile-links.academic-links .academic-badge img{ height:22px!important; max-height:22px!important; } .ceej-editorial .featured-grid .featured-card .profile-links.academic-links .academic-badge.orcid img{ width:22px!important; height:22px!important; max-width:22px!important; max-height:22px!important; } } /* Very small mobile */ @media(max-width:400px){ .ceej-editorial .featured-grid .featured-card .avatar-wrap{ width:145px!important; height:145px!important; } .ceej-editorial .featured-grid .featured-card .featured-info h3{ font-size:20px!important; } } /* ========================================================== CEEJ — ACADEMIC BADGE DUPLICATE TEXT FIX ---------------------------------------------------------- Scopus / SINTA / Google Scholar images already contain their own visible brand names. Hide the duplicate HTML text while keeping the image and aria-label accessible. ORCID keeps its text because the ORCID image is icon-only. ========================================================== */ .ceej-editorial .profile-links.academic-links .academic-badge.scopus, .ceej-editorial .profile-links.academic-links .academic-badge.sinta, .ceej-editorial .profile-links.academic-links .academic-badge.scholar{ font-size:0!important; line-height:0!important; gap:0!important; } .ceej-editorial .profile-links.academic-links .academic-badge.scopus img, .ceej-editorial .profile-links.academic-links .academic-badge.sinta img, .ceej-editorial .profile-links.academic-links .academic-badge.scholar img{ display:block!important; margin:0!important; } /* Leadership badges: keep a compact, balanced width */ .ceej-editorial .featured-grid .featured-card .academic-badge.scopus, .ceej-editorial .featured-grid .featured-card .academic-badge.sinta, .ceej-editorial .featured-grid .featured-card .academic-badge.scholar{ justify-content:center!important; } /* ORCID: icon + single ORCID label */ .ceej-editorial .profile-links.academic-links .academic-badge.orcid{ font-size:10px!important; line-height:1.2!important; } /* ========================================================== CEEJ V4 — UNIFIED ACADEMIC PROFILE BADGES ---------------------------------------------------------- Target: - Editor in Chief - Journal Manager - Editorial Board - Journal Support Team Tujuan: - Semua icon akademik memakai gaya yang sama. - Siap untuk 4 platform: Scopus SINTA Google Scholar ORCID - URL dapat dilengkapi kemudian pada HTML. - Logo Scopus/SINTA/Scholar tidak menampilkan label teks kedua jika logo gambarnya sudah mengandung nama platform. - ORCID tetap dapat menampilkan label ORCID karena icon ORCID yang digunakan hanya berupa simbol iD. ========================================================== */ /* ---------------------------------------------------------- 1. COMMON ACADEMIC LINKS ---------------------------------------------------------- */ .ceej-editorial .profile-links.academic-links{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:8px!important; } /* ---------------------------------------------------------- 2. COMMON ACADEMIC BADGE ---------------------------------------------------------- */ .ceej-editorial .academic-badge{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; min-width:0!important; min-height:40px!important; height:40px!important; padding:5px 11px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid #DCEBE1!important; border-radius:999px!important; text-decoration:none!important; color:#31513E!important; font-size:0!important; font-weight:700!important; line-height:1!important; white-space:nowrap!important; box-shadow: 0 4px 12px rgba(23,107,56,.07)!important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease!important; } /* ---------------------------------------------------------- 3. COMMON LOGO SIZE ---------------------------------------------------------- */ .ceej-editorial .academic-badge img{ display:block!important; width:auto!important; height:27px!important; max-width:105px!important; max-height:27px!important; margin:0!important; padding:0!important; object-fit:contain!important; border:0!important; } /* ---------------------------------------------------------- 4. SCOPUS ---------------------------------------------------------- */ .ceej-editorial .academic-badge.scopus{ min-width:78px!important; } .ceej-editorial .academic-badge.scopus img{ height:28px!important; max-height:28px!important; max-width:105px!important; } /* ---------------------------------------------------------- 5. SINTA ---------------------------------------------------------- */ .ceej-editorial .academic-badge.sinta{ min-width:82px!important; } .ceej-editorial .academic-badge.sinta img{ height:28px!important; max-height:28px!important; max-width:105px!important; } /* ---------------------------------------------------------- 6. GOOGLE SCHOLAR ---------------------------------------------------------- */ .ceej-editorial .academic-badge.scholar{ min-width:88px!important; } .ceej-editorial .academic-badge.scholar img{ height:28px!important; max-height:28px!important; max-width:105px!important; } /* ---------------------------------------------------------- 7. ORCID ---------------------------------------------------------- */ .ceej-editorial .academic-badge.orcid{ min-width:78px!important; font-size:12px!important; } .ceej-editorial .academic-badge.orcid img{ width:27px!important; height:27px!important; max-width:27px!important; max-height:27px!important; margin-right:5px!important; } /* ---------------------------------------------------------- 8. REMOVE DUPLICATE TEXT ---------------------------------------------------------- Scopus/SINTA/Scholar logos already contain their own text. Therefore the text node after the image should not be shown. This CSS supports the existing HTML while the HTML is being gradually cleaned. ORCID is intentionally excluded. ---------------------------------------------------------- */ .ceej-editorial .academic-badge.scopus, .ceej-editorial .academic-badge.sinta, .ceej-editorial .academic-badge.scholar{ font-size:0!important; } /* ---------------------------------------------------------- 9. HOVER ---------------------------------------------------------- */ .ceej-editorial .academic-badge:hover{ transform:translateY(-2px)!important; border-color:#B9D8C3!important; box-shadow: 0 8px 18px rgba(23,107,56,.13)!important; } /* ---------------------------------------------------------- 10. EIC + JOURNAL MANAGER ---------------------------------------------------------- */ .ceej-editorial .featured-card .profile-links.academic-links{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:8px!important; } .ceej-editorial .featured-card .academic-badge{ min-height:40px!important; height:40px!important; padding:5px 11px!important; } .ceej-editorial .featured-card .academic-badge img{ height:28px!important; max-height:28px!important; } /* ---------------------------------------------------------- 11. EDITORIAL BOARD ---------------------------------------------------------- */ .ceej-editorial .board-card .profile-links.academic-links{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:7px!important; } .ceej-editorial .board-card .academic-badge{ min-height:40px!important; height:40px!important; padding:5px 10px!important; } .ceej-editorial .board-card .academic-badge img{ height:27px!important; max-height:27px!important; max-width:100px!important; } /* ---------------------------------------------------------- 12. JOURNAL SUPPORT ---------------------------------------------------------- */ .ceej-editorial .role-card .profile-links.academic-links{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:7px!important; } .ceej-editorial .role-card .academic-badge{ min-height:40px!important; height:40px!important; padding:5px 10px!important; } .ceej-editorial .role-card .academic-badge img{ height:27px!important; max-height:27px!important; max-width:100px!important; } /* ---------------------------------------------------------- 13. IF YOU ADD ALL FOUR LINKS LATER ---------------------------------------------------------- The four badges will automatically remain in one compact, consistent row when space permits and wrap naturally when necessary. HTML pattern: Scopus SINTA Google Scholar ORCID ORCID ---------------------------------------------------------- */ /* ---------------------------------------------------------- 14. MOBILE ---------------------------------------------------------- */ @media(max-width:600px){ .ceej-editorial .profile-links.academic-links{ gap:6px!important; } .ceej-editorial .academic-badge{ min-height:38px!important; height:38px!important; padding:4px 8px!important; } .ceej-editorial .academic-badge img{ height:25px!important; max-height:25px!important; max-width:92px!important; } .ceej-editorial .academic-badge.scopus img, .ceej-editorial .academic-badge.sinta img, .ceej-editorial .academic-badge.scholar img{ height:25px!important; max-height:25px!important; } .ceej-editorial .academic-badge.orcid{ font-size:11px!important; } .ceej-editorial .academic-badge.orcid img{ width:25px!important; height:25px!important; max-width:25px!important; max-height:25px!important; } } /* ---------------------------------------------------------- 15. REDUCED MOTION ---------------------------------------------------------- */ @media(prefers-reduced-motion:reduce){ .ceej-editorial .academic-badge{ transition:none!important; } .ceej-editorial .academic-badge:hover{ transform:none!important; } } /* ========================================================== CEEJ — FINAL ORCID / ACADEMIC BADGE LAYOUT FIX ---------------------------------------------------------- Purpose: - Prevent ORCID badge from being cut off in Editorial Board. - Keep all 4 academic icons visible. - Keep Scopus/SINTA/Scholar without duplicate text. - Preserve the existing EIC and Journal Manager layout. - Editorial Board badges become more compact so they fit inside the available card width. ========================================================== */ /* ---------------------------------------------------------- 1. BOARD CARD — ALLOW CONTENT TO SHRINK CORRECTLY ---------------------------------------------------------- */ .ceej-editorial .board-card{ overflow:visible!important; min-width:0!important; box-sizing:border-box!important; } .ceej-editorial .board-card .board-info{ flex:1 1 auto!important; min-width:0!important; max-width:100%!important; box-sizing:border-box!important; } /* ---------------------------------------------------------- 2. BOARD PROFILE LINKS ---------------------------------------------------------- */ .ceej-editorial .board-card .profile-links.academic-links{ width:100%!important; max-width:100%!important; min-width:0!important; display:flex!important; flex-wrap:wrap!important; align-items:center!important; gap:6px!important; overflow:visible!important; box-sizing:border-box!important; } /* ---------------------------------------------------------- 3. BOARD BADGES — COMPACT DESKTOP SIZE ---------------------------------------------------------- */ .ceej-editorial .board-card .academic-badge{ flex:0 0 auto!important; height:36px!important; min-height:36px!important; max-height:36px!important; min-width:0!important; width:auto!important; max-width:none!important; padding:4px 7px!important; box-sizing:border-box!important; } /* ---------------------------------------------------------- 4. SCOPUS — BOARD ---------------------------------------------------------- */ .ceej-editorial .board-card .academic-badge.scopus{ min-width:68px!important; } .ceej-editorial .board-card .academic-badge.scopus img{ width:auto!important; height:23px!important; max-height:23px!important; max-width:72px!important; } /* ---------------------------------------------------------- 5. SINTA — BOARD ---------------------------------------------------------- */ .ceej-editorial .board-card .academic-badge.sinta{ min-width:72px!important; } .ceej-editorial .board-card .academic-badge.sinta img{ width:auto!important; height:23px!important; max-height:23px!important; max-width:78px!important; } /* ---------------------------------------------------------- 6. GOOGLE SCHOLAR — BOARD ---------------------------------------------------------- */ .ceej-editorial .board-card .academic-badge.scholar{ min-width:76px!important; } .ceej-editorial .board-card .academic-badge.scholar img{ width:auto!important; height:23px!important; max-height:23px!important; max-width:78px!important; } /* ---------------------------------------------------------- 7. ORCID — BOARD ---------------------------------------------------------- */ .ceej-editorial .board-card .academic-badge.orcid{ flex:0 0 auto!important; width:auto!important; min-width:68px!important; max-width:82px!important; height:36px!important; min-height:36px!important; max-height:36px!important; padding:4px 7px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:4px!important; font-size:10px!important; line-height:1!important; white-space:nowrap!important; overflow:visible!important; } .ceej-editorial .board-card .academic-badge.orcid img{ flex:0 0 auto!important; width:22px!important; height:22px!important; max-width:22px!important; max-height:22px!important; margin:0!important; } /* ---------------------------------------------------------- 8. PREVENT GLOBAL IMAGE HOVER FROM DISTORTING BADGES ---------------------------------------------------------- */ .ceej-editorial .board-card .academic-badge img:hover{ transform:none!important; } /* ---------------------------------------------------------- 9. TABLET ---------------------------------------------------------- */ @media(max-width:991px){ .ceej-editorial .board-card .board-info{ min-width:0!important; width:auto!important; } .ceej-editorial .board-card .profile-links.academic-links{ gap:5px!important; } .ceej-editorial .board-card .academic-badge{ height:35px!important; min-height:35px!important; max-height:35px!important; padding:3px 6px!important; } .ceej-editorial .board-card .academic-badge.scopus{ min-width:64px!important; } .ceej-editorial .board-card .academic-badge.sinta{ min-width:68px!important; } .ceej-editorial .board-card .academic-badge.scholar{ min-width:72px!important; } .ceej-editorial .board-card .academic-badge.orcid{ min-width:64px!important; max-width:78px!important; height:35px!important; min-height:35px!important; font-size:9.5px!important; } .ceej-editorial .board-card .academic-badge.scopus img, .ceej-editorial .board-card .academic-badge.sinta img, .ceej-editorial .board-card .academic-badge.scholar img{ height:22px!important; max-height:22px!important; } .ceej-editorial .board-card .academic-badge.orcid img{ width:21px!important; height:21px!important; max-width:21px!important; max-height:21px!important; } } /* ---------------------------------------------------------- 10. MOBILE ---------------------------------------------------------- */ @media(max-width:600px){ .ceej-editorial .board-card .profile-links.academic-links{ width:100%!important; flex-wrap:wrap!important; gap:5px!important; } .ceej-editorial .board-card .academic-badge{ height:35px!important; min-height:35px!important; max-height:35px!important; padding:3px 6px!important; } .ceej-editorial .board-card .academic-badge.scopus{ min-width:64px!important; } .ceej-editorial .board-card .academic-badge.sinta{ min-width:68px!important; } .ceej-editorial .board-card .academic-badge.scholar{ min-width:72px!important; } .ceej-editorial .board-card .academic-badge.orcid{ min-width:64px!important; max-width:78px!important; font-size:9.5px!important; } .ceej-editorial .board-card .academic-badge.scopus img, .ceej-editorial .board-card .academic-badge.sinta img, .ceej-editorial .board-card .academic-badge.scholar img{ height:22px!important; max-height:22px!important; } .ceej-editorial .board-card .academic-badge.orcid img{ width:21px!important; height:21px!important; max-width:21px!important; max-height:21px!important; } } /* ---------------------------------------------------------- 11. VERY SMALL MOBILE ---------------------------------------------------------- */ @media(max-width:430px){ .ceej-editorial .board-card .profile-links.academic-links{ justify-content:center!important; } .ceej-editorial .board-card .academic-badge{ height:34px!important; min-height:34px!important; } .ceej-editorial .board-card .academic-badge.orcid{ min-width:62px!important; max-width:76px!important; font-size:9px!important; } } /* ========================================================== CEEJ — DEFINITIVE FIX: ORCID MUST NOT BE CLIPPED ---------------------------------------------------------- The Editorial Board cards do not have enough horizontal space for four large academic badges in one row. Therefore: - Scopus, SINTA and Google Scholar stay on row 1. - ORCID is deliberately placed on row 2. - ORCID is fully visible. - No horizontal overflow is allowed. - EIC / Journal Manager badges are NOT affected. ========================================================== */ /* ---------------------------------------------------------- 1. EDITORIAL BOARD PROFILE AREA ---------------------------------------------------------- */ .ceej-editorial .board-card .profile-links.academic-links{ display:grid!important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr)!important; grid-auto-rows:auto!important; align-items:center!important; justify-items:start!important; width:100%!important; max-width:100%!important; min-width:0!important; gap:6px!important; overflow:visible!important; box-sizing:border-box!important; } /* ---------------------------------------------------------- 2. ALL BOARD BADGES ---------------------------------------------------------- */ .ceej-editorial .board-card .academic-badge{ display:inline-flex!important; width:100%!important; min-width:0!important; max-width:100%!important; height:36px!important; min-height:36px!important; max-height:36px!important; padding:3px 6px!important; box-sizing:border-box!important; justify-content:center!important; overflow:hidden!important; } /* ---------------------------------------------------------- 3. SCOPUS ---------------------------------------------------------- */ .ceej-editorial .board-card .academic-badge.scopus img{ width:auto!important; height:22px!important; max-width:100%!important; max-height:22px!important; object-fit:contain!important; } /* ---------------------------------------------------------- 4. SINTA ---------------------------------------------------------- */ .ceej-editorial .board-card .academic-badge.sinta img{ width:auto!important; height:22px!important; max-width:100%!important; max-height:22px!important; object-fit:contain!important; } /* ---------------------------------------------------------- 5. GOOGLE SCHOLAR ---------------------------------------------------------- */ .ceej-editorial .board-card .academic-badge.scholar img{ width:auto!important; height:22px!important; max-width:100%!important; max-height:22px!important; object-fit:contain!important; } /* ---------------------------------------------------------- 6. ORCID — FORCE TO SECOND ROW ---------------------------------------------------------- */ .ceej-editorial .board-card .academic-badge.orcid{ grid-column:1!important; grid-row:2!important; width:100%!important; min-width:0!important; max-width:100%!important; height:36px!important; min-height:36px!important; max-height:36px!important; display:inline-flex!important; align-items:center!important; justify-content:center!important; gap:4px!important; padding:3px 8px!important; font-size:10px!important; line-height:1!important; white-space:nowrap!important; overflow:hidden!important; box-sizing:border-box!important; } .ceej-editorial .board-card .academic-badge.orcid img{ flex:0 0 auto!important; width:22px!important; height:22px!important; max-width:22px!important; max-height:22px!important; margin:0!important; object-fit:contain!important; } /* ---------------------------------------------------------- 7. BOARD INFO MUST NOT CREATE HORIZONTAL OVERFLOW ---------------------------------------------------------- */ .ceej-editorial .board-card .board-info{ min-width:0!important; width:auto!important; max-width:100%!important; flex:1 1 auto!important; box-sizing:border-box!important; } .ceej-editorial .board-card{ min-width:0!important; overflow:visible!important; box-sizing:border-box!important; } /* ---------------------------------------------------------- 8. MOBILE — TWO COLUMNS ---------------------------------------------------------- */ @media(max-width:600px){ .ceej-editorial .board-card .profile-links.academic-links{ grid-template-columns: minmax(0, 1fr) minmax(0, 1fr)!important; gap:5px!important; } .ceej-editorial .board-card .academic-badge{ height:35px!important; min-height:35px!important; max-height:35px!important; } .ceej-editorial .board-card .academic-badge.orcid{ grid-column:1!important; grid-row:2!important; height:35px!important; min-height:35px!important; } .ceej-editorial .board-card .academic-badge.scopus img, .ceej-editorial .board-card .academic-badge.sinta img, .ceej-editorial .board-card .academic-badge.scholar img{ height:21px!important; max-height:21px!important; } .ceej-editorial .board-card .academic-badge.orcid img{ width:21px!important; height:21px!important; max-width:21px!important; max-height:21px!important; } } /* ---------------------------------------------------------- 9. VERY SMALL MOBILE — ONE COLUMN ---------------------------------------------------------- */ @media(max-width:430px){ .ceej-editorial .board-card .profile-links.academic-links{ grid-template-columns:1fr!important; } .ceej-editorial .board-card .academic-badge.orcid{ grid-column:1!important; grid-row:auto!important; } } /* ========================================================== CEEJ — FINAL ORCID VISIBILITY FIX ---------------------------------------------------------- Purpose: - Prevent the ORCID badge from being cut off. - Keep Scopus + SINTA + Google Scholar on row 1. - Force ORCID to row 2. - Make the Editorial Board card height follow its content. - Do NOT affect Editor in Chief / Journal Manager. ========================================================== */ /* ---------- BOARD CARD: AUTO HEIGHT ---------- */ .ceej-editorial .board-grid .board-card{ height:auto!important; min-height:245px!important; max-height:none!important; overflow:visible!important; box-sizing:border-box!important; } /* ---------- BOARD INFO ---------- */ .ceej-editorial .board-grid .board-card .board-info{ flex:1 1 auto!important; min-width:0!important; width:auto!important; max-width:100%!important; overflow:visible!important; box-sizing:border-box!important; } /* ---------- PROFILE LINKS: 3 + 1 GRID ---------- */ .ceej-editorial .board-grid .board-card .profile-links.academic-links{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; grid-template-rows:auto auto!important; width:100%!important; min-width:0!important; max-width:100%!important; gap:7px!important; margin-top:12px!important; align-items:center!important; justify-items:stretch!important; overflow:visible!important; box-sizing:border-box!important; } /* ---------- ALL BOARD BADGES ---------- */ .ceej-editorial .board-grid .board-card .academic-badge{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-width:0!important; max-width:100%!important; height:36px!important; min-height:36px!important; max-height:36px!important; padding:3px 6px!important; margin:0!important; box-sizing:border-box!important; overflow:visible!important; white-space:nowrap!important; } /* ---------- FIRST THREE BADGES ---------- */ .ceej-editorial .board-grid .board-card .academic-badge.scopus{ grid-column:1!important; grid-row:1!important; } .ceej-editorial .board-grid .board-card .academic-badge.sinta{ grid-column:2!important; grid-row:1!important; } .ceej-editorial .board-grid .board-card .academic-badge.scholar{ grid-column:3!important; grid-row:1!important; } /* ---------- ORCID: SECOND ROW ---------- */ .ceej-editorial .board-grid .board-card .academic-badge.orcid{ grid-column:1!important; grid-row:2!important; width:100%!important; min-width:0!important; max-width:100%!important; height:36px!important; min-height:36px!important; max-height:36px!important; display:flex!important; align-items:center!important; justify-content:center!important; padding:3px 10px!important; margin:0!important; font-size:10px!important; line-height:1!important; white-space:nowrap!important; overflow:visible!important; box-sizing:border-box!important; } /* ---------- LOGOS ---------- */ .ceej-editorial .board-grid .board-card .academic-badge.scopus img, .ceej-editorial .board-grid .board-card .academic-badge.sinta img, .ceej-editorial .board-grid .board-card .academic-badge.scholar img{ display:block!important; width:auto!important; height:22px!important; max-width:100%!important; max-height:22px!important; object-fit:contain!important; margin:0!important; } .ceej-editorial .board-grid .board-card .academic-badge.orcid img{ display:block!important; flex:0 0 auto!important; width:22px!important; height:22px!important; max-width:22px!important; max-height:22px!important; object-fit:contain!important; margin:0!important; } /* ---------- PREVENT GLOBAL IMAGE HOVER FROM MOVING BADGES ---------- */ .ceej-editorial .board-grid .board-card .academic-badge img:hover{ transform:none!important; } /* ---------- TABLET ---------- */ @media(max-width:900px){ .ceej-editorial .board-grid .board-card{ min-height:245px!important; height:auto!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:6px!important; } } /* ---------- MOBILE ---------- */ @media(max-width:600px){ .ceej-editorial .board-grid .board-card{ min-height:0!important; height:auto!important; overflow:visible!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links{ grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-rows:auto auto!important; gap:6px!important; } .ceej-editorial .board-grid .board-card .academic-badge{ height:35px!important; min-height:35px!important; max-height:35px!important; } .ceej-editorial .board-grid .board-card .academic-badge.scopus{ grid-column:1!important; grid-row:1!important; } .ceej-editorial .board-grid .board-card .academic-badge.sinta{ grid-column:2!important; grid-row:1!important; } .ceej-editorial .board-grid .board-card .academic-badge.scholar{ grid-column:1!important; grid-row:2!important; } .ceej-editorial .board-grid .board-card .academic-badge.orcid{ grid-column:2!important; grid-row:2!important; height:35px!important; min-height:35px!important; max-height:35px!important; } .ceej-editorial .board-grid .board-card .academic-badge.scopus img, .ceej-editorial .board-grid .board-card .academic-badge.sinta img, .ceej-editorial .board-grid .board-card .academic-badge.scholar img{ height:21px!important; max-height:21px!important; } .ceej-editorial .board-grid .board-card .academic-badge.orcid img{ width:21px!important; height:21px!important; max-width:21px!important; max-height:21px!important; } } /* ---------- VERY SMALL MOBILE ---------- */ @media(max-width:430px){ .ceej-editorial .board-grid .board-card .profile-links.academic-links{ grid-template-columns:1fr!important; grid-template-rows:auto!important; } .ceej-editorial .board-grid .board-card .academic-badge.scopus, .ceej-editorial .board-grid .board-card .academic-badge.sinta, .ceej-editorial .board-grid .board-card .academic-badge.scholar, .ceej-editorial .board-grid .board-card .academic-badge.orcid{ grid-column:1!important; grid-row:auto!important; } } /* ========================================================== CEEJ — FINAL REVISION EDITORIAL BOARD ACADEMIC PROFILES — 4 BADGES IN ONE ROW ---------------------------------------------------------- Desktop / Tablet: Scopus | SINTA | Google Scholar | ORCID The four academic profile badges are kept on the same row by reducing their individual width. This applies ONLY to Editorial Board cards. ---------------------------------------------------------- */ /* Editorial Board profile container */ .ceej-editorial .board-grid .board-card .profile-links.academic-links{ display:grid!important; grid-template-columns: repeat(4,minmax(0,1fr))!important; grid-template-rows:1fr!important; width:100%!important; max-width:100%!important; min-width:0!important; gap:6px!important; margin-top:12px!important; padding:0!important; align-items:center!important; justify-items:stretch!important; overflow:visible!important; box-sizing:border-box!important; } /* All four badges */ .ceej-editorial .board-grid .board-card .academic-badge{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-width:0!important; max-width:100%!important; height:34px!important; min-height:34px!important; max-height:34px!important; margin:0!important; padding:3px 4px!important; box-sizing:border-box!important; gap:3px!important; overflow:hidden!important; font-size:8px!important; line-height:1!important; white-space:nowrap!important; border-radius:999px!important; } /* Remove old forced ORCID second-row positioning */ .ceej-editorial .board-grid .board-card .academic-badge.scopus, .ceej-editorial .board-grid .board-card .academic-badge.sinta, .ceej-editorial .board-grid .board-card .academic-badge.scholar, .ceej-editorial .board-grid .board-card .academic-badge.orcid{ grid-column:auto!important; grid-row:1!important; } /* Scopus / SINTA / Scholar logos */ .ceej-editorial .board-grid .board-card .academic-badge.scopus img, .ceej-editorial .board-grid .board-card .academic-badge.sinta img, .ceej-editorial .board-grid .board-card .academic-badge.scholar img{ display:block!important; flex:0 1 auto!important; width:auto!important; height:18px!important; max-width:100%!important; max-height:18px!important; margin:0!important; object-fit:contain!important; transform:none!important; } /* ORCID */ .ceej-editorial .board-grid .board-card .academic-badge.orcid{ display:flex!important; align-items:center!important; justify-content:center!important; gap:3px!important; padding:3px 5px!important; font-size:8px!important; } .ceej-editorial .board-grid .board-card .academic-badge.orcid img{ display:block!important; flex:0 0 auto!important; width:18px!important; height:18px!important; max-width:18px!important; max-height:18px!important; margin:0!important; object-fit:contain!important; transform:none!important; } /* Prevent global image hover animation from disturbing badges */ .ceej-editorial .board-grid .board-card .academic-badge img:hover{ transform:none!important; } /* ---------------------------------------------------------- TABLET ---------------------------------------------------------- */ @media(max-width:900px){ .ceej-editorial .board-grid .board-card .profile-links.academic-links{ grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:5px!important; } .ceej-editorial .board-grid .board-card .academic-badge{ height:33px!important; min-height:33px!important; max-height:33px!important; padding:3px 3px!important; font-size:7.5px!important; } .ceej-editorial .board-grid .board-card .academic-badge.scopus img, .ceej-editorial .board-grid .board-card .academic-badge.sinta img, .ceej-editorial .board-grid .board-card .academic-badge.scholar img{ height:17px!important; max-height:17px!important; } .ceej-editorial .board-grid .board-card .academic-badge.orcid img{ width:17px!important; height:17px!important; max-width:17px!important; max-height:17px!important; } } /* ---------------------------------------------------------- MOBILE 2 x 2 is more readable than forcing four very small badges. ---------------------------------------------------------- */ @media(max-width:600px){ .ceej-editorial .board-grid .board-card .profile-links.academic-links{ grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-rows:auto auto!important; gap:6px!important; } .ceej-editorial .board-grid .board-card .academic-badge{ height:35px!important; min-height:35px!important; max-height:35px!important; padding:3px 6px!important; font-size:9px!important; } .ceej-editorial .board-grid .board-card .academic-badge.scopus{ grid-column:1!important; grid-row:1!important; } .ceej-editorial .board-grid .board-card .academic-badge.sinta{ grid-column:2!important; grid-row:1!important; } .ceej-editorial .board-grid .board-card .academic-badge.scholar{ grid-column:1!important; grid-row:2!important; } .ceej-editorial .board-grid .board-card .academic-badge.orcid{ grid-column:2!important; grid-row:2!important; font-size:9px!important; } .ceej-editorial .board-grid .board-card .academic-badge.scopus img, .ceej-editorial .board-grid .board-card .academic-badge.sinta img, .ceej-editorial .board-grid .board-card .academic-badge.scholar img{ height:20px!important; max-height:20px!important; } .ceej-editorial .board-grid .board-card .academic-badge.orcid img{ width:20px!important; height:20px!important; max-width:20px!important; max-height:20px!important; } } /* ---------------------------------------------------------- VERY SMALL MOBILE ---------------------------------------------------------- */ @media(max-width:430px){ .ceej-editorial .board-grid .board-card .profile-links.academic-links{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:5px!important; } .ceej-editorial .board-grid .board-card .academic-badge{ font-size:8px!important; } } /* ========================================================== CEEJ — FINAL SPACING FIX EDITORIAL BOARD — MOVE 4 ACADEMIC PROFILE BADGES DOWN ---------------------------------------------------------- The four badges remain in ONE ROW on desktop/tablet, but are moved farther below the institution line so the profile area looks cleaner and less crowded. ========================================================== */ .ceej-editorial .board-grid .board-card{ align-items:flex-start!important; } .ceej-editorial .board-grid .board-card .board-info{ padding-top:0!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links{ margin-top:42px!important; position:relative!important; top:0!important; } /* Keep four badges on one row for desktop/tablet */ @media (min-width:601px){ .ceej-editorial .board-grid .board-card .profile-links.academic-links{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; grid-template-rows:1fr!important; gap:6px!important; width:100%!important; } .ceej-editorial .board-grid .board-card .academic-badge{ grid-row:1!important; grid-column:auto!important; } } /* Mobile: 2 x 2, with a smaller vertical gap */ @media (max-width:600px){ .ceej-editorial .board-grid .board-card .profile-links.academic-links{ margin-top:24px!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-template-rows:auto auto!important; gap:6px!important; } .ceej-editorial .board-grid .board-card .academic-badge.scopus{ grid-column:1!important; grid-row:1!important; } .ceej-editorial .board-grid .board-card .academic-badge.sinta{ grid-column:2!important; grid-row:1!important; } .ceej-editorial .board-grid .board-card .academic-badge.scholar{ grid-column:1!important; grid-row:2!important; } .ceej-editorial .board-grid .board-card .academic-badge.orcid{ grid-column:2!important; grid-row:2!important; } } /* ========================================================== CEEJ — FINAL EDITORIAL BOARD BADGE FIX ---------------------------------------------------------- Fixes: 1. Four academic badges fit without overlapping. 2. Scopus / SINTA / Scholar / ORCID stay aligned. 3. Badges are positioned lower inside the card. 4. Old min-width / fixed-width rules are neutralized. 5. EIC and Journal Manager are NOT affected. ========================================================== */ /* ========================================================== DESKTOP 4 BADGES = ONE CLEAN ROW ========================================================== */ @media (min-width:901px){ /* Editorial Board card */ .ceej-editorial .board-grid .board-card{ overflow:visible!important; height:auto!important; min-height:300px!important; max-height:none!important; box-sizing:border-box!important; align-items:flex-start!important; } /* Information column */ .ceej-editorial .board-grid .board-card .board-info{ min-width:0!important; width:auto!important; max-width:100%!important; flex:1 1 auto!important; overflow:visible!important; box-sizing:border-box!important; } /* Academic profile container */ .ceej-editorial .board-grid .board-card .profile-links.academic-links{ display:grid!important; grid-template-columns: repeat(4,minmax(0,1fr))!important; grid-template-rows:1fr!important; gap:6px!important; width:100%!important; max-width:100%!important; min-width:0!important; margin-top:52px!important; padding:0!important; box-sizing:border-box!important; align-items:center!important; overflow:visible!important; } /* ALL BADGES Remove old fixed widths */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.scopus, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.sinta, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.scholar, .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.orcid{ grid-column:auto!important; grid-row:1!important; display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; flex:1 1 0!important; flex-basis:0!important; min-width:0!important; max-width:100%!important; height:36px!important; min-height:36px!important; max-height:36px!important; margin:0!important; padding:3px 3px!important; gap:3px!important; box-sizing:border-box!important; overflow:hidden!important; white-space:nowrap!important; font-size:9px!important; line-height:1!important; } /* Neutralize old min-width declarations */ .ceej-editorial .board-grid .academic-badge.scopus{ min-width:0!important; } .ceej-editorial .board-grid .academic-badge.sinta{ min-width:0!important; } .ceej-editorial .board-grid .academic-badge.scholar{ min-width:0!important; } .ceej-editorial .board-grid .academic-badge.orcid{ min-width:0!important; } /* Logos */ .ceej-editorial .board-grid .board-card .academic-badge img{ display:block!important; flex:0 1 auto!important; width:auto!important; height:20px!important; max-height:20px!important; max-width:55px!important; min-width:0!important; min-height:0!important; object-fit:contain!important; margin:0!important; transform:none!important; } /* ORCID logo */ .ceej-editorial .board-grid .board-card .academic-badge.orcid img{ flex:0 0 auto!important; width:20px!important; height:20px!important; max-width:20px!important; max-height:20px!important; } } /* ========================================================== TABLET 2 × 2 Prevents badges from becoming too narrow. ========================================================== */ @media (min-width:601px) and (max-width:900px){ .ceej-editorial .board-grid .board-card{ overflow:visible!important; height:auto!important; min-height:300px!important; max-height:none!important; box-sizing:border-box!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; grid-template-rows:auto auto!important; gap:7px!important; width:100%!important; min-width:0!important; margin-top:40px!important; box-sizing:border-box!important; overflow:visible!important; } .ceej-editorial .board-grid .board-card .academic-badge, .ceej-editorial .board-grid .board-card .academic-badge.scopus, .ceej-editorial .board-grid .board-card .academic-badge.sinta, .ceej-editorial .board-grid .board-card .academic-badge.scholar, .ceej-editorial .board-grid .board-card .academic-badge.orcid{ width:100%!important; min-width:0!important; max-width:100%!important; height:36px!important; min-height:36px!important; max-height:36px!important; padding:3px 5px!important; box-sizing:border-box!important; overflow:hidden!important; font-size:9px!important; } .ceej-editorial .board-grid .board-card .academic-badge.scopus{ grid-column:1!important; grid-row:1!important; } .ceej-editorial .board-grid .board-card .academic-badge.sinta{ grid-column:2!important; grid-row:1!important; } .ceej-editorial .board-grid .board-card .academic-badge.scholar{ grid-column:1!important; grid-row:2!important; } .ceej-editorial .board-grid .board-card .academic-badge.orcid{ grid-column:2!important; grid-row:2!important; } } /* ========================================================== MOBILE 2 × 2 ========================================================== */ @media (max-width:600px){ .ceej-editorial .board-grid .board-card{ overflow:visible!important; height:auto!important; min-height:0!important; max-height:none!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; grid-template-rows:auto auto!important; gap:6px!important; width:100%!important; min-width:0!important; margin-top:24px!important; box-sizing:border-box!important; overflow:visible!important; } .ceej-editorial .board-grid .board-card .academic-badge, .ceej-editorial .board-grid .board-card .academic-badge.scopus, .ceej-editorial .board-grid .board-card .academic-badge.sinta, .ceej-editorial .board-grid .board-card .academic-badge.scholar, .ceej-editorial .board-grid .board-card .academic-badge.orcid{ width:100%!important; min-width:0!important; max-width:100%!important; height:36px!important; min-height:36px!important; max-height:36px!important; padding:3px 5px!important; box-sizing:border-box!important; overflow:hidden!important; font-size:9px!important; } .ceej-editorial .board-grid .board-card .academic-badge.scopus{ grid-column:1!important; grid-row:1!important; } .ceej-editorial .board-grid .board-card .academic-badge.sinta{ grid-column:2!important; grid-row:1!important; } .ceej-editorial .board-grid .board-card .academic-badge.scholar{ grid-column:1!important; grid-row:2!important; } .ceej-editorial .board-grid .board-card .academic-badge.orcid{ grid-column:2!important; grid-row:2!important; } .ceej-editorial .board-grid .board-card .academic-badge img{ height:20px!important; max-height:20px!important; max-width:58px!important; min-width:0!important; object-fit:contain!important; } .ceej-editorial .board-grid .board-card .academic-badge.orcid img{ width:20px!important; height:20px!important; max-width:20px!important; max-height:20px!important; } } /* ========================================================== VERY SMALL MOBILE ONE COLUMN ========================================================== */ @media (max-width:430px){ .ceej-editorial .board-grid .board-card .profile-links.academic-links{ grid-template-columns:1fr!important; grid-template-rows:auto!important; gap:6px!important; margin-top:20px!important; } .ceej-editorial .board-grid .board-card .academic-badge.scopus, .ceej-editorial .board-grid .board-card .academic-badge.sinta, .ceej-editorial .board-grid .board-card .academic-badge.scholar, .ceej-editorial .board-grid .board-card .academic-badge.orcid{ grid-column:1!important; grid-row:auto!important; } } /* ========================================================== CEEJ — EDITORIAL BOARD COMPACT FINAL ========================================================== Tujuan: - Mengurangi ruang kosong vertikal pada Editorial Board. - Badge tetap 4 sejajar pada desktop. - Card menjadi lebih pendek dan padat. - Foto, nama, institusi, dan badge tetap rapi. - Tidak mengubah EIC / Journal Manager. ========================================================== */ /* ========================================================== DESKTOP — COMPACT CARD ========================================================== */ @media (min-width:901px){ .ceej-editorial .board-grid{ gap:16px!important; } .ceej-editorial .board-grid .board-card{ height:auto!important; min-height:0!important; max-height:none!important; padding:14px!important; gap:14px!important; align-items:flex-start!important; overflow:visible!important; box-sizing:border-box!important; } .ceej-editorial .board-grid .board-card .avatar-circle{ flex:0 0 72px!important; width:72px!important; height:72px!important; min-width:72px!important; min-height:72px!important; margin:0!important; } .ceej-editorial .board-grid .board-card .board-info{ flex:1 1 auto!important; width:auto!important; min-width:0!important; max-width:100%!important; padding:0!important; box-sizing:border-box!important; } .ceej-editorial .board-grid .board-card h3{ margin:0 0 4px!important; font-size:18px!important; line-height:1.2!important; } .ceej-editorial .board-grid .board-card .institution{ margin:0!important; font-size:12px!important; line-height:1.35!important; } /* Four badges — one row, close to institution */ .ceej-editorial .board-grid .board-card .profile-links.academic-links{ display:grid!important; grid-template-columns: repeat(4,minmax(0,1fr))!important; grid-template-rows:1fr!important; gap:5px!important; width:100%!important; min-width:0!important; max-width:100%!important; margin-top:12px!important; padding:0!important; box-sizing:border-box!important; align-items:center!important; } .ceej-editorial .board-grid .board-card .academic-badge, .ceej-editorial .board-grid .board-card .academic-badge.scopus, .ceej-editorial .board-grid .board-card .academic-badge.sinta, .ceej-editorial .board-grid .board-card .academic-badge.scholar, .ceej-editorial .board-grid .board-card .academic-badge.orcid{ grid-column:auto!important; grid-row:1!important; display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-width:0!important; max-width:100%!important; height:32px!important; min-height:32px!important; max-height:32px!important; padding:2px 3px!important; margin:0!important; gap:3px!important; box-sizing:border-box!important; overflow:hidden!important; white-space:nowrap!important; font-size:8.5px!important; line-height:1!important; } .ceej-editorial .board-grid .board-card .academic-badge img{ width:auto!important; height:18px!important; max-height:18px!important; max-width:48px!important; min-width:0!important; min-height:0!important; object-fit:contain!important; margin:0!important; transform:none!important; } .ceej-editorial .board-grid .board-card .academic-badge.orcid img{ width:18px!important; height:18px!important; max-width:18px!important; max-height:18px!important; flex:0 0 auto!important; } } /* ========================================================== TABLET — COMPACT 2 × 2 ========================================================== */ @media (min-width:601px) and (max-width:900px){ .ceej-editorial .board-grid .board-card{ height:auto!important; min-height:0!important; padding:14px!important; gap:13px!important; } .ceej-editorial .board-grid .board-card .avatar-circle{ flex:0 0 68px!important; width:68px!important; height:68px!important; min-width:68px!important; min-height:68px!important; } .ceej-editorial .board-grid .board-card h3{ font-size:17px!important; margin:0 0 4px!important; } .ceej-editorial .board-grid .board-card .institution{ font-size:11.5px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; grid-template-rows:auto auto!important; gap:5px!important; width:100%!important; margin-top:10px!important; box-sizing:border-box!important; } .ceej-editorial .board-grid .board-card .academic-badge{ width:100%!important; min-width:0!important; max-width:100%!important; height:31px!important; min-height:31px!important; max-height:31px!important; padding:2px 4px!important; font-size:8.5px!important; box-sizing:border-box!important; } .ceej-editorial .board-grid .board-card .academic-badge.scopus{ grid-column:1!important; grid-row:1!important; } .ceej-editorial .board-grid .board-card .academic-badge.sinta{ grid-column:2!important; grid-row:1!important; } .ceej-editorial .board-grid .board-card .academic-badge.scholar{ grid-column:1!important; grid-row:2!important; } .ceej-editorial .board-grid .board-card .academic-badge.orcid{ grid-column:2!important; grid-row:2!important; } } /* ========================================================== MOBILE — VERY COMPACT ========================================================== */ @media (max-width:600px){ .ceej-editorial .board-grid{ gap:12px!important; } .ceej-editorial .board-grid .board-card{ height:auto!important; min-height:0!important; padding:13px!important; gap:11px!important; } .ceej-editorial .board-grid .board-card .avatar-circle{ flex:0 0 64px!important; width:64px!important; height:64px!important; min-width:64px!important; min-height:64px!important; } .ceej-editorial .board-grid .board-card h3{ font-size:16px!important; margin:0 0 3px!important; } .ceej-editorial .board-grid .board-card .institution{ font-size:11px!important; line-height:1.35!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; grid-template-rows:auto auto!important; gap:5px!important; width:100%!important; margin-top:9px!important; box-sizing:border-box!important; } .ceej-editorial .board-grid .board-card .academic-badge{ width:100%!important; min-width:0!important; max-width:100%!important; height:30px!important; min-height:30px!important; max-height:30px!important; padding:2px 4px!important; font-size:8px!important; box-sizing:border-box!important; } .ceej-editorial .board-grid .board-card .academic-badge.scopus{ grid-column:1!important; grid-row:1!important; } .ceej-editorial .board-grid .board-card .academic-badge.sinta{ grid-column:2!important; grid-row:1!important; } .ceej-editorial .board-grid .board-card .academic-badge.scholar{ grid-column:1!important; grid-row:2!important; } .ceej-editorial .board-grid .board-card .academic-badge.orcid{ grid-column:2!important; grid-row:2!important; } .ceej-editorial .board-grid .board-card .academic-badge img{ height:17px!important; max-height:17px!important; max-width:48px!important; } .ceej-editorial .board-grid .board-card .academic-badge.orcid img{ width:17px!important; height:17px!important; max-width:17px!important; max-height:17px!important; } } /* ========================================================== VERY SMALL MOBILE ========================================================== */ @media (max-width:430px){ .ceej-editorial .board-grid .board-card{ display:block!important; text-align:center!important; padding:13px!important; } .ceej-editorial .board-grid .board-card .avatar-circle{ margin:0 auto 9px!important; } .ceej-editorial .board-grid .board-card .board-info{ width:100%!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links{ margin-top:9px!important; } } /* ========================================================== CEEJ — EDITORIAL BOARD PHOTO — NO CROP / FULL PHOTO ---------------------------------------------------------- FINAL OVERRIDE - Foto anggota Editorial Board tidak dipotong. - Seluruh foto ditampilkan di dalam frame lingkaran. - object-fit: contain menjaga proporsi foto asli. - Background putih mengisi area kosong jika rasio foto berbeda dengan frame lingkaran. - Tidak mengubah ukuran kartu, badge, atau layout. ========================================================== */ .ceej-editorial .board-grid .board-card .avatar-circle{ overflow:hidden!important; background:#FFFFFF!important; } .ceej-editorial .board-grid .board-card .avatar-circle img{ display:block!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; max-width:100%!important; max-height:100%!important; margin:0!important; padding:0!important; box-sizing:border-box!important; object-fit:contain!important; object-position:center center!important; background:#FFFFFF!important; border:0!important; border-radius:50%!important; transform:none!important; filter:none!important; } /* Jangan biarkan hover memperbesar gambar di dalam lingkaran */ .ceej-editorial .board-grid .board-card:hover .avatar-circle img{ transform:none!important; } /* Tetap aman pada tablet */ @media(max-width:900px){ .ceej-editorial .board-grid .board-card .avatar-circle img{ object-fit:contain!important; object-position:center center!important; transform:none!important; } } /* Tetap aman pada mobile */ @media(max-width:600px){ .ceej-editorial .board-grid .board-card .avatar-circle img{ object-fit:contain!important; object-position:center center!important; transform:none!important; } } /* ========================================================== END — NO CROP PHOTO FIX ========================================================== */ /* ========================================================== CEEJ — EDITORIAL BOARD PREMIUM PORTRAIT DESIGN ---------------------------------------------------------- FINAL OVERRIDE - Editorial Board: modern portrait frame - Full photo: NO CROP - Replaces circular avatar presentation - Keeps academic badges compact - Does NOT alter EIC / Journal Manager design ========================================================== */ /* ---------- BOARD CARD ---------- */ .ceej-editorial .board-grid .board-card{ display:flex!important; align-items:flex-start!important; position:relative!important; min-height:170px!important; padding:20px!important; background:linear-gradient( 135deg, #FFFFFF 0%, #FBFEFC 100% )!important; border:1px solid #D9EBDD!important; border-radius:18px!important; box-shadow: 0 7px 20px rgba(31,122,61,.08)!important; overflow:hidden!important; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease!important; } /* ---------- TOP ACCENT ---------- */ .ceej-editorial .board-grid .board-card::before{ content:""!important; position:absolute!important; top:0!important; left:0!important; width:100%!important; height:4px!important; background:linear-gradient( 90deg, #1F7A3D 0%, #55A947 55%, #E6C62E 100% )!important; z-index:1!important; } /* ---------- CARD HOVER ---------- */ .ceej-editorial .board-grid .board-card:hover{ transform:translateY(-4px)!important; border-color:#BFDCC7!important; box-shadow: 0 14px 30px rgba(31,122,61,.14)!important; } /* ========================================================== PORTRAIT FRAME ========================================================== */ .ceej-editorial .board-grid .board-card .avatar-circle{ flex:0 0 86px!important; width:86px!important; height:100px!important; margin:2px 20px 0 0!important; display:flex!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; border-radius:18px!important; overflow:hidden!important; background:#FFFFFF!important; border:3px solid #FFFFFF!important; outline:2px solid #D8EEDC!important; box-shadow: 0 7px 18px rgba(31,122,61,.15)!important; position:relative!important; transition: transform .28s ease, box-shadow .28s ease!important; } /* ---------- FULL PHOTO / NO CROP ---------- */ .ceej-editorial .board-grid .board-card .avatar-circle img{ display:block!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; max-width:100%!important; max-height:100%!important; margin:0!important; padding:0!important; box-sizing:border-box!important; object-fit:contain!important; object-position:center center!important; background:#FFFFFF!important; border:0!important; border-radius:14px!important; transform:none!important; filter:none!important; } /* ---------- PHOTO HOVER ---------- */ .ceej-editorial .board-grid .board-card:hover .avatar-circle{ transform:translateY(-2px)!important; box-shadow: 0 10px 24px rgba(31,122,61,.22)!important; } /* Never zoom/crop photo */ .ceej-editorial .board-grid .board-card:hover .avatar-circle img{ transform:none!important; object-fit:contain!important; } /* ========================================================== BOARD INFORMATION ========================================================== */ .ceej-editorial .board-grid .board-info{ flex:1 1 auto!important; min-width:0!important; padding-top:2px!important; } /* Name */ .ceej-editorial .board-grid .board-card h3{ margin:0 0 9px!important; color:#176B38!important; font-size:20px!important; font-weight:800!important; line-height:1.25!important; letter-spacing:-.2px!important; } /* Institution */ .ceej-editorial .board-grid .board-card .institution, .ceej-editorial .board-grid .board-card p{ margin:0 0 14px!important; color:#68756E!important; font-size:13px!important; line-height:1.5!important; font-weight:500!important; } /* ========================================================== ACADEMIC BADGES ========================================================== */ .ceej-editorial .board-grid .board-card .profile-links.academic-links{ display:flex!important; align-items:center!important; justify-content:flex-start!important; flex-wrap:wrap!important; gap:6px!important; width:100%!important; margin:10px 0 0!important; padding:0!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge{ display:flex!important; align-items:center!important; justify-content:center!important; flex:0 0 72px!important; width:72px!important; min-width:72px!important; max-width:72px!important; height:34px!important; min-height:34px!important; max-height:34px!important; padding:4px 5px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid #D9EBDD!important; border-radius:999px!important; overflow:hidden!important; box-shadow: 0 3px 9px rgba(31,122,61,.06)!important; text-decoration:none!important; font-size:0!important; line-height:0!important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease!important; } /* Badge logo */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge img{ display:block!important; width:auto!important; height:23px!important; max-width:62px!important; max-height:23px!important; min-width:0!important; min-height:0!important; margin:0 auto!important; padding:0!important; object-fit:contain!important; object-position:center!important; border:0!important; border-radius:0!important; box-shadow:none!important; transform:none!important; } /* Badge hover */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge:hover{ transform:translateY(-2px)!important; border-color:#B7D8C0!important; box-shadow: 0 6px 14px rgba(31,122,61,.12)!important; } /* ========================================================== TABLET ========================================================== */ @media(max-width:900px){ .ceej-editorial .board-grid .board-card{ min-height:160px!important; padding:17px!important; } .ceej-editorial .board-grid .board-card .avatar-circle{ flex:0 0 78px!important; width:78px!important; height:92px!important; margin-right:16px!important; } .ceej-editorial .board-grid .board-card h3{ font-size:19px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links{ gap:5px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge{ flex:0 0 68px!important; width:68px!important; min-width:68px!important; max-width:68px!important; } } /* ========================================================== MOBILE ========================================================== */ @media(max-width:600px){ .ceej-editorial .board-grid{ grid-template-columns:1fr!important; gap:14px!important; } .ceej-editorial .board-grid .board-card{ min-height:150px!important; padding:17px!important; } .ceej-editorial .board-grid .board-card .avatar-circle{ flex:0 0 76px!important; width:76px!important; height:90px!important; margin-right:15px!important; } .ceej-editorial .board-grid .board-card h3{ font-size:19px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links{ margin-top:9px!important; gap:5px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge{ flex:0 0 68px!important; width:68px!important; min-width:68px!important; max-width:68px!important; height:33px!important; } } /* ========================================================== VERY SMALL MOBILE ========================================================== */ @media(max-width:430px){ .ceej-editorial .board-grid .board-card{ display:block!important; text-align:center!important; } .ceej-editorial .board-grid .board-card .avatar-circle{ margin:0 auto 14px!important; } .ceej-editorial .board-grid .board-card .board-info{ width:100%!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links{ justify-content:center!important; } } /* ========================================================== END — PREMIUM PORTRAIT EDITORIAL BOARD ========================================================== */ /* ========================================================== CEEJ — EDITORIAL BOARD FULL-WIDTH FIX ---------------------------------------------------------- Tujuan: - Menghilangkan ruang putih kiri/kanan dari layout OJS. - Editorial Board menggunakan seluruh lebar viewport. - Sidebar OJS tidak mengambil ruang pada halaman Editorial Team. - Tidak mengubah header/navigation situs. ========================================================== */ /* Hide OJS sidebar ONLY on Editorial Team page */ .pkp_page_editorialteam .pkp_structure_sidebar{ display:none!important; } /* Make main editorial area full width */ .pkp_page_editorialteam .pkp_structure_main{ width:100%!important; max-width:none!important; flex:0 0 100%!important; margin:0!important; padding:0!important; box-sizing:border-box!important; } /* Break the editorial content out of OJS's centered container */ .pkp_page_editorialteam .ceej-editorial{ width:100vw!important; max-width:none!important; margin-left:calc(50% - 50vw)!important; margin-right:0!important; padding-left:4px!important; padding-right:4px!important; box-sizing:border-box!important; } /* Board grid uses the complete available width */ .pkp_page_editorialteam .ceej-editorial .board-grid{ width:100%!important; max-width:none!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:20px!important; margin:0!important; } /* Cards fill each half completely */ .pkp_page_editorialteam .ceej-editorial .board-grid .board-card{ width:100%!important; max-width:none!important; box-sizing:border-box!important; } /* Desktop */ @media(min-width:901px){ .pkp_page_editorialteam .ceej-editorial{ padding-left:4px!important; padding-right:4px!important; } .pkp_page_editorialteam .ceej-editorial .board-grid{ grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:20px!important; } } /* Tablet */ @media(max-width:900px){ .pkp_page_editorialteam .ceej-editorial{ width:100vw!important; margin-left:calc(50% - 50vw)!important; padding-left:5px!important; padding-right:5px!important; } .pkp_page_editorialteam .ceej-editorial .board-grid{ grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:14px!important; } } /* Mobile */ @media(max-width:600px){ .pkp_page_editorialteam .ceej-editorial{ width:100vw!important; margin-left:calc(50% - 50vw)!important; padding-left:6px!important; padding-right:6px!important; } .pkp_page_editorialteam .ceej-editorial .board-grid{ grid-template-columns:1fr!important; gap:12px!important; } } /* ========================================================== END — FULL WIDTH FIX ========================================================== */ /* ========================================================== CEEJ — JOURNAL SUPPORT TEAM = EDITORIAL BOARD STYLE ---------------------------------------------------------- Journal Support Team sekarang menggunakan sistem visual yang sama dengan Editorial Board: - card 2 kolom - card height/padding sama - top gradient accent, BUKAN accent kuning di kiri - portrait frame 86 × 100 px - foto tidak crop (object-fit:contain) - typography sama - academic badges sama: 72 × 34 px - spacing dan hover sama ---------------------------------------------------------- Role badge tetap dipertahankan karena Support Team memiliki jabatan: Copy Editor, Translator / Proofreader, Layout Editor. ========================================================== */ /* ---------------------------------------------------------- SUPPORT GRID — SAME AS EDITORIAL BOARD ---------------------------------------------------------- */ .ceej-editorial .role-grid{ display:grid!important; grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:20px!important; width:100%!important; max-width:none!important; align-items:stretch!important; } /* ---------------------------------------------------------- SUPPORT CARD — SAME AS BOARD CARD ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card{ display:flex!important; flex-direction:row!important; align-items:flex-start!important; position:relative!important; width:100%!important; min-width:0!important; min-height:170px!important; padding:20px!important; box-sizing:border-box!important; background:linear-gradient( 135deg, #FFFFFF 0%, #FBFEFC 100% )!important; border:1px solid #D9EBDD!important; border-radius:18px!important; box-shadow: 0 7px 20px rgba(31,122,61,.08)!important; overflow:hidden!important; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease!important; } /* ---------------------------------------------------------- REMOVE OLD YELLOW LEFT ACCENT ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card::before{ content:""!important; position:absolute!important; top:0!important; left:0!important; width:100%!important; height:4px!important; background:linear-gradient( 90deg, #1F7A3D 0%, #55A947 55%, #E6C62E 100% )!important; border-radius:0!important; z-index:1!important; } /* ---------------------------------------------------------- SUPPORT CARD HOVER — SAME AS BOARD ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card:hover{ transform:translateY(-4px)!important; border-color:#BFDCC7!important; box-shadow: 0 14px 30px rgba(31,122,61,.14)!important; } /* ---------------------------------------------------------- SUPPORT PORTRAIT — SAME AS BOARD ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 86px!important; width:86px!important; height:100px!important; min-width:86px!important; min-height:100px!important; margin:2px 20px 0 0!important; display:flex!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; border-radius:18px!important; overflow:hidden!important; background:#FFFFFF!important; border:3px solid #FFFFFF!important; outline:2px solid #D8EEDC!important; box-shadow: 0 7px 18px rgba(31,122,61,.15)!important; position:relative!important; transition: transform .28s ease, box-shadow .28s ease!important; } /* ---------------------------------------------------------- SUPPORT PHOTO — SAME AS BOARD / NO CROP ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .avatar-circle.small img{ display:block!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; max-width:100%!important; max-height:100%!important; margin:0!important; padding:0!important; box-sizing:border-box!important; object-fit:contain!important; object-position:center center!important; background:#FFFFFF!important; border:0!important; border-radius:14px!important; transform:none!important; filter:none!important; } /* ---------------------------------------------------------- PHOTO HOVER — SAME AS BOARD ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card:hover .avatar-circle.small{ transform:translateY(-2px)!important; box-shadow: 0 10px 24px rgba(31,122,61,.22)!important; } .ceej-editorial .role-grid .role-card:hover .avatar-circle.small img{ transform:none!important; object-fit:contain!important; } /* ---------------------------------------------------------- SUPPORT INFORMATION — SAME AS BOARD ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .role-info{ flex:1 1 auto!important; min-width:0!important; width:auto!important; padding-top:2px!important; } /* ---------------------------------------------------------- ROLE BADGE Keep the badge, but use the same visual language as Board. ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .role-badge{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:max-content!important; max-width:100%!important; min-height:30px!important; margin:0 0 9px!important; padding:6px 12px!important; box-sizing:border-box!important; border-radius:999px!important; background:#EEF8F1!important; color:#18733C!important; font-size:10px!important; font-weight:700!important; line-height:1.2!important; letter-spacing:.7px!important; white-space:normal!important; box-shadow:none!important; } /* Translator / Proofreader needs more room */ .ceej-editorial .role-grid .role-card:nth-child(2) .role-badge{ min-width:178px!important; } /* ---------------------------------------------------------- SUPPORT NAME — SAME AS BOARD ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card h3{ margin:0 0 9px!important; color:#176B38!important; font-size:20px!important; font-weight:800!important; line-height:1.25!important; letter-spacing:-.2px!important; } /* ---------------------------------------------------------- SUPPORT INSTITUTION — SAME AS BOARD ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .institution{ display:block!important; width:100%!important; margin:0 0 14px!important; color:#68756E!important; font-size:13px!important; line-height:1.5!important; font-weight:500!important; } /* ---------------------------------------------------------- SUPPORT ACADEMIC BADGES — SAME AS BOARD ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ display:flex!important; align-items:center!important; justify-content:flex-start!important; flex-wrap:wrap!important; flex-direction:row!important; gap:6px!important; width:100%!important; max-width:100%!important; margin:10px 0 0!important; padding:0!important; box-sizing:border-box!important; overflow:visible!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ display:flex!important; align-items:center!important; justify-content:center!important; flex:0 0 72px!important; width:72px!important; min-width:72px!important; max-width:72px!important; height:34px!important; min-height:34px!important; max-height:34px!important; margin:0!important; padding:4px 5px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid #D9EBDD!important; border-radius:999px!important; overflow:hidden!important; box-shadow: 0 3px 10px rgba(31,122,61,.06)!important; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease!important; } /* Badge images */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge img{ display:block!important; width:auto!important; height:18px!important; max-width:48px!important; max-height:18px!important; min-width:0!important; min-height:0!important; object-fit:contain!important; object-position:center!important; margin:0!important; padding:0!important; transform:none!important; filter:none!important; } /* ORCID */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid img{ width:18px!important; height:18px!important; max-width:18px!important; max-height:18px!important; flex:0 0 auto!important; } /* Badge hover — SAME AS BOARD */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge:hover{ transform:translateY(-2px)!important; border-color:#B7D8C0!important; box-shadow: 0 6px 14px rgba(31,122,61,.12)!important; } /* ---------------------------------------------------------- TABLET — SAME SCALE AS BOARD ---------------------------------------------------------- */ @media(max-width:900px){ .ceej-editorial .role-grid{ grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:16px!important; } .ceej-editorial .role-grid .role-card{ min-height:160px!important; padding:17px!important; } .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 78px!important; width:78px!important; height:92px!important; min-width:78px!important; min-height:92px!important; margin-right:16px!important; } .ceej-editorial .role-grid .role-card h3{ font-size:19px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links{ gap:5px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ flex:0 0 68px!important; width:68px!important; min-width:68px!important; max-width:68px!important; } } /* ---------------------------------------------------------- MOBILE — SAME AS BOARD ---------------------------------------------------------- */ @media(max-width:600px){ .ceej-editorial .role-grid{ grid-template-columns:1fr!important; gap:14px!important; } .ceej-editorial .role-grid .role-card{ min-height:150px!important; padding:17px!important; } .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 76px!important; width:76px!important; height:90px!important; min-width:76px!important; min-height:90px!important; margin-right:15px!important; } .ceej-editorial .role-grid .role-card h3{ font-size:19px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links{ margin-top:9px!important; gap:5px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ flex:0 0 68px!important; width:68px!important; min-width:68px!important; max-width:68px!important; height:33px!important; } } /* ---------------------------------------------------------- VERY SMALL MOBILE — SAME AS BOARD ---------------------------------------------------------- */ @media(max-width:430px){ .ceej-editorial .role-grid .role-card{ display:block!important; text-align:center!important; } .ceej-editorial .role-grid .role-card .avatar-circle.small{ margin:0 auto 14px!important; } .ceej-editorial .role-grid .role-card .role-info{ width:100%!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links{ justify-content:center!important; } } /* ========================================================== END — JOURNAL SUPPORT = EDITORIAL BOARD STYLE ========================================================== */ /* ========================================================== CEEJ — FINAL FIX 1. ORCID badge must be fully visible 2. JOURNAL SUPPORT badges must stay in one clean row 3. Journal Support spacing follows Editorial Board ========================================================== */ /* ---------------------------------------------------------- ORCID — SHOW COMPLETE LOGO ---------------------------------------------------------- */ /* Editorial Board ORCID */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.orcid{ width:72px!important; min-width:72px!important; max-width:72px!important; height:34px!important; min-height:34px!important; max-height:34px!important; padding:4px 5px!important; overflow:visible!important; box-sizing:border-box!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.orcid img{ display:block!important; width:auto!important; height:23px!important; max-width:62px!important; max-height:23px!important; min-width:0!important; min-height:0!important; object-fit:contain!important; object-position:center!important; margin:0 auto!important; padding:0!important; } /* Journal Support ORCID */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ width:72px!important; min-width:72px!important; max-width:72px!important; height:34px!important; min-height:34px!important; max-height:34px!important; padding:4px 5px!important; overflow:visible!important; box-sizing:border-box!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid img{ display:block!important; width:auto!important; height:23px!important; max-width:62px!important; max-height:23px!important; min-width:0!important; min-height:0!important; flex:0 0 auto!important; object-fit:contain!important; object-position:center!important; margin:0 auto!important; padding:0!important; } /* ---------------------------------------------------------- JOURNAL SUPPORT — CLEAN ONE-ROW ACADEMIC BADGES ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; align-items:center!important; justify-content:flex-start!important; gap:5px!important; width:100%!important; max-width:100%!important; margin:10px 0 0!important; padding:0!important; box-sizing:border-box!important; overflow:visible!important; } /* Compact badge width so 4 badges fit cleanly */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ display:flex!important; align-items:center!important; justify-content:center!important; flex:0 0 68px!important; width:68px!important; min-width:68px!important; max-width:68px!important; height:34px!important; min-height:34px!important; max-height:34px!important; padding:4px 4px!important; margin:0!important; box-sizing:border-box!important; overflow:hidden!important; background:#FFFFFF!important; border:1px solid #D9EBDD!important; border-radius:999px!important; box-shadow:0 3px 9px rgba(31,122,61,.06)!important; font-size:0!important; line-height:0!important; } /* Normal badge logos */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge:not(.orcid) img{ display:block!important; width:auto!important; height:21px!important; max-width:58px!important; max-height:21px!important; min-width:0!important; min-height:0!important; margin:0 auto!important; padding:0!important; object-fit:contain!important; object-position:center!important; transform:none!important; } /* ORCID is slightly wider internally */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ flex:0 0 72px!important; width:72px!important; min-width:72px!important; max-width:72px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid img{ width:auto!important; height:23px!important; max-width:62px!important; max-height:23px!important; } /* ---------------------------------------------------------- JOURNAL SUPPORT — INFORMATION AREA ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .role-info{ flex:1 1 auto!important; min-width:0!important; width:auto!important; padding-top:2px!important; box-sizing:border-box!important; } /* Prevent long institution text from disturbing badge layout */ .ceej-editorial .role-grid .role-card .institution{ width:100%!important; max-width:100%!important; margin:0 0 12px!important; line-height:1.45!important; } /* ---------------------------------------------------------- JOURNAL SUPPORT — ROLE BADGE ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .role-badge{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:max-content!important; max-width:100%!important; min-height:30px!important; margin:0 0 9px!important; padding:6px 12px!important; box-sizing:border-box!important; border-radius:999px!important; background:#EEF8F1!important; color:#18733C!important; font-size:10px!important; font-weight:700!important; line-height:1.2!important; letter-spacing:.7px!important; white-space:nowrap!important; } /* Translator / Proofreader */ .ceej-editorial .role-grid .role-card:nth-child(2) .role-badge{ min-width:178px!important; } /* ---------------------------------------------------------- TABLET ---------------------------------------------------------- */ @media(max-width:900px){ .ceej-editorial .role-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:16px!important; } .ceej-editorial .role-grid .role-card{ min-height:160px!important; padding:17px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links{ flex-wrap:nowrap!important; gap:4px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ flex:0 0 62px!important; width:62px!important; min-width:62px!important; max-width:62px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ flex:0 0 68px!important; width:68px!important; min-width:68px!important; max-width:68px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid img{ max-width:58px!important; } } /* ---------------------------------------------------------- MOBILE ---------------------------------------------------------- */ @media(max-width:600px){ .ceej-editorial .role-grid{ grid-template-columns:1fr!important; gap:14px!important; } .ceej-editorial .role-grid .role-card{ min-height:150px!important; padding:17px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links{ flex-wrap:nowrap!important; gap:4px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ flex:0 0 68px!important; width:68px!important; min-width:68px!important; max-width:68px!important; height:33px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ flex:0 0 72px!important; width:72px!important; min-width:72px!important; max-width:72px!important; } } /* ---------------------------------------------------------- VERY SMALL MOBILE — ALLOW 2 × 2 WHEN SPACE IS TIGHT ---------------------------------------------------------- */ @media(max-width:430px){ .ceej-editorial .role-grid .role-card{ display:block!important; text-align:center!important; } .ceej-editorial .role-grid .role-card .avatar-circle.small{ margin:0 auto 14px!important; } .ceej-editorial .role-grid .role-card .role-info{ width:100%!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links{ justify-content:center!important; flex-wrap:wrap!important; gap:5px!important; } } /* ========================================================== END — FINAL ORCID + JOURNAL SUPPORT FIX ========================================================== */ /* ========================================================== CEEJ — ULTRA FINAL FIX V2 ---------------------------------------------------------- PROBLEM: 1. ORCID text/logo masih terpotong. 2. Journal Support badge ke-4 keluar/terpotong di sisi card. 3. Support badges harus selalu berada di dalam area content. ========================================================== */ /* ---------------------------------------------------------- 1. PREVENT SUPPORT CARD FROM CLIPPING ITS CONTENT ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card{ overflow:visible!important; } .ceej-editorial .role-grid .role-card .role-info{ min-width:0!important; max-width:100%!important; overflow:visible!important; } /* ---------------------------------------------------------- 2. JOURNAL SUPPORT — USE A 4-COLUMN INTERNAL GRID This is more reliable than flex-wrap for the 4 badges. ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; align-items:center!important; justify-items:stretch!important; gap:5px!important; width:100%!important; max-width:100%!important; margin:10px 0 0!important; padding:0!important; box-sizing:border-box!important; overflow:visible!important; } /* Every support badge fills exactly one grid cell */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.scopus, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.sinta, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.scholar, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-width:0!important; max-width:none!important; height:36px!important; min-height:36px!important; max-height:36px!important; margin:0!important; padding:3px 4px!important; box-sizing:border-box!important; overflow:visible!important; border-radius:999px!important; } /* ---------------------------------------------------------- 3. NORMAL SUPPORT LOGOS ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge:not(.orcid) img{ display:block!important; width:auto!important; height:22px!important; max-width:100%!important; max-height:22px!important; min-width:0!important; min-height:0!important; margin:0 auto!important; padding:0!important; object-fit:contain!important; object-position:center!important; transform:none!important; } /* ---------------------------------------------------------- 4. ORCID — DO NOT RESTRICT TO 18PX The complete ORCID logo contains both icon + wordmark. ---------------------------------------------------------- */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.orcid, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ overflow:visible!important; padding:3px 5px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.orcid img, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid img{ display:block!important; width:auto!important; height:23px!important; max-width:100%!important; max-height:23px!important; min-width:0!important; min-height:0!important; margin:0 auto!important; padding:0!important; object-fit:contain!important; object-position:center!important; flex:0 1 auto!important; transform:none!important; } /* ---------------------------------------------------------- 5. EDITORIAL BOARD ORCID — EXTRA SPACE ---------------------------------------------------------- */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.orcid{ flex:0 0 78px!important; width:78px!important; min-width:78px!important; max-width:78px!important; } /* ---------------------------------------------------------- 6. SUPPORT CARD — DO NOT LET LONG TEXT PUSH THE BADGES ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .institution{ overflow:visible!important; word-break:normal!important; overflow-wrap:normal!important; } /* ---------------------------------------------------------- 7. TABLET — KEEP 4 BADGES INSIDE EACH CARD ---------------------------------------------------------- */ @media(max-width:900px){ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:4px!important; flex-wrap:unset!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.scopus, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.sinta, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.scholar, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ width:100%!important; min-width:0!important; max-width:none!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ flex:0 1 auto!important; } } /* ---------------------------------------------------------- 8. MOBILE — STILL 4 IN ONE ROW WHEN SPACE ALLOWS ---------------------------------------------------------- */ @media(max-width:600px){ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:4px!important; justify-content:stretch!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ height:34px!important; min-height:34px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ width:100%!important; min-width:0!important; max-width:none!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid img{ height:21px!important; max-height:21px!important; max-width:100%!important; } } /* ---------------------------------------------------------- 9. VERY SMALL MOBILE — 2 × 2 IS ALLOWED ---------------------------------------------------------- */ @media(max-width:430px){ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:5px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ width:100%!important; min-width:0!important; max-width:none!important; } } /* ========================================================== END — ULTRA FINAL FIX V2 ========================================================== */ /* ========================================================== CEEJ — JOURNAL SUPPORT TEAM EXACT SAME VISUAL SYSTEM AS EDITORIAL BOARD ---------------------------------------------------------- Editorial Board = reference design Journal Support = same: - card size / radius / shadow - green-yellow TOP accent - portrait frame - typography - institution line - academic badges - spacing Only role badge is retained because Support has roles. ========================================================== */ /* ---------- SUPPORT GRID ---------- */ .ceej-editorial .role-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:18px!important; width:100%!important; align-items:stretch!important; } /* ---------- SUPPORT CARD = BOARD CARD ---------- */ .ceej-editorial .role-grid .role-card{ position:relative!important; display:flex!important; flex-direction:row!important; align-items:flex-start!important; width:100%!important; min-width:0!important; min-height:172px!important; padding:18px 18px!important; box-sizing:border-box!important; overflow:hidden!important; background:#FFFFFF!important; border:1px solid #D8EBDD!important; border-radius:20px!important; box-shadow: 0 8px 22px rgba(31,122,61,.07)!important; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease!important; } /* ---------- SAME GREEN-YELLOW TOP ACCENT ---------- */ .ceej-editorial .role-grid .role-card::before{ content:""!important; position:absolute!important; left:0!important; top:0!important; width:100%!important; height:4px!important; background:linear-gradient( 90deg, #1F7A3D 0%, #3CA24C 52%, #E6C83E 100% )!important; border-radius:20px 20px 0 0!important; } /* Remove old yellow LEFT accent */ .ceej-editorial .role-grid .role-card::after{ display:none!important; } /* ---------- SAME HOVER ---------- */ .ceej-editorial .role-grid .role-card:hover{ transform:translateY(-3px)!important; border-color:#BFDCC7!important; box-shadow: 0 14px 30px rgba(31,122,61,.12)!important; } /* ---------- SUPPORT PORTRAIT = BOARD PORTRAIT ---------- */ .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 82px!important; width:82px!important; height:82px!important; min-width:82px!important; min-height:82px!important; margin:4px 17px 0 0!important; border:3px solid #FFFFFF!important; border-radius:18px!important; outline:2px solid #D9EDDE!important; box-shadow: 0 10px 22px rgba(31,122,61,.13)!important; background:#FFFFFF!important; overflow:hidden!important; } /* Photo: same treatment as Editorial Board */ .ceej-editorial .role-grid .role-card .avatar-circle.small img{ display:block!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; max-width:100%!important; max-height:100%!important; margin:0!important; padding:0!important; box-sizing:border-box!important; object-fit:contain!important; object-position:center!important; background:#FFFFFF!important; border:0!important; border-radius:14px!important; transform:none!important; } /* ---------- SUPPORT CONTENT = BOARD CONTENT ---------- */ .ceej-editorial .role-grid .role-card .role-info{ flex:1 1 auto!important; width:auto!important; min-width:0!important; padding:3px 0 0!important; display:flex!important; flex-direction:column!important; align-items:flex-start!important; } /* Role badge retained, but styled compactly */ .ceej-editorial .role-grid .role-card .role-badge{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; max-width:100%!important; min-height:30px!important; margin:0 0 5px!important; padding:6px 12px!important; box-sizing:border-box!important; border-radius:999px!important; background:#EEF8F1!important; color:#18733C!important; font-size:10px!important; font-weight:700!important; line-height:1.2!important; letter-spacing:.7px!important; white-space:nowrap!important; } /* Same name styling */ .ceej-editorial .role-grid .role-card h3{ width:100%!important; margin:0 0 5px!important; color:#176D37!important; font-size:19px!important; font-weight:700!important; line-height:1.25!important; letter-spacing:-.1px!important; } /* Same institution styling */ .ceej-editorial .role-grid .role-card .institution{ display:block!important; width:100%!important; margin:0!important; color:#69766E!important; font-size:12.5px!important; line-height:1.45!important; } /* ---------- FLAG SAME AS BOARD ---------- */ .ceej-editorial .role-grid .role-card .institution::after{ content:""!important; display:inline-block!important; width:19px!important; height:12px!important; min-width:19px!important; min-height:12px!important; margin:0 0 0 7px!important; vertical-align:middle!important; border-radius:2px!important; background:linear-gradient( to bottom, #E31E24 0%, #E31E24 50%, #FFFFFF 50%, #FFFFFF 100% )!important; border:1px solid rgba(0,0,0,.10)!important; box-shadow: 0 1px 3px rgba(0,0,0,.15)!important; box-sizing:border-box!important; } /* ---------- SUPPORT ACADEMIC BADGES = BOARD BADGES ---------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important; flex-wrap:nowrap!important; width:100%!important; max-width:100%!important; margin:14px 0 0!important; padding:0!important; gap:5px!important; box-sizing:border-box!important; overflow:visible!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ display:flex!important; align-items:center!important; justify-content:center!important; flex:0 1 82px!important; width:82px!important; min-width:0!important; max-width:82px!important; height:34px!important; min-height:34px!important; max-height:34px!important; margin:0!important; padding:2px 4px!important; box-sizing:border-box!important; border:1px solid #D9EBDD!important; border-radius:999px!important; background:#FFFFFF!important; overflow:hidden!important; font-size:0!important; line-height:0!important; box-shadow: 0 5px 13px rgba(31,122,61,.07)!important; transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge img{ display:block!important; width:auto!important; height:22px!important; max-width:72px!important; max-height:22px!important; min-width:0!important; min-height:0!important; margin:0 auto!important; padding:0!important; object-fit:contain!important; object-position:center!important; transform:none!important; } /* ---------- ORCID FULL VISIBILITY ---------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ flex:0 1 82px!important; width:82px!important; max-width:82px!important; overflow:visible!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid img{ width:auto!important; height:23px!important; max-width:74px!important; max-height:23px!important; object-fit:contain!important; } /* ---------- RESPONSIVE: SAME AS BOARD ---------- */ @media(max-width:991px){ .ceej-editorial .role-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:14px!important; } .ceej-editorial .role-grid .role-card{ padding:16px 14px!important; } .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 70px!important; width:70px!important; height:70px!important; min-width:70px!important; min-height:70px!important; margin-right:12px!important; } .ceej-editorial .role-grid .role-card h3{ font-size:18px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links{ gap:4px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ flex-basis:76px!important; width:76px!important; max-width:76px!important; height:32px!important; min-height:32px!important; max-height:32px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge img{ height:20px!important; max-height:20px!important; max-width:67px!important; } } @media(max-width:700px){ .ceej-editorial .role-grid{ grid-template-columns:1fr!important; } } @media(max-width:600px){ .ceej-editorial .role-grid{ grid-template-columns:1fr!important; gap:13px!important; } .ceej-editorial .role-grid .role-card{ min-height:0!important; padding:17px!important; } .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 76px!important; width:76px!important; height:76px!important; min-width:76px!important; min-height:76px!important; } } /* ========================================================== END — SUPPORT = EDITORIAL BOARD VISUAL SYSTEM ========================================================== */ /* ========================================================== CEEJ — FINAL CONSISTENCY OVERRIDE Editorial Board = MASTER DESIGN Journal Support = SAME DESIGN EIC + JOURNAL MANAGER are intentionally untouched. ========================================================== */ /* ---------- SAME GRID ---------- */ .ceej-editorial .role-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:16px!important; width:100%!important; } /* ---------- SAME CARD GEOMETRY ---------- */ .ceej-editorial .role-grid .role-card{ display:flex!important; align-items:flex-start!important; position:relative!important; width:100%!important; min-width:0!important; min-height:170px!important; height:auto!important; padding:20px!important; box-sizing:border-box!important; background:linear-gradient( 135deg, #FFFFFF 0%, #FBFEFC 100% )!important; border:1px solid #D9EBDD!important; border-radius:18px!important; box-shadow: 0 7px 20px rgba(31,122,61,.08)!important; overflow:hidden!important; transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease!important; } /* Same top accent */ .ceej-editorial .role-grid .role-card::before{ content:""!important; position:absolute!important; top:0!important; left:0!important; width:100%!important; height:4px!important; background:linear-gradient( 90deg, #1F7A3D 0%, #55A947 55%, #E6C62E 100% )!important; z-index:1!important; } /* Remove any old left-side accent */ .ceej-editorial .role-grid .role-card::after{ display:none!important; } /* Same hover */ .ceej-editorial .role-grid .role-card:hover{ transform:translateY(-4px)!important; border-color:#BFDCC7!important; box-shadow: 0 14px 30px rgba(31,122,61,.14)!important; } /* ---------- SAME PORTRAIT ---------- */ .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 86px!important; width:86px!important; height:100px!important; min-width:86px!important; min-height:100px!important; margin:2px 20px 0 0!important; display:flex!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; border-radius:18px!important; overflow:hidden!important; background:#FFFFFF!important; border:3px solid #FFFFFF!important; outline:2px solid #D8EEDC!important; box-shadow: 0 7px 18px rgba(31,122,61,.15)!important; position:relative!important; } .ceej-editorial .role-grid .role-card .avatar-circle.small img{ display:block!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; max-width:100%!important; max-height:100%!important; margin:0!important; padding:0!important; box-sizing:border-box!important; object-fit:contain!important; object-position:center center!important; background:#FFFFFF!important; border:0!important; border-radius:14px!important; transform:none!important; } /* ---------- SAME INFORMATION AREA ---------- */ .ceej-editorial .role-grid .role-card .role-info{ flex:1 1 auto!important; min-width:0!important; width:auto!important; padding-top:2px!important; box-sizing:border-box!important; display:flex!important; flex-direction:column!important; align-items:flex-start!important; } /* Role badge is the ONLY intentional extra element */ .ceej-editorial .role-grid .role-card .role-badge{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:max-content!important; max-width:100%!important; min-height:30px!important; margin:0 0 9px!important; padding:6px 12px!important; box-sizing:border-box!important; border-radius:999px!important; background:#EEF8F1!important; color:#18733C!important; font-size:10px!important; font-weight:700!important; line-height:1.2!important; letter-spacing:.7px!important; white-space:nowrap!important; } /* Keep translator role readable */ .ceej-editorial .role-grid .role-card:nth-child(2) .role-badge{ min-width:178px!important; } /* SAME NAME */ .ceej-editorial .role-grid .role-card h3{ width:100%!important; margin:0 0 9px!important; color:#176B38!important; font-size:20px!important; font-weight:800!important; line-height:1.25!important; letter-spacing:-.2px!important; } /* SAME INSTITUTION */ .ceej-editorial .role-grid .role-card .institution, .ceej-editorial .role-grid .role-card p{ width:100%!important; max-width:100%!important; margin:0 0 14px!important; color:#68756E!important; font-size:13px!important; font-weight:500!important; line-height:1.5!important; overflow:visible!important; word-break:normal!important; overflow-wrap:normal!important; } /* SAME INDONESIAN FLAG */ .ceej-editorial .role-grid .role-card .institution::after{ content:""!important; display:inline-block!important; width:19px!important; height:12px!important; min-width:19px!important; min-height:12px!important; margin:0 0 0 7px!important; vertical-align:middle!important; border-radius:2px!important; background:linear-gradient( to bottom, #E31E24 0%, #E31E24 50%, #FFFFFF 50%, #FFFFFF 100% )!important; border:1px solid rgba(0,0,0,.10)!important; box-shadow:0 1px 3px rgba(0,0,0,.15)!important; box-sizing:border-box!important; } /* ---------- ACADEMIC BADGES: EXACT BOARD SIZE ---------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ display:flex!important; align-items:center!important; justify-content:flex-start!important; flex-wrap:nowrap!important; gap:6px!important; width:100%!important; max-width:100%!important; margin:10px 0 0!important; padding:0!important; box-sizing:border-box!important; overflow:visible!important; } /* Every badge exactly matches Editorial Board */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ display:flex!important; align-items:center!important; justify-content:center!important; flex:0 0 72px!important; width:72px!important; min-width:72px!important; max-width:72px!important; height:34px!important; min-height:34px!important; max-height:34px!important; padding:4px 5px!important; margin:0!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid #D9EBDD!important; border-radius:999px!important; overflow:hidden!important; box-shadow: 0 3px 9px rgba(31,122,61,.06)!important; text-decoration:none!important; font-size:0!important; line-height:0!important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease!important; } /* Same logo size */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge img{ display:block!important; width:auto!important; height:23px!important; max-width:62px!important; max-height:23px!important; min-width:0!important; min-height:0!important; margin:0 auto!important; padding:0!important; object-fit:contain!important; object-position:center!important; border:0!important; border-radius:0!important; transform:none!important; } /* ORCID exactly same as Board */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ flex:0 0 72px!important; width:72px!important; min-width:72px!important; max-width:72px!important; height:34px!important; min-height:34px!important; max-height:34px!important; padding:4px 5px!important; overflow:visible!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid img{ width:auto!important; height:23px!important; max-width:62px!important; max-height:23px!important; object-fit:contain!important; } /* Badge hover same as Board */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge:hover{ transform:translateY(-2px)!important; border-color:#B7D8C0!important; box-shadow: 0 6px 14px rgba(31,122,61,.12)!important; } /* ========================================================== RESPONSIVE — MATCH EDITORIAL BOARD BREAKPOINTS ========================================================== */ @media(max-width:900px){ .ceej-editorial .role-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:16px!important; } .ceej-editorial .role-grid .role-card{ min-height:160px!important; padding:17px!important; } .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 78px!important; width:78px!important; height:92px!important; min-width:78px!important; min-height:92px!important; margin-right:16px!important; } .ceej-editorial .role-grid .role-card h3{ font-size:19px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links{ gap:5px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ flex:0 0 68px!important; width:68px!important; min-width:68px!important; max-width:68px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ flex:0 0 68px!important; width:68px!important; min-width:68px!important; max-width:68px!important; } } @media(max-width:600px){ .ceej-editorial .role-grid{ grid-template-columns:1fr!important; gap:14px!important; } .ceej-editorial .role-grid .role-card{ min-height:150px!important; padding:17px!important; } .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 76px!important; width:76px!important; height:90px!important; min-width:76px!important; min-height:90px!important; margin-right:15px!important; } .ceej-editorial .role-grid .role-card h3{ font-size:19px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links{ margin-top:9px!important; gap:5px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ flex:0 0 68px!important; width:68px!important; min-width:68px!important; max-width:68px!important; height:33px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ flex:0 0 72px!important; width:72px!important; min-width:72px!important; max-width:72px!important; } } @media(max-width:430px){ .ceej-editorial .role-grid .role-card{ display:block!important; text-align:center!important; padding:13px!important; } .ceej-editorial .role-grid .role-card .avatar-circle.small{ margin:0 auto 14px!important; } .ceej-editorial .role-grid .role-card .role-info{ width:100%!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links{ justify-content:center!important; flex-wrap:wrap!important; gap:5px!important; } } /* ========================================================== END — TRUE EDITORIAL BOARD / SUPPORT CONSISTENCY ========================================================== */ /* ========================================================== FINAL FIX — SUPPORT BADGES ARE BEING CLIPPED Keep the same 4 x 72px geometry as Editorial Board, but use a controlled internal grid so the fourth badge can never be pushed outside the card. ========================================================== */ .ceej-editorial .role-grid .role-card .role-info{ flex:1 1 0%!important; min-width:0!important; width:0!important; max-width:none!important; overflow:visible!important; box-sizing:border-box!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links{ display:grid!important; grid-template-columns:repeat(4,minmax(0,72px))!important; grid-auto-flow:column!important; justify-content:start!important; align-items:center!important; gap:6px!important; width:306px!important; max-width:100%!important; min-width:0!important; margin:10px 0 0!important; padding:0!important; box-sizing:border-box!important; overflow:visible!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.scopus, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.sinta, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.scholar, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ display:flex!important; align-items:center!important; justify-content:center!important; width:72px!important; min-width:0!important; max-width:72px!important; height:34px!important; min-height:34px!important; max-height:34px!important; margin:0!important; padding:4px 5px!important; box-sizing:border-box!important; overflow:hidden!important; border-radius:999px!important; } /* ORCID: preserve the complete icon + wordmark inside its 72px badge */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ overflow:hidden!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid img{ display:block!important; width:auto!important; height:21px!important; max-width:62px!important; max-height:21px!important; margin:0 auto!important; padding:0!important; object-fit:contain!important; } /* Normal logos */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge:not(.orcid) img{ display:block!important; width:auto!important; height:22px!important; max-width:62px!important; max-height:22px!important; margin:0 auto!important; padding:0!important; object-fit:contain!important; } /* Desktop/tablet: keep the same geometry */ @media(min-width:601px){ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ grid-template-columns:repeat(4,minmax(0,72px))!important; width:306px!important; max-width:100%!important; } } /* Narrow screens: shrink each column rather than clipping */ @media(max-width:600px){ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ grid-template-columns:repeat(4,minmax(0,1fr))!important; width:100%!important; max-width:100%!important; gap:5px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ width:100%!important; max-width:none!important; } } @media(max-width:430px){ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ grid-template-columns:repeat(2,minmax(0,1fr))!important; grid-auto-flow:row!important; width:100%!important; max-width:100%!important; gap:6px!important; } } /* ========================================================== END — BADGE CLIPPING FIX ========================================================== */ /* ========================================================== CEEJ — EDITORIAL BOARD + JOURNAL SUPPORT COMPACT EDITORIAL LEADERSHIP STYLE ---------------------------------------------------------- EIC / Journal Manager are NOT changed. Editorial Board + Journal Support adopt the same visual language as Editorial Leadership, but in a smaller form. ========================================================== */ /* ---------------------------------------------------------- 1. BOARD + SUPPORT GRID ---------------------------------------------------------- */ .ceej-editorial .board-grid, .ceej-editorial .role-grid{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:16px!important; width:100%!important; max-width:none!important; align-items:stretch!important; } /* ---------------------------------------------------------- 2. COMPACT LEADERSHIP-STYLE CARD Horizontal card: PHOTO | INFORMATION ---------------------------------------------------------- */ .ceej-editorial .board-grid .board-card, .ceej-editorial .role-grid .role-card{ position:relative!important; display:flex!important; flex-direction:row!important; align-items:center!important; width:100%!important; min-width:0!important; min-height:142px!important; padding:14px 16px!important; box-sizing:border-box!important; overflow:visible!important; background:#FFFFFF!important; border:1px solid #D8EBDD!important; border-radius:18px!important; box-shadow: 0 8px 22px rgba(31,122,61,.08)!important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease!important; } /* Same top accent as Editorial Leadership */ .ceej-editorial .board-grid .board-card::before, .ceej-editorial .role-grid .role-card::before{ content:""!important; position:absolute!important; top:0!important; left:0!important; width:100%!important; height:4px!important; border-radius:18px 18px 0 0!important; background:linear-gradient( 90deg, #1F7A3D 0%, #3CA24C 52%, #E6C83E 100% )!important; } /* Remove old left-side accents */ .ceej-editorial .board-grid .board-card::after, .ceej-editorial .role-grid .role-card::after{ display:none!important; } /* Hover */ .ceej-editorial .board-grid .board-card:hover, .ceej-editorial .role-grid .role-card:hover{ transform:translateY(-2px)!important; border-color:#BFDCC7!important; box-shadow: 0 12px 28px rgba(31,122,61,.12)!important; } /* ---------------------------------------------------------- 3. COMPACT PORTRAIT Leadership uses large portrait. Board/Support use smaller version. ---------------------------------------------------------- */ .ceej-editorial .board-grid .board-card .avatar-circle, .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 82px!important; width:82px!important; height:96px!important; min-width:82px!important; min-height:96px!important; margin:0 16px 0 0!important; border:3px solid #FFFFFF!important; border-radius:16px!important; outline:2px solid #D9EDDE!important; background:#FFFFFF!important; box-shadow: 0 7px 18px rgba(31,122,61,.12)!important; overflow:hidden!important; } /* Keep the complete photo visible */ .ceej-editorial .board-grid .board-card .avatar-circle img, .ceej-editorial .role-grid .role-card .avatar-circle.small img{ display:block!important; width:100%!important; height:100%!important; max-width:100%!important; max-height:100%!important; margin:0!important; padding:0!important; box-sizing:border-box!important; object-fit:contain!important; object-position:center!important; transform:none!important; border:0!important; border-radius:12px!important; background:#FFFFFF!important; } /* ---------------------------------------------------------- 4. INFORMATION AREA ---------------------------------------------------------- */ .ceej-editorial .board-grid .board-info, .ceej-editorial .role-grid .role-card .role-info{ flex:1 1 auto!important; width:auto!important; min-width:0!important; max-width:none!important; padding:0!important; display:flex!important; flex-direction:column!important; align-items:flex-start!important; overflow:visible!important; } /* Board name */ .ceej-editorial .board-grid .board-card h3, .ceej-editorial .role-grid .role-card h3{ margin:0 0 5px!important; width:100%!important; color:#176D37!important; font-size:19px!important; font-weight:800!important; line-height:1.2!important; } /* Institution */ .ceej-editorial .board-grid .board-card .institution, .ceej-editorial .role-grid .role-card .institution{ width:100%!important; margin:0!important; color:#69766E!important; font-size:12.5px!important; line-height:1.4!important; overflow:visible!important; word-break:normal!important; overflow-wrap:normal!important; } /* Indonesian flag */ .ceej-editorial .board-grid .board-card .institution::after, .ceej-editorial .role-grid .role-card .institution::after{ content:""!important; display:inline-block!important; width:19px!important; height:12px!important; margin-left:7px!important; vertical-align:middle!important; border-radius:2px!important; background:linear-gradient( to bottom, #E31E24 0% 50%, #FFFFFF 50% 100% )!important; border:1px solid rgba(0,0,0,.10)!important; box-shadow: 0 1px 3px rgba(0,0,0,.15)!important; } /* ---------------------------------------------------------- 5. ROLE BADGE Only Support keeps its role label. ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .role-badge{ display:inline-flex!important; align-items:center!important; justify-content:center!important; width:auto!important; max-width:100%!important; min-height:28px!important; margin:0 0 5px!important; padding:5px 11px!important; border-radius:999px!important; background:#EEF8F1!important; color:#18733C!important; font-size:9px!important; font-weight:700!important; line-height:1.2!important; letter-spacing:.65px!important; white-space:nowrap!important; } /* ---------------------------------------------------------- 6. ACADEMIC BADGES Same compact system for Board + Support. ---------------------------------------------------------- */ .ceej-editorial .board-grid .board-card .profile-links.academic-links, .ceej-editorial .role-grid .role-card .profile-links.academic-links{ display:grid!important; grid-template-columns: repeat(4,68px)!important; gap:5px!important; width:max-content!important; max-width:100%!important; margin:11px 0 0!important; padding:0!important; box-sizing:border-box!important; overflow:visible!important; } /* Fixed compact badge */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ display:flex!important; align-items:center!important; justify-content:center!important; width:68px!important; min-width:68px!important; max-width:68px!important; height:32px!important; min-height:32px!important; max-height:32px!important; margin:0!important; padding:2px 4px!important; box-sizing:border-box!important; border:1px solid #D9EBDD!important; border-radius:999px!important; background:#FFFFFF!important; overflow:hidden!important; box-shadow: 0 4px 12px rgba(31,122,61,.07)!important; } /* Badge logos */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge img, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge img{ display:block!important; width:auto!important; height:21px!important; max-width:60px!important; max-height:21px!important; min-width:0!important; min-height:0!important; margin:0 auto!important; padding:0!important; object-fit:contain!important; object-position:center!important; transform:none!important; } /* ORCID */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.orcid, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ width:68px!important; min-width:68px!important; max-width:68px!important; overflow:hidden!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.orcid img, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid img{ width:auto!important; height:21px!important; max-width:60px!important; max-height:21px!important; object-fit:contain!important; } /* ---------------------------------------------------------- 7. DESKTOP ---------------------------------------------------------- */ @media(min-width:992px){ .ceej-editorial .board-grid, .ceej-editorial .role-grid{ grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:16px!important; } } /* ---------------------------------------------------------- 8. TABLET ---------------------------------------------------------- */ @media(max-width:900px){ .ceej-editorial .board-grid, .ceej-editorial .role-grid{ grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:13px!important; } .ceej-editorial .board-grid .board-card, .ceej-editorial .role-grid .role-card{ min-height:132px!important; padding:12px!important; } .ceej-editorial .board-grid .board-card .avatar-circle, .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex-basis:72px!important; width:72px!important; height:84px!important; min-width:72px!important; min-height:84px!important; margin-right:12px!important; } .ceej-editorial .board-grid .board-card h3, .ceej-editorial .role-grid .role-card h3{ font-size:17px!important; } .ceej-editorial .board-grid .board-card .institution, .ceej-editorial .role-grid .role-card .institution{ font-size:11.5px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links, .ceej-editorial .role-grid .role-card .profile-links.academic-links{ grid-template-columns: repeat(4,62px)!important; gap:4px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ width:62px!important; min-width:62px!important; max-width:62px!important; height:30px!important; min-height:30px!important; max-height:30px!important; } } /* ---------------------------------------------------------- 9. MOBILE ---------------------------------------------------------- */ @media(max-width:700px){ .ceej-editorial .board-grid, .ceej-editorial .role-grid{ grid-template-columns:1fr!important; gap:12px!important; } } /* ---------------------------------------------------------- 10. VERY SMALL MOBILE ---------------------------------------------------------- */ @media(max-width:430px){ .ceej-editorial .board-grid .board-card, .ceej-editorial .role-grid .role-card{ display:block!important; text-align:center!important; } .ceej-editorial .board-grid .board-card .avatar-circle, .ceej-editorial .role-grid .role-card .avatar-circle.small{ margin:0 auto 11px!important; } .ceej-editorial .board-grid .board-info, .ceej-editorial .role-grid .role-card .role-info{ width:100%!important; align-items:center!important; } .ceej-editorial .board-grid .board-card .institution, .ceej-editorial .role-grid .role-card .institution{ text-align:center!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links, .ceej-editorial .role-grid .role-card .profile-links.academic-links{ margin-left:auto!important; margin-right:auto!important; } } /* ========================================================== END — COMPACT EDITORIAL LEADERSHIP STYLE ========================================================== */ /* ========================================================== FINAL FIX — ACADEMIC BADGES MUST NEVER BE CLIPPED ---------------------------------------------------------- Problem: The previous compact design used fixed 4 x 68px badges. In the two-column OJS layout, the information column can become narrower than that fixed width, causing the fourth badge (especially ORCID) to extend beyond the card. Solution: - Badge row uses 100% of the information column. - Four equal flexible columns. - Each badge is width:100% of its own column. - Logos scale inside the badge. - No horizontal overflow. ========================================================== */ /* ---------- BOARD + SUPPORT INFORMATION ---------- */ .ceej-editorial .board-grid .board-info, .ceej-editorial .role-grid .role-card .role-info{ min-width:0!important; max-width:100%!important; overflow:visible!important; } /* ---------- BADGE ROW: FLEXIBLE 4-COLUMN GRID ---------- */ .ceej-editorial .board-grid .board-card .profile-links.academic-links, .ceej-editorial .role-grid .role-card .profile-links.academic-links{ display:grid!important; grid-template-columns: repeat(4,minmax(0,1fr))!important; gap:5px!important; width:100%!important; max-width:100%!important; margin:11px 0 0!important; padding:0!important; box-sizing:border-box!important; overflow:visible!important; } /* ---------- BADGE: ALWAYS FIT ITS COLUMN ---------- */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-width:0!important; max-width:100%!important; height:32px!important; min-height:32px!important; max-height:32px!important; margin:0!important; padding:2px 3px!important; box-sizing:border-box!important; border:1px solid #D9EBDD!important; border-radius:999px!important; background:#FFFFFF!important; overflow:hidden!important; box-shadow: 0 4px 12px rgba(31,122,61,.07)!important; } /* ---------- LOGOS: SCALE TO AVAILABLE SPACE ---------- */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge img, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge img{ display:block!important; width:auto!important; height:21px!important; max-width:100%!important; max-height:21px!important; min-width:0!important; min-height:0!important; margin:0 auto!important; padding:0!important; object-fit:contain!important; object-position:center!important; transform:none!important; } /* ---------- ORCID: SAME SIZE SYSTEM, NO CLIPPING ---------- */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.orcid, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ width:100%!important; min-width:0!important; max-width:100%!important; overflow:hidden!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge.orcid img, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid img{ width:auto!important; height:21px!important; max-width:100%!important; max-height:21px!important; object-fit:contain!important; } /* ---------- PREVENT CARD HORIZONTAL OVERFLOW ---------- */ .ceej-editorial .board-grid .board-card, .ceej-editorial .role-grid .role-card{ overflow:hidden!important; min-width:0!important; } /* ---------- DESKTOP: KEEP 4 BADGES IN ONE ROW ---------- */ @media(min-width:901px){ .ceej-editorial .board-grid .board-card .profile-links.academic-links, .ceej-editorial .role-grid .role-card .profile-links.academic-links{ grid-template-columns: repeat(4,minmax(0,1fr))!important; } } /* ---------- TABLET ---------- */ @media(max-width:900px){ .ceej-editorial .board-grid .board-card .profile-links.academic-links, .ceej-editorial .role-grid .role-card .profile-links.academic-links{ grid-template-columns: repeat(4,minmax(0,1fr))!important; gap:4px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ height:30px!important; min-height:30px!important; max-height:30px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge img, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge img{ height:19px!important; max-height:19px!important; } } /* ---------- SMALL MOBILE: STACK 2 x 2 ---------- */ @media(max-width:430px){ .ceej-editorial .board-grid .board-card .profile-links.academic-links, .ceej-editorial .role-grid .role-card .profile-links.academic-links{ grid-template-columns: repeat(2,minmax(0,1fr))!important; width:100%!important; gap:5px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ width:100%!important; } } /* ========================================================== END — NO CROP / NO OVERFLOW BADGES ========================================================== */ /* ========================================================== FINAL COMPACT SPACING REVISION Editorial Board + Journal Support Team ---------------------------------------------------------- Tujuan: - Mengurangi jarak vertikal yang terlalu lebar. - Menghilangkan ruang kosong di antara institution, expertise, dan academic badges. - Card tetap horizontal dan tidak mengubah EIC / JM. - Badge tetap 4 kolom dan tidak terpotong. ========================================================== */ /* Card: jangan dipaksa terlalu tinggi */ .ceej-editorial .board-grid .board-card, .ceej-editorial .role-grid .role-card{ min-height:0!important; height:auto!important; padding:12px 14px!important; gap:12px!important; align-items:center!important; } /* Foto sedikit lebih compact */ .ceej-editorial .board-grid .board-card .avatar-circle, .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 78px!important; width:78px!important; height:92px!important; min-width:78px!important; min-height:92px!important; margin:0!important; } /* Kolom informasi */ .ceej-editorial .board-grid .board-info, .ceej-editorial .role-grid .role-card .role-info{ display:flex!important; flex-direction:column!important; justify-content:center!important; align-items:flex-start!important; min-width:0!important; margin:0!important; padding:0!important; } /* Nama */ .ceej-editorial .board-grid .board-card h3, .ceej-editorial .role-grid .role-card h3{ margin:0 0 3px!important; line-height:1.18!important; } /* Institution */ .ceej-editorial .board-grid .board-card .institution, .ceej-editorial .role-grid .role-card .institution{ margin:0!important; line-height:1.25!important; } /* Expertise: langsung di bawah institution */ .ceej-editorial .board-grid .board-card .expertise, .ceej-editorial .role-grid .role-card .expertise{ margin:3px 0 3px!important; padding:0!important; line-height:1.25!important; } /* Badge row: jauh lebih dekat ke expertise */ .ceej-editorial .board-grid .board-card .profile-links.academic-links, .ceej-editorial .role-grid .role-card .profile-links.academic-links{ margin:3px 0 0!important; gap:4px!important; width:100%!important; max-width:100%!important; min-width:0!important; } /* Badge */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ height:29px!important; min-height:29px!important; max-height:29px!important; padding:2px 3px!important; margin:0!important; } /* Logo badge */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge img, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge img{ max-height:19px!important; } /* Tablet */ @media(max-width:900px){ .ceej-editorial .board-grid .board-card, .ceej-editorial .role-grid .role-card{ padding:11px 12px!important; gap:10px!important; } .ceej-editorial .board-grid .board-card .avatar-circle, .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex-basis:72px!important; width:72px!important; height:84px!important; min-width:72px!important; min-height:84px!important; } .ceej-editorial .board-grid .board-card h3, .ceej-editorial .role-grid .role-card h3{ font-size:17px!important; } } /* Mobile */ @media(max-width:700px){ .ceej-editorial .board-grid .board-card, .ceej-editorial .role-grid .role-card{ padding:11px!important; } } /* Small mobile */ @media(max-width:430px){ .ceej-editorial .board-grid .board-card, .ceej-editorial .role-grid .role-card{ padding:12px!important; } .ceej-editorial .board-grid .board-card .avatar-circle, .ceej-editorial .role-grid .role-card .avatar-circle.small{ margin:0 auto 7px!important; } .ceej-editorial .board-grid .board-card .expertise, .ceej-editorial .role-grid .role-card .expertise{ margin:3px 0!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links, .ceej-editorial .role-grid .role-card .profile-links.academic-links{ margin-top:4px!important; } } /* ========================================================== V2 — TIGHT VERTICAL SPACING ========================================================== Perbaikan khusus berdasarkan tampilan aktual: - Hapus min-height 43px pada .institution. - Hapus margin bawah besar bawaan .institution. - Nama -> institution dibuat rapat. - Institution -> Expertise dibuat rapat. - Expertise -> academic badges dibuat rapat. ========================================================== */ .ceej-editorial .board-grid .board-card h3{ margin:0 0 3px!important; line-height:1.18!important; } .ceej-editorial .board-grid .board-card .institution{ min-height:0!important; height:auto!important; margin:0 0 2px!important; padding:0!important; line-height:1.2!important; } .ceej-editorial .board-grid .board-card .expertise{ display:block!important; min-height:0!important; height:auto!important; margin:0 0 2px!important; padding:0!important; line-height:1.2!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links{ margin:2px 0 0!important; padding:0!important; gap:4px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge{ margin:0!important; } /* Support */ .ceej-editorial .role-grid .role-card h3{ margin:0 0 3px!important; line-height:1.18!important; } .ceej-editorial .role-grid .role-card .institution{ min-height:0!important; height:auto!important; margin:0 0 2px!important; padding:0!important; line-height:1.2!important; } .ceej-editorial .role-grid .role-card .expertise{ display:block!important; min-height:0!important; height:auto!important; margin:0 0 2px!important; padding:0!important; line-height:1.2!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links{ margin:2px 0 0!important; padding:0!important; gap:4px!important; } /* Jangan biarkan aturan p global memberi ruang tambahan */ .ceej-editorial .board-grid .board-card p.expertise, .ceej-editorial .role-grid .role-card p.expertise{ margin-top:0!important; margin-bottom:2px!important; } /* Small screen tetap rapat */ @media(max-width:430px){ .ceej-editorial .board-grid .board-card h3, .ceej-editorial .role-grid .role-card h3{ margin-bottom:3px!important; } .ceej-editorial .board-grid .board-card .institution, .ceej-editorial .role-grid .role-card .institution{ margin-bottom:2px!important; } .ceej-editorial .board-grid .board-card .expertise, .ceej-editorial .role-grid .role-card .expertise{ margin-bottom:2px!important; } } /* ========================================================== CEEJ — FULL PORTRAIT PHOTO FIX Editorial Board + Journal Support Team ---------------------------------------------------------- Purpose: - Make Board/Support photos display like portrait photos - Prevent circular cropping - Preserve the complete image with object-fit: contain - Keep Editorial Leadership (EiC/JM) unchanged ========================================================== */ /* ---------- EDITORIAL BOARD ---------- */ .ceej-editorial .board-grid .board-card .avatar-circle{ flex:0 0 92px!important; width:92px!important; height:118px!important; min-width:92px!important; min-height:118px!important; max-width:92px!important; max-height:118px!important; margin:0 18px 0 0!important; display:flex!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; border-radius:14px!important; overflow:hidden!important; background:#FFFFFF!important; border:3px solid #FFFFFF!important; outline:2px solid #D8EEDC!important; box-shadow: 0 7px 18px rgba(23,107,56,.15)!important; } .ceej-editorial .board-grid .board-card .avatar-circle img{ display:block!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; max-width:100%!important; max-height:100%!important; margin:0!important; padding:0!important; object-fit:contain!important; object-position:center center!important; border-radius:10px!important; transform:none!important; } /* ---------- JOURNAL SUPPORT TEAM ---------- */ .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 92px!important; width:92px!important; height:118px!important; min-width:92px!important; min-height:118px!important; max-width:92px!important; max-height:118px!important; margin:0 18px 0 0!important; display:flex!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; border-radius:14px!important; overflow:hidden!important; background:#FFFFFF!important; border:3px solid #FFFFFF!important; outline:2px solid #F3D58A!important; box-shadow: 0 7px 18px rgba(184,121,0,.16)!important; } .ceej-editorial .role-grid .role-card .avatar-circle.small img{ display:block!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; max-width:100%!important; max-height:100%!important; margin:0!important; padding:0!important; object-fit:contain!important; object-position:center center!important; border-radius:10px!important; transform:none!important; } /* ---------- TABLET ---------- */ @media(max-width:991px){ .ceej-editorial .board-grid .board-card .avatar-circle, .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 82px!important; width:82px!important; height:108px!important; min-width:82px!important; min-height:108px!important; max-width:82px!important; max-height:108px!important; margin-right:14px!important; } } /* ---------- MOBILE ---------- */ @media(max-width:600px){ .ceej-editorial .board-grid .board-card .avatar-circle, .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 82px!important; width:82px!important; height:108px!important; min-width:82px!important; min-height:108px!important; max-width:82px!important; max-height:108px!important; margin-right:14px!important; border-radius:12px!important; } } /* ---------- VERY SMALL MOBILE ---------- */ @media(max-width:430px){ .ceej-editorial .board-grid .board-card .avatar-circle, .ceej-editorial .role-grid .role-card .avatar-circle.small{ width:92px!important; height:118px!important; min-width:92px!important; min-height:118px!important; max-width:92px!important; max-height:118px!important; margin:0 auto 14px!important; } } /* ========================================================== CEEJ — OPTION 3 NORMALIZED PORTRAIT FRAME ---------------------------------------------------------- Editorial Board + Journal Support Team EiC + Journal Manager are NOT affected. Strategy: - Same visual canvas for every photo - No circular avatar - Portrait frame with fixed 3:4 ratio - Preserve the complete source photo - Do NOT crop the original image - Background fills the frame when source ratios differ ========================================================== */ /* ========================================================== 1. EDITORIAL BOARD — NORMALIZED PHOTO FRAME ========================================================== */ .ceej-editorial .board-grid .board-card .avatar-circle{ flex:0 0 92px!important; width:92px!important; height:122px!important; min-width:92px!important; min-height:122px!important; max-width:92px!important; max-height:122px!important; margin:0 18px 0 0!important; display:flex!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; border-radius:14px!important; overflow:hidden!important; /* Same neutral canvas for every photo */ background:#FFA000!important; border:3px solid #FFFFFF!important; outline:2px solid #D8EEDC!important; box-shadow: 0 7px 18px rgba(23,107,56,.15)!important; position:relative!important; } /* ---------------------------------------------------------- Board photo IMPORTANT: contain = complete photo remains visible background = fills unused area ---------------------------------------------------------- */ .ceej-editorial .board-grid .board-card .avatar-circle img{ display:block!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; max-width:100%!important; max-height:100%!important; margin:0!important; padding:0!important; object-fit:contain!important; object-position:center center!important; border-radius:10px!important; transform:none!important; } /* ========================================================== 2. JOURNAL SUPPORT TEAM — NORMALIZED PHOTO FRAME ========================================================== */ .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 92px!important; width:92px!important; height:122px!important; min-width:92px!important; min-height:122px!important; max-width:92px!important; max-height:122px!important; margin:0 18px 0 0!important; display:flex!important; align-items:center!important; justify-content:center!important; box-sizing:border-box!important; border-radius:14px!important; overflow:hidden!important; /* Same canvas as Editorial Board */ background:#FFA000!important; border:3px solid #FFFFFF!important; outline:2px solid #F3D58A!important; box-shadow: 0 7px 18px rgba(184,121,0,.16)!important; position:relative!important; } /* ---------------------------------------------------------- Support photo ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .avatar-circle.small img{ display:block!important; width:100%!important; height:100%!important; min-width:0!important; min-height:0!important; max-width:100%!important; max-height:100%!important; margin:0!important; padding:0!important; object-fit:contain!important; object-position:center center!important; border-radius:10px!important; transform:none!important; } /* ========================================================== 3. PREVENT GLOBAL IMAGE HOVER FROM DISTORTING PHOTOS ========================================================== */ .ceej-editorial .board-grid .board-card .avatar-circle img:hover, .ceej-editorial .role-grid .role-card .avatar-circle.small img:hover{ transform:none!important; } /* ========================================================== 4. DESKTOP ========================================================== */ @media (min-width:992px){ .ceej-editorial .board-grid .board-card, .ceej-editorial .role-grid .role-card{ align-items:center!important; } } /* ========================================================== 5. TABLET ========================================================== */ @media (max-width:991px){ .ceej-editorial .board-grid .board-card .avatar-circle, .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 82px!important; width:82px!important; height:110px!important; min-width:82px!important; min-height:110px!important; max-width:82px!important; max-height:110px!important; margin-right:14px!important; } } /* ========================================================== 6. MOBILE ========================================================== */ @media (max-width:600px){ .ceej-editorial .board-grid .board-card .avatar-circle, .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 82px!important; width:82px!important; height:110px!important; min-width:82px!important; min-height:110px!important; max-width:82px!important; max-height:110px!important; margin-right:14px!important; border-radius:12px!important; } } /* ========================================================== 7. VERY SMALL MOBILE ========================================================== */ @media (max-width:430px){ .ceej-editorial .board-grid .board-card .avatar-circle, .ceej-editorial .role-grid .role-card .avatar-circle.small{ flex:0 0 86px!important; width:86px!important; height:114px!important; min-width:86px!important; min-height:114px!important; max-width:86px!important; max-height:114px!important; margin:0 auto 14px!important; } } /* ========================================================== FINAL SPACING FIX — EDITORIAL BOARD + JOURNAL SUPPORT ---------------------------------------------------------- Fix: 1. Academic badges terlalu rapat secara horizontal. 2. Academic badges terlalu dekat dengan Expertise. 3. Role badge (Production/Layout/Proofreader) terlalu dekat dengan nama. 4. Tidak mengubah Editorial Leadership (EiC/JM). ========================================================== */ /* ---------------------------------------------------------- 1. SUPPORT ROLE BADGE → NAME ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .role-badge{ display:inline-flex!important; margin:0 0 7px!important; } /* ---------------------------------------------------------- 2. BOARD/SUPPORT → EXPERTISE → BADGES Beri breathing room yang lebih proporsional. ---------------------------------------------------------- */ .ceej-editorial .board-grid .board-card .expertise, .ceej-editorial .role-grid .role-card .expertise{ margin:5px 0 7px!important; line-height:1.25!important; } /* ---------------------------------------------------------- 3. BADGE ROW — JARAK HORIZONTAL LEBIH LONGGAR ---------------------------------------------------------- */ .ceej-editorial .board-grid .board-card .profile-links.academic-links, .ceej-editorial .role-grid .role-card .profile-links.academic-links{ gap:8px!important; margin:0!important; padding:0!important; width:100%!important; max-width:100%!important; } /* ---------------------------------------------------------- 4. BADGE — SEDIKIT LEBIH BESAR DAN TIDAK MENEMPEL ---------------------------------------------------------- */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ height:33px!important; min-height:33px!important; max-height:33px!important; padding:3px 5px!important; margin:0!important; box-sizing:border-box!important; } /* Logo sedikit lebih besar agar badge tidak terlihat padat */ .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge img, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge img{ max-height:21px!important; height:21px!important; } /* ---------------------------------------------------------- 5. SUPPORT CARD — JAGA JARAK ANTAR ELEMEN ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .role-info{ row-gap:0!important; } /* ---------------------------------------------------------- 6. DESKTOP — JARAK BADGE LEBIH NYAMAN ---------------------------------------------------------- */ @media(min-width:901px){ .ceej-editorial .board-grid .board-card .profile-links.academic-links, .ceej-editorial .role-grid .role-card .profile-links.academic-links{ gap:8px!important; } } /* ---------------------------------------------------------- 7. TABLET ---------------------------------------------------------- */ @media(max-width:900px){ .ceej-editorial .board-grid .board-card .profile-links.academic-links, .ceej-editorial .role-grid .role-card .profile-links.academic-links{ gap:6px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links .academic-badge, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ height:31px!important; min-height:31px!important; max-height:31px!important; } } /* ---------------------------------------------------------- 8. MOBILE ---------------------------------------------------------- */ @media(max-width:430px){ .ceej-editorial .board-grid .board-card .expertise, .ceej-editorial .role-grid .role-card .expertise{ margin-bottom:6px!important; } .ceej-editorial .board-grid .board-card .profile-links.academic-links, .ceej-editorial .role-grid .role-card .profile-links.academic-links{ gap:7px!important; } } /* ========================================================== FINAL FIX — JOURNAL SUPPORT TEAM NOT TOO TIGHT ---------------------------------------------------------- Penyebab: - aturan terakhir memberi .profile-links margin-top:2px - gap badge hanya 4px - expertise dan badge menjadi terlalu berdekatan - Support menggunakan kolom informasi yang lebih sempit ---------------------------------------------------------- Solusi: - hanya Support Team yang diberi ruang tambahan - Editorial Board dan Editorial Leadership tidak diubah ========================================================== */ /* Support information column */ .ceej-editorial .role-grid .role-card .role-info{ display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:center!important; min-width:0!important; } /* Role → Name */ .ceej-editorial .role-grid .role-card .role-badge{ margin:0 0 8px!important; } /* Name → Institution */ .ceej-editorial .role-grid .role-card h3{ margin:0 0 4px!important; line-height:1.2!important; } /* Institution → Expertise */ .ceej-editorial .role-grid .role-card .institution{ margin:0 0 5px!important; line-height:1.25!important; } /* Expertise → Academic badges This is the main correction. */ .ceej-editorial .role-grid .role-card .expertise{ margin:0 0 9px!important; line-height:1.25!important; } /* Academic badge row */ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ display:grid!important; grid-template-columns:repeat(4,minmax(0,1fr))!important; gap:7px!important; width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; padding:0!important; box-sizing:border-box!important; align-items:center!important; } /* Individual badges */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ width:100%!important; min-width:0!important; max-width:100%!important; height:32px!important; min-height:32px!important; max-height:32px!important; margin:0!important; padding:3px 5px!important; box-sizing:border-box!important; } /* Badge logos */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge img{ height:20px!important; max-height:20px!important; max-width:100%!important; } /* Tablet */ @media(max-width:900px){ .ceej-editorial .role-grid .role-card .expertise{ margin-bottom:8px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links{ gap:6px!important; } } /* Mobile */ @media(max-width:430px){ .ceej-editorial .role-grid .role-card .role-badge{ margin-bottom:7px!important; } .ceej-editorial .role-grid .role-card .institution{ margin-bottom:4px!important; } .ceej-editorial .role-grid .role-card .expertise{ margin-bottom:8px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links{ gap:6px!important; } } /* ========================================================== FINAL V3 — JOURNAL SUPPORT = EDITORIAL BOARD SPACING ---------------------------------------------------------- PENTING: Support sebelumnya TIDAK sama dengan Editorial Board. Penyebab utamanya adalah override Support di bagian akhir yang menggunakan: - expertise margin-bottom 9px - academic-links sebagai GRID - gap badge 7px - badge 32px Sekarang Support disamakan dengan CASCADE TERAKHIR Editorial Board: - Expertise: 5px 0 7px - Badge row: flex, gap 8px, margin 0 - Badge: 33px - Logo: 21px Yang tetap berbeda hanya ROLE BADGE: Production Editor / Layout Editor / Proofreader ========================================================== */ /* ---------------------------------------------------------- SUPPORT: ROLE BADGE → NAME ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .role-badge{ display:inline-flex!important; margin:0 0 7px!important; } /* ---------------------------------------------------------- SUPPORT: NAME → INSTITUTION Sama dengan Editorial Board ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card h3{ margin:0 0 3px!important; line-height:1.18!important; } /* ---------------------------------------------------------- SUPPORT: INSTITUTION Sama dengan Editorial Board ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .institution{ min-height:0!important; height:auto!important; margin:0 0 2px!important; padding:0!important; line-height:1.2!important; } /* ---------------------------------------------------------- SUPPORT: EXPERTISE IDENTIK dengan Editorial Board ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .expertise{ display:block!important; min-height:0!important; height:auto!important; margin:5px 0 7px!important; padding:0!important; line-height:1.25!important; } /* ---------------------------------------------------------- SUPPORT: ACADEMIC BADGES IDENTIK dengan Editorial Board ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:flex-start!important; flex-wrap:wrap!important; gap:8px!important; width:100%!important; max-width:100%!important; min-width:0!important; margin:0!important; padding:0!important; box-sizing:border-box!important; } /* ---------------------------------------------------------- SUPPORT BADGES Sama tinggi dengan Editorial Board ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ display:inline-flex!important; align-items:center!important; justify-content:center!important; flex:0 0 auto!important; height:33px!important; min-height:33px!important; max-height:33px!important; margin:0!important; padding:3px 5px!important; box-sizing:border-box!important; border-radius:999px!important; } /* ---------------------------------------------------------- SUPPORT LOGOS Sama ukuran dengan Editorial Board ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge img{ display:block!important; width:auto!important; height:21px!important; max-height:21px!important; max-width:108px!important; min-width:0!important; min-height:0!important; margin:0!important; padding:0!important; object-fit:contain!important; object-position:center!important; transform:none!important; } /* ---------------------------------------------------------- SUPPORT BRAND WIDTHS IDENTIK dengan Editorial Board ---------------------------------------------------------- */ .ceej-editorial .role-grid .academic-badge.scopus{ min-width:112px!important; width:auto!important; } .ceej-editorial .role-grid .academic-badge.sinta{ min-width:118px!important; width:auto!important; } .ceej-editorial .role-grid .academic-badge.scholar{ min-width:126px!important; width:auto!important; } .ceej-editorial .role-grid .academic-badge.orcid{ min-width:88px!important; width:auto!important; } /* ---------------------------------------------------------- TABLET — tetap mengikuti Board ---------------------------------------------------------- */ @media(max-width:900px){ .ceej-editorial .role-grid .role-card .expertise{ margin:5px 0 7px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links{ gap:6px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ height:31px!important; min-height:31px!important; max-height:31px!important; } } /* ---------------------------------------------------------- MOBILE — tetap mengikuti Board ---------------------------------------------------------- */ @media(max-width:430px){ .ceej-editorial .role-grid .role-card .expertise{ margin:5px 0 6px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links{ gap:7px!important; } } /* ========================================================== CEEJ FINAL V4 — SUPPORT MUST MATCH EDITORIAL BOARD ========================================================== ROOT CAUSE: V3 mengubah Support menjadi FLEX + fixed min-width: Scopus 112px / SINTA 118px / Scholar 126px / ORCID 88px. Lebar minimum tersebut tidak cukup untuk 4 badge dalam satu baris pada kolom informasi Support, sehingga ORCID turun ke baris kedua. SOLUSI: Support menggunakan GRID 4 kolom seperti Editorial Board. Badge dibuat width:100% dan min-width:0. Tidak ada fixed brand width pada Support. HTML TIDAK PERLU DIUBAH. ========================================================== */ /* ---------------------------------------------------------- 1. SUPPORT INFORMATION COLUMN Tetap sama seperti Board: foto + satu kolom informasi. ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .role-info{ display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:center!important; flex:1 1 auto!important; min-width:0!important; width:auto!important; margin:0!important; padding:0!important; } /* ---------------------------------------------------------- 2. ROLE BADGE Ini satu-satunya elemen tambahan dibanding Editorial Board. ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .role-badge{ display:inline-flex!important; align-items:center!important; justify-content:center!important; margin:0 0 7px!important; padding:7px 14px!important; box-sizing:border-box!important; } /* ---------------------------------------------------------- 3. NAME IDENTIK dengan Editorial Board ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card h3{ margin:0 0 3px!important; line-height:1.18!important; } /* ---------------------------------------------------------- 4. INSTITUTION IDENTIK dengan Editorial Board ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .institution{ min-height:0!important; height:auto!important; margin:0!important; padding:0!important; line-height:1.25!important; } /* ---------------------------------------------------------- 5. EXPERTISE IDENTIK dengan Editorial Board ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .expertise{ display:block!important; min-height:0!important; height:auto!important; margin:3px 0 3px!important; padding:0!important; line-height:1.25!important; } /* ---------------------------------------------------------- 6. SUPPORT BADGE ROW SAMA DENGAN BOARD: GRID 4 KOLOM ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ display:grid!important; grid-template-columns: repeat(4,minmax(0,1fr))!important; grid-template-rows:1fr!important; align-items:center!important; justify-items:stretch!important; width:100%!important; max-width:100%!important; min-width:0!important; gap:8px!important; margin:3px 0 0!important; padding:0!important; box-sizing:border-box!important; overflow:visible!important; } /* ---------------------------------------------------------- 7. SUPPORT BADGES SAMA DENGAN BOARD: width mengikuti grid cell ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; min-width:0!important; max-width:100%!important; height:33px!important; min-height:33px!important; max-height:33px!important; margin:0!important; padding:3px 5px!important; box-sizing:border-box!important; overflow:hidden!important; } /* ---------------------------------------------------------- 8. REMOVE ALL OLD SUPPORT BRAND WIDTHS Ini penting karena V3 masih memiliki min-width: Scopus 112 / SINTA 118 / Scholar 126 / ORCID 88. ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.scopus, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.sinta, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.scholar, .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ flex:1 1 auto!important; width:100%!important; min-width:0!important; max-width:100%!important; } /* ---------------------------------------------------------- 9. SUPPORT LOGOS SAMA DENGAN BOARD ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge img{ display:block!important; width:auto!important; max-width:100%!important; height:21px!important; max-height:21px!important; min-width:0!important; min-height:0!important; margin:0 auto!important; padding:0!important; object-fit:contain!important; object-position:center!important; transform:none!important; } /* ---------------------------------------------------------- 10. DESKTOP ---------------------------------------------------------- */ @media(min-width:901px){ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ grid-template-columns: repeat(4,minmax(0,1fr))!important; gap:8px!important; } } /* ---------------------------------------------------------- 11. TABLET ---------------------------------------------------------- */ @media(max-width:900px){ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ grid-template-columns: repeat(4,minmax(0,1fr))!important; gap:5px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge{ height:33px!important; min-height:33px!important; max-height:33px!important; } } /* ---------------------------------------------------------- 12. MOBILE ---------------------------------------------------------- */ @media(max-width:600px){ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ grid-template-columns: repeat(2,minmax(0,1fr))!important; grid-template-rows:auto auto!important; gap:6px!important; } } /* ---------------------------------------------------------- 13. SMALL MOBILE ---------------------------------------------------------- */ @media(max-width:430px){ .ceej-editorial .role-grid .role-card .profile-links.academic-links{ grid-template-columns: repeat(2,minmax(0,1fr))!important; gap:6px!important; } } /* ========================================================== CEEJ FINAL V5 — SUPPORT ORCID FIX ---------------------------------------------------------- Tujuan: 1. ORCID pada Journal Support Team harus menampilkan ikon ORCID + teks "ORCID". 2. Ukuran ikon tidak terlalu besar. 3. Badge tetap sama tinggi dan lebar grid dengan badge lain. 4. Tidak mengubah Editorial Leadership atau Editorial Board. 5. Berlaku juga pada tablet/mobile. ========================================================== */ /* ---------------------------------------------------------- 1. SUPPORT ORCID BADGE ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ display:flex!important; align-items:center!important; justify-content:center!important; flex-direction:row!important; flex-wrap:nowrap!important; width:100%!important; min-width:0!important; max-width:100%!important; height:33px!important; min-height:33px!important; max-height:33px!important; margin:0!important; padding:3px 5px!important; box-sizing:border-box!important; overflow:visible!important; border-radius:999px!important; /* Override the general academic-badge font-size:0 */ font-size:10px!important; line-height:1!important; font-weight:500!important; white-space:nowrap!important; text-decoration:none!important; gap:4px!important; } /* ---------------------------------------------------------- 2. ORCID ICON ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid img{ display:block!important; width:14px!important; height:14px!important; min-width:14px!important; min-height:14px!important; max-width:14px!important; max-height:14px!important; margin:0!important; padding:0!important; flex:0 0 14px!important; object-fit:contain!important; object-position:center!important; transform:none!important; } /* ---------------------------------------------------------- 3. ORCID TEXT The HTML already contains the text "ORCID". Keep it visible and vertically centered. ---------------------------------------------------------- */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ color:#5A9E20!important; -webkit-text-fill-color:#5A9E20!important; } /* Prevent global image hover rules from enlarging ORCID */ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid:hover img{ transform:none!important; } /* ---------------------------------------------------------- 4. TABLET ---------------------------------------------------------- */ @media(max-width:900px){ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ height:33px!important; min-height:33px!important; max-height:33px!important; font-size:9.5px!important; gap:3px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid img{ width:13px!important; height:13px!important; min-width:13px!important; min-height:13px!important; max-width:13px!important; max-height:13px!important; flex-basis:13px!important; } } /* ---------------------------------------------------------- 5. MOBILE ---------------------------------------------------------- */ @media(max-width:600px){ .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid{ height:34px!important; min-height:34px!important; max-height:34px!important; font-size:10px!important; gap:4px!important; } .ceej-editorial .role-grid .role-card .profile-links.academic-links .academic-badge.orcid img{ width:14px!important; height:14px!important; min-width:14px!important; min-height:14px!important; max-width:14px!important; max-height:14px!important; flex-basis:14px!important; } } /* ========================================================== FINAL FIX — JOURNAL SUPPORT ROLE BADGES LEFT-ALIGNED ---------------------------------------------------------- Layout Editor was previously forced to min-width:178px because the old CSS treated the second card as a "Translator" card. That rule is no longer appropriate. All Support Team role badges now use natural width and remain aligned to the left edge of the information column. ========================================================== */ .ceej-editorial .role-grid .role-card .role-info{ display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:center!important; } .ceej-editorial .role-grid .role-card .role-badge{ width:max-content!important; min-width:0!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; align-self:flex-start!important; text-align:center!important; } /* Remove the obsolete second-card width rule. This affects Layout Editor only. */ .ceej-editorial .role-grid .role-card:nth-child(2) .role-badge{ width:max-content!important; min-width:0!important; max-width:100%!important; margin-left:0!important; margin-right:0!important; align-self:flex-start!important; } /* ========================================================== FINAL FIX — SYED KAMARUZAMAN BIN SYED ALI MALAYSIA FLAG ONLY ---------------------------------------------------------- Problem fixed: - The global Indonesian flag is generated with .institution::after. - Syed's HTML already contains a real Malaysia flag image. - Therefore both flags appeared at the same time. ---------------------------------------------------------- This override keeps Indonesian flags for all other members and disables ONLY the generated Indonesian flag on the Malaysia affiliation. ========================================================== */ /* Never generate the Indonesian flag on Syed's affiliation */ .ceej-editorial .board-grid .board-card .malaysia-affiliation::after, .ceej-editorial .role-grid .role-card .malaysia-affiliation::after{ content:none!important; display:none!important; width:0!important; height:0!important; margin:0!important; padding:0!important; background:none!important; border:0!important; box-shadow:none!important; } /* Malaysia affiliation stays on one line when possible */ .ceej-editorial .board-grid .board-card .malaysia-affiliation{ display:flex!important; align-items:center!important; flex-wrap:nowrap!important; gap:8px!important; width:100%!important; } /* Real Malaysia flag from the HTML */ .ceej-editorial .board-grid .board-card .malaysia-affiliation img.malaysia-flag{ display:block!important; flex:0 0 19px!important; width:19px!important; height:12px!important; min-width:19px!important; min-height:12px!important; max-width:19px!important; max-height:12px!important; margin:0!important; padding:0!important; object-fit:cover!important; object-position:center!important; border:1px solid rgba(0,0,0,.10)!important; border-radius:2px!important; background:none!important; box-shadow:0 1px 3px rgba(0,0,0,.15)!important; transform:none!important; } /* Prevent the generic img:hover rule from moving/scaling the flag */ .ceej-editorial .board-grid .board-card .malaysia-affiliation img.malaysia-flag:hover{ transform:none!important; } /* If any older Malaysia country pseudo-element exists, disable it so only the actual HTML flag remains. */ .ceej-editorial .board-grid .board-card .country-my::before, .ceej-editorial .board-grid .board-card .country-my::after{ content:none!important; display:none!important; background:none!important; } /* ========================================================== CEEJ SIDEBAR — COMPACT V7 ---------------------------------------------------------- Purpose: - Merapatkan Journal Policies / Submission - Mengurangi tinggi setiap menu - Mengurangi jarak antar menu - Mempertahankan warna, ikon, border, dan hover effect - Tidak mengubah HTML ========================================================== */ /* ---------- SIDEBAR SECTION TITLE ---------- */ .sidebar-title{ min-height:50px!important; height:50px!important; margin:0 0 10px!important; padding:8px 14px!important; box-sizing:border-box!important; border-radius:12px!important; font-size:18px!important; line-height:1.1!important; } /* ---------- MENU CONTAINER ---------- */ .sidebar-title + .gap-2{ margin-bottom:14px!important; } .content .gap-2{ margin:0!important; padding:0!important; } /* ---------- MENU CARD — COMPACT ---------- */ .content .gap-2 .m-menu{ display:flex!important; align-items:center!important; justify-content:flex-start!important; width:100%!important; height:58px!important; min-height:58px!important; max-height:58px!important; margin:0 0 7px!important; padding:8px 14px!important; box-sizing:border-box!important; border-radius:10px!important; font-size:15px!important; line-height:1.15!important; } /* Last menu in each group has no unnecessary bottom gap */ .content .gap-2 .m-menu:last-child{ margin-bottom:0!important; } /* ---------- ICON ---------- */ .content .gap-2 .m-menu em{ width:20px!important; min-width:20px!important; margin-right:10px!important; font-size:15px!important; line-height:1!important; } /* ---------- MENU TEXT ---------- */ .content .gap-2 .m-menu span{ line-height:1.15!important; } /* ---------- ARROW ---------- */ .content .gap-2 .m-menu::after{ font-size:19px!important; line-height:1!important; margin-left:auto!important; } /* ---------- PREVENT HOVER FROM CHANGING LAYOUT ---------- */ .content .gap-2 .m-menu:hover{ transform:translateY(-1px)!important; } /* ---------- DESKTOP: TIGHTER GROUP SPACING ---------- */ @media(min-width:901px){ .sidebar-title + .gap-2{ margin-bottom:14px!important; } .content .gap-2 .m-menu{ height:58px!important; min-height:58px!important; max-height:58px!important; margin-bottom:7px!important; } } /* ---------- TABLET ---------- */ @media(max-width:900px){ .sidebar-title{ min-height:48px!important; height:48px!important; margin-bottom:9px!important; padding:8px 13px!important; font-size:17px!important; } .sidebar-title + .gap-2{ margin-bottom:12px!important; } .content .gap-2 .m-menu{ height:55px!important; min-height:55px!important; max-height:55px!important; margin-bottom:6px!important; padding:7px 13px!important; font-size:14px!important; } } /* ---------- MOBILE ---------- */ @media(max-width:600px){ .sidebar-title{ min-height:46px!important; height:46px!important; margin-bottom:8px!important; padding:7px 12px!important; font-size:16px!important; border-radius:10px!important; } .sidebar-title + .gap-2{ margin-bottom:10px!important; } .content .gap-2 .m-menu{ height:52px!important; min-height:52px!important; max-height:52px!important; margin-bottom:6px!important; padding:7px 12px!important; border-radius:9px!important; font-size:14px!important; } .content .gap-2 .m-menu em{ width:19px!important; min-width:19px!important; margin-right:9px!important; font-size:14px!important; } .content .gap-2 .m-menu::after{ font-size:18px!important; } } /* ========================================================== END — CEEJ SIDEBAR COMPACT V7 ========================================================== */ /* ========================================================== CEEJ SIDEBAR V8 — ULTRA COMPACT / FINAL SPACING FIX ---------------------------------------------------------- Tujuan: - Menghilangkan jarak berlebih antar kelompok sidebar - Mengontrol parent .content - Menghapus spacing dari BR / paragraph kosong - Menyamakan jarak Quick Access -> People - Mempertahankan warna, ikon, hover, dan desain V7 ---------------------------------------------------------- CATATAN: Override ini sengaja diletakkan PALING BAWAH agar mengalahkan aturan sidebar sebelumnya. ========================================================== */ /* ---------------------------------------------------------- 1. RESET CONTENT WRAPPER ---------------------------------------------------------- */ .content{ margin-top:0!important; margin-bottom:0!important; padding-top:0!important; padding-bottom:0!important; } /* ---------------------------------------------------------- 2. SIDEBAR TITLE ---------------------------------------------------------- */ .sidebar-title{ display:flex!important; align-items:center!important; justify-content:center!important; width:100%!important; height:50px!important; min-height:50px!important; max-height:50px!important; margin-top:0!important; margin-bottom:7px!important; padding:6px 14px!important; box-sizing:border-box!important; border-radius:12px!important; font-size:18px!important; line-height:1!important; } /* ---------------------------------------------------------- 3. MENU GROUP ---------------------------------------------------------- */ .content .gap-2{ display:block!important; width:100%!important; margin-top:0!important; margin-bottom:7px!important; padding-top:0!important; padding-bottom:0!important; } /* ---------------------------------------------------------- 4. MENU CARD ---------------------------------------------------------- */ .content .gap-2 .m-menu{ display:flex!important; align-items:center!important; width:100%!important; height:58px!important; min-height:58px!important; max-height:58px!important; margin-top:0!important; margin-bottom:5px!important; padding:7px 14px!important; box-sizing:border-box!important; border-radius:10px!important; line-height:1!important; } /* Last item in each menu group */ .content .gap-2 .m-menu:last-child{ margin-bottom:0!important; } /* ---------------------------------------------------------- 5. REMOVE INVISIBLE HTML SPACING ---------------------------------------------------------- */ .content > br, .content .gap-2 + br{ display:none!important; } .content > p:empty, .content .gap-2 + p:empty{ display:none!important; } .content > div:empty, .content .gap-2 + div:empty{ display:none!important; } /* ---------------------------------------------------------- 6. FORCE ADJACENT SIDEBAR SECTIONS TO TOUCH COMPACTLY ---------------------------------------------------------- */ .content:has(.sidebar-title){ margin-top:0!important; margin-bottom:0!important; padding-top:0!important; padding-bottom:0!important; } .content:has(.sidebar-title) + .content{ margin-top:0!important; padding-top:0!important; } /* ---------------------------------------------------------- 7. QUICK ACCESS -> PEOPLE This specifically removes the excessive vertical gap visible between the last Quick Access item and People. ---------------------------------------------------------- */ .content:has(.sidebar-title) + .content .sidebar-title{ margin-top:0!important; } /* ---------------------------------------------------------- 8. PREVENT OJS / BOOTSTRAP DEFAULT PARAGRAPH SPACING ---------------------------------------------------------- */ .content .sidebar-title p, .content .gap-2 p{ margin-top:0!important; margin-bottom:0!important; } /* ---------------------------------------------------------- 9. MOBILE — EVEN TIGHTER ---------------------------------------------------------- */ @media(max-width:600px){ .sidebar-title{ height:46px!important; min-height:46px!important; max-height:46px!important; margin-top:0!important; margin-bottom:6px!important; padding:6px 12px!important; border-radius:10px!important; font-size:16px!important; } .content .gap-2{ margin-top:0!important; margin-bottom:6px!important; padding-top:0!important; padding-bottom:0!important; } .content .gap-2 .m-menu{ height:52px!important; min-height:52px!important; max-height:52px!important; margin-top:0!important; margin-bottom:5px!important; padding:6px 12px!important; border-radius:9px!important; font-size:14px!important; } .content .gap-2 .m-menu:last-child{ margin-bottom:0!important; } .content:has(.sidebar-title) + .content{ margin-top:0!important; padding-top:0!important; } } /* ---------------------------------------------------------- 10. TABLET ---------------------------------------------------------- */ @media(min-width:601px) and (max-width:900px){ .sidebar-title{ height:48px!important; min-height:48px!important; max-height:48px!important; margin-bottom:6px!important; padding:7px 13px!important; font-size:17px!important; } .content .gap-2{ margin-bottom:6px!important; } .content .gap-2 .m-menu{ height:55px!important; min-height:55px!important; max-height:55px!important; margin-bottom:5px!important; padding:7px 13px!important; } } /* ========================================================== END — CEEJ SIDEBAR V8 ========================================================== */ /* ========================================================== CEEJ — REVIEWER CARDS Premium Compact Style ========================================================== */ .reviewer-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 18px;width:100%;margin:0!important;padding:0!important;box-sizing:border-box} .reviewer-card{position:relative;display:flex!important;align-items:center;width:100%;min-width:0;min-height:132px;padding:18px 20px;box-sizing:border-box;background:#fff;border:1px solid #D8EBD9;border-radius:14px;overflow:hidden;box-shadow:0 5px 16px rgba(31,122,61,.07);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease} .reviewer-card::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#3CA24C 0%,#FFD04C 58%,#FFDD63 100%)} .reviewer-card:hover{transform:translateY(-3px);border-color:#B8DDBF;box-shadow:0 12px 26px rgba(31,122,61,.13)} .reviewer-info{width:100%;min-width:0;box-sizing:border-box} .reviewer-info h3{margin:0 0 6px!important;padding:0!important;color:#1F7A3D!important;font-family:Arial,Helvetica,sans-serif;font-size:18px!important;font-weight:700!important;line-height:1.25!important} .reviewer-info .institution{margin:0 0 8px!important;padding:0!important;min-height:0!important;height:auto!important;color:#66736D!important;font-family:Arial,Helvetica,sans-serif;font-size:13px!important;font-weight:400!important;line-height:1.4!important;white-space:normal!important} .reviewer-country{display:flex;align-items:center;gap:8px;margin:0 0 9px!important;padding:0!important;color:#68756F!important;font-family:Arial,Helvetica,sans-serif;font-size:12px!important;font-weight:600!important;line-height:1!important} .flag-indonesia{position:relative;display:inline-block;width:28px;min-width:28px;height:17px;border-radius:2px;background:linear-gradient(to bottom,#E31E2D 0%,#E31E2D 50%,#fff 50%,#fff 100%);border:1px solid rgba(0,0,0,.1);box-shadow:0 1px 3px rgba(0,0,0,.15);box-sizing:border-box;overflow:hidden} .reviewer-scholar{display:inline-flex!important;align-items:center;justify-content:center;width:auto!important;min-width:0!important;min-height:31px;margin:0!important;padding:4px 12px!important;box-sizing:border-box;background:#fff!important;border:1px solid #D5E8D9!important;border-radius:18px;text-decoration:none!important;box-shadow:0 2px 7px rgba(31,122,61,.06);transition:background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease} .reviewer-scholar img{display:block!important;width:62px!important;height:auto!important;max-width:62px!important;max-height:24px!important;margin:0!important;padding:0!important;object-fit:contain!important;transform:none!important} .reviewer-scholar:hover{background:#F5FBF6!important;border-color:#A9D4B2!important;transform:translateY(-1px);box-shadow:0 4px 10px rgba(31,122,61,.1)} .reviewer-card img:hover{transform:none!important} .ceej-editorial .role-title{margin-top:28px;margin-bottom:16px} @media (max-width:900px){.reviewer-grid{grid-template-columns:1fr!important;gap:13px}.reviewer-card{min-height:120px;padding:16px 18px}} @media (max-width:600px){.reviewer-grid{grid-template-columns:1fr!important;gap:11px}.reviewer-card{min-height:0;padding:15px 16px;border-radius:12px}.reviewer-info h3{font-size:16px!important;margin-bottom:5px!important}.reviewer-info .institution{font-size:12px!important;line-height:1.35!important;margin-bottom:7px!important}.reviewer-country{font-size:11px!important;gap:7px;margin-bottom:8px!important}.flag-indonesia{width:25px;min-width:25px;height:15px}.reviewer-scholar{min-height:29px;padding:3px 10px!important}.reviewer-scholar img{width:58px!important;max-width:58px!important}} @media (max-width:400px){.reviewer-card{padding:14px}.reviewer-info h3{font-size:15px!important}.reviewer-info .institution{font-size:11.5px!important}} /* ========================================================== CEEJ — REVIEWER STYLE ADOPTED FROM EDITORIAL BOARD Photo + Country Flag + Expertise + Google Scholar ========================================================== */ .reviewer-grid{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:22px 22px !important; width:100% !important; margin:0 !important; padding:0 !important; } .reviewer-card{ position:relative !important; display:flex !important; align-items:center !important; gap:24px !important; width:100% !important; min-width:0 !important; min-height:190px !important; padding:18px 20px !important; box-sizing:border-box !important; background:#fff !important; border:1px solid #D7EAD9 !important; border-radius:22px !important; overflow:hidden !important; box-shadow:0 7px 22px rgba(31,122,61,.07) !important; transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease !important; } .reviewer-card::before{ content:"" !important; position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:6px !important; background:linear-gradient(90deg,#238044 0%,#73B83F 55%,#E1CC38 100%) !important; } .reviewer-card:hover{ transform:translateY(-3px) !important; border-color:#B8DDBF !important; box-shadow:0 14px 30px rgba(31,122,61,.13) !important; } /* FOTO REVIEWER */ .reviewer-photo-wrap{ flex:0 0 124px !important; width:124px !important; height:160px !important; padding:4px !important; box-sizing:border-box !important; background:#fff !important; border:3px solid #DCEFE0 !important; border-radius:17px !important; box-shadow:0 5px 14px rgba(31,122,61,.10) !important; overflow:hidden !important; } .reviewer-photo{ display:block !important; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; object-fit:cover !important; object-position:center center !important; border-radius:11px !important; transform:none !important; transition:none !important; } .reviewer-card:hover .reviewer-photo{ transform:none !important; } /* INFORMASI */ .reviewer-info{ flex:1 1 auto !important; min-width:0 !important; width:auto !important; box-sizing:border-box !important; } .reviewer-info h3{ margin:0 0 7px !important; padding:0 !important; color:#19783D !important; font-family:Arial,Helvetica,sans-serif !important; font-size:20px !important; font-weight:700 !important; line-height:1.22 !important; } .reviewer-info .institution{ margin:0 0 7px !important; padding:0 !important; min-height:0 !important; height:auto !important; color:#66736D !important; font-family:Arial,Helvetica,sans-serif !important; font-size:14px !important; font-weight:400 !important; line-height:1.38 !important; white-space:normal !important; } .reviewer-country{ display:flex !important; align-items:center !important; gap:8px !important; margin:0 0 7px !important; padding:0 !important; color:#56645E !important; font-family:Arial,Helvetica,sans-serif !important; font-size:13px !important; font-weight:600 !important; line-height:1 !important; } .flag-indonesia{ display:inline-block !important; width:27px !important; min-width:27px !important; height:17px !important; border-radius:2px !important; background:linear-gradient(to bottom,#E31E2D 0%,#E31E2D 50%,#fff 50%,#fff 100%) !important; border:1px solid rgba(0,0,0,.10) !important; box-shadow:0 1px 3px rgba(0,0,0,.15) !important; box-sizing:border-box !important; } .reviewer-expertise{ margin:0 0 10px !important; padding:0 !important; color:#66736D !important; font-family:Arial,Helvetica,sans-serif !important; font-size:13px !important; line-height:1.35 !important; } .reviewer-expertise strong{ color:#596660 !important; font-weight:700 !important; } /* GOOGLE SCHOLAR */ .reviewer-scholar{ display:inline-flex !important; align-items:center !important; justify-content:center !important; width:auto !important; min-width:0 !important; min-height:34px !important; margin:0 !important; padding:4px 12px !important; box-sizing:border-box !important; background:#fff !important; border:1px solid #D5E8D9 !important; border-radius:19px !important; text-decoration:none !important; box-shadow:0 2px 8px rgba(31,122,61,.06) !important; } .reviewer-scholar img{ display:block !important; width:66px !important; height:auto !important; max-width:66px !important; max-height:25px !important; margin:0 !important; padding:0 !important; object-fit:contain !important; transform:none !important; } .reviewer-scholar:hover{ background:#F5FBF6 !important; border-color:#A9D4B2 !important; transform:translateY(-1px) !important; box-shadow:0 5px 12px rgba(31,122,61,.10) !important; } /* TABLET */ @media (max-width:900px){ .reviewer-grid{grid-template-columns:1fr !important;gap:16px !important} .reviewer-card{min-height:175px !important;gap:20px !important;padding:17px 18px !important} } /* MOBILE */ @media (max-width:600px){ .reviewer-grid{grid-template-columns:1fr !important;gap:13px !important} .reviewer-card{min-height:0 !important;gap:15px !important;padding:15px !important;border-radius:16px !important} .reviewer-photo-wrap{flex:0 0 92px !important;width:92px !important;height:120px !important;border-radius:13px !important} .reviewer-info h3{font-size:17px !important;margin-bottom:5px !important} .reviewer-info .institution{font-size:12px !important;line-height:1.35 !important} .reviewer-country{font-size:11px !important;margin-bottom:6px !important} .reviewer-expertise{font-size:11px !important;margin-bottom:8px !important} .flag-indonesia{width:24px !important;min-width:24px !important;height:15px !important} .reviewer-scholar{min-height:29px !important;padding:3px 10px !important} .reviewer-scholar img{width:58px !important;max-width:58px !important} } @media (max-width:400px){ .reviewer-card{gap:12px !important;padding:13px !important} .reviewer-photo-wrap{flex:0 0 78px !important;width:78px !important;height:105px !important} .reviewer-info h3{font-size:15px !important} .reviewer-info .institution{font-size:11px !important} } /* ========================================================== CEEJ — REVIEWER CARDS V2 PREMIUM / EXECUTIVE DESIGN International + National Reviewers ========================================================== */ /* ---------- REVIEWER SECTION TITLE ---------- */ .ceej-editorial .role-title{ position:relative !important; margin:34px 0 18px !important; padding:0 0 10px !important; color:#1F7A3D !important; font-family:Arial,Helvetica,sans-serif !important; font-size:20px !important; font-weight:800 !important; line-height:1.25 !important; letter-spacing:.1px !important; } .ceej-editorial .role-title::after{ content:"" !important; display:block !important; width:58px !important; height:4px !important; margin-top:9px !important; border-radius:10px !important; background:linear-gradient( 90deg, #1F7A3D 0%, #3CA24C 55%, #FFD04C 100% ) !important; } .ceej-editorial .role-title:first-child{ margin-top:0 !important; } /* ---------- GRID ---------- */ .reviewer-grid{ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:20px !important; width:100% !important; margin:0 0 28px !important; padding:0 !important; box-sizing:border-box !important; } /* ---------- CARD ---------- */ .reviewer-card{ position:relative !important; display:flex !important; align-items:center !important; gap:20px !important; width:100% !important; min-width:0 !important; min-height:168px !important; margin:0 !important; padding:20px !important; box-sizing:border-box !important; background: linear-gradient( 135deg, #FFFFFF 0%, #FCFEFC 72%, #F7FBF7 100% ) !important; border:1px solid #D8E9DC !important; border-radius:18px !important; overflow:hidden !important; box-shadow: 0 5px 16px rgba(31,122,61,.055), 0 1px 2px rgba(0,0,0,.025) !important; transition: transform .28s cubic-bezier(.2,.7,.2,1), box-shadow .28s ease, border-color .28s ease !important; } /* top accent */ .reviewer-card::before{ content:"" !important; position:absolute !important; top:0 !important; left:0 !important; width:100% !important; height:4px !important; background: linear-gradient( 90deg, #1F7A3D 0%, #3CA24C 52%, #FFD04C 100% ) !important; } /* subtle side accent */ .reviewer-card::after{ content:"" !important; position:absolute !important; left:0 !important; top:20px !important; bottom:20px !important; width:3px !important; background:#3CA24C !important; border-radius:0 5px 5px 0 !important; opacity:.75 !important; } /* hover */ .reviewer-card:hover{ transform:translateY(-5px) !important; border-color:#B7D9BE !important; box-shadow: 0 15px 32px rgba(31,122,61,.12), 0 3px 8px rgba(31,122,61,.05) !important; } /* ---------- PHOTO ---------- */ .reviewer-photo-wrap{ position:relative !important; flex:0 0 102px !important; width:102px !important; height:118px !important; margin:0 !important; padding:4px !important; box-sizing:border-box !important; background: linear-gradient( 145deg, #1F7A3D 0%, #5EB66B 58%, #FFD04C 100% ) !important; border:0 !important; border-radius:15px !important; overflow:hidden !important; box-shadow: 0 5px 14px rgba(31,122,61,.14) !important; } /* white inner frame */ .reviewer-photo-wrap::after{ content:"" !important; position:absolute !important; inset:4px !important; border:2px solid rgba(255,255,255,.92) !important; border-radius:11px !important; pointer-events:none !important; } /* photo */ .reviewer-photo{ position:relative !important; z-index:1 !important; display:block !important; width:100% !important; height:100% !important; max-width:none !important; max-height:none !important; margin:0 !important; padding:0 !important; object-fit:cover !important; object-position:center center !important; border:0 !important; border-radius:11px !important; transform:none !important; transition:transform .35s ease !important; } .reviewer-card:hover .reviewer-photo{ transform:scale(1.035) !important; } /* ---------- INFORMATION ---------- */ .reviewer-info{ position:relative !important; z-index:2 !important; flex:1 1 auto !important; min-width:0 !important; width:auto !important; padding:0 !important; box-sizing:border-box !important; } /* reviewer type badge */ .reviewer-type{ display:inline-flex !important; align-items:center !important; margin:0 0 7px !important; padding:5px 9px !important; background:#F0F8F2 !important; border:1px solid #D9ECDD !important; border-radius:20px !important; color:#1F7A3D !important; font-family:Arial,Helvetica,sans-serif !important; font-size:9px !important; font-weight:800 !important; line-height:1 !important; letter-spacing:.65px !important; text-transform:uppercase !important; } /* international badge */ .reviewer-international .reviewer-type{ background:#FFF8E3 !important; border-color:#F1D67A !important; color:#856300 !important; } /* reviewer name */ .reviewer-info h3{ margin:0 0 5px !important; padding:0 !important; color:#176F39 !important; font-family:Arial,Helvetica,sans-serif !important; font-size:18px !important; font-weight:750 !important; line-height:1.25 !important; letter-spacing:-.1px !important; } /* institution */ .reviewer-info .institution{ margin:0 0 8px !important; padding:0 !important; min-height:0 !important; height:auto !important; color:#68756F !important; font-family:Arial,Helvetica,sans-serif !important; font-size:12.5px !important; font-weight:400 !important; line-height:1.4 !important; white-space:normal !important; } /* ---------- COUNTRY ---------- */ .reviewer-country{ display:inline-flex !important; align-items:center !important; gap:7px !important; margin:0 0 8px !important; padding:4px 8px !important; background:#F8FBF8 !important; border:1px solid #E0EBE2 !important; border-radius:20px !important; color:#596760 !important; font-family:Arial,Helvetica,sans-serif !important; font-size:10.5px !important; font-weight:700 !important; line-height:1 !important; } /* Indonesia flag */ .flag-indonesia{ display:inline-block !important; width:22px !important; min-width:22px !important; height:14px !important; border-radius:2px !important; background: linear-gradient( to bottom, #E31E2D 0%, #E31E2D 50%, #FFFFFF 50%, #FFFFFF 100% ) !important; border:1px solid rgba(0,0,0,.10) !important; box-shadow: 0 1px 3px rgba(0,0,0,.14) !important; box-sizing:border-box !important; } /* Malaysia flag — compact stylized */ .flag-malaysia{ position:relative !important; display:inline-block !important; width:22px !important; min-width:22px !important; height:14px !important; overflow:hidden !important; border-radius:2px !important; border:1px solid rgba(0,0,0,.10) !important; background: repeating-linear-gradient( to bottom, #C91F2B 0, #C91F2B 1px, #FFFFFF 1px, #FFFFFF 2px ) !important; box-shadow: 0 1px 3px rgba(0,0,0,.14) !important; box-sizing:border-box !important; } .flag-malaysia::before{ content:"" !important; position:absolute !important; left:0 !important; top:0 !important; width:10px !important; height:8px !important; background:#183A8A !important; } /* ---------- EXPERTISE ---------- */ .reviewer-expertise{ margin:0 !important; padding:0 !important; color:#69766F !important; font-family:Arial,Helvetica,sans-serif !important; font-size:11px !important; line-height:1.4 !important; } .reviewer-expertise strong{ color:#1F7A3D !important; font-weight:750 !important; } /* ---------- GOOGLE SCHOLAR ---------- */ .reviewer-scholar{ display:inline-flex !important; align-items:center !important; justify-content:center !important; min-width:0 !important; min-height:27px !important; margin:8px 0 0 !important; padding:3px 9px !important; background:#FFFFFF !important; border:1px solid #D9E8DC !important; border-radius:16px !important; text-decoration:none !important; box-shadow: 0 2px 6px rgba(31,122,61,.055) !important; transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease !important; } .reviewer-scholar img{ display:block !important; width:57px !important; height:auto !important; max-width:57px !important; max-height:19px !important; margin:0 !important; padding:0 !important; object-fit:contain !important; transform:none !important; } .reviewer-scholar:hover{ background:#F5FBF6 !important; border-color:#A9D4B2 !important; transform:translateY(-1px) !important; box-shadow: 0 4px 10px rgba(31,122,61,.10) !important; } /* ---------- INTERNATIONAL CARD ---------- */ .reviewer-international .reviewer-card{ background: linear-gradient( 135deg, #FFFFFF 0%, #FFFDF6 100% ) !important; border-color:#E6D99F !important; } .reviewer-international .reviewer-card::before{ background: linear-gradient( 90deg, #1F7A3D 0%, #FFD04C 52%, #C91F2B 100% ) !important; } .reviewer-international .reviewer-card::after{ background:#D9B62E !important; } .reviewer-international .reviewer-photo-wrap{ background: linear-gradient( 145deg, #1F7A3D 0%, #FFD04C 55%, #C91F2B 100% ) !important; } .reviewer-international .reviewer-info h3{ color:#176F39 !important; } /* ---------- NATIONAL CARD ---------- */ .reviewer-national .reviewer-card{ background: linear-gradient( 135deg, #FFFFFF 0%, #FCFEFC 100% ) !important; } /* ---------- ACCESSIBILITY / FOCUS ---------- */ .reviewer-card:focus-within{ outline:2px solid #B8DDBF !important; outline-offset:3px !important; } /* ---------- TABLET ---------- */ @media (max-width:900px){ .reviewer-grid{ grid-template-columns:1fr !important; gap:15px !important; } .reviewer-card{ min-height:155px !important; padding:18px !important; } .reviewer-photo-wrap{ flex:0 0 96px !important; width:96px !important; height:112px !important; } } /* ---------- MOBILE ---------- */ @media (max-width:600px){ .ceej-editorial .role-title{ margin:25px 0 14px !important; font-size:18px !important; } .reviewer-grid{ grid-template-columns:1fr !important; gap:12px !important; margin-bottom:20px !important; } .reviewer-card{ min-height:0 !important; gap:14px !important; padding:15px !important; border-radius:15px !important; } .reviewer-card::after{ top:16px !important; bottom:16px !important; } .reviewer-photo-wrap{ flex:0 0 78px !important; width:78px !important; height:96px !important; border-radius:12px !important; } .reviewer-photo{ border-radius:9px !important; } .reviewer-type{ font-size:8px !important; letter-spacing:.5px !important; padding:4px 7px !important; margin-bottom:5px !important; } .reviewer-info h3{ font-size:15.5px !important; line-height:1.25 !important; margin-bottom:4px !important; } .reviewer-info .institution{ font-size:11.5px !important; line-height:1.3 !important; margin-bottom:6px !important; } .reviewer-country{ font-size:9.5px !important; padding:3px 7px !important; margin-bottom:6px !important; } .reviewer-expertise{ font-size:10px !important; } .flag-indonesia, .flag-malaysia{ width:20px !important; min-width:20px !important; height:13px !important; } .reviewer-scholar{ min-height:25px !important; margin-top:6px !important; padding:2px 8px !important; } .reviewer-scholar img{ width:52px !important; max-width:52px !important; } } /* ---------- VERY SMALL MOBILE ---------- */ @media (max-width:400px){ .reviewer-card{ gap:11px !important; padding:12px !important; } .reviewer-photo-wrap{ flex:0 0 68px !important; width:68px !important; height:86px !important; } .reviewer-info h3{ font-size:14px !important; } .reviewer-info .institution{ font-size:10.5px !important; } .reviewer-expertise{ font-size:9.5px !important; } } /* ========================================================== END — CEEJ REVIEWER PREMIUM V2 ========================================================== */