/* ========================================================== 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:url("https://images.unsplash.com/photo-1526232761682-d26e03ac148e?auto=format&fit=crop&w=2200&q=80") center center/cover no-repeat; 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 ========================================================== */ /* ========================================================== KIAT HERO SECTION — RESTORE HERO STYLING Add this block at the end of the active Custom CSS. Palette: navy + gold, matching the KIAT journal banner. ========================================================== */ html body .kiat-hero { --kiat-navy: #002038; --kiat-navy-deep: #00172B; --kiat-navy-light: #103D5C; --kiat-gold: #D0A050; --kiat-gold-light: #F0D0A0; --kiat-cream: #F7E7BE; position: relative !important; isolation: isolate; display: block !important; overflow: hidden !important; width: 100% !important; min-height: 420px; margin: 0 0 30px !important; padding: 48px clamp(22px, 4vw, 54px) 30px !important; box-sizing: border-box !important; color: #FFFFFF !important; background: radial-gradient(ellipse at 88% 80%, rgba(31, 82, 112, .78), transparent 42%), linear-gradient(125deg, #00172B 0%, #002038 56%, #103D5C 100%) !important; border-bottom: 4px solid var(--kiat-gold) !important; border-radius: 0 !important; box-shadow: 0 12px 28px rgba(0, 23, 43, .14) !important; font-family: inherit; text-align: left !important; } html body .kiat-hero *, html body .kiat-hero *::before, html body .kiat-hero *::after { box-sizing: border-box; } html body .kiat-hero__content { position: relative !important; z-index: 2 !important; display: block !important; width: 100% !important; max-width: 850px !important; } html body .kiat-hero__eyebrow { display: block !important; margin: 0 0 12px !important; padding: 0 !important; color: var(--kiat-cream) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.8 !important; letter-spacing: 3px !important; text-transform: uppercase; } html body .kiat-hero__line { display: block !important; width: 100% !important; max-width: 740px; height: 2px !important; margin: 0 0 24px !important; background: linear-gradient(90deg, var(--kiat-gold), rgba(208, 160, 80, .08)) !important; } html body .kiat-hero__subtitle { margin: 0 0 12px !important; padding: 0 !important; color: var(--kiat-gold-light) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.8 !important; letter-spacing: 2px !important; } html body .kiat-hero .kiat-hero__title { margin: 0 0 20px !important; padding: 0 !important; color: var(--kiat-cream) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: clamp(36px, 4.5vw, 58px) !important; font-weight: 600 !important; line-height: 1.08 !important; letter-spacing: -.7px !important; text-shadow: 0 3px 12px rgba(0, 0, 0, .25); } html body .kiat-hero__description { max-width: 740px !important; margin: 0 0 22px !important; padding: 0 !important; color: rgba(255, 255, 255, .92) !important; font-size: 14px !important; font-weight: 400 !important; line-height: 1.9 !important; text-align: left !important; } html body .kiat-hero__badges { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px 18px !important; margin: 0 0 22px !important; padding: 0 !important; color: var(--kiat-cream) !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1.7 !important; letter-spacing: 1.1px !important; text-transform: uppercase; } html body .kiat-hero__buttons { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 12px !important; margin: 0 0 24px !important; padding: 0 !important; } html body .kiat-hero .kiat-hero__button { position: relative; display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 43px !important; margin: 0 !important; padding: 12px 20px !important; border: 1px solid var(--kiat-gold) !important; border-radius: 4px !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.4 !important; letter-spacing: .5px !important; text-decoration: none !important; text-transform: uppercase; transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease; } html body .kiat-hero .kiat-hero__button--gold { color: #00172B !important; background: linear-gradient(135deg, #D0A050, #F0D0A0) !important; -webkit-text-fill-color: #00172B !important; } html body .kiat-hero .kiat-hero__button--outline { color: var(--kiat-cream) !important; background: transparent !important; -webkit-text-fill-color: var(--kiat-cream) !important; } html body .kiat-hero .kiat-hero__button:hover, html body .kiat-hero .kiat-hero__button:focus-visible { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0, 0, 0, .22) !important; } html body .kiat-hero .kiat-hero__button--gold:hover { background: #FFFFFF !important; border-color: #FFFFFF !important; } html body .kiat-hero .kiat-hero__button--outline:hover { color: #00172B !important; background: var(--kiat-gold-light) !important; -webkit-text-fill-color: #00172B !important; } html body .kiat-hero__footer { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 7px !important; margin: 0 !important; padding: 15px 0 0 !important; border-top: 1px solid rgba(208, 160, 80, .48) !important; color: rgba(255, 255, 255, .78) !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.7 !important; letter-spacing: .7px !important; } html body .kiat-hero__separator { display: inline-block; padding: 0 5px; color: var(--kiat-gold) !important; } html body .kiat-hero__decoration { position: absolute !important; inset: 0 !important; z-index: 1 !important; overflow: hidden !important; pointer-events: none !important; } html body .kiat-hero__circle { position: absolute !important; display: block !important; border: 1px solid rgba(208, 160, 80, .32) !important; border-radius: 50% !important; background: transparent !important; } html body .kiat-hero__circle--one { width: 360px; height: 360px; right: -95px; top: -115px; } html body .kiat-hero__circle--two { width: 270px; height: 270px; right: -50px; top: -70px; } html body .kiat-hero__circle--three { width: 180px; height: 180px; right: -5px; top: -25px; } html body .kiat-hero__shape { position: absolute !important; display: block !important; width: 210px !important; height: 520px !important; top: -70px !important; border: 1px solid rgba(208, 160, 80, .24) !important; background: linear-gradient(145deg, rgba(16, 61, 92, .5), rgba(0, 23, 43, .04)) !important; transform: rotate(34deg) !important; } html body .kiat-hero__shape--one { right: 115px !important; } html body .kiat-hero__shape--two { right: 220px !important; opacity: .65; } html body .kiat-hero__shape--three { right: 325px !important; opacity: .35; } html body .kiat-hero__gold-line { position: absolute !important; right: 0 !important; bottom: 50px !important; width: 36% !important; height: 1px !important; background: linear-gradient(90deg, transparent, rgba(208, 160, 80, .8)) !important; } @media (max-width: 900px) { html body .kiat-hero { min-height: 0 !important; padding: 38px 28px 26px !important; } html body .kiat-hero__decoration { opacity: .55; } html body .kiat-hero .kiat-hero__title { font-size: clamp(34px, 6vw, 48px) !important; } } @media (max-width: 600px) { html body .kiat-hero { padding: 30px 20px 22px !important; margin-bottom: 22px !important; } html body .kiat-hero__eyebrow { font-size: 10px !important; letter-spacing: 2px !important; } html body .kiat-hero__subtitle { font-size: 10px !important; letter-spacing: 1px !important; } html body .kiat-hero .kiat-hero__title { font-size: 34px !important; line-height: 1.12 !important; } html body .kiat-hero__description { font-size: 13px !important; line-height: 1.8 !important; } html body .kiat-hero__badges { display: block !important; font-size: 9px !important; } html body .kiat-hero__buttons { align-items: stretch !important; flex-direction: column !important; } html body .kiat-hero .kiat-hero__button { width: 100% !important; text-align: center !important; } html body .kiat-hero__footer { font-size: 10px !important; letter-spacing: .3px !important; } html body .kiat-hero__shape--three { display: none !important; } } @media (prefers-reduced-motion: reduce) { html body .kiat-hero .kiat-hero__button { transition: none !important; } } /* ========================================================== KIAT SIDEBAR — MATCH THE HERO NAVY + GOLD PALETTE Overrides previous green/yellow sidebar styles only. Hero palette: navy #00172B / #002038 / #103D5C gold #D0A050 / #F0D0A0 ========================================================== */ :root { --kiat-navy: #002038; --kiat-navy-deep: #00172B; --kiat-navy-light: #103D5C; --kiat-gold: #D0A050; --kiat-gold-light: #F0D0A0; --kiat-cream: #FFF2D2; } /* Common sidebar section headings */ html body .sidebar-title, html body .slr-group__title { position: relative !important; overflow: hidden !important; background: linear-gradient(120deg, #00172B 0%, #002038 62%, #103D5C 100%) !important; color: #F0D0A0 !important; -webkit-text-fill-color: #F0D0A0 !important; border: 1px solid rgba(208, 160, 80, .7) !important; border-left: 5px solid #D0A050 !important; border-radius: 12px !important; box-shadow: 0 7px 18px rgba(0, 23, 43, .16) !important; letter-spacing: .25px !important; } html body .sidebar-title::before, html body .slr-group__title::before { background: linear-gradient(180deg, #F0D0A0, #D0A050) !important; } /* Menu links — includes custom SLR sidebar and OJS m-menu */ html body .content .gap-2 .m-menu, html body .slr-list a { position: relative !important; overflow: hidden !important; background: #FFFFFF !important; color: #002038 !important; -webkit-text-fill-color: #002038 !important; border: 1px solid rgba(16, 61, 92, .22) !important; border-left: 3px solid #D0A050 !important; border-radius: 10px !important; box-shadow: 0 3px 10px rgba(0, 23, 43, .07) !important; text-decoration: none !important; transition: color .28s ease, background .28s ease, border-color .28s ease, transform .28s ease, box-shadow .28s ease !important; } /* Navy-to-gold hover sweep */ html body .content .gap-2 .m-menu::before, html body .slr-list a::before { content: "" !important; position: absolute !important; inset: 0 !important; width: 0 !important; height: 100% !important; background: linear-gradient(100deg, #00172B 0%, #103D5C 68%, #D0A050 100%) !important; transition: width .32s ease !important; z-index: -1 !important; } html body .content .gap-2 .m-menu:hover::before, html body .slr-list a:hover::before { width: 100% !important; } html body .content .gap-2 .m-menu:hover, html body .slr-list a:hover { color: #FFF2D2 !important; -webkit-text-fill-color: #FFF2D2 !important; border-color: #D0A050 !important; border-left-color: #F0D0A0 !important; background: #002038 !important; transform: translateY(-2px) !important; box-shadow: 0 8px 18px rgba(0, 23, 43, .18) !important; } html body .content .gap-2 .m-menu em, html body .content .gap-2 .m-menu::after, html body .content .gap-2 .m-menu span, html body .slr-list a::after { color: #103D5C !important; -webkit-text-fill-color: #103D5C !important; transition: color .25s ease !important; } html body .content .gap-2 .m-menu:hover em, html body .content .gap-2 .m-menu:hover::after, html body .content .gap-2 .m-menu:hover span, html body .slr-list a:hover::after { color: #F0D0A0 !important; -webkit-text-fill-color: #F0D0A0 !important; } /* If menu text is wrapped in a span, keep the text above the hover layer */ html body .content .gap-2 .m-menu span, html body .slr-list a span { position: relative !important; z-index: 1 !important; } /* Focus state: accessible gold outline */ html body .content .gap-2 .m-menu:focus-visible, html body .slr-list a:focus-visible { outline: 2px solid #D0A050 !important; outline-offset: 3px !important; } /* Optional sidebar container styling */ html body .pkp_block, html body .pkp_block .content { --sidebar-ink: #002038; } /* Keep this palette stable on smaller screens */ @media (max-width: 600px) { html body .sidebar-title, html body .slr-group__title { border-radius: 10px !important; } html body .content .gap-2 .m-menu, html body .slr-list a { border-radius: 9px !important; } } @media (prefers-reduced-motion: reduce) { html body .content .gap-2 .m-menu, html body .content .gap-2 .m-menu::before, html body .slr-list a, html body .slr-list a::before { transition: none !important; } } /* ========================================================== KIAT HERO — ADD HORIZONTAL BREATHING ROOM Keeps the hero inside the main content column with visible spacing on both sides, matching the Journal Information area. ========================================================== */ html body .kiat-hero { width: calc(100% - 40px) !important; max-width: none !important; margin: 24px 20px 34px !important; box-sizing: border-box !important; border-radius: 12px !important; } /* Avoid the hero touching the edges on tablet screens */ @media (max-width: 900px) { html body .kiat-hero { width: calc(100% - 32px) !important; margin: 18px 16px 28px !important; padding-left: clamp(22px, 4vw, 38px) !important; padding-right: clamp(22px, 4vw, 38px) !important; } } /* Comfortable side spacing on mobile */ @media (max-width: 600px) { html body .kiat-hero { width: calc(100% - 24px) !important; margin: 14px 12px 24px !important; padding: 28px 20px 22px !important; border-radius: 10px !important; } } /* ========================================================== KIAT HEADER COMPACT — ADOPTED FROM BAEJ Tujuan: - Mengurangi ruang kosong vertikal pada area header. - Mempertahankan panjang/lebar banner logo. - Tidak mengubah tinggi atau posisi menu navigasi. - Override diletakkan di akhir agar mengatasi aturan header lama. ========================================================== */ @media (min-width: 901px) { html body .pkp_structure_head .pkp_head_wrapper { min-height: 0 !important; height: auto !important; padding-top: 0 !important; padding-bottom: 0 !important; } html body .pkp_structure_head .pkp_site_name_wrapper { min-height: 0 !important; height: auto !important; margin: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; } html body .pkp_structure_head .pkp_site_name { min-height: 0 !important; height: auto !important; margin-top: 0 !important; margin-bottom: 0 !important; padding-top: 8px !important; padding-bottom: 8px !important; box-sizing: border-box !important; } /* Pertahankan lebar/panjang banner; jangan batasi dengan max-height */ html body .pkp_structure_head .pkp_site_name img, html body .pkp_structure_head .pkp_site_name .is_img img { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; object-fit: contain !important; margin: 0 auto !important; transform: none !important; } /* Hapus jarak tambahan antara area logo dan navigasi */ html body .pkp_structure_head .pkp_site_name_wrapper { margin-bottom: 0 !important; } } /* Tablet: pertahankan lebar banner, kurangi padding vertikal */ @media (min-width: 601px) and (max-width: 900px) { html body .pkp_structure_head .pkp_head_wrapper, html body .pkp_structure_head .pkp_site_name_wrapper, html body .pkp_structure_head .pkp_site_name { min-height: 0 !important; height: auto !important; } html body .pkp_structure_head .pkp_site_name { padding-top: 8px !important; padding-bottom: 8px !important; margin-bottom: 0 !important; } html body .pkp_structure_head .pkp_site_name img, html body .pkp_structure_head .pkp_site_name .is_img img { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; } } /* Mobile: banner tetap selebar area yang tersedia */ @media (max-width: 600px) { html body .pkp_structure_head .pkp_head_wrapper, html body .pkp_structure_head .pkp_site_name_wrapper, html body .pkp_structure_head .pkp_site_name { min-height: 0 !important; height: auto !important; } html body .pkp_structure_head .pkp_site_name { padding-top: 8px !important; padding-bottom: 8px !important; margin-bottom: 0 !important; } html body .pkp_structure_head .pkp_site_name img, html body .pkp_structure_head .pkp_site_name .is_img img { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; } } /* ========================================================== JURNAL EKONOMI KIAT — JOURNAL PROFILE COMPONENT Untuk HTML dengan class kiat-profile / kiat-* Palette: Navy + Gold Ditambahkan tanpa menghapus aturan header, navigasi, dan sidebar. ========================================================== */ html body .kiat-profile { --kiat-navy: #08243A; --kiat-navy-deep: #041827; --kiat-navy-soft: #123B58; --kiat-gold: #D4A64A; --kiat-gold-light: #F4E5BD; --kiat-ink: #183247; --kiat-muted: #627486; --kiat-line: #DCE5EC; --kiat-panel: #FFFFFF; width: 100%; max-width: 100%; margin: 24px auto 34px; color: var(--kiat-ink); font-family: Arial, Helvetica, sans-serif; line-height: 1.6; box-sizing: border-box; } html body .kiat-profile *, html body .kiat-profile *::before, html body .kiat-profile *::after { box-sizing: border-box; } /* JOURNAL HERO */ html body .kiat-profile .kiat-hero { position: relative; display: flex; flex-direction: column; gap: 22px; width: 100% !important; margin: 0 0 22px !important; padding: clamp(24px, 4vw, 42px) !important; overflow: hidden; color: #FFFFFF; background: linear-gradient(125deg, var(--kiat-navy-deep) 0%, var(--kiat-navy) 62%, var(--kiat-navy-soft) 100%); border: 1px solid rgba(212, 166, 74, .55); border-radius: 16px !important; box-shadow: 0 14px 32px rgba(4, 24, 39, .16); } html body .kiat-profile .kiat-hero::before { content: ""; position: absolute; top: -75px; right: -55px; width: 220px; height: 220px; border: 1px solid rgba(244, 229, 189, .24); border-radius: 50%; box-shadow: 0 0 0 24px rgba(244, 229, 189, .035), 0 0 0 48px rgba(244, 229, 189, .025); pointer-events: none; } html body .kiat-profile .kiat-identity { position: relative; z-index: 1; display: flex; align-items: center; gap: clamp(18px, 3vw, 32px); min-width: 0; } html body .kiat-profile .kiat-logo-wrap { display: flex; align-items: center; justify-content: center; flex: 0 0 124px; width: 124px; min-height: 124px; padding: 12px; background: #FFFFFF; border: 2px solid var(--kiat-gold); border-radius: 14px; box-shadow: 0 8px 20px rgba(0, 0, 0, .18); } html body .kiat-profile .kiat-logo-text { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; color: var(--kiat-navy); text-align: center; line-height: 1.1; } html body .kiat-profile .kiat-logo-text span { display: block; font-size: 9px; font-weight: 800; letter-spacing: 1.1px; } html body .kiat-profile .kiat-logo-text strong { display: block; margin-top: 5px; color: var(--kiat-navy); font-size: 34px; font-weight: 900; letter-spacing: 1.5px; } html body .kiat-profile .kiat-logo-text i { display: block; width: 48px; height: 4px; margin-top: 8px; background: linear-gradient(90deg, var(--kiat-navy), var(--kiat-gold)); border-radius: 10px; } html body .kiat-profile .kiat-identity-text { min-width: 0; } html body .kiat-profile .kiat-eyebrow { margin: 0 0 7px; color: var(--kiat-gold-light); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; } html body .kiat-profile .kiat-title { margin: 0 0 8px !important; color: #FFFFFF !important; font-size: clamp(27px, 3.2vw, 40px) !important; font-weight: 800; line-height: 1.15; letter-spacing: -.5px; } html body .kiat-profile .kiat-publisher { margin: 0 0 7px; color: rgba(255, 255, 255, .88); font-size: 14px; } html body .kiat-profile .kiat-description { margin: 0; color: var(--kiat-gold-light); font-size: 14px; font-weight: 700; letter-spacing: .3px; } html body .kiat-profile .kiat-statuses { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 9px; padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .18); } html body .kiat-profile .kiat-status { display: inline-flex; align-items: center; min-height: 31px; padding: 6px 12px; color: #FFFFFF; background: rgba(255, 255, 255, .09); border: 1px solid rgba(244, 229, 189, .55); border-radius: 30px; font-size: 11px; font-weight: 800; letter-spacing: .4px; } html body .kiat-profile .kiat-status::before { content: ""; width: 7px; height: 7px; margin-right: 8px; background: var(--kiat-gold); border-radius: 50%; box-shadow: 0 0 0 3px rgba(212, 166, 74, .14); } html body .kiat-profile .kiat-status-open { color: var(--kiat-navy-deep); background: var(--kiat-gold-light); border-color: var(--kiat-gold-light); } /* QUICK STATISTICS */ html body .kiat-profile .kiat-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0 0 24px; } html body .kiat-profile .kiat-stat { position: relative; min-width: 0; padding: 22px 17px 18px; overflow: hidden; background: var(--kiat-panel); border: 1px solid var(--kiat-line); border-top: 3px solid var(--kiat-gold); border-radius: 12px; box-shadow: 0 5px 16px rgba(8, 36, 58, .055); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } html body .kiat-profile .kiat-stat:hover { transform: translateY(-4px); border-color: rgba(212, 166, 74, .75); box-shadow: 0 12px 24px rgba(8, 36, 58, .11); } html body .kiat-profile .kiat-stat-value { margin: 0 0 7px; color: var(--kiat-navy); font-size: clamp(22px, 2.1vw, 30px); font-weight: 900; line-height: 1.2; overflow-wrap: anywhere; } html body .kiat-profile .kiat-stat-label { color: var(--kiat-ink); font-size: 13px; font-weight: 800; line-height: 1.4; } html body .kiat-profile .kiat-stat-note { margin: 7px 0 0; color: var(--kiat-muted); font-size: 12px; line-height: 1.5; } /* METADATA GRID */ html body .kiat-profile .kiat-metadata { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 0; } html body .kiat-profile .kiat-meta-item { display: flex; align-items: flex-start; gap: 13px; min-width: 0; padding: 17px 18px; background: #FFFFFF; border: 1px solid var(--kiat-line); border-radius: 11px; box-shadow: 0 3px 12px rgba(8, 36, 58, .035); transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease; } html body .kiat-profile .kiat-meta-item:hover { transform: translateY(-2px); border-color: rgba(212, 166, 74, .8); box-shadow: 0 8px 18px rgba(8, 36, 58, .08); } html body .kiat-profile .kiat-meta-icon { display: flex; flex: 0 0 38px; align-items: center; justify-content: center; width: 38px; height: 38px; color: var(--kiat-navy); background: #F8F3E7; border: 1px solid #EAD9AD; border-radius: 10px; font-size: 18px; font-weight: 800; line-height: 1; } html body .kiat-profile .kiat-meta-content { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; gap: 3px; } html body .kiat-profile .kiat-meta-label { color: var(--kiat-muted); font-size: 10px; font-weight: 800; letter-spacing: 1.1px; line-height: 1.4; text-transform: uppercase; } html body .kiat-profile .kiat-meta-value { color: var(--kiat-navy); font-size: 14px; font-weight: 800; line-height: 1.5; overflow-wrap: anywhere; } html body .kiat-profile .kiat-meta-value a { color: var(--kiat-navy) !important; font-weight: 800; text-decoration: none; text-decoration-color: var(--kiat-gold); text-underline-offset: 3px; overflow-wrap: anywhere; } html body .kiat-profile .kiat-meta-value a:hover { color: #986E1D !important; text-decoration: underline; } html body .kiat-profile .kiat-meta-subtext { color: var(--kiat-muted); font-size: 11px; line-height: 1.5; overflow-wrap: anywhere; } /* TABLET */ @media (max-width: 900px) { html body .kiat-profile .kiat-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } html body .kiat-profile .kiat-hero { gap: 18px; } } /* MOBILE */ @media (max-width: 600px) { html body .kiat-profile { margin-top: 16px; margin-bottom: 24px; } html body .kiat-profile .kiat-hero { padding: 24px 20px 21px !important; border-radius: 12px !important; } html body .kiat-profile .kiat-identity { flex-direction: column; align-items: flex-start; gap: 17px; } html body .kiat-profile .kiat-logo-wrap { flex-basis: 92px; width: 92px; min-height: 92px; border-radius: 11px; } html body .kiat-profile .kiat-logo-text span { font-size: 7px; } html body .kiat-profile .kiat-logo-text strong { font-size: 27px; } html body .kiat-profile .kiat-title { font-size: 27px !important; } html body .kiat-profile .kiat-publisher, html body .kiat-profile .kiat-description { font-size: 13px; } html body .kiat-profile .kiat-stats { gap: 10px; } html body .kiat-profile .kiat-stat { padding: 17px 13px 15px; border-radius: 10px; } html body .kiat-profile .kiat-stat-value { font-size: 23px; } html body .kiat-profile .kiat-stat-label { font-size: 12px; } html body .kiat-profile .kiat-stat-note { font-size: 11px; } html body .kiat-profile .kiat-metadata { grid-template-columns: 1fr; gap: 10px; } html body .kiat-profile .kiat-meta-item { padding: 15px; } } @media (prefers-reduced-motion: reduce) { html body .kiat-profile .kiat-stat, html body .kiat-profile .kiat-meta-item { transition: none !important; } html body .kiat-profile .kiat-stat:hover, html body .kiat-profile .kiat-meta-item:hover { transform: none !important; } } /* ========================================================== KIAT PROFILE FIX — STATS + METADATA OUTSIDE .kiat-profile FIX: HTML sections use .kiat-stats and .kiat-metadata directly. The earlier rules required a parent .kiat-profile wrapper, so these cards rendered as plain text. These direct selectors intentionally support the supplied HTML without requiring a wrapper change. ========================================================== */ html body .kiat-stats, html body .kiat-metadata { --kiat-navy: #08243A; --kiat-navy-deep: #041827; --kiat-gold: #D4A64A; --kiat-gold-light: #F4E5BD; --kiat-ink: #183247; --kiat-muted: #627486; --kiat-line: #DCE5EC; --kiat-panel: #FFFFFF; width: 100% !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; font-family: Arial, Helvetica, sans-serif !important; color: var(--kiat-ink) !important; } html body .kiat-stats *, html body .kiat-stats *::before, html body .kiat-stats *::after, html body .kiat-metadata *, html body .kiat-metadata *::before, html body .kiat-metadata *::after { box-sizing: border-box !important; } /* STATISTICS GRID */ html body .kiat-stats { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 14px !important; margin-top: 24px !important; margin-bottom: 24px !important; padding: 0 !important; } html body .kiat-stats .kiat-stat { display: block !important; position: relative !important; min-width: 0 !important; min-height: 150px !important; margin: 0 !important; padding: 22px 17px 18px !important; overflow: hidden !important; background: #FFFFFF !important; border: 1px solid #DCE5EC !important; border-top: 3px solid #D4A64A !important; border-radius: 12px !important; box-shadow: 0 5px 16px rgba(8, 36, 58, .055) !important; text-align: left !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important; animation: kiatProfileFadeUp .65s ease both; } html body .kiat-stats .kiat-stat:nth-child(1) { animation-delay: .04s; } html body .kiat-stats .kiat-stat:nth-child(2) { animation-delay: .09s; } html body .kiat-stats .kiat-stat:nth-child(3) { animation-delay: .14s; } html body .kiat-stats .kiat-stat:nth-child(4) { animation-delay: .19s; } html body .kiat-stats .kiat-stat:hover { transform: translateY(-4px) !important; border-color: rgba(212, 166, 74, .75) !important; box-shadow: 0 12px 24px rgba(8, 36, 58, .11) !important; } html body .kiat-stats .kiat-stat-value { display: block !important; margin: 0 0 7px !important; padding: 0 !important; color: #08243A !important; font-size: clamp(22px, 2.1vw, 30px) !important; font-weight: 900 !important; line-height: 1.2 !important; overflow-wrap: anywhere !important; } html body .kiat-stats .kiat-stat-label { display: block !important; margin: 0 !important; padding: 0 !important; color: #183247 !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.4 !important; } html body .kiat-stats .kiat-stat-note { display: block !important; margin: 7px 0 0 !important; padding: 0 !important; color: #627486 !important; font-size: 12px !important; font-weight: 400 !important; line-height: 1.5 !important; } /* METADATA GRID */ html body .kiat-metadata { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; align-items: stretch !important; gap: 12px !important; margin-top: 0 !important; margin-bottom: 26px !important; padding: 0 !important; } html body .kiat-metadata .kiat-meta-item { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 13px !important; min-width: 0 !important; min-height: 86px !important; margin: 0 !important; padding: 17px 18px !important; background: #FFFFFF !important; border: 1px solid #DCE5EC !important; border-radius: 11px !important; box-shadow: 0 3px 12px rgba(8, 36, 58, .035) !important; text-align: left !important; transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease !important; animation: kiatProfileFadeUp .65s ease both; } html body .kiat-metadata .kiat-meta-item:nth-child(1) { animation-delay: .04s; } html body .kiat-metadata .kiat-meta-item:nth-child(2) { animation-delay: .09s; } html body .kiat-metadata .kiat-meta-item:nth-child(3) { animation-delay: .14s; } html body .kiat-metadata .kiat-meta-item:nth-child(4) { animation-delay: .19s; } html body .kiat-metadata .kiat-meta-item:nth-child(5) { animation-delay: .24s; } html body .kiat-metadata .kiat-meta-item:nth-child(6) { animation-delay: .29s; } html body .kiat-metadata .kiat-meta-item:nth-child(7) { animation-delay: .34s; } html body .kiat-metadata .kiat-meta-item:nth-child(8) { animation-delay: .39s; } html body .kiat-metadata .kiat-meta-item:hover { transform: translateY(-2px) !important; border-color: rgba(212, 166, 74, .8) !important; box-shadow: 0 8px 18px rgba(8, 36, 58, .08) !important; } html body .kiat-metadata .kiat-meta-icon { display: flex !important; flex: 0 0 38px !important; align-items: center !important; justify-content: center !important; width: 38px !important; min-width: 38px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; color: #08243A !important; background: #F8F3E7 !important; border: 1px solid #EAD9AD !important; border-radius: 10px !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1 !important; } html body .kiat-metadata .kiat-meta-content { display: flex !important; flex: 1 1 auto !important; flex-direction: column !important; align-items: flex-start !important; min-width: 0 !important; gap: 3px !important; margin: 0 !important; padding: 0 !important; } html body .kiat-metadata .kiat-meta-label { display: block !important; margin: 0 !important; padding: 0 !important; color: #627486 !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: 1.1px !important; line-height: 1.4 !important; text-transform: uppercase !important; } html body .kiat-metadata .kiat-meta-value { display: block !important; margin: 0 !important; padding: 0 !important; color: #08243A !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1.5 !important; overflow-wrap: anywhere !important; } html body .kiat-metadata .kiat-meta-value a { color: #08243A !important; font-weight: 800 !important; text-decoration: none !important; text-underline-offset: 3px !important; overflow-wrap: anywhere !important; } html body .kiat-metadata .kiat-meta-value a:hover { color: #986E1D !important; text-decoration: underline !important; } html body .kiat-metadata .kiat-meta-subtext { display: block !important; margin: 0 !important; padding: 0 !important; color: #627486 !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.5 !important; overflow-wrap: anywhere !important; } /* ANIMATION */ @keyframes kiatProfileFadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } /* TABLET */ @media (max-width: 900px) { html body .kiat-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* MOBILE */ @media (max-width: 600px) { html body .kiat-stats { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; margin-top: 18px !important; margin-bottom: 18px !important; } html body .kiat-stats .kiat-stat { min-height: 135px !important; padding: 17px 13px 15px !important; border-radius: 10px !important; } html body .kiat-stats .kiat-stat-value { font-size: 23px !important; } html body .kiat-stats .kiat-stat-label { font-size: 12px !important; } html body .kiat-stats .kiat-stat-note { font-size: 11px !important; } html body .kiat-metadata { grid-template-columns: 1fr !important; gap: 10px !important; } html body .kiat-metadata .kiat-meta-item { padding: 15px !important; } } @media (prefers-reduced-motion: reduce) { html body .kiat-stats .kiat-stat, html body .kiat-metadata .kiat-meta-item { animation: none !important; transition: none !important; } html body .kiat-stats .kiat-stat:hover, html body .kiat-metadata .kiat-meta-item:hover { transform: none !important; } } /* END KIAT PROFILE FIX */ /* ========================================================== KIAT JOURNAL INFORMATION — COVER PLACEHOLDER BOX Use this class in the right-hand column where the KIAT promotional card currently appears. ========================================================== */ html body .kiat-cover-box { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 320px !important; aspect-ratio: 3 / 4 !important; margin: 0 auto !important; padding: 14px !important; box-sizing: border-box !important; overflow: hidden !important; background: linear-gradient(145deg, #f8fafc 0%, #ffffff 55%, #f5f7fa 100%) !important; border: 1px solid #d8a84e !important; border-radius: 16px !important; box-shadow: 0 12px 28px rgba(5, 35, 56, 0.12) !important; transition: transform .3s ease, box-shadow .3s ease !important; } html body .kiat-cover-box::before { content: "JOURNAL COVER" !important; position: absolute !important; z-index: 0 !important; color: #7b8794 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: 2px !important; text-align: center !important; pointer-events: none !important; } html body .kiat-cover-box img { position: relative !important; z-index: 1 !important; display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; object-position: center !important; margin: 0 auto !important; padding: 0 !important; border: 0 !important; border-radius: 5px !important; background: transparent !important; box-shadow: none !important; transform: none !important; transition: transform .35s ease, filter .35s ease !important; } html body .kiat-cover-box:hover { transform: translateY(-4px) !important; box-shadow: 0 18px 36px rgba(5, 35, 56, 0.17) !important; } html body .kiat-cover-box:hover img { transform: scale(1.015) !important; filter: saturate(1.03) !important; } @media (max-width: 900px) { html body .kiat-cover-box { max-width: 270px !important; } } @media (max-width: 600px) { html body .kiat-cover-box { max-width: 230px !important; border-radius: 12px !important; } } /* ========================================================== KIAT COVER — FIX FULL-WIDTH COVER INSIDE JOURNAL INFORMATION Fix: - Do not place the caption beside the cover. - Let the cover use the full inner width of its card. - Keep the original cover proportions (no cropping). - Keep the caption underneath the image. ========================================================== */ html body .kiat-info .kiat-cover-column, html body .kiat-cover-column { width: 390px !important; max-width: 100% !important; flex: 0 1 390px !important; min-width: 0 !important; margin: 0 auto !important; box-sizing: border-box !important; } html body .kiat-info .kiat-cover-box, html body .kiat-cover-box { display: block !important; width: 100% !important; max-width: 390px !important; height: auto !important; min-height: 0 !important; aspect-ratio: auto !important; padding: 10px !important; box-sizing: border-box !important; overflow: hidden !important; text-align: center !important; background: #ffffff !important; border: 1px solid #d8a84e !important; border-radius: 16px !important; box-shadow: 0 12px 28px rgba(5, 35, 56, 0.12) !important; } html body .kiat-info .kiat-cover-box > a, html body .kiat-cover-box > a { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; text-align: center !important; } html body .kiat-info .kiat-cover-box img, html body .kiat-cover-box img { position: static !important; display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important; object-position: center !important; margin: 0 auto !important; padding: 0 !important; border: 0 !important; border-radius: 6px !important; background: transparent !important; box-shadow: none !important; transform: none !important; } html body .kiat-info .kiat-cover-box > p, html body .kiat-cover-box > p { display: block !important; width: 100% !important; margin: 10px 0 2px !important; padding: 0 !important; color: #002038 !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.5 !important; text-align: center !important; box-sizing: border-box !important; } html body .kiat-cover-box:hover img, html body .kiat-cover-box img:hover { transform: none !important; box-shadow: none !important; } @media (max-width: 900px) { html body .kiat-info .kiat-cover-column, html body .kiat-cover-column { width: 320px !important; max-width: 100% !important; flex-basis: 320px !important; } html body .kiat-info .kiat-cover-box, html body .kiat-cover-box { max-width: 320px !important; } } @media (max-width: 600px) { html body .kiat-info .kiat-cover-column, html body .kiat-cover-column { width: 100% !important; max-width: 100% !important; flex-basis: 100% !important; } html body .kiat-info .kiat-cover-box, html body .kiat-cover-box { width: 100% !important; max-width: 320px !important; margin: 0 auto !important; padding: 8px !important; border-radius: 12px !important; } } /* ========================================================== KIAT PREMIUM HERO WITH JOURNAL COVER — FINAL OVERRIDE Compatible with the Hero HTML using .kiat-main-hero classes. This block is intentionally placed at the end of the CSS to override legacy global image, heading, and link rules. ========================================================== */ html body .kiat-main-hero, html body .kiat-main-hero * , html body .kiat-main-hero *::before, html body .kiat-main-hero *::after { box-sizing: border-box !important; } html body .kiat-main-hero { --kiat-hero-navy: #071f35; --kiat-hero-navy-light: #123b54; --kiat-hero-gold: #d6ad63; --kiat-hero-gold-light: #f0d9a5; position: relative !important; isolation: isolate !important; display: block !important; width: 100% !important; max-width: 1400px !important; margin: 22px auto 34px !important; padding: 0 !important; overflow: hidden !important; color: #ffffff !important; background: radial-gradient(ellipse at 82% 14%, rgba(214,173,99,.16), transparent 35%), radial-gradient(ellipse at 14% 90%, rgba(30,89,119,.35), transparent 45%), linear-gradient(120deg, #06192b 0%, #0b2d46 58%, #102f43 100%) !important; border: 1px solid rgba(214,173,99,.70) !important; border-radius: 24px !important; box-shadow: 0 20px 48px rgba(4,23,39,.18) !important; font-family: Arial, Helvetica, sans-serif !important; } html body .kiat-main-hero p, html body .kiat-main-hero h1, html body .kiat-main-hero h2, html body .kiat-main-hero h3 { text-shadow: none !important; } html body .kiat-main-hero-bg-shape, html body .kiat-main-hero .kiat-hero-bg-shape { position: absolute !important; z-index: -1 !important; pointer-events: none !important; border: 1px solid rgba(214,173,99,.16) !important; transform: rotate(35deg) !important; } html body .kiat-main-hero .kiat-hero-bg-shape-1 { width: 430px !important; height: 430px !important; right: -170px !important; top: -210px !important; border-radius: 50% !important; } html body .kiat-main-hero .kiat-hero-bg-shape-2 { width: 300px !important; height: 300px !important; left: 42% !important; bottom: -230px !important; border-radius: 50% !important; } html body .kiat-main-hero .kiat-hero-gold-orbit { position: absolute !important; z-index: -1 !important; right: 4% !important; top: 10% !important; width: 360px !important; height: 360px !important; border: 1px solid rgba(214,173,99,.12) !important; border-radius: 50% !important; pointer-events: none !important; } html body .kiat-main-hero .kiat-main-hero-inner { position: relative !important; display: grid !important; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .75fr) !important; align-items: center !important; gap: clamp(28px, 5vw, 70px) !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: clamp(30px, 5vw, 66px) !important; } html body .kiat-main-hero .kiat-main-hero-content { display: block !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; animation: kiatHeroEntrance .8s ease both !important; } html body .kiat-main-hero .kiat-main-hero-badge { display: inline-flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; margin: 0 0 24px !important; padding: 9px 15px !important; color: #f6e5c1 !important; background: rgba(255,255,255,.055) !important; border: 1px solid rgba(240,217,165,.4) !important; border-radius: 50px !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 1.1px !important; line-height: 1.5 !important; } html body .kiat-main-hero .kiat-status-dot { display: inline-block !important; width: 7px !important; height: 7px !important; min-width: 7px !important; padding: 0 !important; background: #d6ad63 !important; border-radius: 50% !important; box-shadow: 0 0 10px rgba(214,173,99,.6) !important; } html body .kiat-main-hero .kiat-badge-divider { color: #f6e5c1 !important; opacity: .6 !important; } html body .kiat-main-hero .kiat-main-hero-kicker { margin: 0 0 12px !important; padding: 0 !important; color: var(--kiat-hero-gold) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 2px !important; line-height: 1.7 !important; } html body .kiat-main-hero .kiat-main-hero-title { display: block !important; margin: 0 !important; padding: 0 !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: clamp(35px, 4.3vw, 59px) !important; font-weight: 800 !important; line-height: 1.08 !important; letter-spacing: -1.8px !important; overflow-wrap: anywhere !important; } html body .kiat-main-hero .kiat-main-hero-title span { display: block !important; margin: 3px 0 0 !important; padding: 0 !important; color: var(--kiat-hero-gold-light) !important; -webkit-text-fill-color: var(--kiat-hero-gold-light) !important; font-size: 1.13em !important; letter-spacing: 2px !important; } html body .kiat-main-hero .kiat-main-hero-accent { display: block !important; width: 76px !important; height: 4px !important; margin: 22px 0 19px !important; padding: 0 !important; border: 0 !important; border-radius: 10px !important; background: linear-gradient(90deg, #b88a3e, #f4dfad, #b88a3e) !important; background-size: 200% 100% !important; animation: kiatGoldFlow 5s linear infinite !important; } html body .kiat-main-hero .kiat-main-hero-fields { margin: 0 0 20px !important; padding: 0 !important; color: #f0d9a5 !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.9 !important; letter-spacing: 1.15px !important; } html body .kiat-main-hero .kiat-main-hero-fields span { display: inline !important; margin: 0 !important; padding: 0 4px !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; opacity: .75 !important; } html body .kiat-main-hero .kiat-main-hero-description { max-width: 650px !important; margin: 0 0 28px !important; padding: 0 !important; color: rgba(255,255,255,.88) !important; -webkit-text-fill-color: rgba(255,255,255,.88) !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1.9 !important; } /* Buttons */ html body .kiat-main-hero .kiat-main-hero-buttons { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 12px !important; margin: 0 !important; padding: 0 !important; } html body .kiat-main-hero .kiat-hero-btn, html body .kiat-main-hero .kiat-hero-btn:visited { position: relative !important; display: inline-flex !important; justify-content: center !important; align-items: center !important; gap: 12px !important; min-height: 46px !important; margin: 0 !important; padding: 12px 20px !important; overflow: hidden !important; border: 1px solid transparent !important; border-radius: 50px !important; text-decoration: none !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.4 !important; box-shadow: none !important; animation: none !important; transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important; } html body .kiat-main-hero .kiat-hero-btn-primary, html body .kiat-main-hero .kiat-hero-btn-primary:visited { color: #10283a !important; -webkit-text-fill-color: #10283a !important; background: linear-gradient(120deg, #c89b4e, #f0d9a5) !important; box-shadow: 0 8px 22px rgba(0,0,0,.12) !important; } html body .kiat-main-hero .kiat-hero-btn-secondary, html body .kiat-main-hero .kiat-hero-btn-secondary:visited { color: #f4e3c0 !important; -webkit-text-fill-color: #f4e3c0 !important; background: rgba(255,255,255,.04) !important; border-color: rgba(240,217,165,.48) !important; } html body .kiat-main-hero .kiat-hero-btn:hover { transform: translateY(-3px) !important; } html body .kiat-main-hero .kiat-hero-btn-primary:hover { color: #071f35 !important; -webkit-text-fill-color: #071f35 !important; box-shadow: 0 12px 28px rgba(214,173,99,.23) !important; } html body .kiat-main-hero .kiat-hero-btn-secondary:hover { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; background: rgba(255,255,255,.1) !important; } html body .kiat-main-hero .kiat-main-hero-footer { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 12px !important; margin: 32px 0 0 !important; padding: 0 !important; color: rgba(255,255,255,.7) !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: 1px !important; line-height: 1.8 !important; } html body .kiat-main-hero .kiat-footer-separator { display: inline-block !important; width: 4px !important; height: 4px !important; min-width: 4px !important; margin: 0 !important; padding: 0 !important; background: var(--kiat-hero-gold) !important; border-radius: 50% !important; } /* Cover column and card */ html body .kiat-main-hero .kiat-main-hero-visual { position: relative !important; display: block !important; justify-self: center !important; width: 100% !important; max-width: 360px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; animation: kiatCoverEntrance .9s .12s ease both !important; } html body .kiat-main-hero .kiat-cover-glow { position: absolute !important; inset: 8% -5% 15% !important; z-index: -1 !important; margin: 0 !important; padding: 0 !important; background: rgba(214,173,99,.13) !important; filter: blur(40px) !important; border-radius: 50% !important; pointer-events: none !important; } html body .kiat-main-hero .kiat-main-cover-frame { position: relative !important; display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 13px !important; overflow: hidden !important; background: linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)) !important; border: 1px solid rgba(240,217,165,.45) !important; border-radius: 18px !important; box-shadow: 0 22px 45px rgba(0,0,0,.22) !important; backdrop-filter: blur(8px); transition: transform .35s ease, border-color .35s ease, box-shadow .35s ease !important; } html body .kiat-main-hero .kiat-main-cover-frame:hover { transform: translateY(-6px) !important; border-color: rgba(240,217,165,.85) !important; box-shadow: 0 28px 55px rgba(0,0,0,.3) !important; } html body .kiat-main-hero .kiat-cover-topline { display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 10px !important; margin: 0 !important; padding: 3px 3px 11px !important; color: #f0d9a5 !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: 1.8px !important; } html body .kiat-main-hero .kiat-cover-number { color: #f0d9a5 !important; opacity: .65 !important; } html body .kiat-main-hero .kiat-main-cover-link { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border-radius: 7px !important; line-height: 0 !important; text-decoration: none !important; } html body .kiat-main-hero .kiat-main-cover-image { position: static !important; display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; max-height: none !important; aspect-ratio: auto !important; object-fit: contain !important; object-position: center !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 7px !important; background: #ffffff !important; box-shadow: none !important; transform: none !important; transition: transform .4s ease !important; } html body .kiat-main-hero .kiat-main-cover-frame:hover .kiat-main-cover-image { transform: scale(1.015) !important; } html body .kiat-main-hero .kiat-cover-caption { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 3px !important; margin: 0 !important; padding: 15px 4px 5px !important; text-align: center !important; } html body .kiat-main-hero .kiat-cover-caption-label { display: block !important; color: rgba(255,255,255,.72) !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: 2px !important; } html body .kiat-main-hero .kiat-cover-caption strong { display: block !important; margin: 0 !important; padding: 0 !important; color: var(--kiat-hero-gold-light) !important; font-size: 24px !important; font-weight: 800 !important; letter-spacing: 3px !important; line-height: 1.2 !important; } html body .kiat-main-hero .kiat-cover-caption-subtitle { display: block !important; color: rgba(255,255,255,.7) !important; font-size: 8px !important; font-weight: 700 !important; letter-spacing: .8px !important; line-height: 1.7 !important; } html body .kiat-main-hero .kiat-cover-bottom-note { display: flex !important; justify-content: center !important; align-items: center !important; gap: 10px !important; margin: 19px 0 0 !important; padding: 0 !important; color: #f0d9a5 !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: 1.5px !important; line-height: 1.7 !important; text-align: center !important; } html body .kiat-main-hero .kiat-cover-note-line { display: inline-block !important; width: 28px !important; height: 1px !important; min-width: 28px !important; margin: 0 !important; padding: 0 !important; background: var(--kiat-hero-gold) !important; } /* Animation names are unique to avoid collisions with older styles */ @keyframes kiatHeroEntrance { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes kiatCoverEntrance { from { opacity: 0; transform: translateY(20px) scale(.98); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes kiatGoldFlow { from { background-position: 0% 50%; } to { background-position: 200% 50%; } } /* Tablet */ @media (max-width: 850px) { html body .kiat-main-hero .kiat-main-hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(220px, .8fr) !important; gap: 26px !important; padding: 32px !important; } html body .kiat-main-hero .kiat-main-hero-title { font-size: clamp(32px, 5vw, 45px) !important; letter-spacing: -1px !important; } html body .kiat-main-hero .kiat-main-hero-description { font-size: 14px !important; line-height: 1.8 !important; } html body .kiat-main-hero .kiat-main-hero-visual { max-width: 300px !important; } } /* Mobile */ @media (max-width: 620px) { html body .kiat-main-hero { margin: 12px auto 24px !important; border-radius: 17px !important; } html body .kiat-main-hero .kiat-main-hero-inner { grid-template-columns: minmax(0, 1fr) !important; gap: 30px !important; padding: 25px 20px 27px !important; } html body .kiat-main-hero .kiat-main-hero-badge { margin-bottom: 19px !important; font-size: 9px !important; letter-spacing: .7px !important; } html body .kiat-main-hero .kiat-main-hero-kicker { font-size: 9px !important; letter-spacing: 1.5px !important; } html body .kiat-main-hero .kiat-main-hero-title { font-size: clamp(34px, 9vw, 48px) !important; } html body .kiat-main-hero .kiat-main-hero-fields { font-size: 10px !important; letter-spacing: .7px !important; } html body .kiat-main-hero .kiat-main-hero-description { font-size: 14px !important; line-height: 1.8 !important; } html body .kiat-main-hero .kiat-main-hero-buttons { align-items: stretch !important; flex-direction: column !important; } html body .kiat-main-hero .kiat-hero-btn { width: 100% !important; } html body .kiat-main-hero .kiat-main-hero-footer { margin-top: 23px !important; font-size: 9px !important; } html body .kiat-main-hero .kiat-main-hero-visual { width: 100% !important; max-width: 285px !important; } html body .kiat-main-hero .kiat-main-cover-frame { padding: 11px !important; } html body .kiat-main-hero .kiat-main-cover-image { max-height: none !important; } html body .kiat-main-hero .kiat-hero-gold-orbit { right: -100px !important; top: 48% !important; width: 260px !important; height: 260px !important; } } @media (prefers-reduced-motion: reduce) { html body .kiat-main-hero .kiat-main-hero-content, html body .kiat-main-hero .kiat-main-hero-visual, html body .kiat-main-hero .kiat-main-hero-accent { animation: none !important; } html body .kiat-main-hero .kiat-main-cover-frame, html body .kiat-main-hero .kiat-main-cover-image, html body .kiat-main-hero .kiat-hero-btn { transition: none !important; } } /* ========================================================== KIAT HERO — COMPACT, BALANCED LAYOUT OVERRIDE Append-only override: preserves the existing site CSS. ========================================================== */ html body .kiat-main-hero { width: 100% !important; max-width: 100% !important; margin: 12px auto 24px !important; border-radius: 20px !important; overflow: hidden !important; } html body .kiat-main-hero, html body .kiat-main-hero * { box-sizing: border-box !important; } html body .kiat-main-hero .kiat-main-hero-inner { display: grid !important; grid-template-columns: minmax(0, 1.25fr) minmax(230px, .72fr) !important; align-items: center !important; gap: clamp(24px, 3.2vw, 44px) !important; padding: clamp(26px, 3.2vw, 42px) !important; } html body .kiat-main-hero .kiat-main-hero-content { min-width: 0 !important; width: 100% !important; text-align: left !important; animation: kiatHeroEntrance .7s ease both !important; } html body .kiat-main-hero .kiat-main-hero-badge { margin: 0 0 18px !important; padding: 7px 12px !important; font-size: 10px !important; letter-spacing: .8px !important; line-height: 1.4 !important; } html body .kiat-main-hero .kiat-main-hero-kicker { margin: 0 0 9px !important; font-size: 10px !important; letter-spacing: 1.5px !important; line-height: 1.6 !important; text-align: left !important; } html body .kiat-main-hero .kiat-main-hero-title { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: clamp(34px, 3.5vw, 48px) !important; font-weight: 800 !important; line-height: 1.04 !important; letter-spacing: -1.1px !important; word-spacing: normal !important; text-align: left !important; text-align-last: left !important; text-transform: none !important; overflow-wrap: normal !important; } html body .kiat-main-hero .kiat-main-hero-title span { display: block !important; width: auto !important; margin: 2px 0 0 !important; padding: 0 !important; color: #f0d9a5 !important; -webkit-text-fill-color: #f0d9a5 !important; font-size: 1.02em !important; line-height: 1.04 !important; letter-spacing: 1.5px !important; text-align: left !important; } html body .kiat-main-hero .kiat-main-hero-accent { width: 64px !important; height: 4px !important; margin: 17px 0 14px !important; } html body .kiat-main-hero .kiat-main-hero-fields { margin: 0 0 14px !important; font-size: 10px !important; line-height: 1.7 !important; letter-spacing: .85px !important; text-align: left !important; } html body .kiat-main-hero .kiat-main-hero-description { width: 100% !important; max-width: 570px !important; margin: 0 0 21px !important; padding: 0 !important; font-size: 14px !important; line-height: 1.72 !important; text-align: left !important; text-align-last: left !important; overflow-wrap: break-word !important; } html body .kiat-main-hero .kiat-main-hero-buttons { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 10px !important; margin: 0 !important; } html body .kiat-main-hero .kiat-hero-btn { display: inline-flex !important; width: auto !important; min-height: 42px !important; margin: 0 !important; padding: 10px 17px !important; font-size: 12px !important; line-height: 1.35 !important; animation: none !important; } html body .kiat-main-hero .kiat-main-hero-footer { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px 12px !important; margin: 22px 0 0 !important; padding: 0 !important; font-size: 9px !important; line-height: 1.6 !important; letter-spacing: .6px !important; text-align: left !important; } html body .kiat-main-hero .kiat-main-hero-footer > span { display: inline-block !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; } html body .kiat-main-hero .kiat-main-hero-visual { justify-self: center !important; align-self: center !important; width: 100% !important; max-width: 310px !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; animation: kiatCoverEntrance .75s .08s ease both !important; } html body .kiat-main-hero .kiat-main-cover-frame { width: 100% !important; max-width: 310px !important; margin: 0 auto !important; padding: 10px !important; border-radius: 16px !important; } html body .kiat-main-hero .kiat-cover-topline { padding: 2px 2px 8px !important; font-size: 8px !important; letter-spacing: 1.25px !important; } html body .kiat-main-hero .kiat-main-cover-link { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; overflow: hidden !important; } html body .kiat-main-hero .kiat-main-cover-image { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: 360px !important; aspect-ratio: 3 / 4 !important; object-fit: contain !important; object-position: center !important; margin: 0 !important; padding: 0 !important; border-radius: 5px !important; } html body .kiat-main-hero .kiat-cover-caption { gap: 2px !important; margin: 0 !important; padding: 10px 3px 2px !important; text-align: center !important; } html body .kiat-main-hero .kiat-cover-caption-label { font-size: 8px !important; letter-spacing: 1.5px !important; } html body .kiat-main-hero .kiat-cover-caption strong { font-size: 21px !important; line-height: 1.15 !important; } html body .kiat-main-hero .kiat-cover-caption-subtitle { font-size: 7px !important; line-height: 1.5 !important; letter-spacing: .4px !important; } html body .kiat-main-hero .kiat-cover-bottom-note { margin: 12px 0 0 !important; font-size: 8px !important; line-height: 1.5 !important; letter-spacing: 1px !important; } /* Tablet: keep the cover beside the text when space permits. */ @media (max-width: 900px) { html body .kiat-main-hero .kiat-main-hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(200px, .75fr) !important; gap: 22px !important; padding: 28px !important; } html body .kiat-main-hero .kiat-main-hero-title { font-size: clamp(30px, 4.2vw, 40px) !important; } html body .kiat-main-hero .kiat-main-hero-description { font-size: 13px !important; line-height: 1.7 !important; } html body .kiat-main-hero .kiat-main-hero-visual, html body .kiat-main-hero .kiat-main-cover-frame { max-width: 255px !important; } html body .kiat-main-hero .kiat-main-cover-image { max-height: 310px !important; } } /* Mobile: stack content and cover neatly. */ @media (max-width: 620px) { html body .kiat-main-hero { margin: 10px auto 20px !important; border-radius: 15px !important; } html body .kiat-main-hero .kiat-main-hero-inner { grid-template-columns: minmax(0, 1fr) !important; gap: 25px !important; padding: 23px 19px 25px !important; } html body .kiat-main-hero .kiat-main-hero-title { font-size: clamp(32px, 9vw, 42px) !important; } html body .kiat-main-hero .kiat-main-hero-kicker { font-size: 9px !important; letter-spacing: 1.1px !important; } html body .kiat-main-hero .kiat-main-hero-fields { font-size: 9px !important; letter-spacing: .5px !important; } html body .kiat-main-hero .kiat-main-hero-description { font-size: 13px !important; line-height: 1.7 !important; } html body .kiat-main-hero .kiat-main-hero-buttons { flex-direction: column !important; align-items: stretch !important; } html body .kiat-main-hero .kiat-hero-btn { width: 100% !important; justify-content: center !important; } html body .kiat-main-hero .kiat-main-hero-footer { gap: 7px 10px !important; margin-top: 18px !important; } html body .kiat-main-hero .kiat-main-hero-visual, html body .kiat-main-hero .kiat-main-cover-frame { width: 100% !important; max-width: 275px !important; } html body .kiat-main-hero .kiat-main-cover-image { max-height: none !important; } html body .kiat-main-hero .kiat-cover-bottom-note { font-size: 7px !important; } } @media (prefers-reduced-motion: reduce) { html body .kiat-main-hero .kiat-main-hero-content, html body .kiat-main-hero .kiat-main-hero-visual, html body .kiat-main-hero .kiat-main-hero-accent { animation: none !important; } html body .kiat-main-hero .kiat-hero-btn, html body .kiat-main-hero .kiat-main-cover-frame, html body .kiat-main-hero .kiat-main-cover-image { transition: none !important; } } /* ========================================================== KIAT UPDATE: REGISTER & LOGIN BACK AT TOP-RIGHT Appended to the latest compact hero CSS; other sections preserved. ========================================================== */ /* ========================================================== KIAT FINAL POSITION FIX — REGISTER & LOGIN AT TOP Moves Register/Login back to the upper-right header area, above the main navigation. Other page sections are untouched. ========================================================== */ html body .pkp_structure_head { position: relative !important; overflow: visible !important; } /* Put the user navigation at the top-right of the header/banner */ html body .pkp_structure_head .pkp_navigation_user_wrapper { position: absolute !important; top: 12px !important; right: 22px !important; left: auto !important; bottom: auto !important; z-index: 100000 !important; display: block !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; transform: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; visibility: visible !important; opacity: 1 !important; } /* Keep Register and Login side by side */ html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-end !important; gap: 20px !important; width: auto !important; margin: 0 !important; padding: 0 !important; list-style: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Remove inherited list-item boxes */ html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li { display: block !important; width: auto !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* White labels and gold icons for the navy header */ html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a, html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a span { display: inline-flex !important; align-items: center !important; gap: 6px !important; margin: 0 !important; padding: 4px 0 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; background: transparent !important; border: 0 !important; box-shadow: none !important; text-decoration: none !important; text-shadow: 0 1px 3px rgba(0,0,0,.4) !important; white-space: nowrap !important; } html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a::before, html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a i, html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a .fa { color: #D6A64F !important; -webkit-text-fill-color: #D6A64F !important; } /* Slightly smaller spacing on mobile; keep them at the top */ @media (max-width: 600px) { html body .pkp_structure_head .pkp_navigation_user_wrapper { top: 7px !important; right: 10px !important; } html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user { gap: 12px !important; } html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a { font-size: 12px !important; } } /* ========== END REGISTER / LOGIN TOP POSITION FIX ========== */ /* ========================================================== KIAT NAVIGATION — NAVY & GOLD + TITLE CASE + ICONS Restores the KIAT menu palette while preserving the current compact hero and Register/Login placement. ========================================================== */ /* Main navigation bar */ html body .pkp_structure_head .pkp_site_nav_menu, html body .pkp_structure_head .pkp_navigation_primary_wrapper, html body .pkp_structure_head .pkp_navigation_primary_row { background: #FFFFFF !important; border-color: #E5D5B2 !important; } html body .pkp_structure_head .pkp_site_nav_menu { border-bottom: 2px solid #D6A64F !important; box-shadow: 0 5px 16px rgba(11, 31, 58, .09) !important; } /* Main menu layout */ html body .pkp_structure_head .pkp_navigation_primary { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 2px !important; } html body .pkp_structure_head .pkp_navigation_primary > li { position: relative !important; margin: 0 !important; padding: 0 !important; } /* Navy text, gold icon, Each Word Capitalized */ html body .pkp_structure_head .pkp_navigation_primary > li > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 58px !important; padding: 0 13px !important; color: #102A4C !important; -webkit-text-fill-color: #102A4C !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.25 !important; text-transform: capitalize !important; text-decoration: none !important; white-space: nowrap !important; background: transparent !important; border: 0 !important; border-bottom: 3px solid transparent !important; transition: color .25s ease, background .25s ease, border-color .25s ease !important; } /* Icons for primary menu items (Font Awesome available in OJS) */ html body .pkp_structure_head .pkp_navigation_primary > li > a::before { display: inline-block !important; width: 17px !important; min-width: 17px !important; margin-right: 7px !important; color: #C99A3D !important; -webkit-text-fill-color: #C99A3D !important; font-family: FontAwesome !important; font-size: 13px !important; font-weight: normal !important; font-style: normal !important; text-align: center !important; text-transform: none !important; } /* Home, About, Current Issue, Archives, Announcements */ html body .pkp_structure_head .pkp_navigation_primary > li:nth-child(1) > a::before { content: "\f015" !important; } html body .pkp_structure_head .pkp_navigation_primary > li:nth-child(2) > a::before { content: "\f05a" !important; } html body .pkp_structure_head .pkp_navigation_primary > li:nth-child(3) > a::before { content: "\f02d" !important; } html body .pkp_structure_head .pkp_navigation_primary > li:nth-child(4) > a::before { content: "\f187" !important; } html body .pkp_structure_head .pkp_navigation_primary > li:nth-child(5) > a::before { content: "\f0a1" !important; } /* Hover/focus: navy surface with gold accent */ html body .pkp_structure_head .pkp_navigation_primary > li > a:hover, html body .pkp_structure_head .pkp_navigation_primary > li > a:focus, html body .pkp_structure_head .pkp_navigation_primary > li > a[aria-current="page"] { color: #102A4C !important; -webkit-text-fill-color: #102A4C !important; background: #F8F3E8 !important; border-bottom-color: #C99A3D !important; } html body .pkp_structure_head .pkp_navigation_primary > li > a:hover::before, html body .pkp_structure_head .pkp_navigation_primary > li > a:focus::before { color: #A97920 !important; -webkit-text-fill-color: #A97920 !important; } /* Dropdown menu */ html body .pkp_structure_head .pkp_navigation_primary .dropdown-menu { min-width: 220px !important; padding: 7px 0 !important; background: #FFFFFF !important; border: 1px solid #E5D5B2 !important; border-top: 2px solid #C99A3D !important; border-radius: 0 0 9px 9px !important; box-shadow: 0 12px 25px rgba(11, 31, 58, .14) !important; } html body .pkp_structure_head .pkp_navigation_primary .dropdown-menu > li > a, html body .pkp_structure_head .pkp_navigation_primary .dropdown-menu > li > a span { display: block !important; padding: 10px 16px !important; color: #102A4C !important; -webkit-text-fill-color: #102A4C !important; font-size: 13px !important; font-weight: 600 !important; text-transform: capitalize !important; text-decoration: none !important; background: #FFFFFF !important; } html body .pkp_structure_head .pkp_navigation_primary .dropdown-menu > li > a:hover, html body .pkp_structure_head .pkp_navigation_primary .dropdown-menu > li > a:focus { color: #102A4C !important; -webkit-text-fill-color: #102A4C !important; background: #F8F3E8 !important; box-shadow: inset 3px 0 0 #C99A3D !important; } /* Keep search control consistent with the navy/gold menu */ html body .pkp_structure_head .pkp_navigation_primary_row .pkp_search, html body .pkp_structure_head .pkp_navigation_primary_row .pkp_search a, html body .pkp_structure_head .pkp_navigation_primary_row .pkp_search button, html body .pkp_structure_head .pkp_navigation_primary_row .pkp_search .search_prompt { color: #102A4C !important; -webkit-text-fill-color: #102A4C !important; text-transform: capitalize !important; } html body .pkp_structure_head .pkp_navigation_primary_row .pkp_search a::before, html body .pkp_structure_head .pkp_navigation_primary_row .pkp_search button::before, html body .pkp_structure_head .pkp_navigation_primary_row .pkp_search .search_prompt::before { color: #C99A3D !important; -webkit-text-fill-color: #C99A3D !important; } /* Tablet/mobile */ @media (max-width: 900px) { html body .pkp_structure_head .pkp_navigation_primary > li > a { min-height: 54px !important; padding: 0 9px !important; font-size: 12px !important; } } @media (max-width: 600px) { html body .pkp_structure_head .pkp_navigation_primary > li > a { min-height: 50px !important; padding: 0 7px !important; font-size: 11px !important; } html body .pkp_structure_head .pkp_navigation_primary > li > a::before { width: 14px !important; min-width: 14px !important; margin-right: 4px !important; font-size: 11px !important; } } /* ========== END KIAT NAVY & GOLD MENU OVERRIDE ========== */ /* ========================================================== KIAT NAVY & GOLD — ARTICLE LIST / ISSUE CONTENT Fix: article titles and metadata are separate from the navigation menu, so they need their own selectors. ========================================================== */ /* Article titles */ html body .obj_article_summary .title, html body .obj_article_summary .title a, html body .obj_article_summary h3, html body .obj_article_summary h3 a, html body .cmp_article_list .title, html body .cmp_article_list .title a, html body .article-summary-title, html body .article-summary-title a, html body .title a[href*="/article/view/"], html body .pkp_page_issue .obj_article_summary .title a { color: #102A4C !important; -webkit-text-fill-color: #102A4C !important; text-decoration: none !important; } html body .obj_article_summary .title a:hover, html body .obj_article_summary h3 a:hover, html body .cmp_article_list .title a:hover, html body .article-summary-title a:hover, html body .title a[href*="/article/view/"]:hover, html body .pkp_page_issue .obj_article_summary .title a:hover { color: #C99A3D !important; -webkit-text-fill-color: #C99A3D !important; } /* Article metadata: authors, publication details, page range */ html body .obj_article_summary .authors, html body .obj_article_summary .author, html body .obj_article_summary .pages, html body .obj_article_summary .published, html body .obj_article_summary .doi, html body .obj_article_summary .item, html body .cmp_article_list .authors, html body .cmp_article_list .pages { color: #102A4C !important; } /* DOI and other article links */ html body .obj_article_summary a[href*="doi.org"], html body .obj_article_summary a[href*="/doi/"], html body .obj_article_summary .doi a, html body .cmp_article_list a[href*="doi"] { color: #102A4C !important; -webkit-text-fill-color: #102A4C !important; } html body .obj_article_summary a[href*="doi.org"]:hover, html body .obj_article_summary a[href*="/doi/"]:hover, html body .obj_article_summary .doi a:hover, html body .cmp_article_list a[href*="doi"]:hover { color: #C99A3D !important; -webkit-text-fill-color: #C99A3D !important; } /* Article metric and metadata icons use gold */ html body .obj_article_summary .icon, html body .obj_article_summary [class*="fa-"], html body .cmp_article_list .icon, html body .cmp_article_list [class*="fa-"] { color: #C99A3D !important; } /* PDF / galley buttons retain a gold background */ html body .obj_article_summary .obj_galley_link, html body .obj_article_summary .cmp_galley_link, html body .cmp_article_list .obj_galley_link, html body .cmp_article_list .cmp_galley_link, html body a.obj_galley_link, html body a.cmp_galley_link { background: #C99A3D !important; border-color: #C99A3D !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } html body .obj_article_summary .obj_galley_link:hover, html body .obj_article_summary .cmp_galley_link:hover, html body .cmp_article_list .obj_galley_link:hover, html body .cmp_article_list .cmp_galley_link:hover, html body a.obj_galley_link:hover, html body a.cmp_galley_link:hover { background: #A97B25 !important; border-color: #A97B25 !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } /* ========== END ARTICLE NAVY & GOLD OVERRIDE ========== */ /* ========================================================== KIAT FINAL FIX — LOGIN ICON + SEARCH ICON/TEXT Force the remaining green elements to use the navy/gold palette. Keep login text white over the dark banner. ========================================================== */ /* Admin / Login: text stays white; all icon implementations become gold */ html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a, html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a span { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; } html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a::before, html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a::after, html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a i, html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a .fa, html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a [class*="icon"], html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a svg, html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a svg * { color: #C99A3D !important; -webkit-text-fill-color: #C99A3D !important; fill: #C99A3D !important; stroke: #C99A3D !important; } /* Search: force the label and every nested text/icon element to navy/gold */ html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search, html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search a, html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search button, html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search .search_prompt, html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search a span, html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search button span, html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search .search_prompt span { color: #102A4C !important; -webkit-text-fill-color: #102A4C !important; } html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search a::before, html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search a::after, html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search button::before, html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search button::after, html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search .search_prompt::before, html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search .search_prompt::after, html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search i, html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search .fa, html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search [class*="icon"], html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search svg, html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search svg * { color: #C99A3D !important; -webkit-text-fill-color: #C99A3D !important; fill: #C99A3D !important; stroke: #C99A3D !important; } html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search a:hover, html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search button:hover, html body .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search .search_prompt:hover { color: #102A4C !important; -webkit-text-fill-color: #102A4C !important; } /* ========== END FINAL LOGIN + SEARCH COLOR FIX ========== */ /* ========================================================== KIAT FINAL OVERRIDE — REGISTER & LOGIN ICONS GOLD Preserve all existing layout, text, and navigation styling. Only the Register/Login icons are changed to gold. ========================================================== */ html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a::before, html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a::after, html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li:first-child > a::before, html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li:last-child > a::before, html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a i, html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a .fa, html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a [class*="icon"], html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a svg, html body .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a svg * { color: #C99A3D !important; -webkit-text-fill-color: #C99A3D !important; fill: #C99A3D !important; stroke: #C99A3D !important; } /* Cover themes that define Font Awesome icons directly on links */ html body .pkp_navigation_user_wrapper .pkp_navigation_user > li > a::before, html body .pkp_navigation_user_wrapper .pkp_navigation_user > li > a::after { color: #C99A3D !important; -webkit-text-fill-color: #C99A3D !important; } /* ========== END REGISTER / LOGIN GOLD ICON OVERRIDE ========== */ /* ========================================================== KIAT SIDEBAR ICON RESTORE — NAVY & GOLD Preserve the current sidebar cards, spacing, headings, hover animation, arrows, and all header styling. Restore icons already present in the sidebar HTML. ========================================================== */ html body .content .gap-2 .m-menu > em, html body .content .gap-2 .m-menu > i, html body .content .gap-2 .m-menu > .fa, html body .content .gap-2 .m-menu > .fas, html body .content .gap-2 .m-menu > .far, html body .content .gap-2 .m-menu > .fab, html body .content .gap-2 .m-menu > [class*="icon"], html body .content .gap-2 .m-menu > svg, html body .content .gap-2 .m-menu > span > em, html body .content .gap-2 .m-menu > span > i, html body .content .gap-2 .m-menu > span > [class*="fa-"], html body .content .gap-2 .m-menu > span > [class*="icon"], html body .content .gap-2 .m-menu > span > svg { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 22px !important; width: 22px !important; min-width: 22px !important; height: auto !important; margin: 0 10px 0 0 !important; padding: 0 !important; position: relative !important; visibility: visible !important; opacity: 1 !important; color: #C99A3D !important; -webkit-text-fill-color: #C99A3D !important; fill: #C99A3D !important; stroke: #C99A3D !important; font-size: 16px !important; line-height: 1 !important; text-indent: 0 !important; } /* Ensure Font Awesome glyphs render rather than inheriting a text font. */ html body .content .gap-2 .m-menu > .fa, html body .content .gap-2 .m-menu > .fas, html body .content .gap-2 .m-menu > .far, html body .content .gap-2 .m-menu > .fab, html body .content .gap-2 .m-menu > em[class*="fa-"], html body .content .gap-2 .m-menu > i[class*="fa-"], html body .content .gap-2 .m-menu > span > [class*="fa-"] { font-family: FontAwesome, "Font Awesome 5 Free", "Font Awesome 5 Brands" !important; font-style: normal !important; font-weight: 900 !important; } /* The icon changes to a lighter gold on the existing navy hover state. */ html body .content .gap-2 .m-menu:hover > em, html body .content .gap-2 .m-menu:hover > i, html body .content .gap-2 .m-menu:hover > .fa, html body .content .gap-2 .m-menu:hover > .fas, html body .content .gap-2 .m-menu:hover > .far, html body .content .gap-2 .m-menu:hover > .fab, html body .content .gap-2 .m-menu:hover > [class*="icon"], html body .content .gap-2 .m-menu:hover > svg, html body .content .gap-2 .m-menu:hover > span > em, html body .content .gap-2 .m-menu:hover > span > i, html body .content .gap-2 .m-menu:hover > span > [class*="fa-"], html body .content .gap-2 .m-menu:hover > span > [class*="icon"], html body .content .gap-2 .m-menu:hover > span > svg { color: #F0D0A0 !important; -webkit-text-fill-color: #F0D0A0 !important; fill: #F0D0A0 !important; stroke: #F0D0A0 !important; } /* Keep menu labels readable and let the chevron remain at the far right. */ html body .content .gap-2 .m-menu > span { position: relative !important; display: inline-flex !important; align-items: center !important; flex: 1 1 auto !important; min-width: 0 !important; z-index: 1 !important; } /* ========== END KIAT SIDEBAR ICON RESTORE ========== */ /* ========================================================== KIAT SIDEBAR — BAEJ ICON HANDLING ADAPTED TO NAVY & GOLD Based on the BAEJ sidebar pattern: - icon aligned before the label - consistent icon width and spacing - existing KIAT navy/gold palette preserved - supports , , Font Awesome classes, icon classes, SVG, and icons nested inside the menu label span ========================================================== */ html body .content .gap-2 .m-menu > em, html body .content .gap-2 .m-menu > i, html body .content .gap-2 .m-menu > [class^="fa"], html body .content .gap-2 .m-menu > [class*=" fa-"], html body .content .gap-2 .m-menu > [class*="icon"], html body .content .gap-2 .m-menu > svg, html body .content .gap-2 .m-menu > span > em, html body .content .gap-2 .m-menu > span > i, html body .content .gap-2 .m-menu > span > [class^="fa"], html body .content .gap-2 .m-menu > span > [class*=" fa-"], html body .content .gap-2 .m-menu > span > [class*="icon"], html body .content .gap-2 .m-menu > span > svg { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 20px !important; width: 20px !important; min-width: 20px !important; height: auto !important; margin: 0 10px 0 0 !important; padding: 0 !important; position: relative !important; visibility: visible !important; opacity: 1 !important; color: #C99A3D !important; -webkit-text-fill-color: #C99A3D !important; fill: #C99A3D !important; stroke: #C99A3D !important; font-size: 15px !important; line-height: 1 !important; text-align: center !important; text-indent: 0 !important; } /* Keep Font Awesome glyphs using an icon font, not the text font. */ html body .content .gap-2 .m-menu > .fa, html body .content .gap-2 .m-menu > .fas, html body .content .gap-2 .m-menu > .far, html body .content .gap-2 .m-menu > .fab, html body .content .gap-2 .m-menu > em[class*="fa-"], html body .content .gap-2 .m-menu > i[class*="fa-"], html body .content .gap-2 .m-menu > span > [class*="fa-"] { font-family: FontAwesome, "Font Awesome 5 Free", "Font Awesome 5 Brands" !important; font-style: normal !important; font-weight: 900 !important; } /* Gold icon changes to pale gold on the existing navy hover state. */ html body .content .gap-2 .m-menu:hover > em, html body .content .gap-2 .m-menu:hover > i, html body .content .gap-2 .m-menu:hover > [class^="fa"], html body .content .gap-2 .m-menu:hover > [class*=" fa-"], html body .content .gap-2 .m-menu:hover > [class*="icon"], html body .content .gap-2 .m-menu:hover > svg, html body .content .gap-2 .m-menu:hover > span > em, html body .content .gap-2 .m-menu:hover > span > i, html body .content .gap-2 .m-menu:hover > span > [class^="fa"], html body .content .gap-2 .m-menu:hover > span > [class*=" fa-"], html body .content .gap-2 .m-menu:hover > span > [class*="icon"], html body .content .gap-2 .m-menu:hover > span > svg { color: #F0D0A0 !important; -webkit-text-fill-color: #F0D0A0 !important; fill: #F0D0A0 !important; stroke: #F0D0A0 !important; } /* Preserve BAEJ-style spacing on smaller screens, with KIAT colors. */ @media (max-width: 600px) { html body .content .gap-2 .m-menu > em, html body .content .gap-2 .m-menu > i, html body .content .gap-2 .m-menu > [class^="fa"], html body .content .gap-2 .m-menu > [class*=" fa-"], html body .content .gap-2 .m-menu > [class*="icon"], html body .content .gap-2 .m-menu > svg, html body .content .gap-2 .m-menu > span > em, html body .content .gap-2 .m-menu > span > i, html body .content .gap-2 .m-menu > span > [class^="fa"], html body .content .gap-2 .m-menu > span > [class*=" fa-"], html body .content .gap-2 .m-menu > span > [class*="icon"], html body .content .gap-2 .m-menu > span > svg { flex-basis: 19px !important; width: 19px !important; min-width: 19px !important; margin-right: 9px !important; font-size: 14px !important; } } /* ========== END BAEJ-STYLE SIDEBAR ADAPTATION FOR KIAT ========== */ /* ========================================================== KIAT QUICK ACCESS SIDEBAR — NAVY & GOLD Isolated component: does not alter existing sidebar/header. HTML wrapper: .kiat-quick-access ========================================================== */ .kiat-quick-access { width: 100%; margin: 0 0 22px; padding: 0; box-sizing: border-box; font-family: Arial, Helvetica, sans-serif; } .kiat-quick-access .kiat-qa-header { position: relative; display: flex; align-items: center; justify-content: center; min-height: 52px; margin: 0 0 20px; padding: 12px 15px; overflow: hidden; box-sizing: border-box; background: linear-gradient(120deg, #101D36 0%, #1B2D4D 65%, #243B60 100%); color: #FFFFFF !important; border-radius: 15px; border-bottom: 3px solid #C9A44C; box-shadow: 0 5px 13px rgba(16, 29, 54, 0.15); font-size: 19px; font-weight: 700; line-height: 1.3; text-align: center; } .kiat-quick-access .kiat-qa-header::before { content: ""; position: absolute; left: -15px; bottom: -25px; width: 90px; height: 48px; border: 2px solid rgba(201, 164, 76, 0.30); border-radius: 35px; transform: rotate(-18deg); pointer-events: none; } .kiat-quick-access .kiat-qa-header > span { position: relative; z-index: 1; color: #FFFFFF !important; } .kiat-quick-access .kiat-qa-menu { display: flex; flex-direction: column; gap: 11px; width: 100%; margin: 0; padding: 0; } .kiat-quick-access .kiat-qa-item { position: relative; display: flex; align-items: center; gap: 11px; width: 100%; min-height: 54px; margin: 0; padding: 12px 14px; box-sizing: border-box; background: #FFFFFF !important; border: 1px solid #E6D8B5 !important; border-radius: 13px; color: #172844 !important; text-decoration: none !important; box-shadow: 0 3px 9px rgba(16, 29, 54, 0.06); transition: background .25s ease, border-color .25s ease, box-shadow .25s ease, transform .25s ease; } .kiat-quick-access .kiat-qa-icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 22px; width: 22px; min-width: 22px; color: #B38A32 !important; font-size: 19px; text-align: center; } .kiat-quick-access .kiat-qa-icon.kiat-qa-whatsapp { color: #21865A !important; font-size: 21px; } .kiat-quick-access .kiat-qa-label { flex: 1 1 auto; min-width: 0; color: #172844 !important; font-size: 14px; font-weight: 700; line-height: 1.4; overflow-wrap: anywhere; } .kiat-quick-access .kiat-qa-arrow { flex: 0 0 auto; margin-left: auto; padding-left: 4px; color: #B38A32 !important; font-size: 23px; font-weight: 700; line-height: 1; transition: transform .25s ease; } .kiat-quick-access .kiat-qa-item:hover, .kiat-quick-access .kiat-qa-item:focus { background: #F8F6EF !important; border-color: #C9A44C !important; box-shadow: 0 6px 15px rgba(16, 29, 54, 0.12); transform: translateY(-2px); color: #172844 !important; text-decoration: none !important; } .kiat-quick-access .kiat-qa-item:hover .kiat-qa-arrow { transform: translateX(4px); color: #8F6A1F !important; } .kiat-quick-access .kiat-qa-item:hover .kiat-qa-icon { color: #8F6A1F !important; } .kiat-quick-access .kiat-qa-item:hover .kiat-qa-icon.kiat-qa-whatsapp { color: #21865A !important; } .kiat-quick-access .kiat-qa-item:focus-visible { outline: 2px solid #C9A44C; outline-offset: 3px; } @media (max-width: 600px) { .kiat-quick-access .kiat-qa-header { min-height: 48px; font-size: 17px; border-radius: 12px; } .kiat-quick-access .kiat-qa-item { min-height: 50px; padding: 11px 12px; gap: 9px; } .kiat-quick-access .kiat-qa-label { font-size: 13px; } .kiat-quick-access .kiat-qa-icon { font-size: 17px; } } /* ========== END KIAT QUICK ACCESS SIDEBAR ========== */ /* ===================================================== KIAT QUICK ACCESS — ICON VISIBILITY + ANIMATION FIX Additive overrides; preserves the existing KIAT design. Icons use Unicode fallbacks so they remain visible even when Font Awesome is unavailable in the OJS theme. ===================================================== */ .kiat-quick-access .kiat-qa-header { isolation: isolate !important; animation: kiatQaHeaderEnter .65s ease-out both !important; } .kiat-quick-access .kiat-qa-header::after { content: "" !important; position: absolute !important; top: 0 !important; left: -130% !important; width: 65% !important; height: 100% !important; z-index: 0 !important; pointer-events: none !important; background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.08) 35%, rgba(201,164,76,.25) 50%, transparent 75%) !important; transform: skewX(-22deg) !important; animation: kiatQaHeaderShine 5s ease-in-out infinite !important; } /* Always reserve a visible icon slot, even if the HTML's is empty. */ .kiat-quick-access .kiat-qa-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; flex: 0 0 25px !important; width: 25px !important; min-width: 25px !important; height: 25px !important; margin: 0 1px 0 0 !important; border-radius: 6px !important; background: #F7F1E2 !important; color: #A77B22 !important; font-size: 17px !important; line-height: 1 !important; visibility: visible !important; opacity: 1 !important; } .kiat-quick-access .kiat-qa-icon i { display: none !important; } .kiat-quick-access .kiat-qa-item:first-child .kiat-qa-icon::before { content: "▤" !important; display: inline-block !important; color: #A77B22 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 19px !important; font-weight: 700 !important; line-height: 1 !important; } .kiat-quick-access .kiat-qa-item:last-child .kiat-qa-icon { background: #E8F6EE !important; color: #168653 !important; } .kiat-quick-access .kiat-qa-item:last-child .kiat-qa-icon::before { content: "☎" !important; display: inline-block !important; color: #168653 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1 !important; } /* Entry animation and interactive menu motion */ .kiat-quick-access .kiat-qa-item { animation: kiatQaItemEnter .55s ease-out both !important; will-change: transform, box-shadow, border-color !important; } .kiat-quick-access .kiat-qa-item:nth-child(1) { animation-delay: .10s !important; } .kiat-quick-access .kiat-qa-item:nth-child(2) { animation-delay: .22s !important; } .kiat-quick-access .kiat-qa-item:hover, .kiat-quick-access .kiat-qa-item:focus-visible { transform: translateY(-3px) !important; border-color: #C9A44C !important; box-shadow: 0 9px 20px rgba(16, 29, 54, .14) !important; } .kiat-quick-access .kiat-qa-arrow { display: inline-block !important; transition: transform .3s ease, color .3s ease !important; } .kiat-quick-access .kiat-qa-item:hover .kiat-qa-arrow, .kiat-quick-access .kiat-qa-item:focus-visible .kiat-qa-arrow { transform: translateX(5px) !important; color: #8F6A1F !important; } .kiat-quick-access .kiat-qa-icon { transition: transform .3s ease, background .3s ease !important; } .kiat-quick-access .kiat-qa-item:hover .kiat-qa-icon, .kiat-quick-access .kiat-qa-item:focus-visible .kiat-qa-icon { transform: scale(1.08) !important; } @keyframes kiatQaHeaderEnter { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } @keyframes kiatQaHeaderShine { 0%, 65%, 100% { left: -130%; } 35% { left: 150%; } } @keyframes kiatQaItemEnter { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } @media (prefers-reduced-motion: reduce) { .kiat-quick-access .kiat-qa-header, .kiat-quick-access .kiat-qa-header::after, .kiat-quick-access .kiat-qa-item { animation: none !important; transition: none !important; } } /* ========================================================== BaEJ MANUSCRIPT TEMPLATE CARD Supports the HTML class names: baej-template-card, baej-template-header, baej-template-icon, baej-word-document, baej-word-letter, baej-template-info, baej-template-download, baej-download-symbol ========================================================== */ .baej-template-card { display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 18px 0 24px !important; padding: 22px !important; background: #FFFFFF !important; border: 1px solid #D8E8D9 !important; border-radius: 24px !important; box-shadow: 0 8px 22px rgba(16, 29, 54, 0.06) !important; font-family: Arial, Helvetica, sans-serif !important; animation: baejTemplateEnter .55s ease both; } .baej-template-card .baej-template-header { display: flex !important; align-items: flex-start !important; gap: 16px !important; width: 100% !important; margin: 0 0 20px !important; padding: 0 !important; box-sizing: border-box !important; } .baej-template-card .baej-template-icon { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 74px !important; width: 74px !important; height: 74px !important; min-width: 74px !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; background: linear-gradient(135deg, #F7D65B 0%, #D5A10A 100%) !important; box-shadow: 0 7px 17px rgba(181, 137, 25, 0.22) !important; } .baej-template-card .baej-word-document { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 35px !important; height: 42px !important; box-sizing: border-box !important; border: 2px solid #FFFFFF !important; border-radius: 4px !important; background: rgba(255,255,255,.12) !important; } .baej-template-card .baej-word-document::before { content: "" !important; position: absolute !important; top: -2px !important; right: -2px !important; width: 10px !important; height: 10px !important; background: #D5A10A !important; border-left: 2px solid #FFFFFF !important; border-bottom: 2px solid #FFFFFF !important; } .baej-template-card .baej-word-letter { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 28px !important; height: 27px !important; margin-top: 7px !important; background: #FFFFFF !important; color: #D5A10A !important; border-radius: 2px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 22px !important; font-weight: 800 !important; line-height: 1 !important; } .baej-template-card .baej-template-info { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .baej-template-card .baej-template-info h3 { margin: 1px 0 8px !important; padding: 0 !important; color: #172844 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1.3 !important; } .baej-template-card .baej-template-info p { margin: 0 !important; padding: 0 !important; color: #667085 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 17px !important; font-weight: 400 !important; line-height: 1.65 !important; } .baej-template-card .baej-template-download { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important; width: 100% !important; min-height: 62px !important; box-sizing: border-box !important; margin: 0 !important; padding: 14px 20px !important; overflow: hidden !important; border: 0 !important; border-radius: 40px !important; background: #087D3D !important; color: #FFFFFF !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important; text-align: center !important; text-decoration: none !important; box-shadow: none !important; transition: background .25s ease, transform .25s ease, box-shadow .25s ease !important; } .baej-template-card .baej-download-symbol { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; color: #FFFFFF !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 30px !important; font-weight: 400 !important; line-height: 1 !important; transition: transform .25s ease !important; } .baej-template-card .baej-template-download::before { content: "" !important; position: absolute !important; top: 0 !important; left: -120% !important; width: 45% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent) !important; transform: skewX(-22deg) !important; transition: left .55s ease !important; pointer-events: none !important; } .baej-template-card .baej-template-download:hover, .baej-template-card .baej-template-download:focus-visible { background: #066A34 !important; color: #FFFFFF !important; text-decoration: none !important; transform: translateY(-2px) !important; box-shadow: 0 8px 18px rgba(8, 125, 61, .20) !important; } .baej-template-card .baej-template-download:hover::before, .baej-template-card .baej-template-download:focus-visible::before { left: 150% !important; } .baej-template-card .baej-template-download:hover .baej-download-symbol, .baej-template-card .baej-template-download:focus-visible .baej-download-symbol { transform: translateY(3px) !important; } @keyframes baejTemplateEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 600px) { .baej-template-card { padding: 18px !important; border-radius: 22px !important; } .baej-template-card .baej-template-header { gap: 14px !important; margin-bottom: 18px !important; } .baej-template-card .baej-template-icon { flex-basis: 62px !important; width: 62px !important; height: 62px !important; min-width: 62px !important; } .baej-template-card .baej-template-info h3 { font-size: 19px !important; line-height: 1.35 !important; } .baej-template-card .baej-template-info p { font-size: 15px !important; line-height: 1.6 !important; } .baej-template-card .baej-template-download { min-height: 56px !important; padding: 12px 14px !important; font-size: 16px !important; gap: 9px !important; } .baej-template-card .baej-download-symbol { font-size: 27px !important; } } @media (prefers-reduced-motion: reduce) { .baej-template-card, .baej-template-card .baej-template-download, .baej-template-card .baej-download-symbol { animation: none !important; transition: none !important; } } /* ========================================================== KIAT MANUSCRIPT TEMPLATE CARD — COMPACT NAVY & GOLD Compatible with:
Existing BaEJ styles are preserved; these overrides apply only when the additional kiat-template-card class is used. ========================================================== */ .kiat-template-card { box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; padding: 16px !important; margin: 0 0 16px !important; background: #FFFFFF !important; border: 1px solid #E5D9B8 !important; border-radius: 16px !important; box-shadow: 0 5px 16px rgba(16, 29, 54, .07) !important; animation: kiatTemplateEnter .45s ease both; } .kiat-template-card .baej-template-header { display: flex !important; align-items: flex-start !important; gap: 12px !important; margin: 0 0 14px !important; padding: 0 !important; } .kiat-template-card .baej-template-icon { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 54px !important; width: 54px !important; min-width: 54px !important; height: 54px !important; margin: 0 !important; padding: 0 !important; background: linear-gradient(135deg, #F2D36F 0%, #C99A20 100%) !important; border: 0 !important; border-radius: 50% !important; box-shadow: 0 4px 12px rgba(185, 139, 35, .18) !important; } .kiat-template-card .baej-word-document { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 29px !important; height: 35px !important; margin: 0 !important; padding: 0 !important; background: #FFFFFF !important; border: 2px solid #FFFFFF !important; border-radius: 4px !important; box-shadow: inset 0 0 0 1px #C99A20 !important; } .kiat-template-card .baej-word-letter { display: block !important; color: #C99A20 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 22px !important; font-weight: 800 !important; line-height: 1 !important; } .kiat-template-card .baej-template-info { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } .kiat-template-card .baej-template-info h3 { margin: 1px 0 6px !important; padding: 0 !important; color: #172844 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 18px !important; font-weight: 700 !important; line-height: 1.3 !important; overflow-wrap: anywhere !important; } .kiat-template-card .baej-template-info p { margin: 0 !important; padding: 0 !important; color: #647087 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.5 !important; } .kiat-template-card .baej-template-download { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; width: 100% !important; min-height: 44px !important; box-sizing: border-box !important; margin: 0 !important; padding: 10px 14px !important; overflow: hidden !important; background: linear-gradient(135deg, #172844 0%, #243B60 100%) !important; border: 1px solid #C9A44C !important; border-radius: 28px !important; color: #FFFFFF !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.3 !important; text-align: center !important; text-decoration: none !important; box-shadow: 0 3px 9px rgba(16, 29, 54, .10) !important; transition: background .25s ease, transform .25s ease, box-shadow .25s ease !important; } .kiat-template-card .baej-download-symbol { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 auto !important; color: #F0D58A !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 23px !important; font-weight: 400 !important; line-height: 1 !important; transition: transform .25s ease !important; } .kiat-template-card .baej-template-download::before { content: "" !important; position: absolute !important; top: 0 !important; left: -120% !important; width: 42% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent) !important; transform: skewX(-22deg) !important; transition: left .55s ease !important; pointer-events: none !important; } .kiat-template-card .baej-template-download:hover, .kiat-template-card .baej-template-download:focus-visible { background: linear-gradient(135deg, #C99A20 0%, #A77B16 100%) !important; border-color: #C99A20 !important; color: #FFFFFF !important; text-decoration: none !important; transform: translateY(-2px) !important; box-shadow: 0 7px 15px rgba(16, 29, 54, .15) !important; } .kiat-template-card .baej-template-download:hover::before, .kiat-template-card .baej-template-download:focus-visible::before { left: 150% !important; } .kiat-template-card .baej-template-download:hover .baej-download-symbol, .kiat-template-card .baej-template-download:focus-visible .baej-download-symbol { transform: translateY(3px) !important; } @keyframes kiatTemplateEnter { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: translateY(0); } } @media (max-width: 600px) { .kiat-template-card { padding: 14px !important; border-radius: 15px !important; } .kiat-template-card .baej-template-header { gap: 10px !important; margin-bottom: 12px !important; } .kiat-template-card .baej-template-icon { flex-basis: 48px !important; width: 48px !important; min-width: 48px !important; height: 48px !important; } .kiat-template-card .baej-word-document { width: 26px !important; height: 32px !important; } .kiat-template-card .baej-word-letter { font-size: 20px !important; } .kiat-template-card .baej-template-info h3 { font-size: 16px !important; line-height: 1.3 !important; } .kiat-template-card .baej-template-info p { font-size: 12px !important; line-height: 1.45 !important; } .kiat-template-card .baej-template-download { min-height: 42px !important; padding: 9px 12px !important; gap: 8px !important; font-size: 13px !important; } .kiat-template-card .baej-download-symbol { font-size: 21px !important; } } @media (prefers-reduced-motion: reduce) { .kiat-template-card, .kiat-template-card .baej-template-download, .kiat-template-card .baej-download-symbol { animation: none !important; transition: none !important; } } /* ========================================================== KIAT ACTIONS CARD — SIDEBAR SUPPORT Submit Your Paper / Become a Reviewer / Share Navy & Gold theme ========================================================== */ .baej-card.baej-actions { display: block !important; width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; padding: 18px !important; margin: 16px 0 !important; background: #FFFFFF !important; border: 1px solid #E5D9B8 !important; border-radius: 20px !important; box-shadow: 0 7px 20px rgba(23, 40, 68, 0.07) !important; } /* Stack action buttons vertically in narrow OJS sidebar */ .baej-card.baej-actions .baej-actions__btns { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; width: 100% !important; margin: 0 0 18px !important; padding: 0 !important; } /* Shared button styling */ .baej-card.baej-actions .baej-btn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; min-height: 46px !important; box-sizing: border-box !important; margin: 0 !important; padding: 12px 14px !important; border: 1px solid transparent !important; border-radius: 30px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.35 !important; text-align: center !important; text-decoration: none !important; white-space: normal !important; overflow-wrap: anywhere !important; cursor: pointer !important; transition: background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease !important; } /* Primary: navy */ .baej-card.baej-actions .baej-btn--filled { background: linear-gradient(135deg, #172844, #243B60) !important; border-color: #C9A44C !important; color: #FFFFFF !important; } /* Secondary: pale gold */ .baej-card.baej-actions .baej-btn--tinted { background: #F8F2E3 !important; border-color: #E5D9B8 !important; color: #172844 !important; } /* Hover animation */ .baej-card.baej-actions .baej-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 18px rgba(23, 40, 68, 0.16) !important; text-decoration: none !important; } .baej-card.baej-actions .baej-btn--filled:hover { background: linear-gradient(135deg, #C9A44C, #A9822B) !important; border-color: #A9822B !important; color: #FFFFFF !important; } .baej-card.baej-actions .baej-btn--tinted:hover { background: #EFE2BE !important; border-color: #C9A44C !important; color: #172844 !important; } /* Share area */ .baej-card.baej-actions .baej-share { display: flex !important; align-items: center !important; gap: 10px !important; margin: 0 !important; padding: 14px 0 0 !important; border-top: 1px solid #E5D9B8 !important; color: #647087 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; line-height: 1.4 !important; } /* Accessible keyboard focus */ .baej-card.baej-actions .baej-btn:focus-visible { outline: 2px solid #C9A44C !important; outline-offset: 3px !important; } /* Responsive sidebar */ @media (max-width: 600px) { .baej-card.baej-actions { padding: 15px !important; margin: 14px 0 !important; border-radius: 16px !important; } .baej-card.baej-actions .baej-actions__btns { gap: 10px !important; margin-bottom: 15px !important; } .baej-card.baej-actions .baej-btn { min-height: 44px !important; padding: 11px 12px !important; font-size: 14px !important; } } @media (prefers-reduced-motion: reduce) { .baej-card.baej-actions, .baej-card.baej-actions .baej-btn { animation: none !important; transition: none !important; } .baej-card.baej-actions .baej-btn:hover { transform: none !important; } } /* ========================================================== KIAT ACTIONS CARD — FINAL SIDEBAR OVERRIDES Fixes color conflicts and restores action icons. Icons are created with Font Awesome pseudo-elements. ========================================================== */ .baej-card.baej-actions { width: 100% !important; max-width: 100% !important; padding: 18px !important; background: #FFFFFF !important; border: 1px solid #E5D9B8 !important; border-radius: 20px !important; box-shadow: 0 7px 20px rgba(16, 29, 54, .08) !important; box-sizing: border-box !important; } /* Ensure OJS/sidebar layout does not flatten the buttons */ .baej-card.baej-actions .baej-actions__btns { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 11px !important; margin: 0 0 18px !important; padding: 0 !important; } /* Buttons */ .baej-card.baej-actions .baej-actions__btns > .baej-btn { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 9px !important; width: 100% !important; min-height: 49px !important; margin: 0 !important; padding: 12px 15px !important; box-sizing: border-box !important; border-radius: 32px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important; text-align: center !important; text-decoration: none !important; white-space: normal !important; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease !important; } /* Primary button: navy with gold accent */ .baej-card.baej-actions .baej-actions__btns > .baej-btn--filled { background: linear-gradient(135deg, #101D36 0%, #243B60 100%) !important; border: 1px solid #C9A44C !important; color: #FFFFFF !important; } /* Secondary button: pale gold */ .baej-card.baej-actions .baej-actions__btns > .baej-btn--tinted { background: #F8F3E7 !important; border: 1px solid #E5D9B8 !important; color: #172844 !important; } /* Icons are supplied by CSS because the provided HTML has no icon elements */ .baej-card.baej-actions .baej-actions__btns > .baej-btn::before { display: inline-block !important; flex: 0 0 auto !important; font-family: "FontAwesome" !important; font-style: normal !important; font-weight: normal !important; font-size: 18px !important; line-height: 1 !important; text-rendering: auto !important; -webkit-font-smoothing: antialiased !important; } .baej-card.baej-actions .baej-actions__btns > .baej-btn--filled::before { content: "\f1d8" !important; /* paper plane */ color: #F0D58A !important; } .baej-card.baej-actions .baej-actions__btns > .baej-btn--tinted::before { content: "\f234" !important; /* user plus */ color: #B38A32 !important; } /* Hover */ .baej-card.baej-actions .baej-actions__btns > .baej-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 8px 18px rgba(16, 29, 54, .17) !important; text-decoration: none !important; } .baej-card.baej-actions .baej-actions__btns > .baej-btn--filled:hover { background: linear-gradient(135deg, #C9A44C, #A9822B) !important; border-color: #A9822B !important; color: #FFFFFF !important; } .baej-card.baej-actions .baej-actions__btns > .baej-btn--tinted:hover { background: #EFE4C7 !important; border-color: #C9A44C !important; color: #172844 !important; } .baej-card.baej-actions .baej-actions__btns > .baej-btn:hover::before { color: #FFFFFF !important; } /* Share row: styled only; social links/icons must exist in HTML */ .baej-card.baej-actions .baej-share { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 10px !important; margin: 0 !important; padding: 15px 0 0 !important; border-top: 1px solid #E5D9B8 !important; color: #647087 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 600 !important; } /* Responsive */ @media (max-width: 600px) { .baej-card.baej-actions { padding: 15px !important; border-radius: 17px !important; } .baej-card.baej-actions .baej-actions__btns > .baej-btn { min-height: 46px !important; font-size: 14px !important; } } @media (prefers-reduced-motion: reduce) { .baej-card.baej-actions .baej-actions__btns > .baej-btn { transition: none !important; } .baej-card.baej-actions .baej-actions__btns > .baej-btn:hover { transform: none !important; } } /* ========================================================== KIAT QUICK ACCESS — COMBINED HTML SUPPORT Supports: .kiat-qa-card, .kiat-qa-icon, .kiat-qa-text, .kiat-qa-arrow, .kiat-qa-actions, .kiat-qa-action, .kiat-qa-share Appended overrides for the combined Quick Access sidebar. ========================================================== */ .kiat-quick-access, .kiat-quick-access * { box-sizing: border-box; } .kiat-quick-access .kiat-qa-header { margin-bottom: 16px !important; } /* Submit Manuscript + WhatsApp cards */ .kiat-quick-access .kiat-qa-card { display: block !important; width: 100% !important; margin: 0 0 11px !important; overflow: hidden !important; background: #FFFFFF !important; border: 1px solid #E6D8B5 !important; border-radius: 13px !important; box-shadow: 0 4px 12px rgba(16,29,54,.06) !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important; } .kiat-quick-access .kiat-qa-card table { width: 100% !important; margin: 0 !important; border: 0 !important; border-collapse: collapse !important; background: transparent !important; } .kiat-quick-access .kiat-qa-card tr, .kiat-quick-access .kiat-qa-card td { background: transparent !important; border: 0 !important; } .kiat-quick-access .kiat-qa-card td { padding-top: 14px !important; padding-bottom: 14px !important; vertical-align: middle !important; } .kiat-quick-access .kiat-qa-icon { width: 45px !important; min-width: 45px !important; padding-left: 16px !important; padding-right: 4px !important; color: #B38A32 !important; text-align: center !important; white-space: nowrap !important; } .kiat-quick-access .kiat-qa-icon em, .kiat-quick-access .kiat-qa-actions em, .kiat-quick-access .kiat-qa-share a em { display: inline-block !important; font-family: FontAwesome !important; font-style: normal !important; font-weight: normal !important; speak: none; } .kiat-quick-access .kiat-qa-icon em { font-size: 19px !important; line-height: 1 !important; } .kiat-quick-access .kiat-qa-icon.kiat-qa-whatsapp, .kiat-quick-access .kiat-qa-icon.kiat-qa-whatsapp em { color: #21865A !important; } .kiat-quick-access .kiat-qa-text { padding-left: 8px !important; padding-right: 4px !important; } .kiat-quick-access .kiat-qa-text a { display: block !important; color: #172844 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.4 !important; text-decoration: none !important; } .kiat-quick-access .kiat-qa-arrow { width: 32px !important; min-width: 32px !important; padding-right: 12px !important; color: #B38A32 !important; font-size: 23px !important; font-weight: 700 !important; text-align: center !important; transition: transform .25s ease !important; } .kiat-quick-access .kiat-qa-card:hover { transform: translateY(-2px) !important; border-color: #C9A44C !important; box-shadow: 0 7px 16px rgba(16,29,54,.11) !important; } .kiat-quick-access .kiat-qa-card:hover .kiat-qa-arrow { transform: translateX(4px) !important; } /* Action buttons */ .kiat-quick-access .kiat-qa-actions { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 11px !important; width: 100% !important; margin: 21px 0 0 !important; padding: 0 0 19px !important; border: 0 !important; border-bottom: 1px solid #E5E0D3 !important; } .kiat-quick-access .kiat-qa-action { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; min-height: 49px !important; margin: 0 !important; padding: 12px 15px !important; border: 1px solid transparent !important; border-radius: 30px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important; text-align: center !important; text-decoration: none !important; transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease !important; } .kiat-quick-access .kiat-qa-action em { flex: 0 0 auto !important; font-size: 17px !important; line-height: 1 !important; } /* Navy primary action with gold accent */ .kiat-quick-access .kiat-qa-primary, .kiat-quick-access .kiat-qa-primary:visited { color: #FFFFFF !important; background: linear-gradient(135deg, #101D36 0%, #243B60 100%) !important; border-color: #C9A44C !important; } .kiat-quick-access .kiat-qa-primary em { color: #F0D58A !important; } /* Soft gold secondary action */ .kiat-quick-access .kiat-qa-secondary, .kiat-quick-access .kiat-qa-secondary:visited { color: #172844 !important; background: #F6F0DF !important; border-color: #E6D8B5 !important; } .kiat-quick-access .kiat-qa-secondary em { color: #A77B16 !important; } .kiat-quick-access .kiat-qa-action:hover { transform: translateY(-3px) !important; box-shadow: 0 7px 16px rgba(16,29,54,.15) !important; text-decoration: none !important; } .kiat-quick-access .kiat-qa-primary:hover { color: #FFFFFF !important; background: linear-gradient(135deg, #243B60 0%, #304B73 100%) !important; } .kiat-quick-access .kiat-qa-secondary:hover { color: #172844 !important; background: #EDE0BC !important; border-color: #C9A44C !important; } .kiat-quick-access .kiat-qa-action:focus-visible, .kiat-quick-access .kiat-qa-share a:focus-visible { outline: 2px solid #C9A44C !important; outline-offset: 3px !important; } /* Share links and social icons */ .kiat-quick-access .kiat-qa-share { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 9px !important; width: 100% !important; margin: 0 !important; padding: 17px 0 0 !important; border: 0 !important; } .kiat-quick-access .kiat-qa-share-label { margin-right: auto !important; color: #647087 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; } .kiat-quick-access .kiat-qa-share a { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 38px !important; width: 38px !important; height: 38px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #F1F2F4 !important; color: #243B60 !important; text-decoration: none !important; transition: transform .25s ease, background .25s ease, color .25s ease !important; } .kiat-quick-access .kiat-qa-share a em { color: inherit !important; font-size: 16px !important; line-height: 1 !important; } .kiat-quick-access .kiat-qa-share a:hover { transform: translateY(-3px) !important; background: #E6D8B5 !important; color: #101D36 !important; } /* Responsive layout */ @media (max-width: 600px) { .kiat-quick-access .kiat-qa-card td { padding-top: 12px !important; padding-bottom: 12px !important; } .kiat-quick-access .kiat-qa-text a { font-size: 13px !important; } .kiat-quick-access .kiat-qa-action { min-height: 46px !important; font-size: 14px !important; } .kiat-quick-access .kiat-qa-share { justify-content: space-between !important; gap: 7px !important; } .kiat-quick-access .kiat-qa-share a { flex-basis: 33px !important; width: 33px !important; height: 33px !important; } } @media (prefers-reduced-motion: reduce) { .kiat-quick-access *, .kiat-quick-access *::before, .kiat-quick-access *::after { animation: none !important; transition: none !important; } } /* ========================================================== KIAT / BAEJ ACTION CARD + WHATSAPP + SOCIAL SHARE ICONS Added: 10 October 2026 Supports HTML classes: .baej-card.baej-actions .baej-whatsapp-support .baej-actions__btns .baej-share with linked social icons ========================================================== */ /* Action card */ .baej-card.baej-actions { display: block !important; width: 100% !important; box-sizing: border-box !important; margin: 16px 0 !important; padding: 20px !important; background: #FFFFFF !important; border: 1px solid #E6D8B5 !important; border-radius: 24px !important; box-shadow: 0 8px 22px rgba(16,29,54,.07) !important; font-family: Arial, Helvetica, sans-serif !important; } /* WhatsApp support card */ .baej-card.baej-actions .baej-whatsapp-support { display: block !important; width: 100% !important; margin: 0 0 16px !important; } .baej-card.baej-actions .baej-whatsapp-support > a { display: flex !important; align-items: center !important; gap: 12px !important; width: 100% !important; min-height: 58px !important; box-sizing: border-box !important; margin: 0 !important; padding: 12px 15px !important; background: #FFFFFF !important; border: 1px solid #E6D8B5 !important; border-radius: 15px !important; box-shadow: 0 4px 12px rgba(16,29,54,.06) !important; color: #172844 !important; text-decoration: none !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important; } .baej-card.baej-actions .baej-whatsapp-icon { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 23px !important; width: 23px !important; height: 23px !important; border-radius: 5px !important; background: #21865A !important; color: #FFFFFF !important; font-size: 15px !important; } .baej-card.baej-actions .baej-whatsapp-icon em { color: #FFFFFF !important; font-family: FontAwesome !important; font-style: normal !important; font-size: 14px !important; } .baej-card.baej-actions .baej-whatsapp-label { flex: 1 1 auto !important; color: #172844 !important; font-size: 15px !important; font-weight: 700 !important; } .baej-card.baej-actions .baej-whatsapp-arrow { flex: 0 0 auto !important; color: #B38A32 !important; font-size: 25px !important; font-weight: 700 !important; line-height: 1 !important; transition: transform .25s ease !important; } .baej-card.baej-actions .baej-whatsapp-support > a:hover { transform: translateY(-2px) !important; border-color: #C9A44C !important; box-shadow: 0 7px 16px rgba(16,29,54,.11) !important; } .baej-card.baej-actions .baej-whatsapp-support > a:hover .baej-whatsapp-arrow { transform: translateX(4px) !important; } /* Action buttons layout */ .baej-card.baej-actions .baej-actions__btns { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 11px !important; width: 100% !important; margin: 0 !important; padding: 0 0 20px !important; border: 0 !important; border-bottom: 1px solid #E6D8B5 !important; } .baej-card.baej-actions .baej-actions__btns .baej-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; width: 100% !important; min-height: 49px !important; box-sizing: border-box !important; margin: 0 !important; padding: 12px 15px !important; border-radius: 30px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important; text-align: center !important; text-decoration: none !important; transition: transform .25s ease, box-shadow .25s ease, background .25s ease !important; } .baej-card.baej-actions .baej-actions__btns .baej-btn em { display: inline-block !important; font-family: FontAwesome !important; font-style: normal !important; font-weight: normal !important; font-size: 17px !important; line-height: 1 !important; } .baej-card.baej-actions .baej-actions__btns .baej-btn--filled { color: #FFFFFF !important; background: linear-gradient(135deg, #101D36, #243B60) !important; border: 1px solid #C9A44C !important; } .baej-card.baej-actions .baej-actions__btns .baej-btn--filled em { color: #F0D58A !important; } .baej-card.baej-actions .baej-actions__btns .baej-btn--tinted { color: #172844 !important; background: #F6F0DF !important; border: 1px solid #E6D8B5 !important; } .baej-card.baej-actions .baej-actions__btns .baej-btn--tinted em { color: #A77B16 !important; } .baej-card.baej-actions .baej-actions__btns .baej-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 7px 16px rgba(16,29,54,.15) !important; text-decoration: none !important; } /* Share row: label + circular social links */ .baej-card.baej-actions .baej-share { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 9px !important; width: 100% !important; margin: 0 !important; padding: 17px 0 0 !important; border: 0 !important; } .baej-card.baej-actions .baej-share__label { margin-right: auto !important; color: #7A7F89 !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 13px !important; font-weight: 700 !important; } .baej-card.baej-actions .baej-share > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 42px !important; width: 42px !important; height: 42px !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #F1F2F4 !important; color: #42464D !important; text-decoration: none !important; transition: transform .25s ease, background .25s ease, color .25s ease !important; } .baej-card.baej-actions .baej-share > a em { display: inline-block !important; color: inherit !important; font-family: FontAwesome !important; font-style: normal !important; font-weight: normal !important; font-size: 17px !important; line-height: 1 !important; } .baej-card.baej-actions .baej-share > a:hover { transform: translateY(-3px) !important; background: #E6D8B5 !important; color: #172844 !important; } .baej-card.baej-actions .baej-share > a:focus-visible { outline: 2px solid #C9A44C !important; outline-offset: 3px !important; } /* Mobile adjustments */ @media (max-width: 600px) { .baej-card.baej-actions { padding: 16px !important; border-radius: 19px !important; } .baej-card.baej-actions .baej-whatsapp-support > a { min-height: 52px !important; padding: 10px 13px !important; } .baej-card.baej-actions .baej-whatsapp-label { font-size: 14px !important; } .baej-card.baej-actions .baej-actions__btns .baej-btn { min-height: 46px !important; font-size: 14px !important; } .baej-card.baej-actions .baej-share { gap: 7px !important; } .baej-card.baej-actions .baej-share > a { flex-basis: 35px !important; width: 35px !important; height: 35px !important; } } @media (prefers-reduced-motion: reduce) { .baej-card.baej-actions *, .baej-card.baej-actions *::before, .baej-card.baej-actions *::after { transition: none !important; animation: none !important; } } /* ========================================================== KIAT / BAEJ ACTIONS — ICON VISIBILITY FIX Additive override: keeps existing stylesheet intact. Includes text-based fallbacks if Font Awesome is unavailable. ========================================================== */ /* WhatsApp support: force a visible green phone mark */ .baej-card.baej-actions .baej-whatsapp-support > a { display: flex !important; align-items: center !important; gap: 12px !important; } .baej-card.baej-actions .baej-whatsapp-support > a::before { content: "\260E" !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 24px !important; width: 24px !important; height: 24px !important; box-sizing: border-box !important; border-radius: 5px !important; background: #21865A !important; color: #FFFFFF !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 16px !important; font-weight: 700 !important; line-height: 1 !important; } /* If HTML already contains an icon wrapper, avoid showing two icons */ .baej-card.baej-actions .baej-whatsapp-support .baej-whatsapp-icon { display: none !important; } /* Make the WhatsApp label and arrow remain visible */ .baej-card.baej-actions .baej-whatsapp-support .baej-whatsapp-label { display: inline-block !important; flex: 1 1 auto !important; color: #172844 !important; font-weight: 700 !important; } .baej-card.baej-actions .baej-whatsapp-support .baej-whatsapp-arrow { display: inline-block !important; flex: 0 0 auto !important; color: #B38A32 !important; } /* Share row: visible even if the icon font is not loaded */ .baej-card.baej-actions .baej-share { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 9px !important; } .baej-card.baej-actions .baej-share > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; position: relative !important; flex: 0 0 39px !important; width: 39px !important; height: 39px !important; min-width: 39px !important; min-height: 39px !important; padding: 0 !important; border-radius: 50% !important; background: #F1F2F4 !important; color: #42464D !important; text-decoration: none !important; font-family: Arial, Helvetica, sans-serif !important; font-weight: 700 !important; line-height: 1 !important; } /* Replace the font-dependent with reliable text/logo fallbacks */ .baej-card.baej-actions .baej-share > a em { display: none !important; } .baej-card.baej-actions .baej-share > a::before { display: inline-block !important; color: #42464D !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1 !important; } .baej-card.baej-actions .baej-share > a[aria-label*="Facebook"]::before { content: "f" !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 22px !important; } .baej-card.baej-actions .baej-share > a[aria-label*="WhatsApp"]::before { content: "◔" !important; font-size: 21px !important; } .baej-card.baej-actions .baej-share > a[aria-label*="Telegram"]::before { content: "➤" !important; font-size: 18px !important; } .baej-card.baej-actions .baej-share > a[aria-label*="X"]::before, .baej-card.baej-actions .baej-share > a[aria-label*="Twitter"]::before { content: "𝕏" !important; font-size: 17px !important; } .baej-card.baej-actions .baej-share > a[aria-label*="LinkedIn"]::before { content: "in" !important; font-size: 15px !important; } .baej-card.baej-actions .baej-share > a:hover { background: #E6D8B5 !important; color: #172844 !important; transform: translateY(-3px) !important; } /* Also support the newer KIAT Quick Access markup */ .kiat-quick-access .kiat-qa-share > a em { display: none !important; } .kiat-quick-access .kiat-qa-share > a { position: relative !important; font-family: Arial, Helvetica, sans-serif !important; } .kiat-quick-access .kiat-qa-share > a::before { display: inline-block !important; color: #243B60 !important; font-family: Arial, Helvetica, sans-serif !important; font-weight: 700 !important; line-height: 1 !important; } .kiat-quick-access .kiat-qa-share > a[aria-label*="Facebook"]::before { content: "f" !important; font-size: 22px !important; } .kiat-quick-access .kiat-qa-share > a[aria-label*="WhatsApp"]::before { content: "◔" !important; font-size: 21px !important; } .kiat-quick-access .kiat-qa-share > a[aria-label*="Telegram"]::before { content: "➤" !important; font-size: 18px !important; } .kiat-quick-access .kiat-qa-share > a[aria-label*="X"]::before, .kiat-quick-access .kiat-qa-share > a[aria-label*="Twitter"]::before { content: "𝕏" !important; font-size: 17px !important; } .kiat-quick-access .kiat-qa-share > a[aria-label*="LinkedIn"]::before { content: "in" !important; font-size: 15px !important; } .kiat-quick-access .kiat-qa-share > a:hover { background: #E6D8B5 !important; transform: translateY(-3px) !important; } @media (prefers-reduced-motion: reduce) { .baej-card.baej-actions .baej-whatsapp-support *, .baej-card.baej-actions .baej-share *, .kiat-quick-access .kiat-qa-share * { transition: none !important; animation: none !important; } } /* ========================================================== KIAT SIDEBAR ACTIONS — NAVY & GOLD For the supplied HTML: .baej-card.baej-actions Submit Your Paper / WhatsApp Support / Become a Reviewer / Share ========================================================== */ .baej-card.baej-actions { --kiat-navy: #172844; --kiat-navy-deep: #101D36; --kiat-gold: #B38A32; --kiat-gold-light: #E8D5A5; --kiat-cream: #F6F0DF; display: block !important; width: 100% !important; box-sizing: border-box !important; padding: 26px 24px !important; background: #FFFFFF !important; border: 1px solid var(--kiat-gold-light) !important; border-radius: 30px !important; box-shadow: 0 12px 28px rgba(16,29,54,.07) !important; } /* Button groups */ .baej-card.baej-actions .baej-actions__btns { display: flex !important; flex-direction: column !important; gap: 12px !important; width: 100% !important; margin: 0 0 12px !important; padding: 0 !important; } /* WhatsApp block */ .baej-card.baej-actions .baej-whatsapp-support { display: block !important; width: 100% !important; margin: 0 0 12px !important; padding: 0 !important; } /* Make all three links consistent capsules */ .baej-card.baej-actions .baej-actions__btns > a.baej-btn, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 11px !important; width: 100% !important; min-height: 64px !important; box-sizing: border-box !important; margin: 0 !important; padding: 15px 18px !important; border-radius: 999px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 17px !important; font-weight: 700 !important; line-height: 1.25 !important; text-align: center !important; text-decoration: none !important; overflow: hidden !important; isolation: isolate !important; transition: transform .28s ease, box-shadow .28s ease, background .28s ease, border-color .28s ease !important; } /* Submit: navy with gold border */ .baej-card.baej-actions .baej-actions__btns > a.baej-btn--filled { color: #FFFFFF !important; background: linear-gradient(135deg, #101D36 0%, #243B60 100%) !important; border: 1px solid #C9A44C !important; box-shadow: 0 5px 13px rgba(16,29,54,.12) !important; } /* WhatsApp + Reviewer: matching cream-gold buttons */ .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn--whatsapp, .baej-card.baej-actions .baej-actions__btns > a.baej-btn--tinted { color: var(--kiat-navy) !important; background: var(--kiat-cream) !important; border: 1px solid var(--kiat-gold-light) !important; box-shadow: 0 4px 12px rgba(16,29,54,.04) !important; } /* Icons generated by CSS, so the supplied HTML does not need tags */ .baej-card.baej-actions .baej-actions__btns > a.baej-btn--filled::before { content: "\f1d8" !important; /* paper plane */ font-family: FontAwesome, "Font Awesome 5 Free", sans-serif !important; font-weight: normal !important; display: inline-block !important; color: #F0D58A !important; font-size: 22px !important; line-height: 1 !important; flex: 0 0 auto !important; } /* WhatsApp logo: use Font Awesome when available */ .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn--whatsapp::before { content: "\f232" !important; font-family: FontAwesome, "Font Awesome 5 Brands", sans-serif !important; font-weight: normal !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: #21865A !important; font-size: 24px !important; line-height: 1 !important; flex: 0 0 auto !important; } /* Reviewer icon */ .baej-card.baej-actions > .baej-actions__btns > a.baej-btn--tinted::before { content: "\f234" !important; /* user-plus */ font-family: FontAwesome, "Font Awesome 5 Free", sans-serif !important; font-weight: normal !important; display: inline-block !important; color: var(--kiat-gold) !important; font-size: 21px !important; line-height: 1 !important; flex: 0 0 auto !important; } /* Subtle animated shine */ .baej-card.baej-actions .baej-btn::after { content: "" !important; position: absolute !important; top: -10% !important; left: -130% !important; width: 42% !important; height: 120% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,.36), transparent) !important; transform: skewX(-22deg) !important; transition: left .65s ease !important; pointer-events: none !important; z-index: -1 !important; } .baej-card.baej-actions .baej-btn:hover::after { left: 150% !important; } .baej-card.baej-actions .baej-btn:hover { transform: translateY(-3px) !important; box-shadow: 0 10px 20px rgba(16,29,54,.13) !important; } .baej-card.baej-actions .baej-actions__btns > a.baej-btn--filled:hover { background: linear-gradient(135deg, #243B60 0%, #304A70 100%) !important; } .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn--whatsapp:hover, .baej-card.baej-actions .baej-actions__btns > a.baej-btn--tinted:hover { background: #EFE3C3 !important; border-color: #C9A44C !important; } /* Share row: the provided HTML contains the label only. Show a compact decorative social-symbol strip after it. */ .baej-card.baej-actions .baej-share { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: wrap !important; gap: 10px !important; margin: 22px 0 0 !important; padding: 18px 0 0 !important; border-top: 1px solid #E8D5A5 !important; color: #68758B !important; } .baej-card.baej-actions .baej-share__label { display: inline-flex !important; align-items: center !important; color: #68758B !important; font-size: 15px !important; font-weight: 700 !important; } .baej-card.baej-actions .baej-share__label::after { content: "f ◉ ➤ 𝕏 in" !important; display: inline-block !important; margin-left: 16px !important; color: #536078 !important; font-size: 16px !important; letter-spacing: 5px !important; font-weight: 700 !important; } /* Keyboard accessibility */ .baej-card.baej-actions .baej-btn:focus-visible { outline: 3px solid #C9A44C !important; outline-offset: 3px !important; } /* Mobile */ @media (max-width: 600px) { .baej-card.baej-actions { padding: 20px 16px !important; border-radius: 24px !important; } .baej-card.baej-actions .baej-actions__btns > a.baej-btn, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn { min-height: 56px !important; padding: 12px 14px !important; font-size: 15px !important; gap: 9px !important; } .baej-card.baej-actions .baej-share__label::after { margin-left: 10px !important; font-size: 14px !important; letter-spacing: 3px !important; } } @media (prefers-reduced-motion: reduce) { .baej-card.baej-actions *, .baej-card.baej-actions *::before, .baej-card.baej-actions *::after { animation: none !important; transition: none !important; } } /* ========================================================== KIAT SIDEBAR ICON ADOPTION FROM BAEJ — FINAL OVERRIDES Use explicit Font Awesome elements ========================================================== */ /* Shared button layout and explicit icon sizing */ .baej-card.baej-actions .baej-actions__btns > a.baej-btn, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; } .baej-card.baej-actions .baej-actions__btns > a.baej-btn > em, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn > em { display: inline-block !important; flex: 0 0 auto !important; width: 22px !important; min-width: 22px !important; margin: 0 !important; font-family: "FontAwesome" !important; font-style: normal !important; font-weight: normal !important; font-size: 21px !important; line-height: 1 !important; text-align: center !important; opacity: 1 !important; visibility: visible !important; } /* Submit: paper-plane icon in warm gold */ .baej-card.baej-actions .baej-actions__btns > a.baej-btn--filled > em { color: #F0D58A !important; } /* Reviewer: gold user-plus icon */ .baej-card.baej-actions .baej-actions__btns > a.baej-btn--tinted > em { color: #B38A32 !important; } /* WhatsApp Support: matching cream/gold pill with official FA icon */ .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn--whatsapp { background: #F6F0DF !important; border: 1px solid #E8D5A5 !important; border-radius: 999px !important; color: #172844 !important; } .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn--whatsapp > em { color: #21865A !important; font-size: 22px !important; } .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn--whatsapp:hover { background: #EFE3C3 !important; border-color: #C9A44C !important; color: #172844 !important; transform: translateY(-2px) !important; } /* Social share: use real linked icons from HTML, not text generated by CSS */ .baej-card.baej-actions .baej-share { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: wrap !important; gap: 10px !important; } .baej-card.baej-actions .baej-share__label { margin-right: auto !important; } /* Remove the old decorative symbols; actual icons are in the HTML */ .baej-card.baej-actions .baej-share__label::after { content: none !important; display: none !important; } .baej-card.baej-actions .baej-share > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 40px !important; width: 40px !important; height: 40px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #F2F3F5 !important; color: #243B60 !important; text-decoration: none !important; transition: transform .25s ease, background .25s ease, color .25s ease !important; } .baej-card.baej-actions .baej-share > a > em { display: inline-block !important; font-family: "FontAwesome" !important; font-size: 17px !important; font-style: normal !important; font-weight: normal !important; line-height: 1 !important; color: inherit !important; } .baej-card.baej-actions .baej-share > a:hover { background: #E8D5A5 !important; color: #172844 !important; transform: translateY(-3px) !important; } /* Smooth shine animation on primary action; respects reduced-motion setting above */ .baej-card.baej-actions .baej-btn--filled { position: relative !important; overflow: hidden !important; } .baej-card.baej-actions .baej-btn--filled::after { content: "" !important; position: absolute !important; top: 0 !important; left: -130% !important; width: 45% !important; height: 100% !important; background: linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent) !important; transform: skewX(-22deg) !important; animation: kiatSidebarShine 4s ease-in-out infinite !important; pointer-events: none !important; } @keyframes kiatSidebarShine { 0%, 60% { left: -130%; } 100% { left: 150%; } } @media (max-width: 600px) { .baej-card.baej-actions .baej-share > a { flex-basis: 36px !important; width: 36px !important; height: 36px !important; } .baej-card.baej-actions .baej-actions__btns > a.baej-btn > em, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn > em { font-size: 19px !important; } } /* ========================================================== KIAT SIDEBAR — COMPACT, CONSISTENT TYPOGRAPHY & SINGLE ICONS Final override: append after all previous sidebar rules. ========================================================== */ .baej-card.baej-actions { box-sizing: border-box !important; width: 100% !important; padding: 16px !important; margin: 0 0 16px !important; border: 1px solid #E8D5A5 !important; border-radius: 22px !important; background: #FFFFFF !important; box-shadow: 0 8px 22px rgba(16,29,54,.07) !important; } /* Compact, consistent vertical rhythm */ .baej-card.baej-actions .baej-actions__btns { display: block !important; margin: 0 0 10px !important; padding: 0 !important; } .baej-card.baej-actions .baej-actions__btns:last-of-type { margin-bottom: 0 !important; } .baej-card.baej-actions .baej-whatsapp-support { margin: 0 0 10px !important; padding: 0 !important; } /* All three buttons: same height, radius, font size, and alignment */ .baej-card.baej-actions .baej-actions__btns > a.baej-btn, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn { position: relative !important; box-sizing: border-box !important; display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: center !important; gap: 9px !important; width: 100% !important; min-width: 0 !important; min-height: 50px !important; margin: 0 !important; padding: 11px 14px !important; border-radius: 999px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.25 !important; text-align: center !important; text-decoration: none !important; white-space: normal !important; overflow: hidden !important; transition: transform .22s ease, box-shadow .22s ease, background .22s ease !important; } /* Prevent duplicate icons: use the explicit in HTML only */ .baej-card.baej-actions .baej-actions__btns > a.baej-btn::before, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn::before { content: none !important; display: none !important; } /* Single, aligned explicit Font Awesome icons */ .baej-card.baej-actions .baej-actions__btns > a.baej-btn > em, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn > em { display: inline-block !important; flex: 0 0 19px !important; width: 19px !important; min-width: 19px !important; height: auto !important; margin: 0 !important; padding: 0 !important; font-family: FontAwesome !important; font-size: 18px !important; font-style: normal !important; font-weight: normal !important; line-height: 1 !important; text-align: center !important; vertical-align: middle !important; } /* Submit: navy with gold accent */ .baej-card.baej-actions .baej-actions__btns > a.baej-btn--filled { color: #FFFFFF !important; background: linear-gradient(135deg, #101D36, #243B60) !important; border: 1px solid #C9A44C !important; box-shadow: 0 4px 12px rgba(16,29,54,.10) !important; } .baej-card.baej-actions .baej-actions__btns > a.baej-btn--filled > em { color: #F0D58A !important; } /* Reviewer: cream and gold */ .baej-card.baej-actions .baej-actions__btns > a.baej-btn--tinted { color: #172844 !important; background: #F6F0DF !important; border: 1px solid #E8D5A5 !important; } .baej-card.baej-actions .baej-actions__btns > a.baej-btn--tinted > em { color: #B38A32 !important; } /* WhatsApp: same capsule size; WhatsApp green icon */ .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn--whatsapp { color: #172844 !important; background: #F6F0DF !important; border: 1px solid #E8D5A5 !important; } .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn--whatsapp > em { color: #21865A !important; font-size: 19px !important; } /* Subtle hover, no perpetual enlargement */ .baej-card.baej-actions .baej-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 7px 15px rgba(16,29,54,.12) !important; } .baej-card.baej-actions .baej-btn--filled:hover { background: linear-gradient(135deg, #243B60, #304A70) !important; } .baej-card.baej-actions .baej-btn--tinted:hover, .baej-card.baej-actions .baej-btn--whatsapp:hover { background: #EFE3C3 !important; border-color: #C9A44C !important; } /* Share row: compact so social icons fit on one line in a typical sidebar */ .baej-card.baej-actions .baej-share { display: flex !important; align-items: center !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: 7px !important; margin: 16px 0 0 !important; padding: 14px 0 0 !important; border-top: 1px solid #E8D5A5 !important; } .baej-card.baej-actions .baej-share__label { flex: 0 0 auto !important; margin: 0 5px 0 0 !important; color: #68758B !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 14px !important; font-weight: 700 !important; } .baej-card.baej-actions .baej-share > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 34px !important; width: 34px !important; min-width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #F1F3F5 !important; color: #243B60 !important; text-decoration: none !important; transition: transform .2s ease, background .2s ease, color .2s ease !important; } .baej-card.baej-actions .baej-share > a > em { display: inline-block !important; font-family: FontAwesome !important; font-size: 16px !important; font-style: normal !important; font-weight: normal !important; line-height: 1 !important; color: inherit !important; } .baej-card.baej-actions .baej-share > a:hover { background: #E8D5A5 !important; color: #172844 !important; transform: translateY(-2px) !important; } /* Compact mobile sizing */ @media (max-width: 600px) { .baej-card.baej-actions { padding: 13px !important; border-radius: 18px !important; } .baej-card.baej-actions .baej-actions__btns > a.baej-btn, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn { min-height: 46px !important; padding: 10px 11px !important; font-size: 15px !important; gap: 7px !important; } .baej-card.baej-actions .baej-actions__btns > a.baej-btn > em, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn > em { flex-basis: 18px !important; width: 18px !important; min-width: 18px !important; font-size: 17px !important; } .baej-card.baej-actions .baej-share { gap: 6px !important; margin-top: 13px !important; padding-top: 12px !important; } .baej-card.baej-actions .baej-share__label { font-size: 13px !important; margin-right: 2px !important; } .baej-card.baej-actions .baej-share > a { flex-basis: 30px !important; width: 30px !important; min-width: 30px !important; height: 30px !important; } .baej-card.baej-actions .baej-share > a > em { font-size: 14px !important; } } @media (prefers-reduced-motion: reduce) { .baej-card.baej-actions .baej-btn, .baej-card.baej-actions .baej-share > a { transition: none !important; animation: none !important; } } /* ========================================================== KIAT TEMPLATE DOWNLOAD BUTTON — MATCH ACTION BUTTONS Equalize width, height, font size, and pill shape with Submit Your Paper / WhatsApp Support / Become a Reviewer. ========================================================== */ .kiat-template-card .baej-template-download, .kiat-template-card a.baej-template-download { display: flex !important; align-items: center !important; justify-content: center !important; gap: 9px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; min-height: 49px !important; box-sizing: border-box !important; margin: 0 !important; padding: 12px 15px !important; border-radius: 32px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.3 !important; text-align: center !important; white-space: normal !important; overflow-wrap: anywhere !important; } .kiat-template-card .baej-template-download .baej-download-symbol { flex: 0 0 auto !important; font-size: 23px !important; line-height: 1 !important; } @media (max-width: 600px) { .kiat-template-card .baej-template-download, .kiat-template-card a.baej-template-download { min-height: 44px !important; padding: 11px 12px !important; gap: 8px !important; font-size: 14px !important; border-radius: 30px !important; } .kiat-template-card .baej-template-download .baej-download-symbol { font-size: 21px !important; } } /* ========================================================== KIAT SIDEBAR — EXTRA COMPACT OVERRIDE Reduce vertical space and keep typography consistent. Appended last to override previous sidebar sizing rules. ========================================================== */ .baej-card.baej-actions { padding: 12px !important; margin: 12px 0 !important; border-radius: 18px !important; } .baej-card.baej-actions .baej-actions__btns { margin: 0 0 8px !important; padding: 0 !important; } .baej-card.baej-actions .baej-whatsapp-support { margin: 0 0 8px !important; } .baej-card.baej-actions .baej-actions__btns > a.baej-btn, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn { min-height: 44px !important; height: auto !important; padding: 9px 12px !important; gap: 8px !important; border-radius: 999px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important; } .baej-card.baej-actions .baej-actions__btns > a.baej-btn > em, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn > em { flex: 0 0 18px !important; width: 18px !important; min-width: 18px !important; margin: 0 !important; font-size: 17px !important; line-height: 1 !important; } .baej-card.baej-actions .baej-share { gap: 7px !important; margin: 11px 0 0 !important; padding: 11px 0 0 !important; flex-wrap: nowrap !important; } .baej-card.baej-actions .baej-share__label { font-size: 13px !important; margin-right: auto !important; } .baej-card.baej-actions .baej-share > a { flex: 0 0 30px !important; width: 30px !important; min-width: 30px !important; height: 30px !important; } .baej-card.baej-actions .baej-share > a > em { font-size: 14px !important; } @media (max-width: 600px) { .baej-card.baej-actions { padding: 10px !important; margin: 10px 0 !important; border-radius: 16px !important; } .baej-card.baej-actions .baej-actions__btns > a.baej-btn, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn { min-height: 42px !important; padding: 8px 10px !important; font-size: 14px !important; gap: 7px !important; } .baej-card.baej-actions .baej-actions__btns > a.baej-btn > em, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn > em { flex-basis: 17px !important; width: 17px !important; min-width: 17px !important; font-size: 16px !important; } .baej-card.baej-actions .baej-share { gap: 6px !important; margin-top: 10px !important; padding-top: 10px !important; } .baej-card.baej-actions .baej-share__label { font-size: 12px !important; } .baej-card.baej-actions .baej-share > a { flex-basis: 28px !important; width: 28px !important; min-width: 28px !important; height: 28px !important; } .baej-card.baej-actions .baej-share > a > em { font-size: 13px !important; } } /* ========================================================== KIAT SIDEBAR — FINAL POLISH - Remove redundant separator lines between pill buttons - Keep WhatsApp icon green for instant recognition - Compact spacing and consistent typography - Keep social icons on one neat row where space allows - Subtle hover motion only ========================================================== */ .baej-card.baej-actions { box-sizing: border-box !important; padding: 12px !important; border: 1px solid #E6D4A8 !important; border-radius: 20px !important; background: #FFFFFF !important; box-shadow: 0 8px 22px rgba(16, 29, 54, .07) !important; } /* Reset paragraph borders/lines that can look like dividers */ .baej-card.baej-actions .baej-actions__btns, .baej-card.baej-actions .baej-whatsapp-support { display: block !important; width: 100% !important; margin: 0 0 8px !important; padding: 0 !important; border: 0 !important; border-bottom: 0 !important; box-shadow: none !important; background: transparent !important; } .baej-card.baej-actions .baej-actions__btns > a.baej-btn, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn { box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; min-height: 44px !important; margin: 0 !important; padding: 9px 12px !important; gap: 8px !important; border-radius: 999px !important; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.2 !important; text-align: center !important; text-decoration: none !important; transition: background-color .22s ease, color .22s ease, box-shadow .22s ease, transform .22s ease !important; animation: none !important; } /* Keep only the icon supplied by the HTML; prevent duplicate CSS icons */ .baej-card.baej-actions .baej-actions__btns > a.baej-btn::before, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn::before, .baej-card.baej-actions .baej-actions__btns > a.baej-btn::after, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn::after { content: none !important; display: none !important; } .baej-card.baej-actions .baej-actions__btns > a.baej-btn > em, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn > em { display: inline-block !important; flex: 0 0 18px !important; width: 18px !important; min-width: 18px !important; margin: 0 !important; font-size: 17px !important; line-height: 1 !important; text-align: center !important; } /* Navy primary action */ .baej-card.baej-actions .baej-actions__btns > a.baej-btn--filled { color: #FFFFFF !important; background: linear-gradient(110deg, #13223D 0%, #243B60 100%) !important; border: 1px solid #C9A44C !important; box-shadow: 0 4px 11px rgba(19, 34, 61, .12) !important; } .baej-card.baej-actions .baej-actions__btns > a.baej-btn--filled > em { color: #E6C66F !important; } /* Warm ivory secondary actions */ .baej-card.baej-actions .baej-actions__btns > a.baej-btn--tinted, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn--whatsapp { color: #172844 !important; background: #F7F1E2 !important; border: 1px solid #E8D5A5 !important; box-shadow: none !important; } .baej-card.baej-actions .baej-actions__btns > a.baej-btn--tinted > em { color: #B58A2B !important; } .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn--whatsapp > em.fa-whatsapp, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn--whatsapp > em.fa-phone, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn--whatsapp > em.fa-phone-square { color: #16865B !important; } /* Gentle hover, without oversized movement */ .baej-card.baej-actions .baej-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 14px rgba(16, 29, 54, .11) !important; } .baej-card.baej-actions .baej-btn--filled:hover { background: linear-gradient(110deg, #20395F 0%, #2B466D 100%) !important; color: #FFFFFF !important; } .baej-card.baej-actions .baej-btn--tinted:hover, .baej-card.baej-actions .baej-btn--whatsapp:hover { background: #EFE4C8 !important; color: #172844 !important; } /* Share row */ .baej-card.baej-actions .baej-share { display: flex !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; gap: 7px !important; width: 100% !important; margin: 10px 0 0 !important; padding: 12px 0 0 !important; border-top: 1px solid #E8D5A5 !important; box-sizing: border-box !important; } .baej-card.baej-actions .baej-share__label { flex: 0 0 auto !important; margin: 0 auto 0 0 !important; color: #69758A !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1 !important; } .baej-card.baej-actions .baej-share__label::after { content: none !important; display: none !important; } .baej-card.baej-actions .baej-share > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 34px !important; width: 34px !important; min-width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 50% !important; background: #F1F3F5 !important; color: #243B60 !important; text-decoration: none !important; transition: background-color .2s ease, color .2s ease, transform .2s ease !important; } .baej-card.baej-actions .baej-share > a > em { margin: 0 !important; font-size: 15px !important; line-height: 1 !important; color: inherit !important; } .baej-card.baej-actions .baej-share > a:hover { transform: translateY(-2px) !important; background: #243B60 !important; color: #FFFFFF !important; box-shadow: 0 4px 10px rgba(19, 34, 61, .15) !important; } @media (max-width: 600px) { .baej-card.baej-actions { padding: 10px !important; border-radius: 17px !important; } .baej-card.baej-actions .baej-actions__btns, .baej-card.baej-actions .baej-whatsapp-support { margin-bottom: 7px !important; } .baej-card.baej-actions .baej-actions__btns > a.baej-btn, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn { min-height: 42px !important; padding: 8px 9px !important; gap: 7px !important; font-size: 14px !important; } .baej-card.baej-actions .baej-actions__btns > a.baej-btn > em, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn > em { flex-basis: 17px !important; width: 17px !important; min-width: 17px !important; font-size: 16px !important; } .baej-card.baej-actions .baej-share { gap: 5px !important; margin-top: 9px !important; padding-top: 10px !important; } .baej-card.baej-actions .baej-share__label { font-size: 12px !important; } .baej-card.baej-actions .baej-share > a { flex-basis: 30px !important; width: 30px !important; min-width: 30px !important; height: 30px !important; } .baej-card.baej-actions .baej-share > a > em { font-size: 13px !important; } } @media (prefers-reduced-motion: reduce) { .baej-card.baej-actions .baej-btn, .baej-card.baej-actions .baej-share > a { transition: none !important; animation: none !important; } } /* ===================================================== SIDEBAR / ACTION BUTTONS — ICON ALIGNMENT & SOCIAL CIRCLES Final override: consistent icon alignment and equal circles. Appended revision; existing styles are preserved. ===================================================== */ /* Action buttons: align icons and labels consistently */ .baej-card.baej-actions .baej-actions__btns > a.baej-btn, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn { display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; text-align: center !important; line-height: 1.2 !important; } .baej-card.baej-actions .baej-actions__btns > a.baej-btn > em, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn > em { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 20px !important; width: 20px !important; min-width: 20px !important; height: 20px !important; margin: 0 !important; padding: 0 !important; font-size: 17px !important; line-height: 1 !important; vertical-align: middle !important; } /* Social share: enforce identical circular dimensions */ .baej-card.baej-actions .baej-share { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; gap: 8px !important; min-width: 0 !important; } .baej-card.baej-actions .baej-share > a { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 36px !important; width: 36px !important; min-width: 36px !important; max-width: 36px !important; height: 36px !important; min-height: 36px !important; max-height: 36px !important; aspect-ratio: 1 / 1 !important; box-sizing: border-box !important; margin: 0 !important; padding: 0 !important; border-radius: 50% !important; overflow: hidden !important; } .baej-card.baej-actions .baej-share > a > em { display: inline-block !important; margin: 0 !important; padding: 0 !important; font-size: 15px !important; line-height: 1 !important; text-align: center !important; } /* Mobile sizing */ @media (max-width: 600px) { .baej-card.baej-actions .baej-actions__btns > a.baej-btn, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn { gap: 7px !important; } .baej-card.baej-actions .baej-actions__btns > a.baej-btn > em, .baej-card.baej-actions .baej-whatsapp-support > a.baej-btn > em { flex-basis: 18px !important; width: 18px !important; min-width: 18px !important; height: 18px !important; font-size: 16px !important; } .baej-card.baej-actions .baej-share { gap: 6px !important; } .baej-card.baej-actions .baej-share > a { flex: 0 0 32px !important; width: 32px !important; min-width: 32px !important; max-width: 32px !important; height: 32px !important; min-height: 32px !important; max-height: 32px !important; } .baej-card.baej-actions .baej-share > a > em { font-size: 14px !important; } } /* Respect reduced-motion preferences for these elements */ @media (prefers-reduced-motion: reduce) { .baej-card.baej-actions .baej-btn, .baej-card.baej-actions .baej-share > a { transition: none !important; animation: none !important; } } /* ========================================================== JURNAL EKONOMI KIAT HERO INFORMATION — NAVY & GOLD Supports HTML classes: kiat-hero-info* Scoped styles; existing OJS header/sidebar rules are preserved. ========================================================== */ .kiat-hero-info { width: 100%; margin: 0; padding: 0; color: #FFFFFF; font-family: inherit; box-sizing: border-box; } .kiat-hero-info *, .kiat-hero-info *::before, .kiat-hero-info *::after { box-sizing: border-box; } .kiat-hero-info__eyebrow { margin: 0 0 18px; color: #F2CF83; font-size: 14px; font-weight: 800; letter-spacing: 3px; line-height: 1.6; text-transform: uppercase; } .kiat-hero-info .kiat-hero-info__title { margin: 0 0 20px; color: #F8E6B8 !important; font-family: Georgia, "Times New Roman", serif; font-size: clamp(30px, 4vw, 54px); font-weight: 700; line-height: 1.12; letter-spacing: -1px; } .kiat-hero-info__description { max-width: 850px; margin: 0 0 30px; color: #F1F5F9; font-size: 16px; font-weight: 400; line-height: 1.9; } .kiat-hero-info__features { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 30px; width: 100%; margin: 0; padding: 22px 0 0; border-top: 1px solid rgba(231, 190, 105, 0.55); } .kiat-hero-info__item { display: inline-flex; align-items: center; gap: 10px; min-width: 0; color: #F5D58F; } .kiat-hero-info__icon { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; color: #F2CF83; border: 1px solid rgba(242, 207, 131, 0.6); border-radius: 50%; } .kiat-hero-info__icon svg { display: block; width: 18px; height: 18px; max-width: none; transform: none !important; transition: none !important; } .kiat-hero-info__label { color: #FFE5A8; font-size: 12px; font-weight: 800; letter-spacing: 1.1px; line-height: 1.5; text-transform: uppercase; } /* Prevent global link/image/heading rules from affecting this block */ .kiat-hero-info .kiat-hero-info__title:hover, .kiat-hero-info__icon svg:hover { transform: none !important; } @media (max-width: 768px) { .kiat-hero-info__eyebrow { margin-bottom: 14px; font-size: 12px; letter-spacing: 2px; } .kiat-hero-info .kiat-hero-info__title { font-size: clamp(29px, 6vw, 42px); letter-spacing: -0.5px; } .kiat-hero-info__description { margin-bottom: 24px; font-size: 15px; line-height: 1.8; } .kiat-hero-info__features { gap: 16px 22px; padding-top: 18px; } } @media (max-width: 480px) { .kiat-hero-info .kiat-hero-info__title { font-size: 30px; line-height: 1.2; } .kiat-hero-info__description { font-size: 14px; line-height: 1.75; } .kiat-hero-info__features { display: grid; grid-template-columns: 1fr; gap: 13px; } .kiat-hero-info__icon { flex-basis: 32px; width: 32px; height: 32px; } .kiat-hero-info__label { font-size: 11px; } } @media (prefers-reduced-motion: reduce) { .kiat-hero-info *, .kiat-hero-info *::before, .kiat-hero-info *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } } /* ========================================================== KIAT JOURNAL HISTORY — NAVY & GOLD TIMELINE Added: responsive history cards and colored information boxes Scoped to .kiat-history to avoid affecting other OJS elements ========================================================== */ .kiat-history { --kh-green: #082b43; --kh-green-dark: #031c2d; --kh-green-light: #edf3f7; --kh-gold: #d5a03a; --kh-gold-light: #fff7e8; --kh-text: #203447; --kh-muted: #647586; max-width: 1000px; margin: 30px auto; padding: 10px 12px 30px; font-family: Arial, Helvetica, sans-serif; color: var(--kh-text); line-height: 1.75; box-sizing: border-box; } .kiat-history *, .kiat-history *::before, .kiat-history *::after { box-sizing: border-box; } .kiat-history-header { position: relative; margin: 0 0 38px; padding: 28px 30px; overflow: hidden; border-radius: 16px; background: linear-gradient(120deg, #031c2d 0%, #082b43 68%, #104563 100%); color: #fff; box-shadow: 0 8px 24px rgba(3, 28, 45, .18); } .kiat-history-header::after { content: ""; position: absolute; top: -65px; right: -35px; width: 190px; height: 190px; border: 24px solid rgba(213, 160, 58, .20); border-radius: 20px; transform: rotate(35deg); pointer-events: none; } .kiat-history-label { position: relative; z-index: 1; display: inline-block; margin-bottom: 8px; padding: 5px 12px; border-radius: 4px; background: var(--kh-gold); color: var(--kh-green-dark); font-size: 11px; font-weight: 800; letter-spacing: 1.8px; } .kiat-history .kiat-history-header h2 { position: relative; z-index: 1; margin: 0 0 10px; color: #fff !important; font-size: clamp(26px, 4vw, 36px); line-height: 1.2; font-weight: 800; } .kiat-history .kiat-history-header p { position: relative; z-index: 1; max-width: 720px; margin: 0; color: rgba(255, 255, 255, .92); font-size: 15px; } .kiat-history .kiat-timeline { position: relative; padding-left: 115px; } .kiat-history .kiat-timeline::before { content: ""; position: absolute; top: 10px; bottom: 18px; left: 91px; width: 3px; border-radius: 4px; background: linear-gradient(to bottom, var(--kh-gold), #e7c987, var(--kh-gold)); } .kiat-history .kiat-history-item { position: relative; margin: 0 0 28px; } .kiat-history .kiat-history-year { position: absolute; top: 23px; right: calc(100% + 24px); width: 92px; padding: 9px 6px; border: 1px solid rgba(255, 210, 26, .7); border-radius: 8px; background: var(--kh-green); color: #fff; font-size: 12px; font-weight: 800; line-height: 1.4; text-align: center; box-shadow: 0 4px 12px rgba(3, 28, 45, .14); } .kiat-history .kiat-history-item::before { content: ""; position: absolute; top: 29px; left: -30px; z-index: 2; width: 15px; height: 15px; border: 3px solid var(--kh-green); border-radius: 50%; background: var(--kh-gold); box-shadow: 0 0 0 5px #fff; } .kiat-history .kiat-history-card { padding: 24px 25px; border: 1px solid #d6e0e8; border-top: 4px solid var(--kh-gold); border-radius: 12px; background: #fff; box-shadow: 0 5px 18px rgba(3, 28, 45, .07); transition: transform .25s ease, box-shadow .25s ease; } .kiat-history .kiat-history-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(3, 28, 45, .14); } .kiat-history .kiat-history-card h3 { margin: 0 0 12px; color: var(--kh-green) !important; font-size: 21px; font-weight: 800; line-height: 1.4; } .kiat-history .kiat-history-card > p { margin: 0 0 16px; } .kiat-history .kiat-info-box, .kiat-history .kiat-institution-box, .kiat-history .kiat-highlight-box { margin-top: 16px; padding: 16px 18px; border-radius: 8px; } .kiat-history .kiat-info-box { border-left: 4px solid #082b43; background: var(--kh-green-light); } .kiat-history .kiat-institution-box { border-left: 4px solid #d9a900; background: #fff8e9; } .kiat-history .kiat-highlight-box { border: 1px solid #e7c987; background: var(--kh-gold-light); } .kiat-history .kiat-info-box > strong, .kiat-history .kiat-institution-box > strong, .kiat-history .kiat-highlight-box > strong { display: block; margin-bottom: 8px; color: var(--kh-green-dark); font-size: 14px; } .kiat-history .kiat-history-card ul { margin: 8px 0 0; padding-left: 22px; } .kiat-history .kiat-history-card li { margin-bottom: 6px; } .kiat-history .kiat-history-card li:last-child { margin-bottom: 0; } .kiat-history .kiat-institution-box p, .kiat-history .kiat-highlight-box p { margin: 6px 0 0; } @media (max-width: 640px) { .kiat-history { padding: 5px 3px 20px; } .kiat-history-header { padding: 23px 20px; margin-bottom: 28px; } .kiat-history .kiat-timeline { padding-left: 25px; } .kiat-history .kiat-timeline::before { left: 7px; } .kiat-history .kiat-history-item::before { top: 14px; left: -24px; width: 13px; height: 13px; } .kiat-history .kiat-history-year { position: static; display: inline-block; width: auto; min-width: 90px; margin-bottom: 10px; padding: 6px 12px; font-size: 11px; } .kiat-history .kiat-history-card { padding: 19px 16px; } .kiat-history .kiat-history-card h3 { font-size: 18px; } .kiat-history .kiat-info-box, .kiat-history .kiat-institution-box, .kiat-history .kiat-highlight-box { padding: 13px 14px; } } @media (prefers-reduced-motion: reduce) { .kiat-history .kiat-history-card { transition: none; } .kiat-history .kiat-history-card:hover { transform: none; } } /* ========================================================== KIAT — MOBILE RESPONSIVE PATCH Added at the END so it overrides older conflicting rules. Scope: OJS layout, homepage/issue cover, metadata and tables. ========================================================== */ html, body { width: 100% !important; max-width: 100% !important; margin: 0 !important; overflow-x: hidden !important; } *, *::before, *::after { box-sizing: border-box; } img, video, iframe, embed, object { max-width: 100%; } @media screen and (max-width: 767px) { /* Main OJS page containers */ .pkp_structure_page, .pkp_structure_content, .pkp_structure_main, .pkp_structure_sidebar, .pkp_content_main, .pkp_page_content, .page, #main { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 12px !important; padding-right: 12px !important; float: none !important; box-sizing: border-box !important; } .pkp_structure_main, .pkp_structure_sidebar, .pkp_structure_content .row, .pkp_structure_content [class*="col-"] { min-width: 0 !important; max-width: 100% !important; } /* Stack main content and sidebar instead of squeezing columns */ .pkp_structure_content .row { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; margin-left: 0 !important; margin-right: 0 !important; } .pkp_structure_content .row > [class*="col-"], .pkp_structure_content .pkp_structure_main, .pkp_structure_content .pkp_structure_sidebar { width: 100% !important; flex: 0 0 100% !important; padding-left: 0 !important; padding-right: 0 !important; } /* Homepage hero and custom content blocks */ .hero-layout, .hero-banner, .sp-card, .sp-info, .sp-cover, .kiat-hero-info, .kiat-cover-box { width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: auto !important; margin-right: auto !important; float: none !important; box-sizing: border-box !important; } .hero-layout { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 20px !important; } .hero-layout > *, .hero-banner > *, .sp-cover > *, .kiat-hero-info > * { min-width: 0 !important; max-width: 100% !important; } /* Current issue / issue cover areas */ .current_issue, .current_issue_title, .current_issue .obj_issue_toc, .obj_issue_toc, .obj_issue_summary, .issue_summary, .issue-cover, .issue_cover, .homepage_image, .pkp_page_index .current_issue { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: auto !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; box-sizing: border-box !important; } .current_issue img, .obj_issue_toc img, .obj_issue_summary img, .issue_summary img, .issue-cover img, .issue_cover img, .homepage_image img, .sp-cover img, .kiat-cover-box img { display: block !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: 420px !important; margin: 0 auto !important; object-fit: contain !important; transform: none !important; } /* Cancel overlapping absolute positioning on mobile for content cards */ .current_issue .obj_issue_toc, .current_issue .obj_issue_summary, .current_issue .description, .current_issue .published, .current_issue .read_more, .kiat-metadata, .kiat-stats { position: relative !important; inset: auto !important; transform: none !important; } /* Journal metadata: one readable column on phones */ html body .kiat-metadata { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 10px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin-left: 0 !important; margin-right: 0 !important; } html body .kiat-metadata .kiat-meta-item { display: flex !important; align-items: flex-start !important; gap: 12px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; padding: 13px !important; overflow-wrap: anywhere !important; word-break: normal !important; transform: none !important; } html body .kiat-metadata .kiat-meta-content, html body .kiat-metadata .kiat-meta-value, html body .kiat-metadata .kiat-meta-value a, html body .kiat-metadata .kiat-meta-subtext { min-width: 0 !important; max-width: 100% !important; overflow-wrap: anywhere !important; word-break: normal !important; } html body .kiat-metadata .kiat-meta-label { font-size: 10px !important; letter-spacing: .6px !important; } html body .kiat-metadata .kiat-meta-value { font-size: 13px !important; line-height: 1.45 !important; } /* Statistics tiles fit the viewport */ html body .kiat-stats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 9px !important; width: 100% !important; max-width: 100% !important; } html body .kiat-stats .kiat-stat { min-width: 0 !important; max-width: 100% !important; padding: 14px 10px !important; overflow-wrap: anywhere !important; } /* Prevent large text and long links from forcing horizontal overflow */ h1, h2, h3, h4, p, li, a, span, strong, td, th { max-width: 100%; overflow-wrap: anywhere; } h1 { font-size: clamp(25px, 7vw, 34px) !important; line-height: 1.2 !important; } h2 { font-size: clamp(21px, 6vw, 28px) !important; line-height: 1.25 !important; } table { display: block !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; } /* Mobile header/navigation: keep controls inside the screen */ .pkp_head_wrapper { width: 100% !important; max-width: 100% !important; padding-left: 10px !important; padding-right: 10px !important; } .pkp_site_name img { max-width: 94vw !important; max-height: 76px !important; height: auto !important; } .pkp_navigation_primary_row { max-width: 100% !important; padding-left: 8px !important; padding-right: 8px !important; overflow-x: auto !important; overflow-y: visible !important; -webkit-overflow-scrolling: touch; } .pkp_navigation_primary { flex-wrap: nowrap !important; min-width: max-content !important; } .pkp_navigation_primary > li > a { white-space: nowrap !important; padding-left: 8px !important; padding-right: 8px !important; font-size: 12px !important; } .pkp_navigation_primary_row .pkp_search { position: sticky !important; right: 0 !important; flex: 0 0 auto !important; background: #fff !important; } /* Avoid hover animations enlarging or shifting cards on touch screens */ img:hover, .sp-cover img:hover, .sp-card:hover, .sp-info:hover, .content .gap-2 .m-menu:hover, html body .kiat-metadata .kiat-meta-item:hover, html body .kiat-stats .kiat-stat:hover { transform: none !important; } } @media screen and (max-width: 420px) { .pkp_structure_content, .pkp_structure_main, .pkp_structure_sidebar, .pkp_page_content, .page, #main { padding-left: 9px !important; padding-right: 9px !important; } html body .kiat-stats { grid-template-columns: minmax(0, 1fr) !important; } .pkp_navigation_primary > li > a::before { display: none !important; } .pkp_navigation_primary_row .pkp_search a, .pkp_navigation_primary_row .pkp_search button, .pkp_navigation_primary_row .pkp_search .search_prompt { padding-left: 5px !important; padding-right: 5px !important; font-size: 11px !important; } } /* End mobile responsive patch */ /* ========================================================== KIAT — EDITORIAL BOARD & REVIEWERS Final override patch: navy/gold cards, profile links, consistent spacing, and responsive layout for OJS pages. Supports the custom KIAT markup and common OJS team markup. ========================================================== */ :root { --kiat-navy: #102744; --kiat-navy-dark: #091a30; --kiat-gold: #d8ad4a; --kiat-gold-light: #f7edcf; --kiat-editorial-text: #263548; --kiat-editorial-muted: #64748b; } /* Main wrapper */ html body #kiat-editorial, html body .kiat-editorial, html body .kiat-reviewers, html body .kiat-reviewer-section { width: 100% !important; max-width: 1180px !important; margin: 0 auto !important; padding: 24px 0 !important; color: var(--kiat-editorial-text) !important; box-sizing: border-box !important; min-width: 0 !important; } /* Section headings */ html body #kiat-editorial h1, html body #kiat-editorial h2, html body #kiat-editorial h3, html body .kiat-editorial h1, html body .kiat-editorial h2, html body .kiat-reviewers h1, html body .kiat-reviewers h2, html body .kiat-reviewer-section h1, html body .kiat-reviewer-section h2 { color: var(--kiat-navy) !important; font-weight: 800 !important; line-height: 1.25 !important; overflow-wrap: anywhere !important; } html body #kiat-editorial .kiat-section-heading, html body .kiat-editorial .kiat-section-heading, html body .kiat-reviewers .kiat-section-heading, html body .kiat-reviewer-section .kiat-section-heading { margin: 0 0 8px !important; padding: 0 0 12px !important; border-bottom: 3px solid var(--kiat-gold) !important; } /* Grid layouts */ html body #kiat-editorial .kiat-editorial-grid, html body #kiat-editorial .kiat-reviewer-grid, html body .kiat-editorial .kiat-editorial-grid, html body .kiat-editorial .kiat-reviewer-grid, html body .kiat-reviewers .kiat-reviewers-grid, html body .kiat-reviewers .kiat-reviewer-grid, html body .kiat-reviewer-section .kiat-reviewers-grid, html body .kiat-reviewer-section .kiat-reviewer-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; width: 100% !important; max-width: 100% !important; margin: 22px 0 0 !important; padding: 0 !important; min-width: 0 !important; box-sizing: border-box !important; } /* Card styles: cover several possible class names */ html body #kiat-editorial .kiat-editorial-card, html body #kiat-editorial .kiat-reviewer-card, html body .kiat-editorial .kiat-editorial-card, html body .kiat-editorial .kiat-reviewer-card, html body .kiat-reviewers .kiat-reviewer-card, html body .kiat-reviewers .kiat-reviewer, html body .kiat-reviewer-section .kiat-reviewer-card, html body .kiat-reviewer-section .kiat-reviewer { display: flex !important; align-items: flex-start !important; gap: 16px !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 20px !important; box-sizing: border-box !important; background: #ffffff !important; border: 1px solid #e5eaf0 !important; border-top: 4px solid var(--kiat-gold) !important; border-radius: 14px !important; box-shadow: 0 6px 18px rgba(9, 26, 48, 0.07) !important; color: var(--kiat-editorial-text) !important; overflow: hidden !important; transition: box-shadow .25s ease, border-color .25s ease !important; } html body #kiat-editorial .kiat-editorial-card:hover, html body #kiat-editorial .kiat-reviewer-card:hover, html body .kiat-editorial .kiat-editorial-card:hover, html body .kiat-editorial .kiat-reviewer-card:hover, html body .kiat-reviewers .kiat-reviewer-card:hover, html body .kiat-reviewers .kiat-reviewer:hover, html body .kiat-reviewer-section .kiat-reviewer-card:hover, html body .kiat-reviewer-section .kiat-reviewer:hover { transform: none !important; border-color: #d7c18a !important; box-shadow: 0 10px 26px rgba(9, 26, 48, 0.12) !important; } /* Initial/avatar or profile image */ html body #kiat-editorial .kiat-editorial-avatar, html body #kiat-editorial .kiat-reviewer-avatar, html body .kiat-editorial .kiat-editorial-avatar, html body .kiat-editorial .kiat-reviewer-avatar, html body .kiat-reviewers .kiat-reviewer-avatar, html body .kiat-reviewer-section .kiat-reviewer-avatar { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 62px !important; width: 62px !important; height: 62px !important; min-width: 62px !important; margin: 0 !important; border: 2px solid var(--kiat-gold) !important; border-radius: 50% !important; background: var(--kiat-navy) !important; color: #ffffff !important; font-size: 19px !important; font-weight: 800 !important; line-height: 1 !important; text-align: center !important; overflow: hidden !important; } html body #kiat-editorial .kiat-editorial-avatar img, html body #kiat-editorial .kiat-reviewer-avatar img, html body .kiat-editorial .kiat-editorial-avatar img, html body .kiat-editorial .kiat-reviewer-avatar img, html body .kiat-reviewers .kiat-reviewer-avatar img, html body .kiat-reviewer-section .kiat-reviewer-avatar img { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; object-fit: cover !important; border-radius: 50% !important; transform: none !important; } /* Profile information */ html body #kiat-editorial .kiat-editorial-info, html body #kiat-editorial .kiat-reviewer-info, html body .kiat-editorial .kiat-editorial-info, html body .kiat-editorial .kiat-reviewer-info, html body .kiat-reviewers .kiat-reviewer-info, html body .kiat-reviewer-section .kiat-reviewer-info, html body #kiat-editorial .kiat-editorial-content, html body .kiat-reviewers .kiat-reviewer-content { flex: 1 1 auto !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; overflow-wrap: anywhere !important; word-break: normal !important; } html body #kiat-editorial .kiat-editorial-name, html body #kiat-editorial .kiat-reviewer-name, html body .kiat-editorial .kiat-editorial-name, html body .kiat-editorial .kiat-reviewer-name, html body .kiat-reviewers .kiat-reviewer-name, html body .kiat-reviewer-section .kiat-reviewer-name { display: block !important; margin: 0 0 7px !important; padding: 0 !important; color: var(--kiat-navy) !important; font-size: 17px !important; font-weight: 800 !important; line-height: 1.35 !important; overflow-wrap: anywhere !important; } html body #kiat-editorial .kiat-editorial-affiliation, html body #kiat-editorial .kiat-reviewer-affiliation, html body .kiat-editorial .kiat-editorial-affiliation, html body .kiat-editorial .kiat-reviewer-affiliation, html body .kiat-reviewers .kiat-reviewer-affiliation, html body .kiat-reviewer-section .kiat-reviewer-affiliation { display: block !important; margin: 0 0 10px !important; color: var(--kiat-editorial-muted) !important; font-size: 13px !important; line-height: 1.55 !important; overflow-wrap: anywhere !important; } html body #kiat-editorial .kiat-editorial-role, html body #kiat-editorial .kiat-reviewer-role, html body .kiat-editorial .kiat-editorial-role, html body .kiat-reviewers .kiat-reviewer-role, html body .kiat-reviewer-section .kiat-reviewer-role { display: inline-block !important; margin: 0 0 10px !important; padding: 4px 9px !important; border-radius: 20px !important; background: var(--kiat-gold-light) !important; color: var(--kiat-navy) !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .6px !important; line-height: 1.4 !important; } /* Profile links/buttons */ html body #kiat-editorial .kiat-editorial-links, html body #kiat-editorial .kiat-reviewer-links, html body .kiat-editorial .kiat-editorial-links, html body .kiat-editorial .kiat-reviewer-links, html body .kiat-reviewers .kiat-reviewer-links, html body .kiat-reviewer-section .kiat-reviewer-links { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 7px !important; width: 100% !important; max-width: 100% !important; margin: 10px 0 0 !important; padding: 0 !important; min-width: 0 !important; } html body #kiat-editorial .kiat-editorial-links a, html body #kiat-editorial .kiat-reviewer-links a, html body .kiat-editorial .kiat-editorial-links a, html body .kiat-editorial .kiat-reviewer-links a, html body .kiat-reviewers .kiat-reviewer-links a, html body .kiat-reviewer-section .kiat-reviewer-links a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 32px !important; max-width: 100% !important; margin: 0 !important; padding: 7px 10px !important; box-sizing: border-box !important; border: 1px solid var(--kiat-navy) !important; border-radius: 6px !important; background: var(--kiat-navy) !important; color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.25 !important; text-decoration: none !important; white-space: normal !important; overflow-wrap: anywhere !important; transition: background .2s ease, border-color .2s ease !important; } html body #kiat-editorial .kiat-editorial-links a:hover, html body #kiat-editorial .kiat-reviewer-links a:hover, html body .kiat-editorial .kiat-editorial-links a:hover, html body .kiat-editorial .kiat-reviewer-links a:hover, html body .kiat-reviewers .kiat-reviewer-links a:hover, html body .kiat-reviewer-section .kiat-reviewer-links a:hover { background: var(--kiat-gold) !important; border-color: var(--kiat-gold) !important; color: var(--kiat-navy) !important; -webkit-text-fill-color: var(--kiat-navy) !important; transform: none !important; } /* Image-only layouts and direct profile pictures */ html body #kiat-editorial .kiat-editorial-card img, html body #kiat-editorial .kiat-reviewer-card img, html body .kiat-reviewers .kiat-reviewer img, html body .kiat-reviewer-section .kiat-reviewer img { max-width: 100% !important; } /* Native OJS editorial team page */ html body .page_editorialTeam .pkp_page_content, html body .page_reviewers .pkp_page_content { min-width: 0 !important; max-width: 100% !important; } html body .page_editorialTeam .pkp_page_content table, html body .page_reviewers .pkp_page_content table { width: 100% !important; max-width: 100% !important; border-collapse: collapse !important; } html body .page_editorialTeam .pkp_page_content th, html body .page_editorialTeam .pkp_page_content td, html body .page_reviewers .pkp_page_content th, html body .page_reviewers .pkp_page_content td { padding: 11px 12px !important; vertical-align: top !important; overflow-wrap: anywhere !important; border-color: #e5eaf0 !important; } html body .page_editorialTeam .pkp_page_content th, html body .page_reviewers .pkp_page_content th { background: var(--kiat-navy) !important; color: #ffffff !important; font-weight: 700 !important; } /* Tablet */ @media screen and (max-width: 900px) { html body #kiat-editorial .kiat-editorial-grid, html body #kiat-editorial .kiat-reviewer-grid, html body .kiat-editorial .kiat-editorial-grid, html body .kiat-editorial .kiat-reviewer-grid, html body .kiat-reviewers .kiat-reviewers-grid, html body .kiat-reviewers .kiat-reviewer-grid, html body .kiat-reviewer-section .kiat-reviewers-grid, html body .kiat-reviewer-section .kiat-reviewer-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 15px !important; } html body #kiat-editorial .kiat-editorial-card, html body #kiat-editorial .kiat-reviewer-card, html body .kiat-editorial .kiat-editorial-card, html body .kiat-editorial .kiat-reviewer-card, html body .kiat-reviewers .kiat-reviewer-card, html body .kiat-reviewers .kiat-reviewer, html body .kiat-reviewer-section .kiat-reviewer-card, html body .kiat-reviewer-section .kiat-reviewer { padding: 17px !important; } } /* Mobile */ @media screen and (max-width: 600px) { html body #kiat-editorial, html body .kiat-editorial, html body .kiat-reviewers, html body .kiat-reviewer-section { padding: 14px 0 !important; } html body #kiat-editorial .kiat-editorial-card, html body #kiat-editorial .kiat-reviewer-card, html body .kiat-editorial .kiat-editorial-card, html body .kiat-editorial .kiat-reviewer-card, html body .kiat-reviewers .kiat-reviewer-card, html body .kiat-reviewers .kiat-reviewer, html body .kiat-reviewer-section .kiat-reviewer-card, html body .kiat-reviewer-section .kiat-reviewer { gap: 12px !important; padding: 14px !important; border-radius: 11px !important; } html body #kiat-editorial .kiat-editorial-avatar, html body #kiat-editorial .kiat-reviewer-avatar, html body .kiat-editorial .kiat-editorial-avatar, html body .kiat-editorial .kiat-reviewer-avatar, html body .kiat-reviewers .kiat-reviewer-avatar, html body .kiat-reviewer-section .kiat-reviewer-avatar { flex-basis: 48px !important; width: 48px !important; height: 48px !important; min-width: 48px !important; font-size: 15px !important; } html body #kiat-editorial .kiat-editorial-name, html body #kiat-editorial .kiat-reviewer-name, html body .kiat-editorial .kiat-editorial-name, html body .kiat-editorial .kiat-reviewer-name, html body .kiat-reviewers .kiat-reviewer-name, html body .kiat-reviewer-section .kiat-reviewer-name { font-size: 15px !important; } html body #kiat-editorial .kiat-editorial-links a, html body #kiat-editorial .kiat-reviewer-links a, html body .kiat-editorial .kiat-editorial-links a, html body .kiat-editorial .kiat-reviewer-links a, html body .kiat-reviewers .kiat-reviewer-links a, html body .kiat-reviewer-section .kiat-reviewer-links a { min-height: 30px !important; padding: 6px 8px !important; font-size: 10px !important; } } @media screen and (max-width: 380px) { html body #kiat-editorial .kiat-editorial-card, html body #kiat-editorial .kiat-reviewer-card, html body .kiat-editorial .kiat-editorial-card, html body .kiat-editorial .kiat-reviewer-card, html body .kiat-reviewers .kiat-reviewer-card, html body .kiat-reviewers .kiat-reviewer, html body .kiat-reviewer-section .kiat-reviewer-card, html body .kiat-reviewer-section .kiat-reviewer { display: block !important; } html body #kiat-editorial .kiat-editorial-avatar, html body #kiat-editorial .kiat-reviewer-avatar, html body .kiat-editorial .kiat-editorial-avatar, html body .kiat-editorial .kiat-reviewer-avatar, html body .kiat-reviewers .kiat-reviewer-avatar, html body .kiat-reviewer-section .kiat-reviewer-avatar { margin: 0 0 12px !important; } } /* Accessibility: reduce motion when requested by the device */ @media (prefers-reduced-motion: reduce) { html body #kiat-editorial *, html body .kiat-editorial *, html body .kiat-reviewers *, html body .kiat-reviewer-section * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* End KIAT Editorial Board & Reviewers patch */ /* ========================================================== KIAT REVIEWERS PAGE — DEDICATED PROFILE CARD STYLES Add-on for HTML using #kiat-reviewers and .kiat-reviewer-* Scoped selectors preserve existing header, sidebar, navigation, editorial and article styles. Palette: KIAT teal #08778a, gold #fdd054 ========================================================== */ html body #kiat-reviewers { --kr-primary: #08778a; --kr-primary-dark: #075663; --kr-gold: #fdd054; --kr-text: #243746; --kr-muted: #657784; --kr-border: #e2e9ed; display: block !important; width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 24px 0 40px !important; color: var(--kr-text) !important; font-family: inherit !important; box-sizing: border-box !important; } html body #kiat-reviewers *, html body #kiat-reviewers *::before, html body #kiat-reviewers *::after { box-sizing: border-box !important; } html body #kiat-reviewers .kiat-reviewers-header { display: block !important; margin: 0 0 28px !important; padding: 0 0 20px !important; border: 0 !important; border-bottom: 3px solid var(--kr-gold) !important; background: transparent !important; box-shadow: none !important; } html body #kiat-reviewers .kiat-reviewers-eyebrow { display: inline-block !important; margin: 0 0 8px !important; color: var(--kr-primary) !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: 2px !important; line-height: 1.5 !important; text-transform: uppercase !important; } html body #kiat-reviewers .kiat-reviewers-header h2 { margin: 0 0 8px !important; padding: 0 !important; color: var(--kr-primary-dark) !important; font-size: clamp(26px, 3vw, 36px) !important; font-weight: 800 !important; line-height: 1.2 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body #kiat-reviewers .kiat-reviewers-header p { margin: 0 !important; color: var(--kr-muted) !important; font-size: 15px !important; line-height: 1.7 !important; } html body #kiat-reviewers .kiat-reviewers-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px !important; align-items: stretch !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } html body #kiat-reviewers .kiat-reviewer-card { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 18px !important; min-width: 0 !important; margin: 0 !important; padding: 22px !important; overflow: hidden !important; background: #ffffff !important; border: 1px solid var(--kr-border) !important; border-top: 4px solid var(--kr-primary) !important; border-radius: 12px !important; box-shadow: 0 5px 18px rgba(21, 52, 65, 0.07) !important; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease !important; } html body #kiat-reviewers .kiat-reviewer-card:hover { transform: translateY(-4px) !important; border-top-color: var(--kr-gold) !important; box-shadow: 0 10px 26px rgba(21, 52, 65, 0.12) !important; } html body #kiat-reviewers .kiat-reviewer-photo { display: flex !important; flex: 0 0 104px !important; align-items: center !important; justify-content: center !important; width: 104px !important; min-width: 104px !important; height: 124px !important; min-height: 124px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; color: #ffffff !important; background: linear-gradient(145deg, var(--kr-primary), var(--kr-primary-dark)) !important; border: 3px solid #e8f3f4 !important; border-radius: 9px !important; box-shadow: none !important; } html body #kiat-reviewers .kiat-reviewer-photo span { display: flex !important; align-items: center !important; justify-content: center !important; width: 66px !important; height: 66px !important; margin: 0 !important; padding: 0 !important; color: var(--kr-primary-dark) !important; background: var(--kr-gold) !important; border: 0 !important; border-radius: 50% !important; font-size: 25px !important; font-weight: 800 !important; letter-spacing: 1px !important; line-height: 1 !important; } html body #kiat-reviewers .kiat-reviewer-photo 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: 0 !important; box-shadow: none !important; transform: none !important; } html body #kiat-reviewers .kiat-reviewer-content { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } html body #kiat-reviewers .kiat-reviewer-content h3 { margin: 0 0 8px !important; padding: 0 !important; color: var(--kr-primary-dark) !important; font-size: 18px !important; font-weight: 800 !important; line-height: 1.4 !important; overflow-wrap: anywhere !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body #kiat-reviewers .kiat-reviewer-affiliation { margin: 0 0 12px !important; padding: 0 !important; color: var(--kr-muted) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.6 !important; } html body #kiat-reviewers .kiat-reviewer-label { display: inline-block !important; margin: 0 0 14px !important; padding: 5px 9px !important; color: var(--kr-primary-dark) !important; background: #e8f4f5 !important; border: 0 !important; border-left: 3px solid var(--kr-gold) !important; border-radius: 3px !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .6px !important; line-height: 1.4 !important; } html body #kiat-reviewers .kiat-reviewer-links { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 7px !important; margin: 0 !important; padding: 0 !important; } html body #kiat-reviewers .kiat-reviewer-links a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 30px !important; margin: 0 !important; padding: 6px 9px !important; color: var(--kr-primary-dark) !important; background: #f4f8f9 !important; border: 1px solid #dce8eb !important; border-radius: 5px !important; box-shadow: none !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.2 !important; text-decoration: none !important; white-space: normal !important; overflow-wrap: anywhere !important; transition: color .2s ease, background .2s ease, border-color .2s ease !important; } html body #kiat-reviewers .kiat-reviewer-links a:hover, html body #kiat-reviewers .kiat-reviewer-links a:focus-visible { color: #ffffff !important; background: var(--kr-primary) !important; border-color: var(--kr-primary) !important; text-decoration: none !important; outline: 2px solid var(--kr-gold) !important; outline-offset: 2px !important; } /* Tablet */ @media screen and (max-width: 900px) { html body #kiat-reviewers .kiat-reviewers-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 16px !important; } html body #kiat-reviewers .kiat-reviewer-card { padding: 18px !important; } } /* Mobile */ @media screen and (max-width: 600px) { html body #kiat-reviewers { padding: 14px 0 28px !important; } html body #kiat-reviewers .kiat-reviewers-header { margin-bottom: 20px !important; padding-bottom: 16px !important; } html body #kiat-reviewers .kiat-reviewer-card { gap: 12px !important; padding: 14px !important; border-radius: 11px !important; } html body #kiat-reviewers .kiat-reviewer-photo { flex-basis: 76px !important; width: 76px !important; min-width: 76px !important; height: 96px !important; min-height: 96px !important; } html body #kiat-reviewers .kiat-reviewer-photo span { width: 48px !important; height: 48px !important; font-size: 19px !important; } html body #kiat-reviewers .kiat-reviewer-content h3 { font-size: 16px !important; } html body #kiat-reviewers .kiat-reviewer-affiliation { font-size: 12px !important; } html body #kiat-reviewers .kiat-reviewer-links { gap: 6px !important; } html body #kiat-reviewers .kiat-reviewer-links a { min-height: 28px !important; padding: 5px 7px !important; font-size: 10px !important; } } /* Very narrow mobile screens */ @media screen and (max-width: 380px) { html body #kiat-reviewers .kiat-reviewer-card { display: block !important; } html body #kiat-reviewers .kiat-reviewer-photo { margin: 0 0 12px !important; } } /* Accessibility */ @media (prefers-reduced-motion: reduce) { html body #kiat-reviewers *, html body #kiat-reviewers *::before, html body #kiat-reviewers *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } html body #kiat-reviewers .kiat-reviewer-card:hover { transform: none !important; } } /* End KIAT dedicated reviewers page styles */ /* ========================================================== KIAT COLOR ALIGNMENT PATCH Preserve existing layout/style; harmonize colors with the supplied website sidebar reference: deep navy + gold. Scoped to reviewer cards and existing sidebar components. ========================================================== */ :root { --kiat-navy: #082b43; --kiat-navy-deep: #032238; --kiat-gold: #d2a13b; --kiat-gold-light: #f5d58b; --kiat-border: #cbd6df; --kiat-shadow: rgba(8, 43, 67, .12); } /* Existing sidebar section heading: keep shape and spacing */ .sidebar-title { background: linear-gradient(115deg, var(--kiat-navy-deep) 0%, var(--kiat-navy) 100%) !important; color: var(--kiat-gold-light) !important; border: 1px solid var(--kiat-gold) !important; box-shadow: 0 8px 18px var(--kiat-shadow) !important; } /* Sidebar menu cards: retain current rounded-card style */ .content .gap-2 .m-menu { background: #ffffff !important; border: 1px solid var(--kiat-border) !important; border-left: 4px solid var(--kiat-gold) !important; color: var(--kiat-navy) !important; box-shadow: 0 3px 10px rgba(8, 43, 67, .07) !important; } .content .gap-2 .m-menu span { color: var(--kiat-navy) !important; } .content .gap-2 .m-menu em, .content .gap-2 .m-menu::after { color: var(--kiat-gold) !important; } .content .gap-2 .m-menu::before { background: linear-gradient(90deg, var(--kiat-navy-deep) 0%, var(--kiat-navy) 100%) !important; } .content .gap-2 .m-menu:hover { color: #ffffff !important; border-color: var(--kiat-gold) !important; box-shadow: 0 8px 18px rgba(8, 43, 67, .16) !important; } .content .gap-2 .m-menu:hover span, .content .gap-2 .m-menu:hover em, .content .gap-2 .m-menu:hover::after { color: #ffffff !important; } /* Header/navigation: align the green/orange legacy rules to KIAT */ .pkp_navigation_user > li > a, .pkp_navigation_primary > li > a, .pkp_search a, .pkp_search button, .pkp_search .search_prompt { color: var(--kiat-navy) !important; -webkit-text-fill-color: var(--kiat-navy) !important; } .pkp_navigation_user > li > a:hover, .pkp_navigation_primary > li > a:hover, .pkp_navigation_primary > li > a:focus, .pkp_search a:hover, .pkp_search button:hover, .pkp_search .search_prompt:hover { color: var(--kiat-gold) !important; -webkit-text-fill-color: var(--kiat-gold) !important; } .pkp_navigation_primary > li > a::before, .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, .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a::before { color: var(--kiat-gold) !important; -webkit-text-fill-color: var(--kiat-gold) !important; } .pkp_navigation_primary > li > a:hover, .pkp_navigation_primary > li > a:focus, .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: #f5f8fa !important; } .pkp_navigation_primary .dropdown-menu { border-color: var(--kiat-border) !important; box-shadow: 0 10px 24px rgba(8, 43, 67, .14) !important; } .pkp_navigation_primary .dropdown-menu > li > a, .pkp_navigation_primary .dropdown-menu > li > a *, .pkp_navigation_primary .dropdown-menu a { color: var(--kiat-navy) !important; -webkit-text-fill-color: var(--kiat-navy) !important; } .pkp_navigation_primary .dropdown-menu > li > a:hover, .pkp_navigation_primary .dropdown-menu > li > a:focus { background: #fff8e7 !important; color: var(--kiat-navy-deep) !important; -webkit-text-fill-color: var(--kiat-navy-deep) !important; } /* Reviewer cards — retain card geometry, update palette only */ html body #kiat-reviewers { --kr-primary: var(--kiat-navy); --kr-primary-dark: var(--kiat-navy-deep); --kr-gold: var(--kiat-gold); --kr-text: #263746; --kr-muted: #627382; --kr-border: var(--kiat-border); } html body #kiat-reviewers .kiat-reviewers-header { border-bottom-color: var(--kiat-gold) !important; } html body #kiat-reviewers .kiat-reviewers-eyebrow { color: var(--kiat-gold) !important; } html body #kiat-reviewers .kiat-reviewers-header h2, html body #kiat-reviewers .kiat-reviewer-content h3 { color: var(--kiat-navy) !important; } html body #kiat-reviewers .kiat-reviewer-card { border-top-color: var(--kiat-gold) !important; box-shadow: 0 5px 18px rgba(8, 43, 67, .07) !important; } html body #kiat-reviewers .kiat-reviewer-card:hover { border-top-color: var(--kiat-navy) !important; box-shadow: 0 10px 26px rgba(8, 43, 67, .13) !important; } html body #kiat-reviewers .kiat-reviewer-photo { background: linear-gradient(145deg, var(--kiat-navy-deep), var(--kiat-navy)) !important; border-color: #e7edf1 !important; } html body #kiat-reviewers .kiat-reviewer-photo span { color: var(--kiat-navy-deep) !important; background: var(--kiat-gold) !important; } html body #kiat-reviewers .kiat-reviewer-label { color: var(--kiat-navy) !important; background: #f6f8fa !important; border-left-color: var(--kiat-gold) !important; } html body #kiat-reviewers .kiat-reviewer-links a { color: var(--kiat-navy) !important; background: #f7f9fb !important; border-color: var(--kiat-border) !important; } html body #kiat-reviewers .kiat-reviewer-links a:hover, html body #kiat-reviewers .kiat-reviewer-links a:focus-visible { color: #ffffff !important; background: var(--kiat-navy) !important; border-color: var(--kiat-gold) !important; outline-color: var(--kiat-gold) !important; } /* End KIAT color alignment patch */ /* ========================================================== KIAT REVIEWER CARDS — COUNTRY LABEL & CARD ALIGNMENT Preserve the existing card design and navy-gold palette. ========================================================== */ /* Compact country label: use plain text such as Indonesia/Malaysia */ html body #kiat-reviewers .kiat-reviewer-country { display: table !important; width: auto !important; max-width: 100% !important; margin: 8px 0 12px !important; padding: 4px 9px !important; color: #082b43 !important; background: #f5f3ed !important; border-left: 3px solid #d2a13b !important; border-radius: 4px !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.4 !important; box-sizing: border-box !important; } /* Ensure country label does not inherit paragraph spacing */ html body #kiat-reviewers .kiat-reviewer-content .kiat-reviewer-country { text-align: left !important; letter-spacing: .1px !important; } /* Keep affiliation readable and separate from the country label */ html body #kiat-reviewers .kiat-reviewer-affiliation { margin-top: 0 !important; margin-bottom: 6px !important; line-height: 1.6 !important; } /* Let profile content shrink properly beside the photo */ html body #kiat-reviewers .kiat-reviewer-content { min-width: 0 !important; overflow-wrap: anywhere; } /* Consistent spacing and wrapping for Scopus/ORCID/Scholar/SINTA links */ html body #kiat-reviewers .kiat-reviewer-links { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 7px !important; } /* Avoid buttons stretching oddly when the links wrap */ html body #kiat-reviewers .kiat-reviewer-links a { flex: 0 0 auto; } /* Mobile: keep country label and buttons comfortably readable */ @media (max-width: 600px) { html body #kiat-reviewers .kiat-reviewer-country { margin: 7px 0 10px !important; font-size: 11px !important; } html body #kiat-reviewers .kiat-reviewer-links { gap: 6px !important; } } /* End KIAT reviewer country/card refinement */ /* ========================================================== KIAT — INTERNATIONAL REVIEWER NETWORK Country summary section placed above reviewer cards. Palette aligned with the KIAT navy and gold design. Required HTML wrapper: #kiat-reviewer-countries ========================================================== */ html body #kiat-reviewer-countries { --kiat-network-navy: #082B43; --kiat-network-navy-deep: #061F31; --kiat-network-gold: #D2A13B; --kiat-network-gold-light: #F4E7C5; --kiat-network-text: #263746; --kiat-network-muted: #687887; width: 100%; max-width: 100%; margin: 0 auto 30px !important; padding: 28px 26px 26px !important; box-sizing: border-box !important; background: linear-gradient(135deg, #FFFFFF 0%, #F8FAFC 100%) !important; border: 1px solid #E4EAF0 !important; border-top: 4px solid var(--kiat-network-gold) !important; border-radius: 12px !important; box-shadow: 0 8px 24px rgba(8, 43, 67, 0.07) !important; color: var(--kiat-network-text) !important; font-family: Arial, Helvetica, sans-serif !important; } html body #kiat-reviewer-countries *, html body #kiat-reviewer-countries *::before, html body #kiat-reviewer-countries *::after { box-sizing: border-box !important; } html body #kiat-reviewer-countries .kiat-network-heading { margin: 0 0 10px !important; color: var(--kiat-network-navy) !important; font-size: clamp(22px, 3vw, 30px) !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: -0.35px !important; } html body #kiat-reviewer-countries .kiat-network-description { max-width: 820px; margin: 0 0 22px !important; color: var(--kiat-network-muted) !important; font-size: 14px !important; line-height: 1.75 !important; } html body #kiat-reviewer-countries .kiat-network-stats { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; margin: 0 0 20px !important; } html body #kiat-reviewer-countries .kiat-network-stat { min-width: 0 !important; padding: 17px 18px !important; background: #FFFFFF !important; border: 1px solid #E5EAF0 !important; border-left: 4px solid var(--kiat-network-gold) !important; border-radius: 9px !important; box-shadow: 0 4px 12px rgba(8, 43, 67, 0.045) !important; } html body #kiat-reviewer-countries .kiat-network-stat-number { display: block !important; margin: 0 0 4px !important; color: var(--kiat-network-navy) !important; font-size: 30px !important; font-weight: 800 !important; line-height: 1.1 !important; } html body #kiat-reviewer-countries .kiat-network-stat-label { display: block !important; color: var(--kiat-network-muted) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.5 !important; letter-spacing: .65px !important; text-transform: uppercase !important; } html body #kiat-reviewer-countries .kiat-network-country-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; margin: 0 !important; } html body #kiat-reviewer-countries .kiat-network-country { display: flex !important; align-items: center !important; gap: 15px !important; min-width: 0 !important; padding: 16px !important; background: #FFFFFF !important; border: 1px solid #E4EAF0 !important; border-radius: 10px !important; box-shadow: 0 4px 14px rgba(8, 43, 67, 0.05) !important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease !important; } html body #kiat-reviewer-countries .kiat-network-country:hover { transform: translateY(-3px) !important; border-color: var(--kiat-network-gold) !important; box-shadow: 0 10px 22px rgba(8, 43, 67, 0.10) !important; } html body #kiat-reviewer-countries .kiat-network-flag { display: block !important; flex: 0 0 58px !important; width: 58px !important; height: auto !important; max-height: 42px !important; object-fit: cover !important; margin: 0 !important; border: 1px solid rgba(8, 43, 67, 0.12) !important; border-radius: 4px !important; box-shadow: 0 2px 6px rgba(8, 43, 67, 0.10) !important; transform: none !important; } html body #kiat-reviewer-countries .kiat-network-country-name { display: block !important; margin: 0 0 4px !important; color: var(--kiat-network-navy) !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.35 !important; } html body #kiat-reviewer-countries .kiat-network-country-count { display: block !important; margin: 0 !important; color: var(--kiat-network-muted) !important; font-size: 13px !important; line-height: 1.5 !important; } html body #kiat-reviewer-countries .kiat-network-country-count strong { color: var(--kiat-network-navy) !important; font-weight: 800 !important; } html body #kiat-reviewer-countries .kiat-network-note { margin: 16px 0 0 !important; padding-top: 12px !important; border-top: 1px solid #E5EAF0 !important; color: #71808D !important; font-size: 11px !important; line-height: 1.6 !important; } /* Tablet and mobile layout */ @media (max-width: 700px) { html body #kiat-reviewer-countries { padding: 22px 18px !important; margin-bottom: 24px !important; } html body #kiat-reviewer-countries .kiat-network-stats, html body #kiat-reviewer-countries .kiat-network-country-grid { grid-template-columns: 1fr !important; } html body #kiat-reviewer-countries .kiat-network-stat { padding: 14px 16px !important; } html body #kiat-reviewer-countries .kiat-network-stat-number { font-size: 27px !important; } } @media (max-width: 420px) { html body #kiat-reviewer-countries { padding: 18px 13px !important; border-radius: 9px !important; } html body #kiat-reviewer-countries .kiat-network-heading { font-size: 22px !important; } html body #kiat-reviewer-countries .kiat-network-description { font-size: 13px !important; } html body #kiat-reviewer-countries .kiat-network-country { gap: 12px !important; padding: 13px !important; } html body #kiat-reviewer-countries .kiat-network-flag { flex-basis: 48px !important; width: 48px !important; } } /* End KIAT International Reviewer Network */ /* ========================================================== KIAT PEER REVIEWERS — FINAL COMPATIBILITY OVERRIDE For the HTML using: #kiat-reviewer-countries, .kiat-country-heading, .kiat-country-list, .kiat-country-item, .kiat-country-info, #kiat-reviewers, .kiat-reviewers-grid, .kiat-reviewer-card, .kiat-reviewer-photo, .kiat-reviewer-content, .kiat-reviewer-links. Scoped rules only; existing OJS header and navigation preserved. ========================================================== */ html body #kiat-reviewer-countries, html body #kiat-reviewers { --kiat-peer-navy: #092B43; --kiat-peer-navy-deep: #061E30; --kiat-peer-gold: #D5A63C; --kiat-peer-gold-pale: #F8F1DF; --kiat-peer-text: #273746; --kiat-peer-muted: #687887; width: 100% !important; max-width: 1180px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; font-family: Arial, Helvetica, sans-serif !important; color: var(--kiat-peer-text) !important; } html body #kiat-reviewer-countries *, html body #kiat-reviewers *, html body #kiat-reviewer-countries *::before, html body #kiat-reviewers *::before, html body #kiat-reviewer-countries *::after, html body #kiat-reviewers *::after { box-sizing: border-box !important; } /* Country summary panel */ html body #kiat-reviewer-countries { margin-top: 20px !important; margin-bottom: 30px !important; padding: 28px !important; background: linear-gradient(135deg, #FFFFFF 0%, #F7F9FB 100%) !important; border: 1px solid #E2E8EE !important; border-top: 4px solid var(--kiat-peer-gold) !important; border-radius: 14px !important; box-shadow: 0 8px 24px rgba(9, 43, 67, .07) !important; } html body #kiat-reviewer-countries .kiat-country-heading { margin: 0 0 22px !important; padding: 0 0 18px !important; border-bottom: 1px solid #E3E8ED !important; text-align: left !important; } html body #kiat-reviewer-countries .kiat-country-eyebrow { display: inline-block !important; margin: 0 0 9px !important; color: #98701D !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 1.5px !important; line-height: 1.5 !important; } html body #kiat-reviewer-countries .kiat-country-heading h2 { margin: 0 0 9px !important; color: var(--kiat-peer-navy) !important; font-size: clamp(23px, 3vw, 31px) !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: -.35px !important; } html body #kiat-reviewer-countries .kiat-country-heading p { max-width: 820px !important; margin: 0 !important; color: var(--kiat-peer-muted) !important; font-size: 14px !important; line-height: 1.75 !important; } html body #kiat-reviewer-countries .kiat-country-list { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 16px !important; margin: 0 !important; padding: 0 !important; } html body #kiat-reviewer-countries .kiat-country-item { display: flex !important; align-items: center !important; gap: 16px !important; min-width: 0 !important; margin: 0 !important; padding: 17px 18px !important; background: #FFFFFF !important; border: 1px solid #E2E8EE !important; border-left: 4px solid var(--kiat-peer-gold) !important; border-radius: 11px !important; box-shadow: 0 4px 14px rgba(9, 43, 67, .045) !important; transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease !important; } html body #kiat-reviewer-countries .kiat-country-item:hover { border-color: #D5A63C !important; box-shadow: 0 8px 20px rgba(9, 43, 67, .09) !important; transform: translateY(-2px) !important; } html body #kiat-reviewer-countries .kiat-country-item img { display: block !important; flex: 0 0 48px !important; width: 48px !important; height: 32px !important; max-width: 48px !important; object-fit: cover !important; margin: 0 !important; border: 1px solid #DDE3E8 !important; border-radius: 4px !important; box-shadow: 0 2px 5px rgba(0, 0, 0, .08) !important; transform: none !important; } html body #kiat-reviewer-countries .kiat-country-info { display: flex !important; flex-direction: column !important; gap: 4px !important; min-width: 0 !important; } html body #kiat-reviewer-countries .kiat-country-info strong { color: var(--kiat-peer-navy) !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.35 !important; } html body #kiat-reviewer-countries .kiat-country-info span { color: var(--kiat-peer-muted) !important; font-size: 13px !important; line-height: 1.5 !important; } /* Reviewer section heading and card grid */ html body #kiat-reviewers { margin-top: 28px !important; margin-bottom: 35px !important; padding: 0 !important; } html body #kiat-reviewers > h1, html body #kiat-reviewers > h2, html body #kiat-reviewers .kiat-reviewers-heading { color: var(--kiat-peer-navy) !important; font-size: clamp(23px, 3vw, 30px) !important; font-weight: 800 !important; line-height: 1.3 !important; margin: 0 0 18px !important; padding: 0 0 12px !important; border-bottom: 3px solid var(--kiat-peer-gold) !important; } html body #kiat-reviewers .kiat-reviewers-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 20px !important; width: 100% !important; max-width: 100% !important; margin: 20px 0 0 !important; padding: 0 !important; min-width: 0 !important; align-items: stretch !important; } /* Individual reviewer cards */ html body #kiat-reviewers .kiat-reviewer-card { display: flex !important; align-items: flex-start !important; gap: 17px !important; min-width: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 21px !important; background: #FFFFFF !important; border: 1px solid #E1E7ED !important; border-top: 4px solid var(--kiat-peer-gold) !important; border-radius: 13px !important; box-shadow: 0 5px 18px rgba(9, 43, 67, .065) !important; overflow: hidden !important; color: var(--kiat-peer-text) !important; transition: box-shadow .22s ease, border-color .22s ease, transform .22s ease !important; } html body #kiat-reviewers .kiat-reviewer-card:hover { border-color: #D5A63C !important; box-shadow: 0 10px 26px rgba(9, 43, 67, .12) !important; transform: translateY(-3px) !important; } /* Preserve original photos; style only their display */ html body #kiat-reviewers .kiat-reviewer-photo { display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 94px !important; width: 94px !important; min-width: 94px !important; min-height: 94px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; background: var(--kiat-peer-gold-pale) !important; border: 1px solid #E6D7AF !important; border-radius: 10px !important; color: var(--kiat-peer-navy) !important; font-size: 25px !important; font-weight: 800 !important; line-height: 1 !important; } html body #kiat-reviewers .kiat-reviewer-photo img { display: block !important; width: 94px !important; height: 94px !important; max-width: 94px !important; max-height: 94px !important; margin: 0 !important; object-fit: cover !important; object-position: center top !important; border: 0 !important; border-radius: 9px !important; box-shadow: none !important; transform: none !important; } html body #kiat-reviewers .kiat-reviewer-content { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; } html body #kiat-reviewers .kiat-reviewer-content h3, html body #kiat-reviewers .kiat-reviewer-content h4, html body #kiat-reviewers .kiat-reviewer-name { margin: 0 0 7px !important; color: var(--kiat-peer-navy) !important; font-size: 17px !important; font-weight: 800 !important; line-height: 1.4 !important; overflow-wrap: anywhere !important; } html body #kiat-reviewers .kiat-reviewer-content p { margin: 0 0 11px !important; color: var(--kiat-peer-muted) !important; font-size: 13px !important; line-height: 1.65 !important; overflow-wrap: anywhere !important; } html body #kiat-reviewers .kiat-reviewer-links { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 7px !important; margin: 10px 0 0 !important; padding: 0 !important; } html body #kiat-reviewers .kiat-reviewer-links a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 30px !important; margin: 0 !important; padding: 6px 10px !important; background: #F5F8FA !important; border: 1px solid #DCE4EA !important; border-radius: 6px !important; color: var(--kiat-peer-navy) !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.3 !important; text-decoration: none !important; transition: background .2s ease, border-color .2s ease, color .2s ease !important; } html body #kiat-reviewers .kiat-reviewer-links a:hover { background: var(--kiat-peer-navy) !important; border-color: var(--kiat-peer-navy) !important; color: #FFFFFF !important; transform: none !important; } /* Tablet */ @media (max-width: 900px) { html body #kiat-reviewers .kiat-reviewers-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 15px !important; } html body #kiat-reviewers .kiat-reviewer-card { gap: 13px !important; padding: 16px !important; } html body #kiat-reviewers .kiat-reviewer-photo, html body #kiat-reviewers .kiat-reviewer-photo img { flex-basis: 76px !important; width: 76px !important; min-width: 76px !important; min-height: 76px !important; height: 76px !important; max-width: 76px !important; max-height: 76px !important; } } /* Mobile */ @media (max-width: 650px) { html body #kiat-reviewer-countries { padding: 21px 17px !important; margin-bottom: 24px !important; } html body #kiat-reviewer-countries .kiat-country-list { grid-template-columns: 1fr !important; gap: 11px !important; } html body #kiat-reviewers .kiat-reviewers-grid { grid-template-columns: minmax(0, 1fr) !important; gap: 14px !important; } html body #kiat-reviewers .kiat-reviewer-card { padding: 17px !important; } } @media (max-width: 420px) { html body #kiat-reviewer-countries { padding: 18px 13px !important; border-radius: 10px !important; } html body #kiat-reviewer-countries .kiat-country-item { gap: 12px !important; padding: 14px !important; } html body #kiat-reviewers .kiat-reviewer-card { gap: 12px !important; padding: 14px !important; } html body #kiat-reviewers .kiat-reviewer-photo, html body #kiat-reviewers .kiat-reviewer-photo img { flex-basis: 66px !important; width: 66px !important; min-width: 66px !important; min-height: 66px !important; height: 66px !important; max-width: 66px !important; max-height: 66px !important; } html body #kiat-reviewers .kiat-reviewer-content h3, html body #kiat-reviewers .kiat-reviewer-content h4, html body #kiat-reviewers .kiat-reviewer-name { font-size: 15px !important; } html body #kiat-reviewers .kiat-reviewer-links a { min-height: 28px !important; padding: 5px 8px !important; font-size: 10px !important; } } /* Respect reduced-motion preferences */ @media (prefers-reduced-motion: reduce) { html body #kiat-reviewer-countries *, html body #kiat-reviewers * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } } /* End KIAT Peer Reviewers final compatibility override */ /* ============================================================ KIAT EDITORIAL TEAM + COUNTRY NETWORK Added without modifying the existing Peer Reviewers CSS ============================================================ */ /* ===================================================== KIAT EDITORIAL TEAM + COUNTRY NETWORK Navy & Gold | OJS 3.3.0-20 ===================================================== */ html body #kiat-editorial-team { --editorial-navy: #092B43; --editorial-navy-light: #123F5B; --editorial-gold: #D5A63C; --editorial-gold-light: #F8F0D9; --editorial-text: #344657; --editorial-muted: #6B7B89; --editorial-border: #E3E9EE; width: 100%; max-width: 1120px; margin: 0 auto; color: var(--editorial-text); font-family: inherit; line-height: 1.65; box-sizing: border-box; } html body #kiat-editorial-team *, html body #kiat-editorial-team *::before, html body #kiat-editorial-team *::after { box-sizing: border-box; } /* Country network — matching reviewer page */ html body #kiat-editorial-countries { margin: 0 0 30px; } html body #kiat-editorial-countries .kiat-editorial-country-heading { padding: 26px 22px 22px; margin-bottom: 18px; text-align: center; background: linear-gradient(135deg, #092B43, #123F5B); border-bottom: 4px solid #D5A63C; border-radius: 14px; } html body #kiat-editorial-countries .kiat-editorial-country-eyebrow { display: inline-block; margin-bottom: 7px; color: #F1D58A; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; } html body #kiat-editorial-countries .kiat-editorial-country-heading h2 { margin: 0 0 9px; color: #FFFFFF !important; font-size: clamp(24px, 3vw, 32px); line-height: 1.25; font-weight: 800; } html body #kiat-editorial-countries .kiat-editorial-country-heading p { max-width: 720px; margin: 0 auto; color: #E3EDF3; font-size: 14px; } html body #kiat-editorial-countries .kiat-editorial-country-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } html body #kiat-editorial-countries .kiat-editorial-country-item { display: flex; align-items: center; gap: 13px; min-width: 0; padding: 16px; background: #FFFFFF; border: 1px solid #E3E9EE; border-radius: 10px; box-shadow: 0 4px 14px rgba(9, 43, 67, .06); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } html body #kiat-editorial-countries .kiat-editorial-country-item:hover { transform: translateY(-3px); border-color: #D5A63C; box-shadow: 0 8px 20px rgba(9, 43, 67, .10); } html body #kiat-editorial-countries .kiat-editorial-country-item img { display: block; flex: 0 0 42px; width: 42px !important; height: 28px !important; max-width: 42px !important; object-fit: cover; margin: 0; border: 1px solid #E3E9EE; border-radius: 3px; box-shadow: none; transform: none !important; } html body #kiat-editorial-countries .kiat-editorial-country-info { min-width: 0; } html body #kiat-editorial-countries .kiat-editorial-country-info strong { display: block; margin: 0 0 2px; color: #092B43; font-size: 14px; font-weight: 800; } html body #kiat-editorial-countries .kiat-editorial-country-info span { display: block; color: #6B7B89; font-size: 12px; } /* Page heading */ html body #kiat-editorial-team .kiat-editorial-heading { text-align: center; margin: 0 auto 32px; padding: 28px 22px 26px; border-radius: 14px; background: linear-gradient(135deg, #092B43, #123F5B); border-bottom: 4px solid #D5A63C; } html body #kiat-editorial-team .kiat-editorial-eyebrow { display: inline-block; margin-bottom: 8px; color: #F1D58A; font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; } html body #kiat-editorial-team .kiat-editorial-heading h2 { margin: 0 0 10px; color: #FFFFFF !important; font-size: clamp(25px, 3vw, 34px); line-height: 1.25; font-weight: 800; } html body #kiat-editorial-team .kiat-editorial-heading p { max-width: 720px; margin: 0 auto; color: #E3EDF3; font-size: 14px; } /* Leadership cards */ html body #kiat-editorial-team .kiat-editorial-leadership { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; margin-bottom: 42px; } html body #kiat-editorial-team .kiat-editorial-card { position: relative; padding: 26px 25px 23px; overflow: hidden; background: #FFFFFF; border: 1px solid #E3E9EE; border-radius: 13px; box-shadow: 0 5px 18px rgba(9, 43, 67, .07); transition: transform .25s ease, box-shadow .25s ease; } html body #kiat-editorial-team .kiat-editorial-card::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 5px; background: #D5A63C; } html body #kiat-editorial-team .kiat-editorial-card:hover { transform: translateY(-4px); box-shadow: 0 12px 28px rgba(9, 43, 67, .12); } html body #kiat-editorial-team .kiat-editorial-role { display: inline-block; margin-bottom: 13px; padding: 5px 10px; color: #092B43; background: #F8F0D9; border-radius: 4px; font-size: 10px; font-weight: 800; letter-spacing: 1px; } html body #kiat-editorial-team .kiat-editorial-card h3 { margin: 0 0 7px; color: #092B43 !important; font-size: 23px; line-height: 1.35; } html body #kiat-editorial-team .kiat-editorial-card h3 a { color: #092B43 !important; text-decoration: none; } html body #kiat-editorial-team .kiat-editorial-card h3 a:hover { color: #9A7018 !important; } html body #kiat-editorial-team .kiat-editorial-affiliation { margin: 0 0 17px; color: #6B7B89; font-size: 14px; } html body #kiat-editorial-team .kiat-editorial-profile { display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; color: #FFFFFF !important; background: #092B43; border: 1px solid #092B43; border-radius: 6px; font-size: 12px; font-weight: 700; text-decoration: none !important; transition: background .2s ease, color .2s ease; } html body #kiat-editorial-team .kiat-editorial-profile:hover { color: #092B43 !important; background: #F8F0D9; border-color: #D5A63C; } /* Editorial members section */ html body #kiat-editorial-team .kiat-editorial-section-heading { margin-bottom: 20px; padding-bottom: 13px; border-bottom: 2px solid #E3E9EE; position: relative; } html body #kiat-editorial-team .kiat-editorial-section-heading::after { content: ""; position: absolute; bottom: -2px; left: 0; width: 90px; height: 3px; background: #D5A63C; } html body #kiat-editorial-team .kiat-editorial-section-heading h3 { margin: 0 0 5px; color: #092B43 !important; font-size: 25px; font-weight: 800; } html body #kiat-editorial-team .kiat-editorial-section-heading p { margin: 0; color: #6B7B89; font-size: 13px; } /* Member grid */ html body #kiat-editorial-team .kiat-editorial-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } html body #kiat-editorial-team .kiat-editorial-member { display: flex; align-items: flex-start; gap: 14px; min-width: 0; padding: 18px 17px; background: #FFFFFF; border: 1px solid #E3E9EE; border-radius: 10px; box-shadow: 0 3px 11px rgba(9, 43, 67, .045); transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease; } html body #kiat-editorial-team .kiat-editorial-member:hover { transform: translateY(-3px); border-color: #D5A63C; box-shadow: 0 8px 20px rgba(9, 43, 67, .09); } html body #kiat-editorial-team .kiat-editorial-number { display: flex; align-items: center; justify-content: center; flex: 0 0 38px; width: 38px; height: 38px; color: #092B43; background: #F8F0D9; border: 1px solid #EAD9A8; border-radius: 8px; font-size: 12px; font-weight: 800; } html body #kiat-editorial-team .kiat-editorial-member-info { min-width: 0; flex: 1; } html body #kiat-editorial-team .kiat-editorial-member h4 { margin: 0 0 5px; color: #092B43 !important; font-size: 15px; line-height: 1.45; font-weight: 800; overflow-wrap: anywhere; } html body #kiat-editorial-team .kiat-editorial-member h4 a { color: #092B43 !important; text-decoration: none !important; } html body #kiat-editorial-team .kiat-editorial-member h4 a:hover { color: #9A7018 !important; text-decoration: underline !important; } html body #kiat-editorial-team .kiat-editorial-member p { margin: 0 0 9px; color: #6B7B89; font-size: 12px; line-height: 1.55; } html body #kiat-editorial-team .kiat-editorial-scopus { display: inline-block; color: #8A6517 !important; font-size: 11px; font-weight: 800; text-decoration: none !important; } html body #kiat-editorial-team .kiat-editorial-scopus:hover { color: #092B43 !important; text-decoration: underline !important; } /* Responsive */ @media (max-width: 850px) { html body #kiat-editorial-countries .kiat-editorial-country-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } html body #kiat-editorial-team .kiat-editorial-grid { grid-template-columns: 1fr; } html body #kiat-editorial-team .kiat-editorial-card { padding: 23px 20px; } } @media (max-width: 600px) { html body #kiat-editorial-countries .kiat-editorial-country-list { grid-template-columns: 1fr; } html body #kiat-editorial-countries .kiat-editorial-country-heading { padding: 23px 16px; } html body #kiat-editorial-team .kiat-editorial-heading { padding: 23px 16px; margin-bottom: 22px; } html body #kiat-editorial-team .kiat-editorial-heading h2 { font-size: 25px; } html body #kiat-editorial-team .kiat-editorial-leadership { grid-template-columns: 1fr; gap: 15px; margin-bottom: 32px; } html body #kiat-editorial-team .kiat-editorial-card h3 { font-size: 20px; } html body #kiat-editorial-team .kiat-editorial-section-heading h3 { font-size: 22px; } html body #kiat-editorial-team .kiat-editorial-member { gap: 11px; padding: 15px 13px; } html body #kiat-editorial-team .kiat-editorial-number { flex-basis: 34px; width: 34px; height: 34px; } } @media (prefers-reduced-motion: reduce) { html body #kiat-editorial-team *, html body #kiat-editorial-team *::before, html body #kiat-editorial-team *::after, html body #kiat-editorial-countries *, html body #kiat-editorial-countries *::before, html body #kiat-editorial-countries *::after { transition: none !important; animation: none !important; } } /* Country tags on editorial member cards */ html body #kiat-editorial-team .kiat-editorial-country-tag { display: inline-block !important; margin: 0 7px 8px 0 !important; padding: 3px 8px !important; color: #092B43 !important; background: #F8F0D9 !important; border: 1px solid #EAD9A8 !important; border-radius: 4px !important; font-size: 10px !important; line-height: 1.5 !important; font-weight: 700 !important; vertical-align: middle !important; } /* Compatibility overrides for broad OJS/site-wide rules */ html body #kiat-editorial-countries img, html body #kiat-editorial-team img { transform: none !important; } html body #kiat-editorial-countries a, html body #kiat-editorial-team a { transition: background-color .2s ease, color .2s ease, border-color .2s ease !important; } @media (prefers-reduced-motion: reduce) { html body #kiat-editorial-team *, html body #kiat-editorial-team *::before, html body #kiat-editorial-team *::after, html body #kiat-editorial-countries *, html body #kiat-editorial-countries *::before, html body #kiat-editorial-countries *::after { transition: none !important; animation: none !important; } } /* End KIAT Editorial Team CSS */ /* ========================================================== KIAT EDITORIAL TEAM — PHOTO BOXES + PROFILE BUTTONS Scoped to Editorial Team only; reviewer styles unchanged. ========================================================== */ html body #kiat-editorial-team .kiat-editorial-card, html body #kiat-editorial-team .kiat-editorial-member { box-sizing: border-box !important; min-width: 0 !important; } /* Leadership cards: photo left, details right */ html body #kiat-editorial-team .kiat-editorial-card { display: flex !important; align-items: flex-start !important; gap: 20px !important; } html body #kiat-editorial-team .kiat-editorial-photo { display: flex !important; flex: 0 0 116px !important; align-items: center !important; justify-content: center !important; width: 116px !important; height: 142px !important; min-width: 116px !important; overflow: hidden !important; padding: 5px !important; background: #FFFFFF !important; border: 1px solid #EAD9A8 !important; border-radius: 12px !important; box-sizing: border-box !important; } html body #kiat-editorial-team .kiat-editorial-photo img { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: cover !important; object-position: center top !important; margin: 0 !important; border-radius: 8px !important; transform: none !important; } /* Text column */ html body #kiat-editorial-team .kiat-editorial-content, html body #kiat-editorial-team .kiat-editorial-member-info { flex: 1 1 auto !important; min-width: 0 !important; } /* Profile button row */ html body #kiat-editorial-team .kiat-editorial-links { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 8px !important; margin-top: 14px !important; } html body #kiat-editorial-team .kiat-editorial-links a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 34px !important; padding: 7px 11px !important; box-sizing: border-box !important; background: #F5F8FA !important; border: 1px solid #D6E1E9 !important; border-radius: 7px !important; color: #092B43 !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; text-decoration: none !important; overflow-wrap: anywhere !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease !important; } html body #kiat-editorial-team .kiat-editorial-links a:hover { background: #092B43 !important; border-color: #092B43 !important; color: #FFFFFF !important; } /* Country label */ html body #kiat-editorial-team .kiat-editorial-country { display: inline-block !important; margin: 5px 0 8px !important; padding: 5px 8px !important; background: #F7F5EF !important; border-left: 3px solid #D5A63C !important; border-radius: 4px !important; color: #56677B !important; font-size: 12px !important; line-height: 1.5 !important; } /* Member cards with smaller portrait boxes */ html body #kiat-editorial-team .kiat-editorial-member { position: relative !important; display: flex !important; align-items: flex-start !important; gap: 12px !important; padding: 18px 16px !important; } html body #kiat-editorial-team .kiat-editorial-member .kiat-editorial-photo { flex: 0 0 86px !important; width: 86px !important; height: 104px !important; min-width: 86px !important; } html body #kiat-editorial-team .kiat-editorial-member-info { flex: 1 1 150px !important; min-width: 0 !important; } html body #kiat-editorial-team .kiat-editorial-member-info .kiat-editorial-links { gap: 6px !important; margin-top: 10px !important; } html body #kiat-editorial-team .kiat-editorial-member-info .kiat-editorial-links a { min-height: 30px !important; padding: 6px 8px !important; font-size: 11px !important; } /* Responsive */ @media (max-width: 600px) { html body #kiat-editorial-team .kiat-editorial-card { gap: 12px !important; padding: 18px 14px !important; } html body #kiat-editorial-team .kiat-editorial-card .kiat-editorial-photo { flex-basis: 86px !important; width: 86px !important; height: 108px !important; min-width: 86px !important; } html body #kiat-editorial-team .kiat-editorial-links { gap: 6px !important; } html body #kiat-editorial-team .kiat-editorial-links a { min-height: 31px !important; padding: 6px 8px !important; font-size: 11px !important; } html body #kiat-editorial-team .kiat-editorial-member { gap: 10px !important; padding: 14px 12px !important; } } @media (prefers-reduced-motion: reduce) { html body #kiat-editorial-team .kiat-editorial-links a { transition: none !important; } } /* End additional Editorial Team photo and profile styles */ /* ========================================================== JURNAL EKONOMI KIAT — EDITORIAL TEAM COMPACT OVERRIDES Keep reviewer and site-wide styling unchanged. Palette: navy + gold ========================================================== */ html body #kiat-editorial-countries, html body #kiat-editorial-team { width: 100% !important; max-width: 1120px !important; margin-left: auto !important; margin-right: auto !important; box-sizing: border-box !important; } html body #kiat-editorial-team .kiat-editorial-heading, html body #kiat-editorial-countries .kiat-editorial-country-heading { margin-bottom: 16px !important; } html body #kiat-editorial-team .kiat-editorial-heading h2, html body #kiat-editorial-countries .kiat-editorial-country-heading h2 { color: #092B43 !important; font-size: 25px !important; line-height: 1.25 !important; margin: 5px 0 7px !important; } html body #kiat-editorial-team .kiat-editorial-heading p, html body #kiat-editorial-countries .kiat-editorial-country-heading p { margin: 5px 0 !important; line-height: 1.5 !important; } /* Compact country overview */ html body #kiat-editorial-countries .kiat-editorial-country-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 9px !important; } html body #kiat-editorial-countries .kiat-editorial-country-item { display: flex !important; align-items: center !important; gap: 10px !important; padding: 10px 12px !important; min-width: 0 !important; background: #FFFFFF !important; border: 1px solid #E7D8B0 !important; border-radius: 9px !important; } html body #kiat-editorial-countries .kiat-editorial-country-item img { width: 38px !important; height: 25px !important; flex: 0 0 38px !important; object-fit: cover !important; margin: 0 !important; border: 1px solid #E3E3E3 !important; } html body #kiat-editorial-countries .kiat-editorial-country-info { display: flex !important; flex-direction: column !important; gap: 2px !important; font-size: 11px !important; line-height: 1.35 !important; } html body #kiat-editorial-countries .kiat-editorial-country-info strong { color: #092B43 !important; font-size: 13px !important; } /* Leadership cards: compact horizontal layout */ html body #kiat-editorial-team .kiat-editorial-leadership { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; margin-bottom: 24px !important; } html body #kiat-editorial-team .kiat-editorial-card { display: flex !important; align-items: center !important; gap: 13px !important; min-width: 0 !important; padding: 12px !important; border: 1px solid #E7D8B0 !important; border-top: 3px solid #D5A63C !important; border-radius: 12px !important; background: #FFFFFF !important; box-shadow: 0 3px 12px rgba(9, 43, 67, .06) !important; } html body #kiat-editorial-team .kiat-editorial-photo { display: flex !important; flex: 0 0 92px !important; align-items: center !important; justify-content: center !important; width: 92px !important; height: 112px !important; min-width: 92px !important; overflow: hidden !important; padding: 4px !important; background: #FAF8F2 !important; border: 1px solid #E7D8B0 !important; border-radius: 10px !important; box-sizing: border-box !important; } html body #kiat-editorial-team .kiat-editorial-photo img { display: block !important; width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; object-fit: cover !important; object-position: center top !important; margin: 0 !important; border-radius: 7px !important; transform: none !important; } html body #kiat-editorial-team .kiat-editorial-content, html body #kiat-editorial-team .kiat-editorial-member-info { flex: 1 1 auto !important; min-width: 0 !important; } html body #kiat-editorial-team .kiat-editorial-role { display: inline-block !important; margin: 0 0 5px !important; padding: 4px 8px !important; color: #092B43 !important; background: #F8F0D9 !important; border-left: 3px solid #D5A63C !important; border-radius: 4px !important; font-size: 9px !important; line-height: 1.4 !important; font-weight: 800 !important; letter-spacing: .45px !important; } html body #kiat-editorial-team .kiat-editorial-content h3 { margin: 3px 0 5px !important; color: #092B43 !important; font-size: 19px !important; line-height: 1.25 !important; } html body #kiat-editorial-team .kiat-editorial-content h3 a, html body #kiat-editorial-team .kiat-editorial-member-info h4 a { color: #092B43 !important; text-decoration: none !important; } html body #kiat-editorial-team .kiat-editorial-affiliation, html body #kiat-editorial-team .kiat-editorial-member-info p { margin: 3px 0 5px !important; color: #596B7A !important; font-size: 12px !important; line-height: 1.4 !important; } html body #kiat-editorial-team .kiat-editorial-country { display: inline-block !important; margin: 2px 0 5px !important; padding: 3px 7px !important; color: #56677B !important; background: #F7F5EF !important; border-left: 3px solid #D5A63C !important; border-radius: 4px !important; font-size: 10px !important; line-height: 1.4 !important; } /* Compact, consistent profile buttons and icon badges */ html body #kiat-editorial-team .kiat-editorial-links { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 5px !important; margin-top: 7px !important; } html body #kiat-editorial-team .kiat-editorial-links a, html body #kiat-editorial-team .kiat-editorial-links .kiat-profile-link { display: inline-flex !important; align-items: center !important; justify-content: flex-start !important; gap: 5px !important; min-height: 29px !important; margin: 0 !important; padding: 4px 7px !important; box-sizing: border-box !important; color: #092B43 !important; background: #F5F8FA !important; border: 1px solid #D8E2EA !important; border-radius: 7px !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1.2 !important; text-decoration: none !important; white-space: nowrap !important; transition: background-color .2s ease, color .2s ease, border-color .2s ease !important; } html body #kiat-editorial-team .kiat-editorial-links a:hover { color: #FFFFFF !important; background: #092B43 !important; border-color: #092B43 !important; } html body #kiat-editorial-team .kiat-profile-icon { display: inline-flex !important; flex: 0 0 20px !important; align-items: center !important; justify-content: center !important; width: 20px !important; height: 20px !important; margin: 0 !important; padding: 0 !important; border-radius: 5px !important; font-size: 9px !important; line-height: 1 !important; font-weight: 800 !important; } html body #kiat-editorial-team .kiat-icon-scopus { color: #FFFFFF !important; background: #F58220 !important; } html body #kiat-editorial-team .kiat-icon-orcid { color: #FFFFFF !important; background: #A6CE39 !important; border-radius: 50% !important; } html body #kiat-editorial-team .kiat-icon-scholar { color: #FFFFFF !important; background: #4285F4 !important; } html body #kiat-editorial-team .kiat-icon-sinta { color: #FFFFFF !important; background: #0B5962 !important; } html body #kiat-editorial-team .kiat-profile-unavailable { opacity: .7 !important; cursor: default !important; } /* Editorial members: two compact columns */ html body #kiat-editorial-team .kiat-editorial-section { margin-top: 20px !important; } html body #kiat-editorial-team .kiat-editorial-section-heading { margin-bottom: 12px !important; } html body #kiat-editorial-team .kiat-editorial-section-heading h3 { margin: 0 0 4px !important; color: #092B43 !important; font-size: 20px !important; } html body #kiat-editorial-team .kiat-editorial-section-heading p { margin: 0 !important; font-size: 12px !important; line-height: 1.45 !important; } html body #kiat-editorial-team .kiat-editorial-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 11px !important; } html body #kiat-editorial-team .kiat-editorial-member { position: relative !important; display: flex !important; align-items: center !important; gap: 10px !important; min-width: 0 !important; padding: 13px 11px !important; background: #FFFFFF !important; border: 1px solid #E7D8B0 !important; border-radius: 10px !important; box-shadow: 0 2px 8px rgba(9, 43, 67, .04) !important; } html body #kiat-editorial-team .kiat-editorial-member .kiat-editorial-photo { flex: 0 0 66px !important; width: 66px !important; height: 82px !important; min-width: 66px !important; margin: 0 !important; } html body #kiat-editorial-team .kiat-editorial-number { position: absolute !important; top: 5px !important; left: 5px !important; z-index: 2 !important; padding: 2px 5px !important; color: #092B43 !important; background: #D5A63C !important; border-radius: 3px !important; font-size: 9px !important; line-height: 1.3 !important; font-weight: 800 !important; } html body #kiat-editorial-team .kiat-editorial-member-info h4 { margin: 0 0 4px !important; color: #092B43 !important; font-size: 14px !important; line-height: 1.3 !important; } html body #kiat-editorial-team .kiat-editorial-member-info .kiat-editorial-links { gap: 4px !important; margin-top: 6px !important; } html body #kiat-editorial-team .kiat-editorial-member-info .kiat-editorial-links a, html body #kiat-editorial-team .kiat-editorial-member-info .kiat-editorial-links .kiat-profile-link { min-height: 26px !important; padding: 3px 5px !important; gap: 4px !important; font-size: 9px !important; } html body #kiat-editorial-team .kiat-editorial-member-info .kiat-profile-icon { flex-basis: 17px !important; width: 17px !important; height: 17px !important; font-size: 8px !important; } /* Ensure editorial photos do not inherit global image hover effects */ html body #kiat-editorial-countries img, html body #kiat-editorial-team img { transform: none !important; } /* Tablet */ @media (max-width: 850px) { html body #kiat-editorial-countries .kiat-editorial-country-list { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } html body #kiat-editorial-team .kiat-editorial-leadership, html body #kiat-editorial-team .kiat-editorial-grid { grid-template-columns: minmax(0, 1fr) !important; } } /* Mobile */ @media (max-width: 480px) { html body #kiat-editorial-countries { padding: 14px !important; } html body #kiat-editorial-countries .kiat-editorial-country-list { grid-template-columns: minmax(0, 1fr) !important; } html body #kiat-editorial-team .kiat-editorial-card { align-items: flex-start !important; gap: 10px !important; padding: 10px !important; } html body #kiat-editorial-team .kiat-editorial-card .kiat-editorial-photo { flex-basis: 72px !important; width: 72px !important; height: 92px !important; min-width: 72px !important; } html body #kiat-editorial-team .kiat-editorial-content h3 { font-size: 16px !important; } html body #kiat-editorial-team .kiat-editorial-grid { grid-template-columns: minmax(0, 1fr) !important; } html body #kiat-editorial-team .kiat-editorial-member { gap: 9px !important; padding: 12px 9px !important; } html body #kiat-editorial-team .kiat-editorial-member .kiat-editorial-photo { flex-basis: 58px !important; width: 58px !important; height: 74px !important; min-width: 58px !important; } html body #kiat-editorial-team .kiat-editorial-member-info h4 { font-size: 13px !important; } html body #kiat-editorial-team .kiat-editorial-links { gap: 4px !important; } } @media (prefers-reduced-motion: reduce) { html body #kiat-editorial-team *, html body #kiat-editorial-team *::before, html body #kiat-editorial-team *::after, html body #kiat-editorial-countries *, html body #kiat-editorial-countries *::before, html body #kiat-editorial-countries *::after { transition: none !important; animation: none !important; } } /* END KIAT EDITORIAL TEAM COMPACT OVERRIDES */ /* ========================================================== KIAT PEER REVIEWERS — FULL PHOTO FIX Final override: prevent cropping and global hover zoom. Append at the very end of the stylesheet. ========================================================== */ html body #kiat-reviewers .kiat-reviewer-photo { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 126px !important; width: 126px !important; min-width: 126px !important; height: 166px !important; min-height: 166px !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; background: #F8F0D9 !important; } html body #kiat-reviewers .kiat-reviewer-photo 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; box-sizing: border-box !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; transform: none !important; } /* Keep full image visible even when the card is hovered */ html body #kiat-reviewers .kiat-reviewer-card:hover .kiat-reviewer-photo img, html body #kiat-reviewers .kiat-reviewer-photo img:hover, html body #kiat-reviewers .kiat-reviewer-photo:hover img { object-fit: contain !important; transform: none !important; box-shadow: none !important; } /* Neutralize global image hover rules only inside the reviewer section */ html body #kiat-reviewers img, html body #kiat-reviewers img:hover { transform: none !important; filter: none !important; box-shadow: none !important; } /* Responsive photo size */ @media (max-width: 900px) { html body #kiat-reviewers .kiat-reviewer-photo { flex: 0 0 104px !important; width: 104px !important; min-width: 104px !important; height: 136px !important; min-height: 136px !important; } } @media (max-width: 600px) { html body #kiat-reviewers .kiat-reviewer-card { align-items: flex-start !important; } html body #kiat-reviewers .kiat-reviewer-photo { flex: 0 0 82px !important; width: 82px !important; min-width: 82px !important; height: 108px !important; min-height: 108px !important; } } /* ========================================================== KIAT REVIEWERS — COMPACT EDITORIAL-STYLE PHOTO CARDS Final override: photo fills its frame with no blank area. ========================================================== */ html body #kiat-reviewers .kiat-reviewers-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 14px !important; align-items: stretch !important; } html body #kiat-reviewers .kiat-reviewer-card { display: flex !important; flex-direction: row !important; align-items: flex-start !important; gap: 13px !important; min-width: 0 !important; padding: 12px !important; border: 1px solid #EAD9A8 !important; border-top: 3px solid #D5A63C !important; border-radius: 13px !important; background: #FFFFFF !important; box-shadow: 0 4px 12px rgba(9, 43, 67, .05) !important; box-sizing: border-box !important; } html body #kiat-reviewers .kiat-reviewer-photo { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; flex: 0 0 88px !important; width: 88px !important; min-width: 88px !important; height: 108px !important; min-height: 108px !important; margin: 0 !important; padding: 0 !important; overflow: hidden !important; border: 1px solid #EAD9A8 !important; border-radius: 9px !important; background: #F8F0D9 !important; color: #092B43 !important; font-size: 18px !important; font-weight: 700 !important; box-sizing: border-box !important; } html body #kiat-reviewers .kiat-reviewer-photo img { 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; object-fit: cover !important; object-position: center top !important; border: 0 !important; border-radius: 8px !important; box-shadow: none !important; transform: none !important; } html body #kiat-reviewers .kiat-reviewer-content { flex: 1 1 auto !important; min-width: 0 !important; padding: 0 !important; margin: 0 !important; } html body #kiat-reviewers .kiat-reviewer-content h3 { margin: 1px 0 7px !important; font-size: 15px !important; line-height: 1.35 !important; overflow-wrap: anywhere !important; } html body #kiat-reviewers .kiat-reviewer-affiliation { margin: 0 0 8px !important; font-size: 12px !important; line-height: 1.5 !important; } html body #kiat-reviewers .kiat-reviewer-country { display: inline-block !important; margin: 0 0 8px !important; padding: 5px 8px !important; border-left: 3px solid #D5A63C !important; border-radius: 4px !important; background: #F7F5EF !important; font-size: 11px !important; line-height: 1.35 !important; } html body #kiat-reviewers .kiat-reviewer-label { display: inline-block !important; margin: 0 0 8px !important; padding: 4px 7px !important; border-left: 3px solid #D5A63C !important; background: #F7F9FA !important; color: #092B43 !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: .5px !important; } html body #kiat-reviewers .kiat-reviewer-links { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 5px !important; margin: 2px 0 0 !important; } html body #kiat-reviewers .kiat-reviewer-links a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 28px !important; margin: 0 !important; padding: 5px 8px !important; border: 1px solid #DCE5EB !important; border-radius: 7px !important; background: #F5F8FA !important; color: #092B43 !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1.2 !important; text-decoration: none !important; box-sizing: border-box !important; } html body #kiat-reviewers .kiat-reviewer-links a:hover { background: #F8F0D9 !important; border-color: #D5A63C !important; color: #092B43 !important; } html body #kiat-reviewers .kiat-reviewer-card:hover, html body #kiat-reviewers .kiat-reviewer-card:hover .kiat-reviewer-photo img, html body #kiat-reviewers .kiat-reviewer-photo img:hover { transform: none !important; } @media (max-width: 760px) { html body #kiat-reviewers .kiat-reviewers-grid { grid-template-columns: minmax(0, 1fr) !important; } } @media (max-width: 420px) { html body #kiat-reviewers .kiat-reviewer-card { gap: 10px !important; padding: 9px !important; } html body #kiat-reviewers .kiat-reviewer-photo { flex-basis: 72px !important; width: 72px !important; min-width: 72px !important; height: 92px !important; min-height: 92px !important; } html body #kiat-reviewers .kiat-reviewer-content h3 { font-size: 14px !important; } } /* ========================================================== KIAT EDITORIAL HEADINGS — HIGH CONTRAST FIX Fix: dark navy headings were unreadable on navy gradient. Append at the end to override earlier conflicting rules. ========================================================== */ /* Country network heading banner */ html body #kiat-editorial-countries .kiat-editorial-country-heading { background: linear-gradient(135deg, #092B43 0%, #123F5B 100%) !important; border-bottom: 4px solid #D5A63C !important; } html body #kiat-editorial-countries .kiat-editorial-country-heading h2 { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .18) !important; } /* Editorial Team heading banner */ html body #kiat-editorial-team .kiat-editorial-heading { background: linear-gradient(135deg, #092B43 0%, #123F5B 100%) !important; border-bottom: 4px solid #D5A63C !important; } html body #kiat-editorial-team .kiat-editorial-heading h2 { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .18) !important; } /* Preserve readable supporting text and gold eyebrow labels */ html body #kiat-editorial-team .kiat-editorial-heading p, html body #kiat-editorial-countries .kiat-editorial-country-heading p { color: #F3F7FA !important; -webkit-text-fill-color: #F3F7FA !important; } html body #kiat-editorial-team .kiat-editorial-eyebrow, html body #kiat-editorial-countries .kiat-editorial-country-eyebrow { color: #FFD875 !important; -webkit-text-fill-color: #FFD875 !important; } /* Avoid any general heading rule overriding these titles */ html body #kiat-editorial-team .kiat-editorial-heading h2 *, html body #kiat-editorial-countries .kiat-editorial-country-heading h2 * { color: inherit !important; -webkit-text-fill-color: inherit !important; } /* ========================================================== KIAT REVIEWER PHOTO — PREVENT EMPTY GAPS ON HOVER Keep the card hover animation, but lock the photo itself to its frame so it cannot zoom/shift and expose blank space. ========================================================== */ html body #kiat-reviewers .kiat-reviewer-photo { position: relative !important; display: block !important; flex: 0 0 118px !important; width: 118px !important; min-width: 118px !important; height: 150px !important; min-height: 150px !important; padding: 0 !important; margin: 0 !important; overflow: hidden !important; isolation: isolate !important; line-height: 0 !important; background: #F7F5EF !important; border-radius: 9px !important; box-sizing: border-box !important; } html body #kiat-reviewers .kiat-reviewer-photo img, html body #kiat-reviewers .kiat-reviewer-photo:hover img, html body #kiat-reviewers .kiat-reviewer-card:hover .kiat-reviewer-photo img, html body #kiat-reviewers .kiat-reviewer-card:hover .kiat-reviewer-photo:hover img { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; min-width: 0 !important; min-height: 0 !important; max-width: none !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center top !important; transform: none !important; transition: none !important; animation: none !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; filter: none !important; vertical-align: top !important; } /* Keep the reviewer card lift/shadow, but never animate the photo frame */ html body #kiat-reviewers .kiat-reviewer-card:hover .kiat-reviewer-photo { transform: none !important; overflow: hidden !important; } /* Responsive frame dimensions */ @media (max-width: 900px) { html body #kiat-reviewers .kiat-reviewer-photo { flex: 0 0 104px !important; width: 104px !important; min-width: 104px !important; height: 136px !important; min-height: 136px !important; } } @media (max-width: 600px) { html body #kiat-reviewers .kiat-reviewer-photo { flex: 0 0 82px !important; width: 82px !important; min-width: 82px !important; height: 108px !important; min-height: 108px !important; } } @media (max-width: 420px) { html body #kiat-reviewers .kiat-reviewer-photo { flex: 0 0 72px !important; width: 72px !important; min-width: 72px !important; height: 92px !important; min-height: 92px !important; } } /* ========================================================== KIAT REVIEWER — COMPACT PHOTO + ALIGNED PROFILE LINKS Append at end to override previous reviewer dimensions. ========================================================== */ /* Smaller photo frame with a clean white outline */ html body #kiat-reviewers .kiat-reviewer-photo { flex: 0 0 96px !important; width: 96px !important; min-width: 96px !important; height: 122px !important; min-height: 122px !important; padding: 3px !important; box-sizing: border-box !important; overflow: hidden !important; border: 2px solid #FFFFFF !important; border-radius: 12px !important; background: #FFFFFF !important; box-shadow: 0 0 0 1px #E4E9ED, 0 3px 9px rgba(9, 43, 67, .10) !important; transform: none !important; } /* Image stays inside the white frame; no zoom or shifting */ html body #kiat-reviewers .kiat-reviewer-photo img, html body #kiat-reviewers .kiat-reviewer-photo:hover img, html body #kiat-reviewers .kiat-reviewer-card:hover .kiat-reviewer-photo img, html body #kiat-reviewers .kiat-reviewer-card:hover .kiat-reviewer-photo:hover img { position: absolute !important; top: 3px !important; right: 3px !important; bottom: 3px !important; left: 3px !important; width: calc(100% - 6px) !important; height: calc(100% - 6px) !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center top !important; border: 0 !important; border-radius: 8px !important; margin: 0 !important; padding: 0 !important; transform: none !important; transition: none !important; animation: none !important; box-shadow: none !important; } /* Keep card content aligned and allow link buttons to form a compact row */ html body #kiat-reviewers .kiat-reviewer-content { min-width: 0 !important; flex: 1 1 0 !important; } html body #kiat-reviewers .kiat-reviewer-links { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 4px !important; width: 100% !important; margin: 5px 0 0 !important; padding: 0 !important; } html body #kiat-reviewers .kiat-reviewer-links a { display: inline-flex !important; flex: 0 0 auto !important; align-items: center !important; justify-content: center !important; min-width: 0 !important; min-height: 26px !important; height: 26px !important; margin: 0 !important; padding: 4px 8px !important; box-sizing: border-box !important; border: 1px solid #DCE5EB !important; border-radius: 6px !important; background: #F5F8FA !important; color: #092B43 !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1 !important; white-space: nowrap !important; text-decoration: none !important; transition: background-color .2s ease, border-color .2s ease !important; } html body #kiat-reviewers .kiat-reviewer-links a:hover { background: #F8F0D9 !important; border-color: #D5A63C !important; color: #092B43 !important; transform: none !important; } /* Tablet */ @media (max-width: 900px) { html body #kiat-reviewers .kiat-reviewer-photo { flex: 0 0 88px !important; width: 88px !important; min-width: 88px !important; height: 112px !important; min-height: 112px !important; } } /* Mobile */ @media (max-width: 600px) { html body #kiat-reviewers .kiat-reviewer-photo { flex: 0 0 76px !important; width: 76px !important; min-width: 76px !important; height: 98px !important; min-height: 98px !important; } html body #kiat-reviewers .kiat-reviewer-links { gap: 4px !important; } html body #kiat-reviewers .kiat-reviewer-links a { min-height: 25px !important; height: 25px !important; padding: 4px 7px !important; font-size: 9px !important; } } /* ========================================================== JURNAL EKONOMI KIAT — PREMIUM FOOTER Add-on untuk HTML dengan id="kiat-premium-footer" Diletakkan di akhir CSS agar mengatasi konflik style global. ========================================================== */ html body #kiat-premium-footer, html body #kiat-premium-footer * { box-sizing: border-box !important; } html body #kiat-premium-footer { display: block !important; width: 100% !important; max-width: none !important; margin: 35px auto 0 !important; padding: 0 !important; overflow: hidden !important; color: #EAF0F5 !important; background: #092B43 !important; border: 0 !important; border-top: 5px solid #D5A63C !important; border-radius: 0 !important; box-shadow: none !important; font-family: inherit !important; font-size: 14px !important; line-height: 1.7 !important; text-align: left !important; } html body #kiat-premium-footer .kiat-footer-main { display: grid !important; grid-template-columns: 1.25fr 1fr 1fr !important; align-items: start !important; gap: 34px !important; width: 100% !important; max-width: 1200px !important; margin: 0 auto !important; padding: 38px 28px 32px !important; } html body #kiat-premium-footer .kiat-footer-column { display: block !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body #kiat-premium-footer .kiat-footer-brand { margin: 0 0 12px !important; padding: 0 !important; color: #FFFFFF !important; font-size: 25px !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: .3px !important; } html body #kiat-premium-footer .kiat-footer-brand span { color: #F0C75E !important; } html body #kiat-premium-footer .kiat-footer-heading { margin: 0 0 15px !important; padding: 0 0 9px !important; color: #F0C75E !important; background: transparent !important; border: 0 !important; border-bottom: 1px solid rgba(213,166,60,.45) !important; border-radius: 0 !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1.5 !important; letter-spacing: 1px !important; text-transform: uppercase !important; } html body #kiat-premium-footer p { margin: 0 0 12px !important; padding: 0 !important; color: #DBE5ED !important; font-size: 14px !important; line-height: 1.7 !important; } html body #kiat-premium-footer .kiat-footer-institution { color: #FFFFFF !important; font-weight: 700 !important; } html body #kiat-premium-footer .kiat-footer-muted { color: #BDCBD6 !important; font-size: 12px !important; } html body #kiat-premium-footer a { color: #FFFFFF !important; text-decoration: none !important; overflow-wrap: anywhere !important; transition: color .2s ease, background-color .2s ease, border-color .2s ease !important; } html body #kiat-premium-footer a:hover { color: #F0C75E !important; text-decoration: underline !important; } html body #kiat-premium-footer .kiat-footer-link { display: inline-block !important; margin: 0 0 10px !important; } html body #kiat-premium-footer .kiat-footer-issn { display: flex !important; flex-wrap: wrap !important; align-items: center !important; gap: 7px !important; margin: 14px 0 0 !important; padding: 0 !important; } html body #kiat-premium-footer .kiat-footer-issn a { display: inline-flex !important; align-items: center !important; justify-content: center !important; min-height: 32px !important; margin: 0 !important; padding: 6px 9px !important; color: #FFFFFF !important; background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.2) !important; border-radius: 6px !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.3 !important; text-decoration: none !important; } html body #kiat-premium-footer .kiat-footer-issn a:hover { color: #092B43 !important; background: #F0C75E !important; border-color: #F0C75E !important; text-decoration: none !important; } html body #kiat-premium-footer .kiat-footer-license { display: flex !important; align-items: flex-start !important; gap: 12px !important; margin: 16px 0 0 !important; padding: 12px !important; background: rgba(255,255,255,.06) !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 8px !important; } html body #kiat-premium-footer .kiat-footer-license > a { display: block !important; flex: 0 0 78px !important; width: 78px !important; max-width: 78px !important; margin: 0 !important; padding: 0 !important; background: #FFFFFF !important; border: 0 !important; border-radius: 4px !important; box-shadow: none !important; } html body #kiat-premium-footer .kiat-footer-license img { display: block !important; width: 100% !important; max-width: 78px !important; height: auto !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; border: 0 !important; border-radius: 4px !important; box-shadow: none !important; transform: none !important; animation: none !important; } html body #kiat-premium-footer .kiat-footer-license p { flex: 1 1 auto !important; min-width: 0 !important; margin: 0 !important; color: #DBE5ED !important; font-size: 11px !important; line-height: 1.6 !important; } html body #kiat-premium-footer .kiat-footer-license strong { color: #FFFFFF !important; } html body #kiat-premium-footer .kiat-footer-license p a { color: #F0C75E !important; } html body #kiat-premium-footer .kiat-footer-bottom { display: block !important; width: 100% !important; margin: 0 !important; padding: 15px 22px !important; background: #061F31 !important; border: 0 !important; border-top: 1px solid rgba(255,255,255,.12) !important; text-align: center !important; } html body #kiat-premium-footer .kiat-footer-bottom p { margin: 0 !important; padding: 0 !important; color: #BDCBD6 !important; font-size: 11px !important; line-height: 1.6 !important; } html body #kiat-premium-footer .kiat-footer-bottom strong { color: #FFFFFF !important; } html body #kiat-premium-footer .kiat-footer-bottom a { color: #F0C75E !important; } /* Footer only: stop global image hover animation creating gaps */ html body #kiat-premium-footer img, html body #kiat-premium-footer img:hover, html body #kiat-premium-footer a:hover img { transform: none !important; animation: none !important; filter: none !important; } /* Tablet */ @media (max-width: 850px) { html body #kiat-premium-footer .kiat-footer-main { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 26px !important; padding: 30px 22px !important; } html body #kiat-premium-footer .kiat-footer-column:first-child { grid-column: 1 / -1 !important; } } /* Mobile */ @media (max-width: 560px) { html body #kiat-premium-footer { margin-top: 24px !important; } html body #kiat-premium-footer .kiat-footer-main { grid-template-columns: minmax(0, 1fr) !important; gap: 23px !important; padding: 26px 17px !important; } html body #kiat-premium-footer .kiat-footer-column:first-child { grid-column: auto !important; } html body #kiat-premium-footer .kiat-footer-brand { font-size: 22px !important; } html body #kiat-premium-footer .kiat-footer-license { gap: 10px !important; padding: 10px !important; } html body #kiat-premium-footer .kiat-footer-license > a { flex-basis: 66px !important; width: 66px !important; max-width: 66px !important; } html body #kiat-premium-footer .kiat-footer-license img { max-width: 66px !important; } html body #kiat-premium-footer .kiat-footer-bottom { padding: 13px 15px !important; } } /* ========================================================== KIAT SIDEBAR — JOURNAL METRICS + AUTHOR DIVERSITY Palette: Navy #092B43 / Gold #D5A63C Appended override: scoped to likely widget IDs/classes. ========================================================== */ /* Widget container */ html body :is( [id*="author-diversity" i], [class*="author-diversity" i], [id*="authordiversity" i], [class*="authordiversity" i], [id*="journal-metrics" i], [class*="journal-metrics" i], [id*="journalmetrics" i], [class*="journalmetrics" i] ) { color: #092B43 !important; --kiat-navy: #092B43; --kiat-navy-dark: #061F31; --kiat-gold: #D5A63C; --kiat-gold-light: #F5D984; --kiat-pale: #F8F5EC; } /* Main sidebar card */ html body :is( [id*="author-diversity" i], [class*="author-diversity" i], [id*="authordiversity" i], [class*="authordiversity" i], [id*="journal-metrics" i], [class*="journal-metrics" i], [id*="journalmetrics" i], [class*="journalmetrics" i] ) :is(.widget-card, .metrics-card, .author-diversity-card, .journal-metrics-card, .card, .panel) { border-color: #E6D7AE !important; box-shadow: 0 8px 24px rgba(9,43,67,.08) !important; } /* Widget title banners */ html body :is( [id*="author-diversity" i], [class*="author-diversity" i], [id*="authordiversity" i], [class*="authordiversity" i], [id*="journal-metrics" i], [class*="journal-metrics" i], [id*="journalmetrics" i], [class*="journalmetrics" i] ) :is(h1, h2, h3, h4, .section-title, .widget-title, .metrics-title, .diversity-title) { color: #FFFFFF !important; background: linear-gradient(115deg, #092B43 0%, #123F5B 58%, #D5A63C 150%) !important; border-color: #D5A63C !important; box-shadow: 0 8px 20px rgba(9,43,67,.16) !important; } /* Publication period pill */ html body :is( [id*="author-diversity" i], [class*="author-diversity" i], [id*="authordiversity" i], [class*="authordiversity" i], [id*="journal-metrics" i], [class*="journal-metrics" i], [id*="journalmetrics" i], [class*="journalmetrics" i] ) :is(.publication-period, .period-badge, .date-range, .metrics-period) { color: #092B43 !important; background: #FBF6E8 !important; border: 1px solid #D5A63C !important; } /* Metric tiles */ html body :is( [id*="author-diversity" i], [class*="author-diversity" i], [id*="authordiversity" i], [class*="authordiversity" i], [id*="journal-metrics" i], [class*="journal-metrics" i], [id*="journalmetrics" i], [class*="journalmetrics" i] ) :is(.metric-card, .stat-card, .metric-item, .metrics-item, .stat-item) { background: #FFFFFF !important; border: 1px solid #E6D7AE !important; border-top: 3px solid #D5A63C !important; border-radius: 13px !important; box-shadow: 0 6px 16px rgba(9,43,67,.055) !important; } html body :is( [id*="author-diversity" i], [class*="author-diversity" i], [id*="authordiversity" i], [class*="authordiversity" i], [id*="journal-metrics" i], [class*="journal-metrics" i], [id*="journalmetrics" i], [class*="journalmetrics" i] ) :is(.metric-value, .stat-value, .metric-number, .stat-number, .count) { color: #092B43 !important; } html body :is( [id*="author-diversity" i], [class*="author-diversity" i], [id*="authordiversity" i], [class*="authordiversity" i], [id*="journal-metrics" i], [class*="journal-metrics" i], [id*="journalmetrics" i], [class*="journalmetrics" i] ) :is(.metric-label, .stat-label, .metric-card p, .stat-card p) { color: #536575 !important; } /* Author Diversity heading and country-count badge */ html body :is( [id*="author-diversity" i], [class*="author-diversity" i], [id*="authordiversity" i], [class*="authordiversity" i] ) :is(h2, h3, .section-title, .diversity-title) { color: #092B43 !important; background: transparent !important; box-shadow: none !important; } html body :is( [id*="author-diversity" i], [class*="author-diversity" i], [id*="authordiversity" i], [class*="authordiversity" i] ) :is(.country-count, .count-badge, .diversity-badge, .badge) { color: #092B43 !important; background: #F5D984 !important; border: 1px solid #D5A63C !important; box-shadow: 0 4px 12px rgba(9,43,67,.08) !important; } /* Gold divider / progress accent */ html body :is( [id*="author-diversity" i], [class*="author-diversity" i], [id*="authordiversity" i], [class*="authordiversity" i] ) :is(.divider, .section-divider, .progress, .progress-bar, hr) { background: linear-gradient(90deg, #092B43 0%, #123F5B 62%, #D5A63C 100%) !important; border-color: #D5A63C !important; } /* Country rows */ html body :is( [id*="author-diversity" i], [class*="author-diversity" i], [id*="authordiversity" i], [class*="authordiversity" i] ) :is(.country-row, .country-item, .country-list li, .diversity-country, .country-stat) { color: #092B43 !important; background: #FFFFFF !important; border: 1px solid #E6D7AE !important; border-radius: 10px !important; box-shadow: 0 2px 8px rgba(9,43,67,.035) !important; } html body :is( [id*="author-diversity" i], [class*="author-diversity" i], [id*="authordiversity" i] ) :is(.country-row, .country-item, .country-list li, .diversity-country, .country-stat):hover { background: #FBF6E8 !important; border-color: #D5A63C !important; } html body :is( [id*="author-diversity" i], [class*="author-diversity" i], [id*="authordiversity" i] ) :is(.country-name, .country-label, .country-row strong, .country-item strong) { color: #092B43 !important; } html body :is( [id*="author-diversity" i], [class*="author-diversity" i], [id*="authordiversity" i] ) :is(.country-value, .country-percent, .percentage, .country-row .value, .country-item .value) { color: #092B43 !important; font-weight: 800 !important; } /* View Details button */ html body :is( [id*="author-diversity" i], [class*="author-diversity" i], [id*="authordiversity" i], [id*="journal-metrics" i], [class*="journal-metrics" i], [id*="journalmetrics" i], [class*="journalmetrics" i] ) :is(.view-details, .details-button, .btn-details, a[class*="details" i], button[class*="details" i]) { color: #FFFFFF !important; background: linear-gradient(100deg, #092B43 0%, #123F5B 75%, #1A4B66 100%) !important; border: 1px solid #D5A63C !important; border-radius: 999px !important; box-shadow: 0 7px 18px rgba(9,43,67,.16) !important; } html body :is( [id*="author-diversity" i], [class*="author-diversity" i], [id*="authordiversity" i], [id*="journal-metrics" i], [class*="journal-metrics" i], [id*="journalmetrics" i], [class*="journalmetrics" i] ) :is(.view-details, .details-button, .btn-details, a[class*="details" i], button[class*="details" i]):hover { color: #092B43 !important; background: #F5D984 !important; border-color: #D5A63C !important; } /* Fallback for headings and values when the widget uses simpler markup */ html body :is( [id*="author-diversity" i], [class*="author-diversity" i], [id*="authordiversity" i], [class*="authordiversity" i] ) strong { color: #092B43 !important; } /* ========================================================== JURNAL EKONOMI KIAT — AUTHOR DIVERSITY / JOURNAL METRICS EXACT SELECTORS for the supplied .ijbs-journal-metrics HTML Palette: Navy #092B43 + Gold #D5A63C Keep this block at the VERY END of the stylesheet. ========================================================== */ html body .ijbs-journal-metrics { --kiat-navy: #092B43; --kiat-navy-dark: #061F31; --kiat-navy-mid: #123F5B; --kiat-gold: #D5A63C; --kiat-gold-light: #F5E7BE; --kiat-border: #E4E9ED; color: #092B43 !important; } /* Header: overrides generic .sidebar-title and old green/yellow styles */ html body .ijbs-journal-metrics .ijbs-metrics-header, html body .ijbs-journal-metrics .sidebar-title.ijbs-metrics-header { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; background: linear-gradient(115deg, #092B43 0%, #123F5B 72%, #092B43 100%) !important; border: 0 !important; border-top: 4px solid #D5A63C !important; border-radius: 15px !important; box-shadow: 0 8px 20px rgba(9,43,67,.16) !important; } /* Publication period */ html body .ijbs-journal-metrics .ijbs-metrics-period { color: #092B43 !important; -webkit-text-fill-color: #092B43 !important; background: #FBF7EB !important; border: 1px solid #D5A63C !important; border-radius: 30px !important; } /* Metric tiles */ html body .ijbs-journal-metrics .ijbs-metric-item { background: #FFFFFF !important; border: 1px solid #E4E9ED !important; border-top: 4px solid #D5A63C !important; border-radius: 14px !important; box-shadow: 0 6px 18px rgba(9,43,67,.055) !important; } html body .ijbs-journal-metrics .ijbs-metric-number { color: #092B43 !important; -webkit-text-fill-color: #092B43 !important; } html body .ijbs-journal-metrics .ijbs-metric-label { color: #536575 !important; -webkit-text-fill-color: #536575 !important; } /* Author Diversity title */ html body .ijbs-journal-metrics .ijbs-diversity-header h4 { color: #092B43 !important; -webkit-text-fill-color: #092B43 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Country count pill */ html body .ijbs-journal-metrics .ijbs-country-button { color: #092B43 !important; -webkit-text-fill-color: #092B43 !important; background: #F5E7BE !important; border: 1px solid #D5A63C !important; box-shadow: 0 4px 12px rgba(9,43,67,.07) !important; } html body .ijbs-journal-metrics .ijbs-country-button:hover { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; background: #092B43 !important; border-color: #D5A63C !important; } /* Diversity bar */ html body .ijbs-journal-metrics .ijbs-diversity-bar { background: #E8EDF0 !important; border: 0 !important; border-radius: 999px !important; } html body .ijbs-journal-metrics .ijbs-diversity-bar::before { background: linear-gradient(90deg, #092B43 0%, #123F5B 65%, #D5A63C 100%) !important; } /* Country rows */ html body .ijbs-journal-metrics .ijbs-country-row { color: #3D4852 !important; background: #FFFFFF !important; border: 1px solid #E4E9ED !important; border-radius: 11px !important; box-shadow: none !important; } html body .ijbs-journal-metrics .ijbs-country-row:hover { background: #FBF7EB !important; border-color: #D5A63C !important; } html body .ijbs-journal-metrics .ijbs-country-name { color: #3D4852 !important; -webkit-text-fill-color: #3D4852 !important; } html body .ijbs-journal-metrics .ijbs-country-row > strong { color: #092B43 !important; -webkit-text-fill-color: #092B43 !important; } /* Flags: prevent global image hover transformations */ html body .ijbs-journal-metrics .ijbs-country-flag, html body .ijbs-journal-metrics .ijbs-country-flag:hover { transform: none !important; animation: none !important; filter: none !important; } /* View Details button */ html body .ijbs-journal-metrics .ijbs-metrics-button { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; background: linear-gradient(105deg, #092B43 0%, #123F5B 100%) !important; border: 1px solid #092B43 !important; border-bottom: 4px solid #D5A63C !important; border-radius: 999px !important; box-shadow: 0 8px 18px rgba(9,43,67,.16) !important; } html body .ijbs-journal-metrics .ijbs-metrics-button:hover { color: #092B43 !important; -webkit-text-fill-color: #092B43 !important; background: #F5E7BE !important; border-color: #D5A63C !important; } /* Modal backdrop and panel */ html body .ijbs-journal-metrics .ijbs-metrics-modal-overlay { background: rgba(6,31,49,.78) !important; } html body .ijbs-journal-metrics .ijbs-metrics-modal-box { background: #FFFFFF !important; border: 1px solid #E4E9ED !important; border-top: 5px solid #D5A63C !important; border-radius: 17px !important; box-shadow: 0 25px 70px rgba(6,31,49,.28) !important; } html body .ijbs-journal-metrics .ijbs-modal-header { border-bottom: 1px solid #E4E9ED !important; } html body .ijbs-journal-metrics .ijbs-modal-header h2 { color: #092B43 !important; -webkit-text-fill-color: #092B43 !important; } html body .ijbs-journal-metrics .ijbs-modal-header p { color: #697783 !important; } html body .ijbs-journal-metrics .ijbs-modal-close { color: #092B43 !important; -webkit-text-fill-color: #092B43 !important; background: #F5E7BE !important; border: 1px solid #D5A63C !important; } html body .ijbs-journal-metrics .ijbs-modal-close:hover { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; background: #092B43 !important; } /* Modal section headings and statistics */ html body .ijbs-journal-metrics .ijbs-modal-section h3 { color: #092B43 !important; -webkit-text-fill-color: #092B43 !important; background: transparent !important; border: 0 !important; border-bottom: 2px solid #D5A63C !important; box-shadow: none !important; } html body .ijbs-journal-metrics .ijbs-stat-row { color: #3D4852 !important; background: #F6F8FA !important; border: 1px solid #E4E9ED !important; } html body .ijbs-journal-metrics .ijbs-stat-row strong, html body .ijbs-journal-metrics .ijbs-modal-country > strong { color: #092B43 !important; -webkit-text-fill-color: #092B43 !important; } html body .ijbs-journal-metrics .ijbs-country-count { color: #092B43 !important; -webkit-text-fill-color: #092B43 !important; background: #F5E7BE !important; border: 1px solid #D5A63C !important; } html body .ijbs-journal-metrics .ijbs-modal-country { background: #FFFFFF !important; border: 1px solid #E4E9ED !important; border-radius: 9px !important; } html body .ijbs-journal-metrics .ijbs-modal-country > div { color: #3D4852 !important; -webkit-text-fill-color: #3D4852 !important; } /* Keep metrics typography readable even when the theme sets green headings */ html body .ijbs-journal-metrics .ijbs-metrics-header *, html body .ijbs-journal-metrics .ijbs-metrics-button * { color: inherit !important; -webkit-text-fill-color: inherit !important; } /* Mobile refinements */ @media (max-width: 560px) { html body .ijbs-journal-metrics .ijbs-metrics-header { font-size: 17px !important; } html body .ijbs-journal-metrics .ijbs-diversity-header h4 { font-size: 18px !important; } } /* ========================================================== KIAT JOURNAL METRICS — LAYOUT REPAIR Added at the end of the existing FINAL stylesheet. Existing rules above are intentionally left unchanged. Matches the supplied HTML classes: .kiat-metrics / .kiat-* Palette: Navy #092B43 + Gold #D5A63C ========================================================== */ html body .kiat-metrics { --kiat-navy: #092B43; --kiat-navy-dark: #061F31; --kiat-navy-mid: #123F5B; --kiat-gold: #D5A63C; --kiat-gold-light: #F5E7BE; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; color: var(--kiat-navy) !important; font-family: inherit; line-height: 1.45 !important; overflow-wrap: anywhere; } html body .kiat-metrics *, html body .kiat-metrics *::before, html body .kiat-metrics *::after { box-sizing: border-box !important; } /* Hide the checkbox without removing its CSS-only modal function */ html body .kiat-metrics .kiat-metrics-toggle { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; opacity: 0 !important; } /* Main heading */ html body .kiat-metrics .kiat-metrics-header, html body .kiat-metrics .sidebar-title.kiat-metrics-header { display: block !important; width: 100% !important; margin: 0 0 14px !important; padding: 15px 12px !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; text-align: center !important; font-size: 20px !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: .2px !important; background: linear-gradient(110deg, #061F31 0%, #092B43 68%, #123F5B 100%) !important; border: 1px solid #D5A63C !important; border-left: 6px solid #D5A63C !important; border-radius: 15px !important; box-shadow: 0 7px 18px rgba(9,43,67,.13) !important; } /* Publication period */ html body .kiat-metrics .kiat-metrics-period { display: block !important; width: 100% !important; margin: 0 0 14px !important; padding: 8px 10px !important; color: #425767 !important; -webkit-text-fill-color: #425767 !important; font-size: 12px !important; line-height: 1.5 !important; text-align: center !important; background: #FBF7EB !important; border: 1px solid #E6D7AE !important; border-radius: 8px !important; } /* Metrics must be a two-column grid, not a vertical text list */ html body .kiat-metrics .kiat-metrics-grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px !important; width: 100% !important; margin: 0 0 18px !important; padding: 0 !important; align-items: stretch !important; } html body .kiat-metrics .kiat-metric-item { display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: flex-start !important; min-width: 0 !important; min-height: 94px !important; margin: 0 !important; padding: 12px !important; background: #FFFFFF !important; border: 1px solid #E4E9ED !important; border-top: 3px solid #D5A63C !important; border-radius: 11px !important; box-shadow: 0 4px 12px rgba(9,43,67,.055) !important; } html body .kiat-metrics .kiat-metric-number { display: block !important; margin: 0 0 4px !important; color: #092B43 !important; -webkit-text-fill-color: #092B43 !important; font-size: 25px !important; font-weight: 800 !important; line-height: 1.1 !important; } html body .kiat-metrics .kiat-metric-label { display: block !important; margin: 0 !important; color: #536575 !important; -webkit-text-fill-color: #536575 !important; font-size: 12px !important; line-height: 1.35 !important; } /* Author Diversity section */ html body .kiat-metrics .kiat-diversity-header { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 7px !important; width: 100% !important; margin: 0 0 12px !important; padding: 0 !important; } html body .kiat-metrics .kiat-diversity-header h4 { display: block !important; width: 100% !important; margin: 0 !important; padding: 10px 12px !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font-size: 16px !important; font-weight: 750 !important; line-height: 1.3 !important; background: linear-gradient(100deg, #092B43 0%, #123F5B 78%, #6B7358 100%) !important; border-left: 4px solid #D5A63C !important; border-radius: 0 !important; box-shadow: none !important; } html body .kiat-metrics .kiat-country-button { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; max-width: 100% !important; margin: 0 !important; padding: 6px 10px !important; color: #092B43 !important; -webkit-text-fill-color: #092B43 !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.3 !important; cursor: pointer !important; background: #F5E7BE !important; border: 1px solid #D5A63C !important; border-radius: 999px !important; box-shadow: 0 2px 7px rgba(9,43,67,.06) !important; } html body .kiat-metrics .kiat-country-button:hover { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; background: #092B43 !important; } /* Diversity bar: use proportional segments from the listed country shares */ html body .kiat-metrics .kiat-diversity-bar { display: block !important; width: 100% !important; height: 10px !important; margin: 0 0 12px !important; padding: 0 !important; overflow: hidden !important; background: linear-gradient( 90deg, #092B43 0%, #092B43 59.70%, #D5A63C 59.70%, #D5A63C 77.61%, #426A7E 77.61%, #426A7E 85.07%, #8093A0 85.07%, #8093A0 92.53%, #B4C1C8 92.53%, #B4C1C8 98.50%, #E5D8B4 98.50%, #E5D8B4 100% ) !important; border: 0 !important; border-radius: 999px !important; box-shadow: inset 0 0 0 1px rgba(9,43,67,.08) !important; } html body .kiat-metrics .kiat-diversity-bar::before, html body .kiat-metrics .kiat-diversity-bar::after { content: none !important; display: none !important; } /* Country list and rows */ html body .kiat-metrics .kiat-country-list { display: flex !important; flex-direction: column !important; gap: 7px !important; width: 100% !important; margin: 0 0 14px !important; padding: 0 !important; } html body .kiat-metrics .kiat-country-row { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 10px !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; padding: 8px 9px !important; color: #425767 !important; background: #FFFFFF !important; border: 1px solid #E4E9ED !important; border-radius: 9px !important; box-shadow: 0 2px 7px rgba(9,43,67,.035) !important; } html body .kiat-metrics .kiat-country-row:hover { background: #FBF7EB !important; border-color: #D5A63C !important; } html body .kiat-metrics .kiat-country-name { display: flex !important; flex: 1 1 auto !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; margin: 0 !important; color: #425767 !important; -webkit-text-fill-color: #425767 !important; font-size: 12px !important; line-height: 1.35 !important; } html body .kiat-metrics .kiat-country-row > strong { display: block !important; flex: 0 0 auto !important; margin: 0 !important; color: #092B43 !important; -webkit-text-fill-color: #092B43 !important; font-size: 12px !important; font-weight: 800 !important; line-height: 1.3 !important; white-space: nowrap !important; } /* Flags must remain small; override the site's global img and img:hover rules */ html body .kiat-metrics img.kiat-country-flag, html body .kiat-metrics img.kiat-country-flag:hover { display: inline-block !important; flex: 0 0 30px !important; width: 30px !important; min-width: 30px !important; max-width: 30px !important; height: 20px !important; min-height: 20px !important; max-height: 20px !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: center !important; vertical-align: middle !important; transform: none !important; animation: none !important; filter: none !important; border: 1px solid rgba(9,43,67,.12) !important; border-radius: 3px !important; box-shadow: none !important; } /* View details button */ html body .kiat-metrics .kiat-metrics-button { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; margin: 12px 0 0 !important; padding: 10px 14px !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; font-size: 13px !important; font-weight: 750 !important; line-height: 1.35 !important; text-align: center !important; cursor: pointer !important; background: linear-gradient(105deg, #092B43 0%, #123F5B 100%) !important; border: 1px solid #D5A63C !important; border-bottom: 3px solid #D5A63C !important; border-radius: 9px !important; box-shadow: 0 5px 13px rgba(9,43,67,.12) !important; } html body .kiat-metrics .kiat-metrics-button:hover { color: #092B43 !important; -webkit-text-fill-color: #092B43 !important; background: #F5E7BE !important; } /* Modal is hidden until the checkbox is checked */ html body .kiat-metrics .kiat-metrics-modal { display: none !important; } html body .kiat-metrics .kiat-metrics-toggle:checked ~ .kiat-metrics-modal { display: flex !important; position: fixed !important; inset: 0 !important; z-index: 2147483000 !important; align-items: center !important; justify-content: center !important; width: 100vw !important; height: 100dvh !important; max-width: none !important; margin: 0 !important; padding: 20px !important; } html body .kiat-metrics .kiat-metrics-modal-overlay { position: absolute !important; inset: 0 !important; display: block !important; width: 100% !important; height: 100% !important; margin: 0 !important; padding: 0 !important; cursor: pointer !important; background: rgba(6,31,49,.78) !important; } html body .kiat-metrics .kiat-metrics-modal-box { position: relative !important; z-index: 1 !important; display: block !important; width: min(720px, 100%) !important; max-width: 720px !important; max-height: calc(100dvh - 40px) !important; margin: 0 auto !important; padding: 20px !important; overflow-y: auto !important; overscroll-behavior: contain !important; color: #092B43 !important; background: #FFFFFF !important; border: 1px solid #E4E9ED !important; border-top: 5px solid #D5A63C !important; border-radius: 16px !important; box-shadow: 0 25px 70px rgba(6,31,49,.28) !important; } html body .kiat-metrics .kiat-modal-header { display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; gap: 15px !important; margin: 0 0 18px !important; padding: 0 0 14px !important; border-bottom: 1px solid #E4E9ED !important; } html body .kiat-metrics .kiat-modal-header h2 { margin: 0 0 5px !important; padding: 0 !important; color: #092B43 !important; -webkit-text-fill-color: #092B43 !important; font-size: 22px !important; line-height: 1.3 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } html body .kiat-metrics .kiat-modal-header p { margin: 0 !important; color: #697783 !important; font-size: 12px !important; line-height: 1.5 !important; } html body .kiat-metrics .kiat-modal-close { display: inline-flex !important; flex: 0 0 34px !important; align-items: center !important; justify-content: center !important; width: 34px !important; height: 34px !important; margin: 0 !important; padding: 0 !important; color: #092B43 !important; -webkit-text-fill-color: #092B43 !important; font-size: 25px !important; line-height: 1 !important; cursor: pointer !important; background: #F5E7BE !important; border: 1px solid #D5A63C !important; border-radius: 50% !important; } html body .kiat-metrics .kiat-modal-close:hover { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; background: #092B43 !important; } html body .kiat-metrics .kiat-modal-section { margin: 0 0 20px !important; padding: 0 !important; } html body .kiat-metrics .kiat-modal-section h3 { margin: 0 0 10px !important; padding: 0 0 7px !important; color: #092B43 !important; -webkit-text-fill-color: #092B43 !important; font-size: 16px !important; font-weight: 800 !important; line-height: 1.35 !important; background: transparent !important; border: 0 !important; border-bottom: 2px solid #D5A63C !important; border-radius: 0 !important; box-shadow: none !important; } html body .kiat-metrics .kiat-stat-row { display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: space-between !important; gap: 12px !important; margin: 0 0 7px !important; padding: 9px 10px !important; color: #425767 !important; background: #F6F8FA !important; border: 1px solid #E4E9ED !important; border-radius: 8px !important; font-size: 12px !important; line-height: 1.4 !important; } html body .kiat-metrics .kiat-stat-row strong, html body .kiat-metrics .kiat-modal-country > strong { flex: 0 0 auto !important; color: #092B43 !important; -webkit-text-fill-color: #092B43 !important; font-weight: 800 !important; text-align: right !important; } html body .kiat-metrics .kiat-country-count { display: inline-block !important; margin-left: 6px !important; padding: 3px 8px !important; color: #092B43 !important; -webkit-text-fill-color: #092B43 !important; font-size: 11px !important; font-weight: 700 !important; vertical-align: middle !important; background: #F5E7BE !important; border: 1px solid #D5A63C !important; border-radius: 999px !important; } html body .kiat-metrics .kiat-modal-country { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 12px !important; margin: 0 0 7px !important; padding: 8px 10px !important; color: #425767 !important; background: #FFFFFF !important; border: 1px solid #E4E9ED !important; border-radius: 8px !important; } html body .kiat-metrics .kiat-modal-country > div { display: flex !important; align-items: center !important; gap: 8px !important; min-width: 0 !important; color: #425767 !important; -webkit-text-fill-color: #425767 !important; font-size: 12px !important; } /* Do not let the site's global h1-h4 / img rules distort the widget */ html body .kiat-metrics h2, html body .kiat-metrics h3, html body .kiat-metrics h4 { letter-spacing: normal !important; text-transform: none !important; } html body .kiat-metrics img { max-width: 100%; } @media (max-width: 560px) { html body .kiat-metrics .kiat-metrics-header { padding: 13px 10px !important; font-size: 18px !important; } html body .kiat-metrics .kiat-metrics-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; } html body .kiat-metrics .kiat-metric-item { min-height: 86px !important; padding: 10px !important; } html body .kiat-metrics .kiat-metric-number { font-size: 23px !important; } html body .kiat-metrics .kiat-metric-label { font-size: 11px !important; } html body .kiat-metrics .kiat-country-row { padding: 7px !important; } html body .kiat-metrics .kiat-metrics-toggle:checked ~ .kiat-metrics-modal { padding: 10px !important; } html body .kiat-metrics .kiat-metrics-modal-box { max-height: calc(100dvh - 20px) !important; padding: 14px !important; border-radius: 12px !important; } html body .kiat-metrics .kiat-modal-header h2 { font-size: 19px !important; } }