/* ========================================================== 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; } }