/* ========================================================== SPORT PEDAGOGY PREMIUM CSS Palette: Primary : #0B5D7A Secondary : #D9EAF0 Background: #EAF7FB ========================================================== */ :root{ --primary:#0B5D7A; --primary-dark:#08445B; --secondary:#D9EAF0; --light:#EAF7FB; } 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(11,93,122,.18); } /* COVER */ .sp-cover img{ transition:.4s; border-radius:12px; } .sp-cover img:hover{ transform:translateY(-8px); box-shadow:0 18px 35px rgba(11,93,122,.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(11,93,122,.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(11,93,122,.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,#0B5D7A,#08445B); 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(11,93,122,.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(11,93,122,.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,#0B5D7A,#08445B); 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:#0B5D7A; 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:#0B5D7A; transition:.25s; } .content .gap-2 .m-menu:hover{ color:#fff!important; transform:translateY(-2px); box-shadow:0 8px 18px rgba(11,93,122,.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); } /* ========================================================== PERSPEKTIF SIDEBAR — BLUE PALETTE MATCHING WEBSITE Hero palette: #167A9B / #167A9B / #4BA3B8 / #7CC8DA ========================================================== */ /* Sidebar heading */ .sidebar-title{ background:linear-gradient( 135deg, #167A9B 0%, #167A9B 58%, #4BA3B8 100% )!important; color:#FFFFFF!important; box-shadow: 0 8px 18px rgba(22,122,155,.22), 0 4px 12px rgba(75,163,184,.14)!important; } /* Sidebar menu cards */ .content .gap-2 .m-menu{ background:#FFFFFF!important; border:1px solid #B9DCE7!important; color:#167A9B!important; box-shadow: 0 3px 10px rgba(22,122,155,.08)!important; } /* Orange hover fill */ .content .gap-2 .m-menu::before{ background:linear-gradient( 90deg, #167A9B 0%, #167A9B 58%, #4BA3B8 100% )!important; } /* Sidebar icons */ .content .gap-2 .m-menu em{ color:#167A9B!important; } /* Sidebar arrows */ .content .gap-2 .m-menu::after{ color:#167A9B!important; } /* Hover state */ .content .gap-2 .m-menu:hover{ color:#FFFFFF!important; border-color:#167A9B!important; box-shadow: 0 8px 18px rgba(22,122,155,.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:#167A9B!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 #7CC8DA!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; } } /* ========================================================== PERSPEKTIF HEADER — JSA STYLE / BLUE 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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#0B5D7A!important; -webkit-text-fill-color:#0B5D7A!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#0B5D7A!important; -webkit-text-fill-color:#0B5D7A!important; background:#EAF7FB!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 #B9DCE7!important; border-radius:0 0 10px 10px!important; box-shadow:0 10px 24px rgba(22,122,155,.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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#D9F4FF!important; color:#0B5D7A!important; -webkit-text-fill-color:#0B5D7A!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#0B5D7A!important; -webkit-text-fill-color:#0B5D7A!important; } /* ---------- REMOVE OLD GREEN HEADER COLORS ---------- */ .pkp_navigation_primary *, .pkp_navigation_user *, .pkp_search *{ text-decoration-color:#167A9B!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. BLUE PERSPEKTIF 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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#0B5D7A!important; -webkit-text-fill-color:#0B5D7A!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#0B5D7A!important; -webkit-text-fill-color:#0B5D7A!important; background:#EAF7FB!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#EAF7FB!important; color:#0B5D7A!important; -webkit-text-fill-color:#0B5D7A!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#0B5D7A!important; -webkit-text-fill-color:#0B5D7A!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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 #B9DCE7!important; box-shadow:0 10px 24px rgba(22,122,155,.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:#167A9B!important; -webkit-text-fill-color:#167A9B!important; } .pkp_navigation_primary .dropdown-menu > li > a:hover{ background:#D9F4FF!important; color:#0B5D7A!important; -webkit-text-fill-color:#0B5D7A!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#0B5D7A!important; -webkit-text-fill-color:#0B5D7A!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#0B5D7A!important; -webkit-text-fill-color:#0B5D7A!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#0B5D7A!important; -webkit-text-fill-color:#0B5D7A!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#167A9B!important; -webkit-text-fill-color:#167A9B!important; background:transparent!important; } .pkp_structure_head .pkp_site_nav_menu .pkp_navigation_primary_row .pkp_search .fa-search:hover{ color:#167A9B!important; -webkit-text-fill-color:#167A9B!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(22,122,155,.12); } 50%{ box-shadow:0 10px 26px rgba(22,122,155,.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:#167A9B!important; -webkit-text-fill-color:#167A9B!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:#0B5D7A!important; -webkit-text-fill-color:#0B5D7A!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; } } /* ========================================================== PERSPEKTIF BLUE MASTER OVERRIDE Final color layer for OJS theme consistency ========================================================== */ :root{ --primary:#0B5D7A!important; --primary-dark:#08445B!important; --secondary:#D9EAF0!important; --light:#EAF7FB!important; --perspektif-blue:#167A9B; --perspektif-accent:#4BA3B8; --perspektif-dark:#08445B; --perspektif-light:#D9F4FF; } /* ---------- GLOBAL ---------- */ body, .pkp_structure_page{ background:#FFFFFF!important; color:#3F4650!important; } a{ color:#0B5D7A; } a:hover, a:focus{ color:#08445B; } h1,h2,h3,h4,h5,h6{ color:#0B5D7A; } /* ---------- HEADER ---------- */ .pkp_structure_head, .pkp_head_wrapper, .pkp_site_name_wrapper, .pkp_site_name{ background:#FFFFFF!important; } .pkp_site_name{ border-bottom:3px solid #167A9B!important; } .pkp_navigation_user > li > a, .pkp_navigation_primary > li > a, .pkp_search a, .pkp_search button, .pkp_search .search_prompt{ color:#0B5D7A!important; -webkit-text-fill-color:#0B5D7A!important; } .pkp_navigation_user > li > a:hover, .pkp_navigation_primary > li > a:hover, .pkp_navigation_primary > li > a:focus, .pkp_search a:hover, .pkp_search button:hover, .pkp_search .search_prompt:hover{ color:#167A9B!important; -webkit-text-fill-color:#167A9B!important; background:#EAF7FB!important; } /* ---------- PRIMARY NAVIGATION ---------- */ .pkp_site_nav_menu, .pkp_navigation_primary_wrapper, .pkp_navigation_primary_row{ background:#FFFFFF!important; border-color:#D9EAF0!important; } .pkp_site_nav_menu{ border-bottom:2px solid #167A9B!important; box-shadow:0 5px 14px rgba(11,93,122,.10)!important; } .pkp_navigation_primary > li > a::before{ color:#167A9B!important; -webkit-text-fill-color:#167A9B!important; } .pkp_navigation_primary > li > a:hover::before{ color:#0B5D7A!important; -webkit-text-fill-color:#0B5D7A!important; } /* ---------- DROPDOWN ---------- */ .pkp_navigation_primary .dropdown-menu{ background:#FFFFFF!important; border:1px solid #B9DCE7!important; box-shadow:0 10px 24px rgba(11,93,122,.14)!important; } .pkp_navigation_primary .dropdown-menu a{ background:#FFFFFF!important; color:#0B5D7A!important; -webkit-text-fill-color:#0B5D7A!important; } .pkp_navigation_primary .dropdown-menu a:hover, .pkp_navigation_primary .dropdown-menu a:focus{ background:#D9F4FF!important; color:#08445B!important; -webkit-text-fill-color:#08445B!important; } /* ---------- SIDEBAR TITLE ---------- */ .sidebar-title{ background:linear-gradient( 135deg, #0B5D7A 0%, #167A9B 58%, #4BA3B8 100% )!important; color:#FFFFFF!important; border:0!important; box-shadow: 0 8px 18px rgba(11,93,122,.22), 0 4px 12px rgba(75,163,184,.14)!important; } /* ---------- SIDEBAR MENU ---------- */ .content .gap-2 .m-menu{ background:#FFFFFF!important; border:1px solid #B9DCE7!important; color:#0B5D7A!important; box-shadow:0 3px 10px rgba(11,93,122,.08)!important; } .content .gap-2 .m-menu::before{ background:linear-gradient( 90deg, #0B5D7A 0%, #167A9B 58%, #4BA3B8 100% )!important; } .content .gap-2 .m-menu em, .content .gap-2 .m-menu::after, .content .gap-2 .m-menu span{ color:#0B5D7A!important; } .content .gap-2 .m-menu:hover{ color:#FFFFFF!important; border-color:#167A9B!important; box-shadow:0 8px 18px rgba(11,93,122,.20)!important; } .content .gap-2 .m-menu:hover em, .content .gap-2 .m-menu:hover::after, .content .gap-2 .m-menu:hover span{ color:#FFFFFF!important; } .content .gap-2 .m-menu:focus-visible{ outline:2px solid #4BA3B8!important; outline-offset:2px; } /* ---------- BUTTONS ---------- */ .sp-btn{ background:linear-gradient( 135deg, #0B5D7A, #167A9B )!important; color:#FFFFFF!important; } .sp-btn:hover{ background:linear-gradient( 135deg, #08445B, #0B5D7A )!important; color:#FFFFFF!important; box-shadow:0 14px 30px rgba(11,93,122,.30)!important; } /* ---------- CARDS / INFO ---------- */ .sp-card{ border-color:#D9EAF0!important; } .sp-card:hover{ box-shadow:0 18px 35px rgba(11,93,122,.18)!important; } .sp-info:hover{ box-shadow:0 14px 24px rgba(11,93,122,.12)!important; } /* ---------- COVER ---------- */ .sp-cover img:hover{ box-shadow:0 18px 35px rgba(11,93,122,.28)!important; } /* ---------- FOCUS / ACCESSIBILITY ---------- */ :focus-visible{ outline-color:#4BA3B8!important; } /* ---------- MOBILE SIDEBAR ---------- */ @media(max-width:600px){ .sidebar-title{ background:linear-gradient( 135deg, #0B5D7A, #167A9B )!important; } } /* ========================================================== PERSPEKTIF V2 — BLUE + GOLD/YELLOW VISUAL IDENTITY Based on the current Perspektif cover: Blue : #003B73 / #0B5D7A / #167A9B Gold : #FFC400 / #FFD54A White : #FFFFFF Design principle: - Blue remains the dominant institutional color. - Yellow/gold is used only as a precise accent. - Avoid excessive gradients and decorative effects. ========================================================== */ :root{ --perspektif-navy:#003B73!important; --perspektif-primary:#0B5D7A!important; --perspektif-blue:#167A9B!important; --perspektif-accent:#FFC400!important; --perspektif-accent-light:#FFD54A!important; --perspektif-light:#EAF7FB!important; --perspektif-border:#C9E2EC!important; --perspektif-text:#34495E!important; } /* ========================================================== GLOBAL ========================================================== */ body, .pkp_structure_page{ background:#FFFFFF!important; color:#34495E!important; } body a, a{ color:#0B5D7A; } body a:hover, body a:focus, a:hover, a:focus{ color:#003B73; } h1,h2,h3,h4,h5,h6{ color:#003B73!important; } /* Yellow accent under major headings where the theme uses headings */ h1::after, h2::after{ border-color:#FFC400; } /* ========================================================== HEADER — BLUE + GOLD ========================================================== */ .pkp_structure_head, .pkp_head_wrapper, .pkp_site_name_wrapper, .pkp_site_name{ background:#FFFFFF!important; } .pkp_site_name{ border-bottom:4px solid #FFC400!important; } .pkp_site_name::after{ content:""; display:block; position:absolute; left:0; right:0; bottom:-4px; height:4px; background:#FFC400; pointer-events:none; } /* Register / Login */ .pkp_navigation_user > li > a, .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a{ color:#0B5D7A!important; -webkit-text-fill-color:#0B5D7A!important; } .pkp_navigation_user > li > a:hover, .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a:hover{ color:#003B73!important; -webkit-text-fill-color:#003B73!important; } .pkp_structure_head .pkp_navigation_user_wrapper .pkp_navigation_user > li > a::before{ color:#FFC400!important; -webkit-text-fill-color:#FFC400!important; } /* ========================================================== MAIN NAVIGATION ========================================================== */ .pkp_site_nav_menu, .pkp_navigation_primary_wrapper, .pkp_navigation_primary_row{ background:#003B73!important; border-color:#003B73!important; } .pkp_site_nav_menu{ border-bottom:3px solid #FFC400!important; box-shadow:0 5px 14px rgba(0,59,115,.18)!important; } .pkp_navigation_primary > li > a{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; } .pkp_navigation_primary > li > a::before{ color:#FFD54A!important; -webkit-text-fill-color:#FFD54A!important; } .pkp_navigation_primary > li > a:hover, .pkp_navigation_primary > li > a:focus{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; background:#0B5D7A!important; box-shadow:inset 0 -3px 0 #FFC400!important; } .pkp_navigation_primary > li > a:hover::before, .pkp_navigation_primary > li > a:focus::before{ color:#FFC400!important; -webkit-text-fill-color:#FFC400!important; } /* Active menu */ .pkp_navigation_primary > li > a[aria-current="page"], .pkp_navigation_primary > li.active > a, .pkp_navigation_primary > li.current > a{ background:#0B5D7A!important; color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; box-shadow:inset 0 -3px 0 #FFC400!important; } /* Search */ .pkp_search a, .pkp_search button, .pkp_search .search_prompt, .pkp_navigation_primary_row .pkp_search a, .pkp_navigation_primary_row .pkp_search button, .pkp_navigation_primary_row .pkp_search .search_prompt{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; } .pkp_search a:hover, .pkp_search button:hover, .pkp_search .search_prompt:hover, .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{ color:#FFFFFF!important; -webkit-text-fill-color:#FFFFFF!important; background:#0B5D7A!important; box-shadow:inset 0 -3px 0 #FFC400!important; } .pkp_navigation_primary_row .pkp_search a::before, .pkp_navigation_primary_row .pkp_search button::before, .pkp_navigation_primary_row .pkp_search .search_prompt::before{ color:#FFC400!important; -webkit-text-fill-color:#FFC400!important; } /* ========================================================== DROPDOWN ========================================================== */ .pkp_navigation_primary .dropdown-menu{ background:#FFFFFF!important; border:1px solid #B9DCE7!important; border-top:3px solid #FFC400!important; box-shadow:0 10px 24px rgba(0,59,115,.16)!important; } .pkp_navigation_primary .dropdown-menu a{ background:#FFFFFF!important; color:#003B73!important; -webkit-text-fill-color:#003B73!important; } .pkp_navigation_primary .dropdown-menu a:hover, .pkp_navigation_primary .dropdown-menu a:focus{ background:#EAF7FB!important; color:#0B5D7A!important; -webkit-text-fill-color:#0B5D7A!important; border-left:3px solid #FFC400!important; } /* ========================================================== SIDEBAR ========================================================== */ .sidebar-title{ position:relative!important; background:#003B73!important; color:#FFFFFF!important; border:0!important; border-bottom:4px solid #FFC400!important; box-shadow:0 8px 18px rgba(0,59,115,.18)!important; } .sidebar-title::before{ content:""; position:absolute; left:16px; top:50%; transform:translateY(-50%); width:5px; height:24px; border-radius:5px; background:#FFC400; } .content .gap-2 .m-menu{ background:#FFFFFF!important; border:1px solid #C9E2EC!important; color:#003B73!important; box-shadow:0 3px 10px rgba(0,59,115,.07)!important; } .content .gap-2 .m-menu::before{ background:#003B73!important; } .content .gap-2 .m-menu::after, .content .gap-2 .m-menu em, .content .gap-2 .m-menu span{ color:#0B5D7A!important; } .content .gap-2 .m-menu:hover{ color:#FFFFFF!important; background:#003B73!important; border-color:#003B73!important; box-shadow:0 8px 18px rgba(0,59,115,.18)!important; } .content .gap-2 .m-menu:hover em, .content .gap-2 .m-menu:hover::after, .content .gap-2 .m-menu:hover span{ color:#FFFFFF!important; } .content .gap-2 .m-menu:hover::after{ color:#FFC400!important; } .content .gap-2 .m-menu:focus-visible{ outline:2px solid #FFC400!important; outline-offset:2px; } /* ========================================================== HOMEPAGE HERO / BUTTONS / CARDS ========================================================== */ .sp-btn{ background:#003B73!important; color:#FFFFFF!important; border:1px solid #003B73!important; box-shadow:0 6px 16px rgba(0,59,115,.18)!important; } .sp-btn::after{ content:""; position:absolute; left:14px; right:14px; bottom:0; height:3px; background:#FFC400; border-radius:3px 3px 0 0; } .sp-btn:hover{ background:#0B5D7A!important; color:#FFFFFF!important; border-color:#FFC400!important; box-shadow:0 10px 24px rgba(0,59,115,.24)!important; } .sp-card{ border-color:#C9E2EC!important; } .sp-card:hover{ border-color:#FFC400!important; box-shadow:0 18px 35px rgba(0,59,115,.15)!important; } .sp-info{ border-color:#D9EAF0!important; } .sp-info:hover{ border-color:#FFC400!important; box-shadow:0 14px 24px rgba(0,59,115,.12)!important; } /* Cover hover keeps the gold accent restrained */ .sp-cover img:hover{ box-shadow:0 18px 35px rgba(0,59,115,.25)!important; } /* ========================================================== JOURNAL DESCRIPTION / CUSTOM HOMEPAGE BLOCKS ========================================================== */ .perspektif2026-home, .perspektif2026-banner{ border-color:#FFC400!important; } .perspektif2026-home h1, .perspektif2026-home h2, .perspektif2026-home h3{ color:#003B73!important; } .perspektif2026-home .gold-accent, .perspektif2026-home .accent, .perspektif2026-home .section-accent{ background:#FFC400!important; } /* Generic inline-style-compatible accent classes */ .perspektif-accent{ color:#003B73!important; border-color:#FFC400!important; } /* ========================================================== OJS CONTENT AREAS ========================================================== */ .pkp_page_index .page_index_journal{ border-top-color:#FFC400!important; } .pkp_page_index .current_issue h2, .pkp_page_index .additional_content h2, .pkp_page_index .homepage_about h2{ color:#003B73!important; border-bottom:3px solid #FFC400!important; } .pkp_page_index .current_issue .read_more a, .pkp_page_index .current_issue .obj_galley_link, .pkp_page_index .obj_article_summary .title a{ color:#003B73!important; } .pkp_page_index .current_issue .read_more a:hover, .pkp_page_index .obj_article_summary .title a:hover{ color:#0B5D7A!important; } /* ========================================================== FORMS / INPUTS / PAGINATION ========================================================== */ input:focus, textarea:focus, select:focus{ border-color:#FFC400!important; box-shadow:0 0 0 2px rgba(255,196,0,.18)!important; outline:none!important; } button, .button, .btn-primary, .pkp_button{ background:#003B73!important; border-color:#003B73!important; color:#FFFFFF!important; } button:hover, .button:hover, .btn-primary:hover, .pkp_button:hover{ background:#0B5D7A!important; border-color:#FFC400!important; color:#FFFFFF!important; } .pkp_pagination .current, .pkp_pagination .active, .pagination .active > a, .pagination .active > span{ background:#003B73!important; border-color:#003B73!important; color:#FFFFFF!important; } .pkp_pagination a:hover, .pagination a:hover{ color:#003B73!important; border-color:#FFC400!important; } /* ========================================================== FOOTER ========================================================== */ .pkp_structure_footer_wrapper, .pkp_structure_footer{ background:#003B73!important; color:#FFFFFF!important; border-top:4px solid #FFC400!important; } .pkp_structure_footer_wrapper a, .pkp_structure_footer a{ color:#FFFFFF!important; } .pkp_structure_footer_wrapper a:hover, .pkp_structure_footer a:hover{ color:#FFD54A!important; } .pkp_brand_footer{ border-top-color:#FFC400!important; } /* ========================================================== TABLES / BADGES / LABELS ========================================================== */ table thead th, .table thead th{ background:#003B73!important; color:#FFFFFF!important; border-bottom:3px solid #FFC400!important; } .label-primary, .badge-primary{ background:#003B73!important; color:#FFFFFF!important; } /* ========================================================== ACCESSIBILITY ========================================================== */ :focus-visible{ outline:2px solid #FFC400!important; outline-offset:2px; } /* ========================================================== RESPONSIVE — KEEP THE GOLD ACCENT CONSISTENT ========================================================== */ @media(max-width:600px){ .pkp_site_name{ border-bottom-width:3px!important; } .pkp_site_nav_menu{ border-bottom-width:3px!important; } .sidebar-title{ border-bottom-width:3px!important; } } /* ========================================================== PERSPEKTIF V3 — HERO ANIMATION + TRANSPARENT EDUCATION MOTIF FINAL VISUAL SYSTEM: NAVY BLUE + GOLD ========================================================== */ :root{ --perspektif-navy:#003B73; --perspektif-blue:#0B5D7A; --perspektif-blue2:#167A9B; --perspektif-gold:#FFC400; --perspektif-gold2:#FFD54A; --perspektif-light:#F7FAFC; } /* Keep the complete homepage identity aligned with the cover */ .perspektif2026-home{ --hero-navy:#003B73; --hero-blue:#0B5D7A; --hero-gold:#FFC400; --hero-white:#FFFFFF; } /* ========================================================== HERO BASE ========================================================== */ .perspektif2026-banner{ position:relative!important; overflow:hidden!important; isolation:isolate!important; background:#003B73!important; border:0!important; box-shadow:0 18px 42px rgba(0,40,80,.22)!important; } /* ========================================================== MAIN HERO PHOTO — SLOW KEN BURNS ANIMATION Works with the existing inline image in the HTML. ========================================================== */ .perspektif2026-banner-image{ overflow:hidden!important; } .perspektif2026-banner-image img{ transform:scale(1.04)!important; transform-origin:center center!important; animation:perspektifHeroZoom 16s ease-in-out infinite alternate!important; will-change:transform!important; transition:none!important; } @keyframes perspektifHeroZoom{ 0%{ transform:scale(1.04) translate3d(0,0,0); } 100%{ transform:scale(1.12) translate3d(-1.5%, -1%, 0); } } /* ========================================================== TRANSPARENT EDUCATION ILLUSTRATION A lightweight transparent SVG motif: open book + graduation cap. It floats subtly over the right side without covering the text. ========================================================== */ .perspektif2026-banner::before{ content:""; position:absolute; z-index:3; right:2.5%; top:8%; width:43%; height:82%; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 700 600'%3E%3Cg fill='none' stroke='%23FFC400' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M110 390 Q250 330 350 390 Q450 330 590 390 L590 485 Q450 425 350 485 Q250 425 110 485Z' stroke-width='10' opacity='.28'/%3E%3Cpath d='M350 390 V485' stroke-width='8' opacity='.28'/%3E%3Cpath d='M165 335 L350 255 L535 335 L350 415 Z' stroke-width='12' opacity='.34'/%3E%3Cpath d='M535 335 V395' stroke-width='9' opacity='.34'/%3E%3Ccircle cx='535' cy='405' r='9' fill='%23FFC400' stroke='none' opacity='.34'/%3E%3Cpath d='M215 360 Q350 315 485 360' stroke-width='7' opacity='.22'/%3E%3C/g%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:center; background-size:contain; opacity:.72; pointer-events:none; animation:perspektifEducationFloat 7s ease-in-out infinite; filter:drop-shadow(0 10px 18px rgba(0,0,0,.08)); will-change:transform; } @keyframes perspektifEducationFloat{ 0%,100%{ transform:translate3d(0,0,0) rotate(0deg); } 50%{ transform:translate3d(0,-10px,0) rotate(-1deg); } } /* A second transparent light layer gives the hero more depth. */ .perspektif2026-banner::after{ content:""; position:absolute; z-index:2; inset:0; pointer-events:none; background: radial-gradient(circle at 82% 35%,rgba(255,255,255,.16) 0,rgba(255,255,255,0) 27%), linear-gradient(120deg,rgba(255,196,0,0) 48%,rgba(255,196,0,.13) 49%,rgba(255,196,0,0) 50%); opacity:.9; } /* ========================================================== HERO CONTENT — SOFT ENTRANCE ANIMATION ========================================================== */ .perspektif2026-content{ animation:perspektifHeroContent .9s cubic-bezier(.22,1,.36,1) both; } @keyframes perspektifHeroContent{ from{ opacity:0; transform:translate3d(-18px,12px,0); } to{ opacity:1; transform:translate3d(0,0,0); } } /* ========================================================== HERO BADGE ========================================================== */ .perspektif2026-content > span:first-child{ position:relative; overflow:hidden; border-color:rgba(255,196,0,.65)!important; background:rgba(0,35,70,.34)!important; box-shadow:0 5px 18px rgba(0,20,50,.16); } .perspektif2026-content > span:first-child::after{ content:""; position:absolute; top:0; left:-80%; width:45%; height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent); transform:skewX(-25deg); animation:perspektifBadgeShine 4.5s ease-in-out infinite; } @keyframes perspektifBadgeShine{ 0%,55%{left:-80%;} 100%{left:145%;} } /* ========================================================== HERO TITLE / GOLD IDENTITY ========================================================== */ .perspektif2026-content h1{ color:#FFFFFF!important; text-shadow:0 5px 18px rgba(0,20,50,.36)!important; } .perspektif2026-content h1 + div{ color:#FFC400!important; } /* Gold accent line below the title */ .perspektif2026-content h1::after{ content:""; display:block; width:0; height:4px; margin-top:12px; border-radius:4px; background:#FFC400; animation:perspektifTitleLine 1.2s .45s cubic-bezier(.22,1,.36,1) forwards; } @keyframes perspektifTitleLine{ to{width:92px;} } /* ========================================================== HERO BUTTONS — GOLD PRIMARY + BLUE SECONDARY ========================================================== */ .perspektif2026-content a{ transition:transform .28s ease,box-shadow .28s ease,background-color .28s ease,border-color .28s ease!important; } .perspektif2026-content a[href*="submissions"]{ background:#FFC400!important; border-color:#FFC400!important; color:#003B73!important; box-shadow:0 8px 22px rgba(0,30,60,.25)!important; } .perspektif2026-content a[href*="submissions"]:hover{ background:#FFD54A!important; border-color:#FFD54A!important; color:#003B73!important; transform:translateY(-3px)!important; box-shadow:0 12px 28px rgba(0,30,60,.30)!important; } .perspektif2026-content a:not([href*="submissions"]):hover{ background:rgba(255,255,255,.18)!important; border-color:#FFC400!important; transform:translateY(-3px)!important; box-shadow:0 10px 24px rgba(0,25,55,.20)!important; } /* ========================================================== HERO GOLD BOTTOM BAR — ANIMATED LIGHT SWEEP ========================================================== */ .perspektif2026-banner > div:last-child{ background:#FFC400!important; overflow:hidden; } .perspektif2026-banner > div:last-child::after{ content:""; position:absolute; top:0; left:-20%; width:20%; height:100%; background:rgba(255,255,255,.65); filter:blur(4px); animation:perspektifGoldSweep 4s linear infinite; } @keyframes perspektifGoldSweep{ 0%{left:-20%;} 100%{left:120%;} } /* ========================================================== JOURNAL DESCRIPTION — MATCH HERO ========================================================== */ .perspektif2026-home > div + div > div{ border-top-color:#FFC400!important; box-shadow:0 10px 26px rgba(0,59,115,.09)!important; } .perspektif2026-home h2{ color:#003B73!important; } .perspektif2026-home h2 + div{ background:#FFC400!important; } .perspektif2026-home img{ transition:transform .45s ease,box-shadow .45s ease; } .perspektif2026-home img:hover{ transform:translateY(-5px)!important; } /* ========================================================== ACCESSIBILITY — REDUCE MOTION ========================================================== */ @media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto!important;} .perspektif2026-banner-image img, .perspektif2026-banner::before, .perspektif2026-content, .perspektif2026-content > span:first-child::after, .perspektif2026-banner > div:last-child::after, .perspektif2026-content h1::after{ animation:none!important; } } /* ========================================================== RESPONSIVE HERO ========================================================== */ @media (max-width:900px){ .perspektif2026-banner{ min-height:390px!important; } .perspektif2026-banner::before{ right:-5%; width:50%; opacity:.48; } .perspektif2026-banner-image img{ width:68%!important; opacity:.58!important; } } @media (max-width:600px){ .perspektif2026-banner{ min-height:500px!important; border-radius:14px!important; } .perspektif2026-banner-image img{ top:auto!important; bottom:0!important; right:-18%!important; width:92%!important; height:58%!important; opacity:.32!important; object-position:center!important; } .perspektif2026-banner::before{ right:-10%; top:40%; width:85%; height:55%; opacity:.30; } .perspektif2026-banner::after{ background: linear-gradient(180deg,rgba(0,39,77,.12) 0%,rgba(0,39,77,.55) 58%,rgba(0,39,77,.92) 100%); } .perspektif2026-content{ padding:42px 26px 55px!important; } .perspektif2026-content h1{ font-size:38px!important; } .perspektif2026-content h1 + div{ font-size:21px!important; } .perspektif2026-content p{ font-size:14px!important; line-height:1.65!important; } } /* ========================================================== PERSPEKTIF V4 — COMPACT HERO Goal: - Reduce desktop hero height substantially - Keep title, subtitle, description and 3 buttons visible - Preserve V3 animation + transparent education motif - Reduce empty vertical space ========================================================== */ /* ---------- DESKTOP COMPACT HERO ---------- */ @media (min-width:901px){ .perspektif2026-banner{ min-height:360px!important; height:360px!important; border-radius:20px!important; box-shadow:0 12px 30px rgba(0,40,80,.18)!important; } .perspektif2026-banner-image{ position:absolute!important; inset:0!important; width:100%!important; height:100%!important; z-index:0!important; } .perspektif2026-banner-image img{ width:100%!important; height:100%!important; object-fit:cover!important; object-position:center!important; opacity:.48!important; } .perspektif2026-content{ position:relative!important; z-index:5!important; width:64%!important; max-width:760px!important; padding:28px 42px 30px!important; box-sizing:border-box!important; } /* Compact badge */ .perspektif2026-content > span:first-child{ display:inline-flex!important; margin-bottom:10px!important; padding:7px 14px!important; font-size:11px!important; line-height:1.15!important; letter-spacing:.45px!important; } /* Compact title */ .perspektif2026-content h1{ margin:0!important; font-size:48px!important; line-height:.98!important; letter-spacing:.5px!important; } .perspektif2026-content h1::after{ margin-top:8px!important; height:3px!important; } /* Subtitle */ .perspektif2026-content h1 + div{ margin-top:8px!important; font-size:23px!important; line-height:1.15!important; } /* Small journal label */ .perspektif2026-content h1 + div + div{ margin-top:10px!important; font-size:12px!important; letter-spacing:1.4px!important; } /* Description */ .perspektif2026-content p{ max-width:720px!important; margin:12px 0 16px!important; font-size:14px!important; line-height:1.48!important; } /* Compact buttons */ .perspektif2026-content a{ padding:10px 17px!important; min-height:40px!important; font-size:13px!important; line-height:1.15!important; border-radius:9px!important; } /* Smaller transparent education motif */ .perspektif2026-banner::before{ right:1%!important; top:12%!important; width:37%!important; height:76%!important; opacity:.48!important; } /* Softer overlay */ .perspektif2026-banner::after{ background: radial-gradient(circle at 82% 42%,rgba(255,255,255,.12) 0,rgba(255,255,255,0) 25%), linear-gradient(105deg,rgba(0,28,60,.16) 0%,rgba(0,59,115,.08) 55%,rgba(0,20,50,.22) 100%)!important; } /* Compact gold bottom line */ .perspektif2026-banner > div:last-child{ height:4px!important; } } /* ---------- LARGE DESKTOP: EVEN MORE BALANCED ---------- */ @media (min-width:1200px){ .perspektif2026-banner{ height:350px!important; min-height:350px!important; } .perspektif2026-content{ width:62%!important; padding:25px 42px 27px!important; } .perspektif2026-content h1{ font-size:46px!important; } .perspektif2026-content h1 + div{ font-size:22px!important; } .perspektif2026-content p{ margin-top:11px!important; margin-bottom:14px!important; font-size:13.5px!important; line-height:1.45!important; } } /* ---------- TABLET ---------- */ @media (max-width:900px) and (min-width:601px){ .perspektif2026-banner{ min-height:340px!important; height:340px!important; border-radius:16px!important; } .perspektif2026-content{ width:72%!important; padding:25px 30px 28px!important; } .perspektif2026-content > span:first-child{ margin-bottom:8px!important; padding:6px 12px!important; font-size:10px!important; } .perspektif2026-content h1{ font-size:42px!important; line-height:1!important; } .perspektif2026-content h1 + div{ font-size:20px!important; margin-top:7px!important; } .perspektif2026-content p{ margin:10px 0 14px!important; font-size:13px!important; line-height:1.5!important; } .perspektif2026-content a{ padding:9px 14px!important; font-size:12px!important; } .perspektif2026-banner::before{ width:40%!important; opacity:.35!important; } } /* ---------- MOBILE COMPACT HERO ---------- */ @media (max-width:600px){ .perspektif2026-banner{ min-height:410px!important; height:auto!important; border-radius:14px!important; } .perspektif2026-content{ padding:28px 22px 42px!important; width:100%!important; } .perspektif2026-content > span:first-child{ margin-bottom:8px!important; padding:6px 10px!important; font-size:9px!important; letter-spacing:.25px!important; } .perspektif2026-content h1{ font-size:34px!important; line-height:1!important; letter-spacing:0!important; } .perspektif2026-content h1::after{ width:62px!important; height:3px!important; margin-top:8px!important; } .perspektif2026-content h1 + div{ margin-top:7px!important; font-size:19px!important; } .perspektif2026-content h1 + div + div{ margin-top:8px!important; font-size:10px!important; letter-spacing:1px!important; } .perspektif2026-content p{ margin:10px 0 14px!important; font-size:12.5px!important; line-height:1.5!important; } .perspektif2026-content a{ display:inline-flex!important; padding:9px 12px!important; min-height:38px!important; margin-right:4px!important; margin-bottom:6px!important; font-size:11px!important; border-radius:8px!important; } .perspektif2026-banner-image img{ opacity:.24!important; } .perspektif2026-banner::before{ right:-8%!important; top:45%!important; width:72%!important; height:50%!important; opacity:.22!important; } } /* ---------- REDUCE MOTION ---------- */ @media (prefers-reduced-motion:reduce){ .perspektif2026-banner-image img, .perspektif2026-banner::before, .perspektif2026-content, .perspektif2026-content > span:first-child::after, .perspektif2026-banner > div:last-child::after{ animation:none!important; } } /* ========================================================== PERSPEKTIF V5 — FOOTER ADOPTED FROM REFERENCE LAYOUT Visual structure: 1. White Indexing & Abstracting card 2. Six compact indexing/logo cells when supplied in HTML 3. Navy/blue main footer 4. Three-column information area 5. Compact bottom copyright/meta bar Palette: Navy #003B73 Blue #0B5D7A Blue 2 #167A9B Gold #FFC400 Light Gold #FFD54A ========================================================== */ /* ---------- FOOTER OUTER CONTAINER ---------- */ .pkp_structure_footer_wrapper{ background:#FFFFFF!important; border-top:0!important; margin-top:28px!important; padding-top:0!important; } .pkp_structure_footer{ position:relative!important; width:100%!important; max-width:1160px!important; margin:0 auto!important; padding:0!important; background:linear-gradient( 135deg, #0B5D7A 0%, #003B73 55%, #08445B 100% )!important; color:#FFFFFF!important; border:0!important; box-shadow:none!important; } /* Keep standard OJS footer text readable */ .pkp_structure_footer, .pkp_structure_footer p, .pkp_structure_footer li, .pkp_structure_footer span, .pkp_structure_footer div{ color:#FFFFFF!important; } .pkp_structure_footer a{ color:#FFFFFF!important; text-decoration:none!important; transition:color .25s ease,opacity .25s ease,transform .25s ease!important; } .pkp_structure_footer a:hover{ color:#FFD54A!important; } /* ========================================================== INDEXING & ABSTRACTING — WHITE CARD ABOVE FOOTER Works with the custom HTML used in the Perspektif footer: .footer-indexing-wrapper .footer-indexing-card .footer-indexing-title .footer-indexing-grid ========================================================== */ .footer-indexing-wrapper{ width:100%!important; max-width:1160px!important; margin:0 auto!important; padding:0 12px!important; box-sizing:border-box!important; background:#FFFFFF!important; } .footer-indexing-card{ position:relative!important; width:100%!important; margin:0 auto!important; padding:13px 14px 12px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid #FFD28A!important; border-bottom:4px solid #FFC400!important; border-radius:15px!important; box-shadow:0 6px 18px rgba(0,59,115,.10)!important; z-index:5!important; } .footer-indexing-title{ margin:0 0 9px!important; padding:0!important; color:#0B5D7A!important; font-family:Arial,Helvetica,sans-serif!important; font-size:17px!important; font-weight:800!important; line-height:1.2!important; text-align:center!important; letter-spacing:.35px!important; text-transform:uppercase!important; } .footer-indexing-grid{ display:grid!important; grid-template-columns:repeat(6,minmax(0,1fr))!important; gap:8px!important; width:100%!important; margin:0!important; padding:0!important; } .footer-indexing-grid > a, .footer-indexing-grid > div, .footer-indexing-grid .indexing-item{ min-height:58px!important; display:flex!important; align-items:center!important; justify-content:center!important; padding:7px 9px!important; box-sizing:border-box!important; background:#FFFFFF!important; border:1px solid #D7E2EC!important; border-radius:9px!important; text-decoration:none!important; overflow:hidden!important; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease, background .25s ease!important; } .footer-indexing-grid > a:hover, .footer-indexing-grid > div:hover, .footer-indexing-grid .indexing-item:hover{ transform:translateY(-2px)!important; border-color:#FFC400!important; background:#FFFCF2!important; box-shadow:0 6px 14px rgba(0,59,115,.10)!important; } .footer-indexing-grid img{ display:block!important; width:auto!important; max-width:88%!important; height:auto!important; max-height:38px!important; object-fit:contain!important; margin:0 auto!important; transform:none!important; filter:none!important; } .footer-indexing-grid img:hover{ transform:none!important; } /* ========================================================== MAIN FOOTER — THREE COLUMNS ========================================================== */ .perspektif-footer{ width:100%!important; box-sizing:border-box!important; padding:34px 44px 0!important; background:linear-gradient( 135deg, #0B5D7A 0%, #003B73 58%, #08445B 100% )!important; color:#FFFFFF!important; } .perspektif-footer, .perspektif-footer *{ box-sizing:border-box!important; } .perspektif-footer-inner{ display:grid!important; grid-template-columns:1.25fr .9fr 1.25fr!important; gap:48px!important; width:100%!important; max-width:1100px!important; margin:0 auto!important; } .perspektif-footer-column{ min-width:0!important; } .perspektif-footer-column h3, .perspektif-footer h3{ margin:0 0 13px!important; padding:0!important; color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif!important; font-size:18px!important; font-weight:800!important; line-height:1.25!important; } .perspektif-footer-column h3::after, .perspektif-footer h3::after{ content:""!important; display:block!important; width:38px!important; height:3px!important; margin-top:7px!important; background:#FFC400!important; border-radius:2px!important; } .perspektif-footer-column p{ margin:0 0 8px!important; color:rgba(255,255,255,.94)!important; font-family:Arial,Helvetica,sans-serif!important; font-size:13.5px!important; line-height:1.65!important; } .perspektif-footer-column strong{ color:#FFFFFF!important; font-weight:800!important; } .perspektif-footer-column a{ color:#FFFFFF!important; } .perspektif-footer-column a:hover{ color:#FFD54A!important; } /* ---------- QUICK LINKS ---------- */ .perspektif-footer-links{ list-style:none!important; margin:0!important; padding:0!important; } .perspektif-footer-links li{ margin:0!important; padding:0!important; } .perspektif-footer-links a{ display:block!important; padding:5px 0!important; color:#FFFFFF!important; font-size:13.5px!important; line-height:1.45!important; text-decoration:none!important; } .perspektif-footer-links a::before{ content:"›"!important; display:inline-block!important; width:18px!important; color:#FFC400!important; font-weight:800!important; transition:transform .2s ease!important; } .perspektif-footer-links a:hover::before{ transform:translateX(3px)!important; } /* ---------- CONTACT ---------- */ .perspektif-footer-contact p{ margin-bottom:5px!important; } .perspektif-footer-contact .footer-contact-label{ color:#FFD54A!important; font-weight:800!important; } .perspektif-footer-contact a{ color:#FFFFFF!important; } /* ========================================================== FOOTER BOTTOM / COPYRIGHT BAR ========================================================== */ .footer-bottom{ width:100%!important; margin-top:28px!important; padding:15px 44px 17px!important; box-sizing:border-box!important; background:rgba(0,0,0,.14)!important; border-top:1px solid rgba(255,255,255,.18)!important; color:#FFFFFF!important; } .footer-bottom-inner{ display:flex!important; align-items:center!important; justify-content:space-between!important; flex-wrap:wrap!important; gap:8px 20px!important; max-width:1100px!important; margin:0 auto!important; } .footer-bottom p{ margin:0!important; color:rgba(255,255,255,.95)!important; font-family:Arial,Helvetica,sans-serif!important; font-size:12px!important; line-height:1.5!important; } .footer-bottom strong{ color:#FFFFFF!important; } .footer-bottom .footer-meta{ display:flex!important; align-items:center!important; justify-content:flex-end!important; flex-wrap:wrap!important; gap:5px 13px!important; } .footer-bottom .footer-meta span{ color:#FFFFFF!important; font-size:12px!important; } .footer-bottom .footer-meta span:not(:last-child)::after{ content:"|"!important; margin-left:13px!important; color:rgba(255,255,255,.45)!important; } /* ========================================================== STANDARD OJS FOOTER BRANDING ========================================================== */ .pkp_brand_footer{ margin:0!important; padding:10px 20px!important; background:#003B73!important; border-top:1px solid rgba(255,255,255,.12)!important; color:#FFFFFF!important; } .pkp_brand_footer a{ color:#FFFFFF!important; } .pkp_brand_footer a:hover{ color:#FFD54A!important; } /* ========================================================== RESPONSIVE — TABLET ========================================================== */ @media(max-width:900px){ .pkp_structure_footer{ max-width:100%!important; } .footer-indexing-wrapper{ padding:0 10px!important; } .footer-indexing-grid{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px!important; } .footer-indexing-grid > a, .footer-indexing-grid > div, .footer-indexing-grid .indexing-item{ min-height:56px!important; } .perspektif-footer{ padding:30px 28px 0!important; } .perspektif-footer-inner{ grid-template-columns:1fr 1fr!important; gap:30px!important; } .perspektif-footer-column:last-child{ grid-column:1 / -1!important; } .footer-bottom{ padding:14px 28px 16px!important; } } /* ========================================================== RESPONSIVE — MOBILE ========================================================== */ @media(max-width:600px){ .pkp_structure_footer_wrapper{ margin-top:20px!important; } .footer-indexing-card{ padding:11px 9px 10px!important; border-radius:12px!important; } .footer-indexing-title{ margin-bottom:8px!important; font-size:14px!important; } .footer-indexing-grid{ grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:7px!important; } .footer-indexing-grid > a, .footer-indexing-grid > div, .footer-indexing-grid .indexing-item{ min-height:52px!important; padding:6px 7px!important; border-radius:8px!important; } .footer-indexing-grid img{ max-width:90%!important; max-height:32px!important; } .perspektif-footer{ padding:26px 20px 0!important; } .perspektif-footer-inner{ grid-template-columns:1fr!important; gap:23px!important; } .perspektif-footer-column:last-child{ grid-column:auto!important; } .perspektif-footer-column h3, .perspektif-footer h3{ font-size:17px!important; margin-bottom:10px!important; } .perspektif-footer-column p, .perspektif-footer-links a{ font-size:13px!important; } .footer-bottom{ margin-top:22px!important; padding:13px 20px 15px!important; } .footer-bottom-inner{ display:block!important; } .footer-bottom p{ margin-bottom:7px!important; font-size:11.5px!important; } .footer-bottom .footer-meta{ justify-content:flex-start!important; gap:4px 9px!important; } .footer-bottom .footer-meta span{ font-size:11px!important; } .footer-bottom .footer-meta span:not(:last-child)::after{ margin-left:9px!important; } .pkp_brand_footer{ padding:8px 14px!important; font-size:11px!important; } } /* ========================================================== REMOVE LEGACY ORANGE FOOTER STYLING ========================================================== */ .pkp_structure_footer_wrapper *, .pkp_structure_footer *{ border-color:inherit; } .pkp_structure_footer_wrapper .footer-indexing-title, .pkp_structure_footer .footer-indexing-title{ color:#0B5D7A!important; } .pkp_structure_footer_wrapper .footer-bottom, .pkp_structure_footer .footer-bottom{ background:rgba(0,0,0,.14)!important; } /* ========================================================== ACCESSIBILITY ========================================================== */ .footer-indexing-grid a:focus-visible, .perspektif-footer a:focus-visible{ outline:2px solid #FFC400!important; outline-offset:2px!important; } /* ========================================================== PERSPEKTIF V6 — EXTRA COMPACT FOOTER + REMOVE BASE ========================================================== */ /* ---------- MORE COMPACT INDEXING AREA ---------- */ .pkp_structure_footer_wrapper{ margin-top:18px!important; } .footer-indexing-wrapper{ padding:0 8px!important; } .footer-indexing-card{ padding:9px 10px 9px!important; border-radius:11px!important; border-bottom-width:3px!important; box-shadow:0 4px 12px rgba(0,59,115,.08)!important; } .footer-indexing-title{ margin-bottom:6px!important; font-size:14px!important; letter-spacing:.25px!important; } .footer-indexing-grid{ gap:6px!important; } .footer-indexing-grid > a, .footer-indexing-grid > div, .footer-indexing-grid .indexing-item{ min-height:46px!important; padding:5px 7px!important; border-radius:7px!important; } .footer-indexing-grid img{ max-width:86%!important; max-height:29px!important; } /* ---------- HIDE BASE INDEXING ITEM ---------- */ /* Works when BASE is identified through its image alt/title/text. */ .footer-indexing-grid > a:has(img[alt*="BASE" i]), .footer-indexing-grid > div:has(img[alt*="BASE" i]), .footer-indexing-grid .indexing-item:has(img[alt*="BASE" i]), .footer-indexing-grid > a:has([title*="BASE" i]), .footer-indexing-grid > div:has([title*="BASE" i]), .footer-indexing-grid .indexing-item:has([title*="BASE" i]){ display:none!important; } /* ---------- COMPACT MAIN FOOTER ---------- */ .perspektif-footer{ padding:23px 32px 0!important; } .perspektif-footer-inner{ grid-template-columns:1.25fr .9fr 1.25fr!important; gap:30px!important; max-width:1100px!important; } .perspektif-footer-column h3, .perspektif-footer h3{ margin-bottom:9px!important; font-size:16px!important; } .perspektif-footer-column h3::after, .perspektif-footer h3::after{ width:30px!important; height:2px!important; margin-top:5px!important; } .perspektif-footer-column p{ margin-bottom:5px!important; font-size:12.5px!important; line-height:1.48!important; } .perspektif-footer-links a{ padding:3px 0!important; font-size:12.5px!important; line-height:1.35!important; } .perspektif-footer-links a::before{ width:15px!important; } .perspektif-footer-contact p{ margin-bottom:3px!important; } /* ---------- COMPACT BOTTOM BAR ---------- */ .footer-bottom{ margin-top:17px!important; padding:10px 32px 11px!important; } .footer-bottom p{ margin-bottom:4px!important; font-size:11.5px!important; line-height:1.35!important; } .footer-bottom .footer-meta{ gap:3px 10px!important; } .footer-bottom .footer-meta span{ font-size:11.5px!important; } .footer-bottom .footer-meta span:not(:last-child)::after{ margin-left:10px!important; } /* ---------- TABLET ---------- */ @media(max-width:900px){ .footer-indexing-wrapper{ padding:0 7px!important; } .footer-indexing-card{ padding:8px 8px!important; } .footer-indexing-grid{ gap:6px!important; } .footer-indexing-grid > a, .footer-indexing-grid > div, .footer-indexing-grid .indexing-item{ min-height:44px!important; padding:5px 6px!important; } .footer-indexing-grid img{ max-height:27px!important; } .perspektif-footer{ padding:21px 24px 0!important; } .perspektif-footer-inner{ gap:22px!important; } .footer-bottom{ padding:9px 24px 10px!important; } } /* ---------- MOBILE ---------- */ @media(max-width:600px){ .pkp_structure_footer_wrapper{ margin-top:14px!important; } .footer-indexing-card{ padding:8px 7px!important; border-radius:10px!important; } .footer-indexing-title{ margin-bottom:6px!important; font-size:13px!important; } .footer-indexing-grid{ gap:5px!important; } .footer-indexing-grid > a, .footer-indexing-grid > div, .footer-indexing-grid .indexing-item{ min-height:43px!important; padding:4px 5px!important; border-radius:7px!important; } .footer-indexing-grid img{ max-width:88%!important; max-height:26px!important; } .perspektif-footer{ padding:20px 18px 0!important; } .perspektif-footer-inner{ gap:18px!important; } .perspektif-footer-column h3, .perspektif-footer h3{ font-size:16px!important; margin-bottom:8px!important; } .perspektif-footer-column p, .perspektif-footer-links a{ font-size:12px!important; } .footer-bottom{ margin-top:16px!important; padding:9px 18px 10px!important; } .footer-bottom p{ font-size:10.5px!important; } .footer-bottom .footer-meta span{ font-size:10.5px!important; } } /* ========================================================== PERSPEKTIF V7 — FOOTER FINAL STRUCTURE FIX ---------------------------------------------------------- Fixes the mismatch between the current HTML: .perspektif-footer .footer-column and older CSS expecting: .perspektif-footer-inner .perspektif-footer-column BASE remains hidden visually; this does NOT change the journal's official indexing status. ========================================================== */ /* ========================================================== FOOTER OUTER AREA ========================================================== */ .pkp_structure_footer_wrapper{ width:100%!important; margin:18px 0 0!important; padding:0!important; background:#FFFFFF!important; box-sizing:border-box!important; } .pkp_structure_footer{ width:100%!important; max-width:1160px!important; margin:0 auto!important; padding:0!important; background:#003B73!important; box-sizing:border-box!important; } /* ========================================================== INDEXING & ABSTRACTING CARD ========================================================== */ .footer-indexing-wrapper{ position:relative!important; z-index:10!important; width:100%!important; max-width:1160px!important; margin:0 auto -1px!important; padding:0 10px!important; box-sizing:border-box!important; background:transparent!important; } .footer-indexing-card{ width:100%!important; margin:0 auto!important; padding:11px 14px 12px!important; background:#FFFFFF!important; border:1px solid #D7E2EC!important; border-bottom:4px solid #FFC400!important; border-radius:15px!important; box-shadow:0 7px 18px rgba(0,59,115,.10)!important; box-sizing:border-box!important; } .footer-indexing-title{ margin:0 0 9px!important; padding:0!important; color:#003B73!important; font-family:Arial,Helvetica,sans-serif!important; font-size:18px!important; font-weight:800!important; line-height:1.2!important; text-align:center!important; letter-spacing:.25px!important; } /* Exactly three visible indexing cards: Google Scholar / GARUDA / SINTA */ .footer-indexing-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:8px!important; width:100%!important; margin:0!important; padding:0!important; box-sizing:border-box!important; } .footer-indexing-grid > a, .footer-indexing-grid > div, .footer-indexing-grid .indexing-item{ min-height:58px!important; display:flex!important; align-items:center!important; justify-content:center!important; padding:6px 9px!important; background:#FFFFFF!important; border:1px solid #D7E2EC!important; border-radius:9px!important; box-sizing:border-box!important; text-decoration:none!important; } .footer-indexing-grid img{ display:block!important; width:auto!important; height:auto!important; max-width:125px!important; max-height:34px!important; margin:0 auto!important; object-fit:contain!important; } /* Hide BASE even if it remains in the HTML */ .footer-indexing-grid > a:has(img[alt*="BASE" i]), .footer-indexing-grid > div:has(img[alt*="BASE" i]), .footer-indexing-grid .indexing-item:has(img[alt*="BASE" i]), .footer-indexing-grid > a:has([title*="BASE" i]), .footer-indexing-grid > div:has([title*="BASE" i]), .footer-indexing-grid .indexing-item:has([title*="BASE" i]){ display:none!important; } /* ========================================================== MAIN FOOTER — DIRECTLY MATCH CURRENT HTML ========================================================== */ .perspektif-footer{ width:100%!important; display:grid!important; grid-template-columns:1.3fr .8fr 1fr!important; gap:0!important; margin:0!important; padding:32px 42px 24px!important; background:linear-gradient( 135deg, #003B73 0%, #08445B 100% )!important; color:#FFFFFF!important; box-sizing:border-box!important; } .perspektif-footer > .footer-column{ min-width:0!important; padding:0 26px!important; box-sizing:border-box!important; } .perspektif-footer > .footer-column:first-child{ padding-left:0!important; } .perspektif-footer > .footer-column:last-child{ padding-right:0!important; } .perspektif-footer > .footer-column:not(:last-child){ border-right:1px solid rgba(255,255,255,.20)!important; } /* ========================================================== FOOTER HEADINGS ========================================================== */ .perspektif-footer > .footer-column h3{ margin:0 0 11px!important; padding:0!important; color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif!important; font-size:18px!important; font-weight:800!important; line-height:1.25!important; } .perspektif-footer > .footer-column h3::after{ content:""!important; display:block!important; width:36px!important; height:3px!important; margin-top:6px!important; background:#FFC400!important; border-radius:2px!important; } /* ========================================================== FOOTER TEXT ========================================================== */ .perspektif-footer > .footer-column p{ margin:0 0 7px!important; color:rgba(255,255,255,.95)!important; font-family:Arial,Helvetica,sans-serif!important; font-size:13px!important; line-height:1.55!important; } .perspektif-footer > .footer-column strong{ color:#FFFFFF!important; font-weight:800!important; } /* ========================================================== QUICK LINKS — CURRENT HTML USES .footer-menu ========================================================== */ .perspektif-footer .footer-menu{ list-style:none!important; margin:0!important; padding:0!important; } .perspektif-footer .footer-menu li{ margin:0!important; padding:0!important; } .perspektif-footer .footer-menu li a{ display:block!important; padding:3px 0!important; color:#FFFFFF!important; font-size:13px!important; line-height:1.4!important; text-decoration:none!important; } .perspektif-footer .footer-menu li a::before{ content:"›"!important; display:inline-block!important; width:16px!important; color:#FFC400!important; font-weight:800!important; } .perspektif-footer .footer-menu li a:hover{ color:#FFD54A!important; } /* ========================================================== CONTACT INFO ========================================================== */ .perspektif-footer .contact-item{ margin:0 0 4px!important; color:#FFFFFF!important; font-family:Arial,Helvetica,sans-serif!important; font-size:13px!important; line-height:1.55!important; } .perspektif-footer .contact-item a{ color:#FFD54A!important; text-decoration:none!important; } .perspektif-footer .contact-item a:hover{ color:#FFFFFF!important; text-decoration:underline!important; } /* ========================================================== FOOTER BOTTOM — CURRENT HTML ========================================================== */ .footer-bottom{ width:100%!important; margin:0!important; padding:11px 42px 13px!important; background:#002E59!important; border-top:1px solid rgba(255,255,255,.16)!important; color:#FFFFFF!important; box-sizing:border-box!important; } .footer-bottom p{ margin:3px 0!important; color:rgba(255,255,255,.95)!important; font-family:Arial,Helvetica,sans-serif!important; font-size:11.5px!important; line-height:1.45!important; } .footer-bottom strong{ color:#FFFFFF!important; } .footer-bottom a{ color:#FFD54A!important; text-decoration:none!important; } .footer-bottom a:hover{ color:#FFFFFF!important; text-decoration:underline!important; } /* ========================================================== REMOVE EXTRA OJS BRANDING SPACE ========================================================== */ .pkp_brand_footer{ margin:0!important; padding:8px 20px!important; background:#003B73!important; border-top:1px solid rgba(255,255,255,.12)!important; color:#FFFFFF!important; } /* ========================================================== TABLET ========================================================== */ @media(max-width:900px){ .pkp_structure_footer{ max-width:100%!important; } .footer-indexing-wrapper{ padding:0 8px!important; } .footer-indexing-grid{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:7px!important; } .footer-indexing-grid > a, .footer-indexing-grid > div, .footer-indexing-grid .indexing-item{ min-height:52px!important; } .footer-indexing-grid img{ max-height:30px!important; } .perspektif-footer{ grid-template-columns:1fr 1fr!important; gap:22px 0!important; padding:28px 24px 20px!important; } .perspektif-footer > .footer-column{ padding:0 18px!important; } .perspektif-footer > .footer-column:first-child{ padding-left:0!important; } .perspektif-footer > .footer-column:nth-child(2){ padding-right:0!important; border-right:none!important; } .perspektif-footer > .footer-column:last-child{ grid-column:1 / -1!important; padding:20px 0 0!important; border-right:none!important; border-top:1px solid rgba(255,255,255,.20)!important; } .footer-bottom{ padding:10px 24px 12px!important; } } /* ========================================================== MOBILE ========================================================== */ @media(max-width:600px){ .pkp_structure_footer_wrapper{ margin-top:14px!important; } .footer-indexing-wrapper{ padding:0 7px!important; } .footer-indexing-card{ padding:9px 7px 10px!important; border-radius:12px!important; } .footer-indexing-title{ font-size:14px!important; margin-bottom:7px!important; } .footer-indexing-grid{ grid-template-columns:1fr!important; gap:6px!important; } .footer-indexing-grid > a, .footer-indexing-grid > div, .footer-indexing-grid .indexing-item{ min-height:47px!important; padding:5px!important; } .footer-indexing-grid img{ max-width:90%!important; max-height:28px!important; } .perspektif-footer{ grid-template-columns:1fr!important; gap:0!important; padding:25px 18px 18px!important; } .perspektif-footer > .footer-column, .perspektif-footer > .footer-column:first-child, .perspektif-footer > .footer-column:nth-child(2), .perspektif-footer > .footer-column:last-child{ grid-column:auto!important; padding:0 0 17px!important; margin:0 0 17px!important; border-right:none!important; border-top:none!important; border-bottom:1px solid rgba(255,255,255,.20)!important; } .perspektif-footer > .footer-column:last-child{ padding-bottom:0!important; margin-bottom:0!important; border-bottom:none!important; } .perspektif-footer > .footer-column h3{ font-size:17px!important; margin-bottom:9px!important; } .perspektif-footer > .footer-column p, .perspektif-footer .footer-menu li a, .perspektif-footer .contact-item{ font-size:12.5px!important; } .footer-bottom{ padding:9px 18px 11px!important; text-align:center!important; } .footer-bottom p{ font-size:10.5px!important; line-height:1.45!important; } .pkp_brand_footer{ padding:7px 14px!important; font-size:10.5px!important; } } /* ========================================================== ACCESSIBILITY ========================================================== */ .footer-indexing-grid a:focus-visible, .perspektif-footer a:focus-visible, .footer-bottom a:focus-visible{ outline:2px solid #FFC400!important; outline-offset:2px!important; }