#headerNavigationContainer{background:#000!important;border-bottom:none!important}#headerNavigationContainer .pkp_head_wrapper{max-width:100%!important;padding:0!important}#headerNavigationContainer .pkp_site_name_wrapper{width:100%!important;padding:0!important;margin:0!important}#headerNavigationContainer .pkp_site_name{width:100%!important;margin:0!important;padding:0!important;line-height:0!important}#headerNavigationContainer .pkp_site_name>a.is_img{display:block!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important}#headerNavigationContainer .pkp_site_name img{display:block!important;width:100%!important;max-width:1200px!important;height:auto!important;margin:0 auto!important;padding:0!important;object-fit:contain!important}:root{--nav-background:rgba(7,9,13,0.88);--nav-glass:rgba(255,255,255,0.055);--nav-glass-hover:rgba(255,255,255,0.1);--nav-border:rgba(255,255,255,0.14);--nav-text:#ffffff;--nav-muted:rgba(255,255,255,0.78);--nav-accent:#ffc52f;--nav-radius:5px;--nav-shadow:0 16px 40px rgba(0,0,0,0.3)}.pkp_site_nav_menu,.pkp_site_nav_menu *,.pkp_site_nav_menu *::before,.pkp_site_nav_menu *::after{box-sizing:border-box!important}@media screen and (min-width:992px){.pkp_site_nav_menu{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:68px!important;margin:0!important;padding:8px 24px!important;background:var(--nav-background)!important;border-bottom:2px solid var(--nav-accent)!important;-webkit-backdrop-filter:blur(18px) saturate(145%);backdrop-filter:blur(18px) saturate(145%);box-shadow:0 8px 25px rgba(0,0,0,0.2)!important;overflow:visible!important}.pkp_navigation_primary_wrapper{position:relative!important;display:flex!important;align-items:center!important;justify-content:center!important;width:auto!important;margin:0!important;padding:0!important;overflow:visible!important}#navigationPrimary,.pkp_navigation_primary{display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:row!important;flex-wrap:wrap!important;gap:8px!important;width:auto!important;margin:0!important;padding:0!important;list-style:none!important;overflow:visible!important}#navigationPrimary>li,.pkp_navigation_primary>li{position:relative!important;display:block!important;float:none!important;width:auto!important;margin:0!important;padding:0!important}#navigationPrimary>li>a,.pkp_navigation_primary>li>a{display:flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;margin:0!important;padding:10px 18px!important;background:var(--nav-glass)!important;border:1px solid var(--nav-border)!important;border-radius:var(--nav-radius)!important;color:var(--nav-text)!important;font-family:inherit!important;font-size:16px!important;font-weight:500!important;line-height:1.25!important;text-decoration:none!important;white-space:nowrap!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 5px 14px rgba(0,0,0,0.12)!important;transition:background 0.2s ease,color 0.2s ease,border-color 0.2s ease!important}#navigationPrimary>li>a:hover,#navigationPrimary>li>a:focus,.pkp_navigation_primary>li>a:hover,.pkp_navigation_primary>li>a:focus{background:var(--nav-glass-hover)!important;border-color:rgba(255,197,47,0.55)!important;color:var(--nav-accent)!important;outline:none!important}#navigationPrimary>li.current>a,#navigationPrimary>li>a[aria-current="page"],.pkp_navigation_primary>li.current>a,.pkp_navigation_primary>li>a[aria-current="page"]{background:rgba(255,197,47,0.95)!important;border-color:var(--nav-accent)!important;color:#092b62!important;font-weight:500!important}#navigationPrimary li ul,.pkp_navigation_primary li ul{position:absolute!important;top:calc(100%+8px)!important;left:0!important;right:auto!important;display:block!important;width:260px!important;min-width:260px!important;margin:0!important;padding:7px!important;background:rgba(11,14,19,0.94)!important;border:1px solid var(--nav-border)!important;border-radius:var(--nav-radius)!important;-webkit-backdrop-filter:blur(22px) saturate(145%);backdrop-filter:blur(22px) saturate(145%);box-shadow:var(--nav-shadow)!important;list-style:none!important;opacity:0!important;visibility:hidden!important;pointer-events:none!important;transform:translateY(7px)!important;transition:opacity 0.18s ease,visibility 0.18s ease,transform 0.18s ease!important;z-index:99999!important}#navigationPrimary li:hover>ul,#navigationPrimary li:focus-within>ul,#navigationPrimary li[aria-expanded="true"]>ul,.pkp_navigation_primary li:hover>ul,.pkp_navigation_primary li:focus-within>ul,.pkp_navigation_primary li[aria-expanded="true"]>ul{opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translateY(0)!important}#navigationPrimary li ul li,.pkp_navigation_primary li ul li{display:block!important;float:none!important;width:100%!important;margin:0!important;padding:0!important}#navigationPrimary li ul li a,.pkp_navigation_primary li ul li a{display:block!important;width:100%!important;margin:0!important;padding:11px 12px!important;background:transparent!important;border:1px solid transparent!important;border-radius:3px!important;color:var(--nav-text)!important;font-size:15px!important;font-weight:400!important;line-height:1.4!important;text-align:left!important;text-decoration:none!important;white-space:normal!important}#navigationPrimary li ul li a:hover,#navigationPrimary li ul li a:focus,.pkp_navigation_primary li ul li a:hover,.pkp_navigation_primary li ul li a:focus{background:var(--nav-glass-hover)!important;border-color:var(--nav-border)!important;color:var(--nav-accent)!important}.pkp_navigation_search_wrapper{position:relative!important;display:flex!important;align-items:center!important;margin:0 0 0 8px!important;padding:0!important}.pkp_navigation_search_wrapper a,.pkp_navigation_search_wrapper button,.pkp_search_desktop{display:flex!important;align-items:center!important;justify-content:center!important;min-height:44px!important;padding:10px 15px!important;background:var(--nav-glass)!important;border:1px solid var(--nav-border)!important;border-radius:var(--nav-radius)!important;color:var(--nav-text)!important;font-size:16px!important;font-weight:500!important;text-decoration:none!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 5px 14px rgba(0,0,0,0.12)!important}.pkp_navigation_search_wrapper a:hover,.pkp_navigation_search_wrapper button:hover{background:var(--nav-glass-hover)!important;color:var(--nav-accent)!important}}@media screen and (max-width:991px){.pkp_site_nav_menu{width:100%!important;max-width:100%!important;height:auto!important;max-height:calc(100vh - 62px)!important;margin:0!important;padding:12px!important;background:rgba(7,9,13,0.94)!important;border-top:1px solid var(--nav-border)!important;border-bottom:1px solid var(--nav-border)!important;-webkit-backdrop-filter:blur(22px) saturate(145%);backdrop-filter:blur(22px) saturate(145%);box-shadow:var(--nav-shadow)!important;overflow-x:hidden!important;overflow-y:auto!important;color:var(--nav-text)!important}.pkp_navigation_primary_wrapper,.pkp_navigation_search_wrapper{position:static!important;display:block!important;float:none!important;clear:both!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;transform:none!important}#navigationPrimary,.pkp_navigation_primary,.pkp_site_nav_menu .pkp_nav_list{display:block!important;float:none!important;width:100%!important;max-width:100%!important;margin:0!important;padding:6px!important;background:var(--nav-glass)!important;border:1px solid var(--nav-border)!important;border-radius:var(--nav-radius)!important;list-style:none!important;columns:1!important;column-count:1!important;column-width:auto!important;grid-template-columns:1fr!important;grid-auto-flow:row!important;flex-direction:column!important;flex-wrap:nowrap!important;align-items:stretch!important;gap:0!important}#navigationPrimary>li,.pkp_navigation_primary>li,.pkp_site_nav_menu .pkp_nav_list>li{position:relative!important;display:block!important;float:none!important;clear:both!important;width:100%!important;max-width:100%!important;margin:0!important;padding:0!important;flex:none!important;flex-basis:100%!important;text-align:left!important}#navigationPrimary>li>a,.pkp_navigation_primary>li>a,.pkp_site_nav_menu .pkp_nav_list>li>a{display:block!important;float:none!important;width:100%!important;max-width:100%!important;min-height:44px!important;margin:0!important;padding:11px 12px!important;background:transparent!important;border:1px solid transparent!important;border-radius:3px!important;box-shadow:none!important;color:var(--nav-text)!important;font-family:inherit!important;font-size:15px!important;font-weight:500!important;line-height:1.4!important;text-align:left!important;text-decoration:none!important;white-space:normal!important}#navigationPrimary>li>a:hover,#navigationPrimary>li>a:focus,.pkp_navigation_primary>li>a:hover,.pkp_navigation_primary>li>a:focus{background:var(--nav-glass-hover)!important;border-color:var(--nav-border)!important;color:var(--nav-accent)!important}#navigationPrimary>li.current>a,#navigationPrimary>li>a[aria-current="page"],.pkp_navigation_primary>li.current>a,.pkp_navigation_primary>li>a[aria-current="page"]{background:rgba(255,197,47,0.94)!important;color:#092b62!important;font-weight:500!important}#navigationPrimary li ul,.pkp_navigation_primary li ul,.pkp_site_nav_menu .pkp_nav_list li ul{position:static!important;top:auto!important;right:auto!important;bottom:auto!important;left:auto!important;display:block!important;float:none!important;clear:both!important;width:calc(100% - 12px)!important;min-width:0!important;max-width:100%!important;margin:1px 0 7px 12px!important;padding:4px 4px 4px 10px!important;background:rgba(255,255,255,0.035)!important;border:0!important;border-left:2px solid var(--nav-accent)!important;border-radius:0 3px 3px 0!important;box-shadow:none!important;list-style:none!important;columns:1!important;column-count:1!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important}#navigationPrimary li ul li,.pkp_navigation_primary li ul li,.pkp_site_nav_menu .pkp_nav_list li ul li{display:block!important;float:none!important;clear:both!important;width:100%!important;margin:0!important;padding:0!important}#navigationPrimary li ul li a,.pkp_navigation_primary li ul li a,.pkp_site_nav_menu .pkp_nav_list li ul li a{display:block!important;float:none!important;width:100%!important;margin:0!important;padding:9px 10px!important;background:transparent!important;border:1px solid transparent!important;border-radius:3px!important;color:var(--nav-muted)!important;font-size:14px!important;font-weight:400!important;line-height:1.4!important;text-align:left!important;text-decoration:none!important;white-space:normal!important}#navigationPrimary li ul li a:hover,#navigationPrimary li ul li a:focus,.pkp_navigation_primary li ul li a:hover,.pkp_navigation_primary li ul li a:focus{background:var(--nav-glass-hover)!important;color:var(--nav-accent)!important}.pkp_navigation_search_wrapper{margin-top:10px!important;padding:6px!important;background:var(--nav-glass)!important;border:1px solid var(--nav-border)!important;border-radius:var(--nav-radius)!important}.pkp_navigation_search_wrapper a,.pkp_navigation_search_wrapper button,.pkp_navigation_search_wrapper .pkp_search_desktop{display:block!important;float:none!important;width:100%!important;min-height:42px!important;margin:0!important;padding:10px 11px!important;background:transparent!important;border:1px solid transparent!important;border-radius:3px!important;color:var(--nav-text)!important;font-size:15px!important;font-weight:500!important;text-align:left!important;text-decoration:none!important}.pkp_site_nav_toggle{border:1px solid var(--nav-border)!important;border-radius:4px!important;background:rgba(10,12,17,0.76)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:inset 0 1px 0 rgba(255,255,255,0.08),0 6px 16px rgba(0,0,0,0.22)!important}}@media screen and (max-width:480px){.pkp_site_nav_menu{padding:9px!important}#navigationPrimary>li>a,.pkp_navigation_primary>li>a{min-height:42px!important;padding:10px!important;font-size:14px!important;font-weight:500!important}#navigationPrimary li ul li a,.pkp_navigation_primary li ul li a{padding:8px 9px!important;font-size:13.5px!important;font-weight:400!important}}@media screen and (max-width:991px){.pkp_site_nav_menu--isOpen,.pkp_site_nav_menu.is_open,.pkp_site_nav_menu.is-open,.pkp_site_nav_menu[aria-expanded="true"],.pkp_site_nav_toggle[aria-expanded="true"]+.pkp_site_nav_menu,.pkp_site_nav_toggle--transform+.pkp_site_nav_menu,.pkp_site_nav_toggle.pkp_site_nav_toggle--transform~.pkp_site_nav_menu{display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%!important;max-height:calc(100vh - 64px)!important;padding:8px!important;gap:7px!important;overflow-x:hidden!important;overflow-y:auto!important;background:rgba(8,11,16,0.91)!important;-webkit-backdrop-filter:blur(16px) saturate(130%);backdrop-filter:blur(16px) saturate(130%);box-shadow:0 10px 28px rgba(0,0,0,0.28)!important}.pkp_navigation_primary_wrapper{order:1!important}.pkp_navigation_search_wrapper{order:2!important}.pkp_navigation_primary_wrapper,.pkp_navigation_search_wrapper,#navigationPrimary,.pkp_navigation_primary,.pkp_site_nav_menu .pkp_nav_list{display:block!important;width:100%!important;margin:0!important;padding:4px!important;background:rgba(255,255,255,0.045)!important;border:1px solid rgba(255,255,255,0.13)!important;border-radius:4px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),0 5px 14px rgba(0,0,0,0.12)!important;list-style:none!important;column-count:1!important}#navigationPrimary>li,.pkp_navigation_primary>li,.pkp_site_nav_menu .pkp_nav_list>li{display:block!important;float:none!important;clear:both!important;width:100%!important;margin:0!important;padding:0!important}#navigationPrimary>li>a,.pkp_navigation_primary>li>a,.pkp_site_nav_menu .pkp_nav_list>li>a{display:block!important;width:100%!important;min-height:0!important;margin:0!important;padding:9px 10px!important;background:transparent!important;border:1px solid transparent!important;border-radius:3px!important;color:#ffffff!important;font-size:14px!important;font-weight:400!important;line-height:1.3!important;text-align:left!important;text-decoration:none!important;white-space:normal!important}#navigationPrimary>li>a:hover,#navigationPrimary>li>a:focus,.pkp_navigation_primary>li>a:hover,.pkp_navigation_primary>li>a:focus{background:rgba(255,255,255,0.075)!important;border-color:rgba(255,255,255,0.11)!important;color:#ffc52f!important}#navigationPrimary li ul,.pkp_navigation_primary li ul,.pkp_site_nav_menu .pkp_nav_list li ul{position:static!important;display:block!important;float:none!important;width:calc(100% - 14px)!important;margin:0 0 4px 14px!important;padding:2px 3px 2px 8px!important;background:rgba(255,255,255,0.025)!important;border:0!important;border-left:2px solid rgba(255,197,47,0.88)!important;border-radius:0 3px 3px 0!important;box-shadow:none!important;opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:none!important;list-style:none!important}#navigationPrimary li ul li,.pkp_navigation_primary li ul li{display:block!important;float:none!important;width:100%!important;margin:0!important}#navigationPrimary li ul li a,.pkp_navigation_primary li ul li a{display:block!important;width:100%!important;margin:0!important;padding:8px 9px!important;background:transparent!important;border:0!important;border-radius:2px!important;color:rgba(255,255,255,0.82)!important;font-size:13.5px!important;font-weight:400!important;line-height:1.3!important;text-align:left!important;white-space:normal!important}.pkp_navigation_search_wrapper{padding:4px!important;background:rgba(255,255,255,0.045)!important;border:1px solid rgba(255,255,255,0.13)!important;border-radius:4px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),0 5px 14px rgba(0,0,0,0.12)!important}.pkp_navigation_search_wrapper a,.pkp_navigation_search_wrapper button,.pkp_navigation_search_wrapper .pkp_search_desktop{display:flex!important;align-items:center!important;width:100%!important;min-height:0!important;margin:0!important;padding:9px 10px!important;background:transparent!important;border:1px solid transparent!important;border-radius:3px!important;color:#ffffff!important;font-size:14px!important;font-weight:400!important;text-align:left!important;text-decoration:none!important}.pkp_navigation_search_wrapper a:hover,.pkp_navigation_search_wrapper button:hover{background:rgba(255,255,255,0.075)!important;color:#ffc52f!important}.pkp_site_nav_toggle{width:46px!important;height:46px!important;padding:0!important;background:rgba(10,12,17,0.78)!important;border:1px solid rgba(255,255,255,0.14)!important;border-radius:3px!important;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 5px 14px rgba(0,0,0,0.2)!important}}@media screen and (max-width:480px){.pkp_site_nav_menu--isOpen,.pkp_site_nav_menu.is_open,.pkp_site_nav_menu.is-open,.pkp_site_nav_menu[aria-expanded="true"],.pkp_site_nav_toggle[aria-expanded="true"]+.pkp_site_nav_menu,.pkp_site_nav_toggle--transform+.pkp_site_nav_menu,.pkp_site_nav_toggle.pkp_site_nav_toggle--transform~.pkp_site_nav_menu{padding:6px!important;gap:5px!important}#navigationPrimary>li>a,.pkp_navigation_primary>li>a{padding:8px 9px!important;font-size:13.5px!important}#navigationPrimary li ul li a,.pkp_navigation_primary li ul li a{padding:7px 8px!important;font-size:13px!important}}.block_make_submission,.block_make_submission .content{display:block!important;width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important;padding:0!important;box-sizing:border-box!important}.block_make_submission .content a,.block_make_submission>a{position:relative!important;display:flex!important;align-items:center!important;justify-content:space-between!important;width:100%!important;max-width:none!important;height:38px!important;min-height:38px!important;margin:0 0 9px!important;padding:0 4px 0 18px!important;background:linear-gradient( 180deg,#ffffff 0%,#f8fbfc 100% )!important;border:1px solid #d5dde2!important;border-radius:0!important;box-shadow:5px 5px 0 #b6dbe6,0 5px 14px rgba(15,42,61,0.20)!important;color:#24333a!important;font-family:Inter,Arial,Helvetica,sans-serif!important;font-size:11px!important;font-weight:600!important;line-height:1!important;text-decoration:none!important;white-space:nowrap!important;overflow:hidden!important;box-sizing:border-box!important}.block_make_submission .content a::after,.block_make_submission>a::after{content:"››"!important;display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 42px!important;width:42px!important;height:100%!important;margin:0!important;border-left:1px solid #bcc9ce!important;color:#076f78!important;font-family:Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:700!important;line-height:1!important;box-sizing:border-box!important}@media screen and (max-width:991px){.pkp_site_nav_menu{flex-direction:column!important;align-items:stretch!important;padding:8px!important;gap:7px!important}.pkp_navigation_primary_wrapper{display:flex!important;flex-direction:column!important;align-items:stretch!important;width:100%!important;margin:0!important;padding:0!important;gap:7px!important}#navigationPrimary,.pkp_navigation_primary{order:1!important}.pkp_navigation_search_wrapper{order:2!important}.pkp_navigation_user_wrapper{order:3!important}#navigationPrimary,.pkp_navigation_primary{display:block!important;width:100%!important;margin:0!important;padding:4px!important;background:rgba(255,255,255,0.045)!important;border:1px solid rgba(255,255,255,0.13)!important;border-radius:4px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),0 4px 12px rgba(0,0,0,0.13)!important;list-style:none!important}.pkp_navigation_search_wrapper{position:static!important;float:none!important;clear:both!important;display:block!important;width:100%!important;margin:0!important;padding:4px!important;background:rgba(255,255,255,0.045)!important;border:1px solid rgba(255,255,255,0.13)!important;border-radius:4px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),0 4px 12px rgba(0,0,0,0.13)!important}.pkp_navigation_search_wrapper a,.pkp_navigation_search_wrapper button,.pkp_navigation_search_wrapper .pkp_search_desktop{display:flex!important;align-items:center!important;width:100%!important;min-height:38px!important;margin:0!important;padding:8px 10px!important;background:transparent!important;border:0!important;border-radius:2px!important;box-shadow:none!important;color:#ffffff!important;font-size:14px!important;font-weight:400!important;text-align:left!important;text-decoration:none!important}.pkp_navigation_user_wrapper{position:static!important;float:none!important;clear:both!important;display:block!important;width:100%!important;margin:0!important;padding:4px!important;background:rgba(255,255,255,0.045)!important;border:1px solid rgba(255,255,255,0.13)!important;border-radius:4px!important;box-shadow:inset 0 1px 0 rgba(255,255,255,0.05),0 4px 12px rgba(0,0,0,0.13)!important}.pkp_navigation_user_wrapper .pkp_navigation_user,.pkp_site_nav_menu .pkp_navigation_user{display:block!important;width:100%!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;list-style:none!important}.pkp_navigation_user>li{display:block!important;float:none!important;width:100%!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important}.pkp_navigation_user>li>a{display:block!important;width:100%!important;min-height:38px!important;margin:0!important;padding:8px 10px!important;background:transparent!important;border:0!important;border-radius:2px!important;box-shadow:none!important;color:#ffffff!important;font-size:14px!important;font-weight:400!important;line-height:1.3!important;text-align:left!important;text-decoration:none!important}.pkp_navigation_user>li>a:hover,.pkp_navigation_user>li>a:focus,.pkp_navigation_search_wrapper a:hover,.pkp_navigation_search_wrapper a:focus{background:rgba(255,255,255,0.075)!important;color:#ffc52f!important}}.block_make_submission{display:block!important;margin:0!important;padding:0!important;box-sizing:border-box!important}.block_make_submission .content{display:block!important;margin:0!important;padding:0!important;box-sizing:border-box!important}.block_make_submission .content a,.block_make_submission a{position:relative!important;display:flex!important;align-items:center!important;justify-content:space-between!important;width:275px!important;height:38px!important;min-height:38px!important;max-height:38px!important;margin:0 0 9px!important;padding:0 4px 0 9px!important;box-sizing:border-box!important;background:linear-gradient( 180deg,#ffffff 0%,#f8fbfc 100% )!important;border:1px solid #d5dde2!important;border-radius:0!important;box-shadow:5px 5px 0 #b6dbe6,0 5px 14px rgba(15,42,61,0.20)!important;color:#24333a!important;font-family:Inter,Arial,Helvetica,sans-serif!important;font-size:11px!important;font-weight:600!important;line-height:1!important;text-align:left!important;text-decoration:none!important;text-transform:none!important;white-space:nowrap!important;overflow:hidden!important;transform:none!important;transition:background 0.18s ease,box-shadow 0.18s ease,transform 0.18s ease!important}.block_make_submission .content a .title,.block_make_submission .content a span:first-child{display:block!important;flex:1 1 auto!important;min-width:0!important;padding:0 4px 0 0!important;color:#24333a!important;font-family:Inter,Arial,Helvetica,sans-serif!important;font-size:11px!important;font-weight:600!important;line-height:1!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}.block_make_submission .content a .fa,.block_make_submission .content a .fas,.block_make_submission .content a .far,.block_make_submission .content a .icon,.block_make_submission .content a svg{display:none!important}.block_make_submission .content a::after,.block_make_submission a::after{content:""!important;display:flex!important;align-items:center!important;justify-content:center!important;flex:0 0 22px!important;width:22px!important;height:20px!important;margin:0!important;padding:0!important;border-left:1px solid #bcc9ce!important;color:#076f78!important;font-family:Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:700!important;line-height:1!important;box-sizing:border-box!important}.block_make_submission .content a:hover,.block_make_submission .content a:focus,.block_make_submission a:hover,.block_make_submission a:focus{background:linear-gradient( 180deg,#ffffff 0%,#eef7f9 100% )!important;color:#24333a!important;text-decoration:none!important;transform:translateY(-1px)!important;box-shadow:5px 6px 0 #b6dbe6,0 7px 16px rgba(15,42,61,0.24)!important;outline:none!important}.block_make_submission .content a:hover::after,.block_make_submission .content a:focus::after{background:rgba(7,111,120,0.07)!important;color:#076f78!important}@media screen and (max-width:360px){.block_make_submission,.block_make_submission .content{width:100%!important}.block_make_submission .content a,.block_make_submission a{width:calc(100% - 5px)!important}}.block_make_submission{width:calc(100% - 60px)!important;margin-left:30px!important;margin-right:30px!important}.block_make_submission .content{width:100%!important}.block_make_submission .content a,.block_make_submission a{width:100%!important;max-width:none!important}@media screen and (max-width:600px){.block_make_submission{width:calc(100% - 32px)!important;margin-left:16px!important;margin-right:16px!important}}body.pkp_page_index .page_index_journal .cmp_announcements,body.pkp_page_index .page_index_journal .current_issue{box-sizing:border-box!important;margin:18px 0!important;padding:24px 28px!important;background:#ffffff!important;border:1px solid #dfe5e9!important;border-radius:4px!important;box-shadow:0 1px 2px rgba(23,43,58,0.04),0 8px 24px rgba(23,43,58,0.05)!important}body.pkp_page_index .page_index_journal .cmp_announcements,body.pkp_page_index .cmp_announcements{position:relative!important;margin:18px 0!important;padding:22px 28px!important;background:#ffffff!important;border:1px solid #d9e1e7!important;border-radius:4px!important;box-shadow:0 2px 5px rgba(21,43,61,0.04),0 10px 28px rgba(21,43,61,0.05)!important}body.pkp_page_index .cmp_announcements>h2{margin:0 0 14px 0!important;padding:0 0 10px 0!important;border-bottom:1px solid #e8edf1!important;color:#0d2d4f!important;font-family:"Inter",sans-serif!important;font-size:20px!important;font-weight:700!important;line-height:1.25!important}body.pkp_page_index .cmp_announcements .obj_announcement_summary{position:relative!important;box-sizing:border-box!important;width:100%!important;margin:0!important;padding:20px 22px 20px 26px!important;background:linear-gradient( 135deg,#f8fbfd 0%,#ffffff 100% )!important;border:1px solid #dce5ea!important;border-left:4px solid #00749a!important;border-radius:3px!important;overflow:hidden!important;transition:transform 0.2s ease,border-color 0.2s ease,box-shadow 0.2s ease,background-color 0.2s ease!important}body.pkp_page_index .cmp_announcements .obj_announcement_summary::before{content:""!important;position:absolute!important;top:0!important;left:0!important;width:100%!important;height:3px!important;background:linear-gradient( 90deg,#00749a 0%,#29a4c4 55%,transparent 100% )!important}body.pkp_page_index .cmp_announcements .obj_announcement_summary:hover{transform:translateY(-2px)!important;border-color:#c7d7e0!important;border-left-color:#005d7c!important;background:#ffffff!important;box-shadow:0 4px 10px rgba(21,54,75,0.06),0 12px 26px rgba(21,54,75,0.08)!important}body.pkp_page_index .obj_announcement_summary .title{margin:0 0 8px 0!important;padding:0!important;font-family:"Inter",sans-serif!important;font-size:15px!important;font-weight:700!important;line-height:1.35!important;letter-spacing:0.01em!important;text-transform:uppercase!important}body.pkp_page_index .obj_announcement_summary .title a{color:#006b94!important;text-decoration:none!important}body.pkp_page_index .obj_announcement_summary .title a:hover,body.pkp_page_index .obj_announcement_summary .title a:focus{color:#004f70!important;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:3px!important}body.pkp_page_index .obj_announcement_summary .date{display:inline-flex!important;align-items:center!important;gap:7px!important;margin:0 0 12px 0!important;padding:4px 8px!important;background:#eef5f8!important;border:1px solid #d8e7ed!important;border-radius:2px!important;color:#68757e!important;font-family:"Inter",sans-serif!important;font-size:11.5px!important;font-weight:500!important;line-height:1.2!important}body.pkp_page_index .obj_announcement_summary .date::before{content:"📅"!important;font-size:12px!important;line-height:1!important;opacity:0.7!important}body.pkp_page_index .obj_announcement_summary .description{margin:4px 0 12px 0!important;color:#4b5963!important;font-family:"Inter",sans-serif!important;font-size:13px!important;font-weight:400!important;line-height:1.55!important}body.pkp_page_index .obj_announcement_summary .read_more{display:inline-flex!important;align-items:center!important;gap:7px!important;margin-top:2px!important;padding:7px 0!important;color:#006b94!important;font-family:"Inter",sans-serif!important;font-size:13px!important;font-weight:700!important;line-height:1.2!important;text-decoration:none!important}body.pkp_page_index .obj_announcement_summary .read_more::after{content:"›"!important;display:inline-block!important;color:#006b94!important;font-size:21px!important;font-weight:500!important;line-height:0.8!important;transition:transform 0.2s ease!important}body.pkp_page_index .obj_announcement_summary .read_more:hover,body.pkp_page_index .obj_announcement_summary .read_more:focus{color:#004f70!important;text-decoration:none!important}body.pkp_page_index .obj_announcement_summary .read_more:hover::after,body.pkp_page_index .obj_announcement_summary .read_more:focus::after{transform:translateX(4px)!important}body.pkp_page_index .obj_announcement_summary .read_more .fa,body.pkp_page_index .obj_announcement_summary .read_more .pkp_screen_reader{margin-left:0!important}body.pkp_page_index .cmp_announcements .obj_announcement_summary+.obj_announcement_summary{margin-top:14px!important}body.pkp_page_index .cmp_announcements .more{margin:14px 0 0 0!important;padding:0!important;text-align:right!important}body.pkp_page_index .cmp_announcements .more a{display:inline-flex!important;align-items:center!important;gap:6px!important;color:#006b94!important;font-family:"Inter",sans-serif!important;font-size:12.5px!important;font-weight:600!important;text-decoration:none!important}body.pkp_page_index .cmp_announcements .more a:hover{color:#004f70!important;text-decoration:underline!important;text-underline-offset:3px!important}body.pkp_page_index .cmp_announcements .obj_announcement_summary,body.pkp_page_index .cmp_announcements .obj_announcement_summary>div{max-width:none!important}@media screen and (max-width:768px){body.pkp_page_index .page_index_journal .cmp_announcements,body.pkp_page_index .cmp_announcements{margin:12px 0!important;padding:16px!important}body.pkp_page_index .cmp_announcements .obj_announcement_summary{padding:18px 16px 17px 20px!important}body.pkp_page_index .obj_announcement_summary .title{font-size:14px!important}body.pkp_page_index .obj_announcement_summary .description{font-size:12.5px!important}body.pkp_page_index .obj_announcement_summary .read_more{font-size:12.5px!important}}body.pkp_page_index .page_index_journal .current_issue{position:relative!important;margin-top:16px!important;margin-bottom:16px!important}body.pkp_page_index .page_index_journal .current_issue::before{content:""!important;position:absolute!important;top:0!important;left:28px!important;width:58px!important;height:3px!important;background:#00749a!important}body.pkp_page_index .current_issue>h2,body.pkp_page_index .current_issue .current_issue_title{margin:0 0 18px 0!important;padding:5px 0 0 0!important;color:#122849!important;font-family:"Inter",sans-serif!important;font-size:21px!important;font-weight:700!important;line-height:1.25!important}body.pkp_page_index .current_issue .issue_toc .heading,body.pkp_page_index .current_issue .heading{margin:0 0 14px 0!important;padding:0!important}body.pkp_page_index .current_issue .issue_toc .heading .title,body.pkp_page_index .current_issue .heading .title,body.pkp_page_index .current_issue .issue_title{margin:0 0 12px 0!important;padding:0!important;color:#293747!important;font-family:"Inter",sans-serif!important;font-size:14px!important;font-weight:650!important;line-height:1.45!important}body.pkp_page_index .current_issue .heading .title a,body.pkp_page_index .current_issue .issue_title a{color:#293747!important;text-decoration:none!important}body.pkp_page_index .current_issue .heading .title a:hover,body.pkp_page_index .current_issue .issue_title a:hover{color:#006b94!important}body.pkp_page_index .current_issue .description{margin:8px 0 12px 0!important;color:#4f5b65!important;font-family:"Inter",sans-serif!important;font-size:13px!important;line-height:1.55!important}body.pkp_page_index .current_issue .published,body.pkp_page_index .current_issue .doi,body.pkp_page_index .current_issue .issue_data{margin:7px 0!important;color:#334050!important;font-family:"Inter",sans-serif!important;font-size:13px!important;font-weight:400!important;line-height:1.45!important}body.pkp_page_index .current_issue .published strong,body.pkp_page_index .current_issue .doi strong,body.pkp_page_index .current_issue .issue_data strong{color:#243347!important;font-weight:650!important}body.pkp_page_index .current_issue a{color:#006b94}body.pkp_page_index .current_issue .doi a,body.pkp_page_index .current_issue .issue_data a{color:#006b94!important;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:2px!important}body.pkp_page_index .current_issue .issue_toc{margin:0!important;padding:0!important}body.pkp_page_index .current_issue .cover{margin-top:0!important;margin-bottom:12px!important}body.pkp_page_index .current_issue .cover img{border:1px solid #e0e5e8!important;border-radius:3px!important;box-shadow:0 5px 16px rgba(20,43,57,0.08)!important}body.pkp_page_index .current_issue .section{margin-top:16px!important;margin-bottom:0!important;padding-top:0!important}body.pkp_page_index .current_issue .section>h2,body.pkp_page_index .current_issue .section>h3{display:inline-block!important;margin:0 0 10px -15px!important;padding:8px 15px!important;background:#f5f8fa!important;border:1px solid #e0e6e9!important;border-bottom:2px solid #00749a!important;color:#233246!important;font-family:"Inter",sans-serif!important;font-size:14px!important;font-weight:650!important;line-height:1.2!important}body.pkp_page_index .current_issue .obj_article_summary{margin:0!important;padding:11px 0!important;border-bottom:1px solid #edf0f2!important}body.pkp_page_index .current_issue .obj_article_summary:last-child{border-bottom:0!important}body.pkp_page_index .current_issue .obj_article_summary .title{margin:0 0 4px 0!important}body.pkp_page_index .current_issue .obj_article_summary .title a{color:#1f2e3d!important;font-family:"Inter",sans-serif!important;font-size:15px!important;font-weight:500!important;line-height:1.35!important;text-align:left!important}body.pkp_page_index .current_issue .obj_article_summary .authors{margin:0 0 3px 0!important;color:#6a747b!important;font-family:"Inter",sans-serif!important;font-size:12px!important;font-weight:400!important;line-height:1.35!important}@media screen and (max-width:768px){body.pkp_page_index .page_index_journal .cmp_announcements,body.pkp_page_index .page_index_journal .current_issue{margin:12px 0!important;padding:19px 17px!important}body.pkp_page_index .page_index_journal .current_issue::before{left:17px!important}body.pkp_page_index .obj_announcement_summary .title{font-size:14px!important}body.pkp_page_index .current_issue>h2,body.pkp_page_index .current_issue .current_issue_title{font-size:19px!important}body.pkp_page_index .current_issue .issue_toc .heading .title,body.pkp_page_index .current_issue .heading .title,body.pkp_page_index .current_issue .issue_title{font-size:13.5px!important}body.pkp_page_index .current_issue .section>h2,body.pkp_page_index .current_issue .section>h3{margin-left:0!important}}body.pkp_page_index .obj_article_summary .title{display:block!important;width:100%!important;margin-top:0!important;margin-right:0!important;margin-bottom:5px!important;margin-left:0!important;padding:0!important;text-align:left!important}body.pkp_page_index .obj_article_summary .title a{display:inline!important;margin:0!important;padding:0!important;color:inherit!important;font-family:inherit!important;font-size:15px!important;font-style:bold!important;font-weight:550!important;line-height:1.4!important;letter-spacing:0!important;text-align:left!important;text-decoration:none!important;text-transform:none!important;overflow-wrap:anywhere!important;word-break:normal!important}body.pkp_page_index .obj_article_summary .title a:hover,body.pkp_page_index .obj_article_summary .title a:focus{color:#123f39!important;text-decoration:underline!important;text-decoration-thickness:1px!important;text-underline-offset:3px!important}body.pkp_page_index .obj_article_summary h3.title,body.pkp_page_index .obj_article_summary h4.title{font-size:14px!important;font-weight:600!important;line-height:1.4!important;text-align:left!important}body.pkp_page_index .obj_article_summary .meta,body.pkp_page_index .obj_article_summary .authors,body.pkp_page_index .obj_article_summary .pages{text-align:left!important}body.pkp_page_index .obj_article_summary{margin-top:0!important;margin-bottom:17px!important;text-align:left!important}@media screen and (max-width:768px){body.pkp_page_index .obj_article_summary .title,body.pkp_page_index .obj_article_summary .title a,body.pkp_page_index .obj_article_summary h3.title,body.pkp_page_index .obj_article_summary h4.title{font-size:14px!important;line-height:1.4!important;text-align:left!important}.pkp_block.block_make_submission .content a,.block_make_submission .content a{padding:9px 14px!important;font-size:12.5px!important}}body.pkp_page_index .pkp_structure_head{padding:0.5px!important}#headerNavigationContainer .pkp_navigation_primary_wrapper{display:flex!important;align-items:center!important}#headerNavigationContainer .pkp_navigation_primary{display:flex!important;align-items:center!important;margin:0!important;padding:0!important}#headerNavigationContainer .pkp_navigation_search_wrapper{order:2!important;display:flex!important;align-items:center!important;margin-left:8px!important}#headerNavigationContainer .pkp_navigation_primary{order:1!important}#headerNavigationContainer .pkp_search_desktop{display:flex!important;align-items:center!important;height:42px!important;padding:0 16px!important;color:#fff!important;background:transparent!important;font-family:"Inter",sans-serif!important;font-size:14px!important;font-weight:600!important;text-decoration:none!important;border-radius:0!important}#headerNavigationContainer .pkp_search_desktop:hover{color:#f4c21d!important;background:#1b1b1b!important}#headerNavigationContainer .pkp_search_desktop .fa{margin-right:6px!important}@media screen and (max-width: 991px) {
.pkp_navigation_search_wrapper {
margin: 0 !important;
padding: 2px !important;
min-height: 0 !important;
background: rgba(255, 255, 255, 0.04) !important;
border: 1px solid rgba(255, 255, 255, 0.12) !important;
border-radius: 3px !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.04),
0 3px 8px rgba(0, 0, 0, 0.12) !important;
}
.pkp_navigation_search_wrapper a,
.pkp_navigation_search_wrapper button,
.pkp_navigation_search_wrapper .pkp_search_desktop {
display: flex !important;
align-items: center !important;
width: 100% !important;
min-height: 30px !important;
height: 30px !important;
margin: 0 !important;
padding: 4px 8px !important;
background: transparent !important;
border: 0 !important;
border-radius: 2px !important;
box-shadow: none !important;
color: #ffffff !important;
font-size: 12.5px !important;
font-weight: 400 !important;
line-height: 1.1 !important;
text-align: left !important;
text-decoration: none !important;
}
.pkp_navigation_search_wrapper a::before,
.pkp_navigation_search_wrapper button::before {
margin-right: 5px !important;
font-size: 12px !important;
}
.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper a:focus,
.pkp_navigation_search_wrapper button:hover,
.pkp_navigation_search_wrapper button:focus {
background: rgba(255, 255, 255, 0.07) !important;
color: #ffc52f !important;
}
.pkp_navigation_primary_wrapper {
gap: 5px !important;
}
.pkp_site_nav_menu {
gap: 5px !important;
}
}@media screen and (min-width: 992px) {
.pkp_site_nav_menu {
min-height: 50px !important;
padding-top: 4px !important;
padding-bottom: 4px !important;
border-bottom-width: 1px !important;
box-shadow:
0 5px 16px rgba(0, 0, 0, 0.18) !important;
}
#navigationPrimary,
.pkp_navigation_primary {
gap: 5px !important;
}
#navigationPrimary > li > a,
.pkp_navigation_primary > li > a {
min-height: 34px !important;
height: 34px !important;
padding: 6px 12px !important;
border-radius: 3px !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.1 !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10) !important;
}
.pkp_navigation_search_wrapper {
margin-left: 5px !important;
}
.pkp_navigation_search_wrapper a,
.pkp_navigation_search_wrapper button,
.pkp_search_desktop {
min-height: 34px !important;
height: 34px !important;
padding: 6px 11px !important;
border-radius: 3px !important;
font-size: 13px !important;
font-weight: 400 !important;
line-height: 1.1 !important;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.06),
0 3px 8px rgba(0, 0, 0, 0.10) !important;
}
#navigationPrimary li ul,
.pkp_navigation_primary li ul {
top: calc(100% + 5px) !important;
width: 230px !important;
min-width: 230px !important;
padding: 5px !important;
border-radius: 4px !important;
box-shadow:
0 12px 28px rgba(0, 0, 0, 0.26) !important;
}
#navigationPrimary li ul li a,
.pkp_navigation_primary li ul li a {
padding: 8px 9px !important;
border-radius: 2px !important;
font-size: 12.5px !important;
font-weight: 400 !important;
line-height: 1.25 !important;
}
}body.pkp_page_index .current_issue .obj_article_summary{
position:relative!important;
box-sizing:border-box!important;
width:100%!important;
margin:0 0 14px!important;
padding:16px 18px!important;
background:#fff!important;
border:1px solid #dce5ea!important;
border-left:4px solid #00749a!important;
border-radius:4px!important;
box-shadow:0 3px 10px rgba(21,54,75,.06)!important;
transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important
}body.pkp_page_index .current_issue .obj_article_summary:last-child{
margin-bottom:0!important;
border-bottom:1px solid #dce5ea!important
}body.pkp_page_index .current_issue .obj_article_summary:hover{
transform:translateY(-2px)!important;
border-color:#c7d7e0!important;
border-left-color:#005d7c!important;
box-shadow:0 7px 18px rgba(21,54,75,.1)!important
}@media screen and (max-width:768px){
body.pkp_page_index .current_issue .obj_article_summary{
margin-bottom:11px!important;
padding:14px 14px 14px 16px!important
}
}.block_make_submission{
display:block!important;
width:calc(100% - 60px)!important;
margin:0 30px!important;
padding:0!important;
box-sizing:border-box!important
}.block_make_submission .content{
display:block!important;
width:100%!important;
margin:0!important;
padding:0!important;
box-sizing:border-box!important
}.block_make_submission .content a,
.block_make_submission>a{
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
width:100%!important;
max-width:none!important;
height:38px!important;
min-height:38px!important;
max-height:38px!important;
margin:0 0 9px!important;
padding:0 4px 0 9px!important;
box-sizing:border-box!important;
overflow:hidden!important;
white-space:nowrap!important;
background:linear-gradient(180deg,#fff 0%,#f8fbfc 100%)!important;
border:1px solid #d5dde2!important;
border-radius:0!important;
box-shadow:5px 5px 0 #b6dbe6,0 5px 14px rgba(15,42,61,.2)!important;
color:#24333a!important;
font-family:Inter,Arial,Helvetica,sans-serif!important;
font-size:11px!important;
font-weight:600!important;
line-height:1!important;
text-align:left!important;
text-decoration:none!important;
text-transform:none!important;
transform:none!important;
transition:background .18s ease,box-shadow .18s ease,transform .18s ease!important
}.block_make_submission .content a .title,
.block_make_submission .content a span:first-child{
display:block!important;
flex:1 1 auto!important;
min-width:0!important;
padding-right:4px!important;
overflow:hidden!important;
color:#24333a!important;
font:600 11px/1 Inter,Arial,Helvetica,sans-serif!important;
white-space:nowrap!important;
text-overflow:ellipsis!important
}.block_make_submission .content a .fa,
.block_make_submission .content a .fas,
.block_make_submission .content a .far,
.block_make_submission .content a .icon,
.block_make_submission .content a svg{
display:none!important
}.block_make_submission .content a::after,
.block_make_submission>a::after{
content:"›"!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
flex:0 0 22px!important;
width:22px!important;
height:20px!important;
margin:0!important;
padding:0!important;
border-left:1px solid #bcc9ce!important;
color:#076f78!important;
font:700 14px/1 Arial,Helvetica,sans-serif!important;
box-sizing:border-box!important
}.block_make_submission .content a:hover,
.block_make_submission .content a:focus,
.block_make_submission>a:hover,
.block_make_submission>a:focus{
background:linear-gradient(180deg,#fff 0%,#eef7f9 100%)!important;
color:#24333a!important;
text-decoration:none!important;
transform:translateY(-1px)!important;
box-shadow:5px 6px 0 #b6dbe6,0 7px 16px rgba(15,42,61,.24)!important;
outline:none!important
}.block_make_submission .content a:hover::after,
.block_make_submission .content a:focus::after{
background:rgba(7,111,120,.07)!important;
color:#076f78!important
}@media screen and (max-width:600px){
.block_make_submission{
width:calc(100% - 32px)!important;
margin-left:16px!important;
margin-right:16px!important
}
}@media screen and (max-width:991px){
.pkp_navigation_search_wrapper{
min-height:0!important;
margin:0!important;
padding:2px!important;
background:rgba(255,255,255,.04)!important;
border:1px solid rgba(255,255,255,.12)!important;
border-radius:3px!important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 3px 8px rgba(0,0,0,.12)!important
}
.pkp_navigation_search_wrapper a,
.pkp_navigation_search_wrapper button,
.pkp_navigation_search_wrapper .pkp_search_desktop{
display:flex!important;
align-items:center!important;
width:100%!important;
height:30px!important;
min-height:30px!important;
margin:0!important;
padding:4px 8px!important;
background:transparent!important;
border:0!important;
border-radius:2px!important;
box-shadow:none!important;
color:#fff!important;
font-size:12.5px!important;
font-weight:400!important;
line-height:1.1!important;
text-align:left!important;
text-decoration:none!important
}
.pkp_navigation_search_wrapper a::before,
.pkp_navigation_search_wrapper button::before{
margin-right:5px!important;
font-size:12px!important
}
.pkp_navigation_search_wrapper a:hover,
.pkp_navigation_search_wrapper a:focus,
.pkp_navigation_search_wrapper button:hover,
.pkp_navigation_search_wrapper button:focus{
background:rgba(255,255,255,.07)!important;
color:#ffc52f!important
}
.pkp_navigation_primary_wrapper,
.pkp_site_nav_menu{
gap:5px!important
}
}
/* ==========================================================
MOBILE - COMPACT HAMBURGER MENU
Match banner height
========================================================== */
@media screen and (max-width: 991px) {
/* Hamburger button */
.pkp_site_nav_toggle {
width: 42px !important;
height: 42px !important;
min-width: 42px !important;
min-height: 42px !important;
padding: 0 !important;
margin: 0 !important;
border-radius: 3px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-sizing: border-box !important;
}
/* Three bars */
.pkp_site_nav_toggle span,
.pkp_site_nav_toggle .pkp_site_nav_toggle__icon,
.pkp_site_nav_toggle .fa-bars,
.pkp_site_nav_toggle i {
font-size: 22px !important;
line-height: 1 !important;
}
/* Close (X) icon */
.pkp_site_nav_toggle .fa-times,
.pkp_site_nav_toggle .fa-close,
.pkp_site_nav_toggle .fa-xmark {
font-size: 22px !important;
line-height: 1 !important;
}
/* Reduce header height */
.pkp_structure_head {
min-height: 42px !important;
}
/* Make logo/banner align vertically */
.pkp_brand_wrapper,
.pkp_site_name_wrapper {
min-height: 42px !important;
display: flex !important;
align-items: center !important;
}
}
/* === Make Submission button aligned with sidebar buttons === */
.block_make_submission{
width:100% !important;
margin:0 0 12px 0 !important;
}
.block_make_submission .content a,
.block_make_submission > a{
width:100% !important;
background:linear-gradient(180deg,#184b66 0%,#10384d 100%) !important;
border:1px solid #0c2e40 !important;
color:#fff !important;
box-shadow:5px 5px 0 #6b8e9d,0 5px 14px rgba(0,0,0,.28)!important;
}
.block_make_submission .content a .title,
.block_make_submission .content a span:first-child{
color:#fff!important;
}
.block_make_submission .content a::after,
.block_make_submission > a::after{
border-left:1px solid rgba(255,255,255,.25)!important;
color:#fff!important;
}
.block_make_submission .content a:hover,
.block_make_submission > a:hover{
background:linear-gradient(180deg,#1f5a79 0%,#15455e 100%)!important;
}
/* ==========================================================
FINAL OVERRIDE: MAKE A SUBMISSION
Align with the sidebar button group (e.g. The University)
========================================================== */
/* Desktop and tablet */
.pkp_structure_sidebar .block_make_submission,
.block_make_submission {
display: block !important;
width: 275px !important;
max-width: calc(100% - 60px) !important;
margin: 0 30px 12px 30px !important;
padding: 0 !important;
box-sizing: border-box !important;
}
.pkp_structure_sidebar .block_make_submission .content,
.block_make_submission .content {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.pkp_structure_sidebar .block_make_submission .content a,
.pkp_structure_sidebar .block_make_submission > a,
.block_make_submission .content a,
.block_make_submission > a {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
background: linear-gradient(180deg, #123f57 0%, #092d40 100%) !important;
border: 1px solid #062536 !important;
color: #ffffff !important;
box-shadow: 5px 5px 0 #6f98a8, 0 5px 14px rgba(0,0,0,.30) !important;
}
.pkp_structure_sidebar .block_make_submission .content a .title,
.pkp_structure_sidebar .block_make_submission .content a span:first-child,
.block_make_submission .content a .title,
.block_make_submission .content a span:first-child {
color: #ffffff !important;
}
.pkp_structure_sidebar .block_make_submission .content a::after,
.pkp_structure_sidebar .block_make_submission > a::after,
.block_make_submission .content a::after,
.block_make_submission > a::after {
border-left: 1px solid rgba(255,255,255,.28) !important;
color: #ffffff !important;
}
.pkp_structure_sidebar .block_make_submission .content a:hover,
.pkp_structure_sidebar .block_make_submission .content a:focus,
.pkp_structure_sidebar .block_make_submission > a:hover,
.pkp_structure_sidebar .block_make_submission > a:focus,
.block_make_submission .content a:hover,
.block_make_submission .content a:focus,
.block_make_submission > a:hover,
.block_make_submission > a:focus {
background: linear-gradient(180deg, #18536f 0%, #0e3b52 100%) !important;
}
/* Mobile: use the same visual width and align the left edge with sidebar cards */
@media screen and (max-width: 600px) {
.pkp_structure_sidebar .block_make_submission,
.block_make_submission {
width: 275px !important;
max-width: calc(100% - 52px) !important;
margin-left: 26px !important;
margin-right: 26px !important;
margin-bottom: 12px !important;
}
}
/* Very narrow phones */
@media screen and (max-width: 360px) {
.pkp_structure_sidebar .block_make_submission,
.block_make_submission {
width: calc(100% - 32px) !important;
max-width: none !important;
margin-left: 16px !important;
margin-right: 16px !important;
}
}
/* ============================================================
JCIA UUM – ORCID DISPLAY FIX
OJS 3.3.x
============================================================ */
/* 1. Ensure the ORCID container is visible */
.obj_article_details .authors .orcid,
.obj_article_details .item.authors .orcid,
.obj_article_details ul.authors li .orcid {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
visibility: visible !important;
opacity: 1 !important;
margin-top: 5px !important;
margin-bottom: 3px !important;
font-size: 0.92rem !important;
line-height: 1.5 !important;
}
/* ============================================================
2. RESTORE THE ORCID ICON
============================================================ */
.obj_article_details .authors .orcid img,
.obj_article_details .item.authors .orcid img,
.obj_article_details ul.authors li .orcid img {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
width: 20px !important;
height: 20px !important;
min-width: 20px !important;
max-width: 20px !important;
min-height: 20px !important;
max-height: 20px !important;
margin: 0 6px 0 0 !important;
padding: 0 !important;
vertical-align: middle !important;
position: static !important;
transform: none !important;
object-fit: contain !important;
border: 0 !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
}
/* ============================================================
3. ORCID LINK
JCIA navy colour
============================================================ */
.obj_article_details .authors .orcid a,
.obj_article_details .item.authors .orcid a {
display: inline-flex !important;
align-items: center !important;
visibility: visible !important;
opacity: 1 !important;
color: #003B71 !important;
font-size: 0.90rem !important;
font-weight: 500 !important;
text-decoration: none !important;
background: transparent !important;
border: 0 !important;
padding: 0 !important;
}
/* Hover effect */
.obj_article_details .authors .orcid a:hover,
.obj_article_details .item.authors .orcid a:hover {
color: #005DAA !important;
text-decoration: underline !important;
}
/* ============================================================
4. PREVENT GLOBAL THEME IMG RULES FROM HIDING ORCID
============================================================ */
.obj_article_details span.orcid img {
float: none !important;
clear: none !important;
position: relative !important;
top: 0 !important;
left: 0 !important;
clip: auto !important;
clip-path: none !important;
filter: none !important;
}
/* ============================================================
5. AUTHOR LAYOUT
============================================================ */
.obj_article_details .authors > li {
margin-bottom: 12px !important;
}
.obj_article_details .authors .name {
display: block !important;
font-weight: 600 !important;
}
.obj_article_details .authors .affiliation {
display: block !important;
margin-top: 2px !important;
color: #555 !important;
}
/* ============================================================
6. MOBILE
============================================================ */
@media (max-width: 768px) {
.obj_article_details .authors .orcid {
display: flex !important;
align-items: flex-start !important;
overflow-wrap: anywhere !important;
word-break: break-word !important;
}
.obj_article_details .authors .orcid img {
width: 18px !important;
height: 18px !important;
min-width: 18px !important;
max-width: 18px !important;
}
.obj_article_details .authors .orcid a {
font-size: 0.86rem !important;
overflow-wrap: anywhere !important;
}
}
/* ==========================================================
JCIA EDITORIAL PROFILE
COMPLETE CSS FOR OJS 3.3
========================================================== */
/* ==========================================================
1. MAIN WRAPPER
========================================================== */
.jcia-editor-profile {
width: 100%;
margin: 12px 0 20px;
font-family: Arial, Helvetica, sans-serif;
color: #293238;
box-sizing: border-box;
}
/* ==========================================================
2. COMPACT HEADER
========================================================== */
.jcia-role-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
width: 100% !important;
min-height: 48px !important;
padding: 6px 6px 7px 0 !important;
margin: 0 0 14px 0 !important;
background: #fafafa !important;
border: 0 !important;
border-bottom: 2px solid #36797c !important;
box-sizing: border-box !important;
}
/* ==========================================================
3. HEADER LEFT
========================================================== */
.jcia-role-left {
display: flex !important;
align-items: center !important;
gap: 9px !important;
margin: 0 !important;
padding: 0 !important;
color: #293238 !important;
font-family: Inter,Arial,Helvetica,sans-serif!important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 1.15 !important;
letter-spacing: 0 !important;
}
/* ==========================================================
4. REFINED PERSON ICON
Professional SVG silhouette
Embedded directly in CSS
No external dependency
========================================================== */
.jcia-role-left::before {
content: "" !important;
display: inline-block !important;
width: 34px !important;
height: 34px !important;
min-width: 34px !important;
flex: 0 0 34px !important;
border-radius: 50% !important;
/* JCIA teal circle */
background-color: #2f8588 !important;
/* Clean white person SVG */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.2' r='3.8' fill='%23ffffff'/%3E%3Cpath d='M4.5 20.5c0-4.5 3.35-7.5 7.5-7.5s7.5 3 7.5 7.5v.5h-15v-.5z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 22px 22px !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
box-sizing: border-box !important;
}
/* ==========================================================
5. JCIA WORDMARK
Generated by CSS
========================================================== */
.jcia-role-header::after {
content: "J C I A" !important;
display: inline-block !important;
margin-left: auto !important;
padding: 0 2px 0 12px !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
font-weight: 800 !important;
line-height: 1 !important;
letter-spacing: 1px !important;
background: linear-gradient(
90deg,
#08b8cc 0%,
#08b8cc 22%,
#70b68a 31%,
#70b68a 48%,
#b6c461 57%,
#b6c461 73%,
#d5c900 82%,
#d5c900 100%
) !important;
-webkit-background-clip: text !important;
background-clip: text !important;
-webkit-text-fill-color: transparent !important;
color: transparent !important;
}
/* ==========================================================
6. PROFILE CARD
========================================================== */
.jcia-profile-card {
position: relative;
display: grid;
grid-template-columns: 110px minmax(0, 1fr);
gap: 16px;
align-items: start;
width: 100%;
padding: 14px 14px 14px 17px;
background: #ffffff;
border: 1px solid #d9dedf;
border-radius: 10px;
box-shadow: 0 3px 12px rgba(0, 0, 0, 0.07);
box-sizing: border-box;
overflow: hidden;
}
/* ==========================================================
7. VERTICAL JCIA GRADIENT
========================================================== */
.jcia-profile-card::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 4px;
background: linear-gradient(
180deg,
#08b8cc 0%,
#52c0b6 22%,
#88cb99 42%,
#c9dc69 67%,
#fff000 100%
);
}
/* ==========================================================
8. PHOTO PLACEHOLDER
========================================================== */
.jcia-photo-placeholder {
position: relative;
width: 110px;
height: 135px;
padding-top: 85px;
background: #f3f6f7;
border: 1px solid #d8e0e2;
border-radius: 8px;
box-sizing: border-box;
text-align: center;
color: #7f8d91;
font-size: 9px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.8px;
}
/* Photo placeholder head */
.jcia-photo-placeholder::before {
content: "";
position: absolute;
width: 14px;
height: 14px;
top: 44px;
left: 47px;
background: #95a7ab;
border-radius: 50%;
}
/* Photo placeholder shoulders */
.jcia-photo-placeholder::after {
content: "";
position: absolute;
width: 30px;
height: 14px;
top: 62px;
left: 39px;
background: #95a7ab;
border-radius: 15px 15px 3px 3px;
}
/* ==========================================================
9. REAL PHOTO
========================================================== */
.jcia-photo {
display: block;
width: 110px;
height: 135px;
object-fit: cover;
object-position: center top;
background: #f3f6f7;
border: 1px solid #d8e0e2;
border-radius: 8px;
box-sizing: border-box;
}
/* ==========================================================
10. PROFILE CONTENT
========================================================== */
.jcia-profile-content {
min-width: 0;
padding-top: 3px;
}
/* ==========================================================
11. NAME
========================================================== */
.jcia-name {
margin: 0 0 4px !important;
padding: 0 !important;
color: #111111 !important;
font-family: Inter,Arial,Helvetica,sans-serif!important;
font-size: 16px !important;
font-weight: 600 !important;
line-height: 1.25 !important;
}
/* ==========================================================
12. GRADIENT UNDER NAME
========================================================== */
.jcia-name-accent {
width: 42px;
height: 3px;
margin: 0 0 8px;
border-radius: 2px;
background: linear-gradient(
90deg,
#08b8cc 0%,
#55c2b3 28%,
#a7d27e 58%,
#dce35d 78%,
#fff000 100%
);
}
/* ==========================================================
13. AFFILIATION
========================================================== */
.jcia-affiliation {
margin: 0 0 10px !important;
padding: 0 !important;
color: #50575a !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 13px !important;
line-height: 1.45 !important;
}
.jcia-affiliation strong {
color: #111111 !important;
font-weight: 700 !important;
}
/* ==========================================================
14. PROFILE BUTTON CONTAINER
========================================================== */
.jcia-profile-links {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 5px;
margin: 0 0 10px;
}
/* ==========================================================
15. GENERAL BUTTON
========================================================== */
.jcia-profile-links a.jcia-btn {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
min-height: 28px;
padding: 5px 9px !important;
border-radius: 16px !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 10.5px !important;
font-weight: 700 !important;
line-height: 1 !important;
text-decoration: none !important;
box-sizing: border-box;
transition:
background-color 0.15s ease,
border-color 0.15s ease,
transform 0.15s ease;
}
/* ==========================================================
16. BUTTON BADGE
========================================================== */
.jcia-btn > span {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
min-width: 16px;
border-radius: 50%;
color: #ffffff;
font-size: 6px;
font-weight: 800;
line-height: 16px;
text-align: center;
}
/* ==========================================================
17. SCOPUS
========================================================== */
.jcia-profile-links a.jcia-scopus {
color: #ad632d !important;
background: #fdf5ea !important;
border: 1px solid #e8c7a4 !important;
}
.jcia-scopus > span {
background: #e47e3a;
}
/* ==========================================================
18. GOOGLE SCHOLAR
========================================================== */
.jcia-profile-links a.jcia-scholar {
color: #4c6e9b !important;
background: #eff4fa !important;
border: 1px solid #b8c9e1 !important;
}
.jcia-scholar > span {
background: #4285f4;
}
/* ==========================================================
19. RESEARCHGATE
========================================================== */
.jcia-profile-links a.jcia-rg {
color: #3b7c73 !important;
background: #edf8f6 !important;
border: 1px solid #abd6cf !important;
}
.jcia-rg > span {
background: #00a58e;
}
/* ==========================================================
20. ORCID
========================================================== */
.jcia-profile-links a.jcia-orcid {
color: #6c8e3f !important;
background: #f5faec !important;
border: 1px solid #c3da99 !important;
}
.jcia-orcid > span {
background: #a6ce39;
font-size: 7px;
}
/* ==========================================================
21. INSTITUTIONAL PROFILE
Generic university / institutional researcher profile
========================================================== */
.jcia-profile-links a.jcia-institution {
color: #5f6f7c !important;
background: #f4f7f9 !important;
border: 1px solid #d3dde4 !important;
}
.jcia-institution > span {
background: #7f96a8;
color: #ffffff;
font-size: 6px;
font-weight: 800;
}
/* ==========================================================
21. BUTTON HOVER
========================================================== */
.jcia-profile-links a.jcia-btn:hover,
.jcia-profile-links a.jcia-btn:focus {
text-decoration: none !important;
transform: translateY(-1px);
}
.jcia-profile-links a.jcia-scopus:hover,
.jcia-profile-links a.jcia-scopus:focus {
background: #f9ecdd !important;
}
.jcia-profile-links a.jcia-scholar:hover,
.jcia-profile-links a.jcia-scholar:focus {
background: #e7eef7 !important;
}
.jcia-profile-links a.jcia-rg:hover,
.jcia-profile-links a.jcia-rg:focus {
background: #e2f3f0 !important;
}
.jcia-profile-links a.jcia-orcid:hover,
.jcia-profile-links a.jcia-orcid:focus {
background: #eef6df !important;
}
.jcia-profile-links a.jcia-institution:hover,
.jcia-profile-links a.jcia-institution:focus {
background: #eaf0f4 !important;
border-color: #c2cfd8 !important;
}
/* ==========================================================
22. AREAS OF EXPERTISE
========================================================== */
.jcia-expertise {
padding: 8px 10px;
background: #f4f5f5;
border: 1px solid #e3e5e6;
border-left: 4px solid #08b8cc;
border-radius: 6px;
box-sizing: border-box;
}
/* ==========================================================
23. EXPERTISE TITLE
========================================================== */
.jcia-expertise-title {
display: block;
margin: 0 0 5px;
color: #111111 !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 10px !important;
font-weight: 800 !important;
line-height: 1.2 !important;
letter-spacing: 0.7px;
text-transform: uppercase;
}
/* ==========================================================
24. EXPERTISE TEXT
========================================================== */
.jcia-expertise p {
margin: 0 !important;
padding: 0 !important;
color: #4f5558 !important;
font-family: Arial, Helvetica, sans-serif !important;
font-size: 12px !important;
line-height: 1.55 !important;
}
/* ==========================================================
25. COLOURED EXPERTISE DOTS
========================================================== */
.jcia-dot-cyan {
color: #08b8cc !important;
font-weight: 800;
}
.jcia-dot-green {
color: #a8c34a !important;
font-weight: 800;
}
.jcia-dot-yellow {
color: #d4c900 !important;
font-weight: 800;
}
/* ==========================================================
26. TABLET
========================================================== */
@media (max-width: 900px) {
.jcia-role-header {
min-height: 46px !important;
margin-bottom: 13px !important;
}
.jcia-role-left {
font-size: 16px !important;
gap: 8px !important;
}
.jcia-role-left::before {
width: 30px !important;
height: 30px !important;
min-width: 30px !important;
flex-basis: 30px !important;
}
.jcia-role-header::after {
font-size: 11px !important;
}
}
/* ==========================================================
27. MOBILE
========================================================== */
@media (max-width: 600px) {
.jcia-role-header {
min-height: 42px !important;
padding: 5px 2px 6px 0 !important;
margin-bottom: 12px !important;
}
.jcia-role-left {
font-size: 15px !important;
gap: 7px !important;
}
.jcia-role-left::before {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
flex-basis: 28px !important;
}
.jcia-role-header::after {
font-size: 10px !important;
letter-spacing: 0.7px !important;
}
.jcia-profile-card {
grid-template-columns: 82px minmax(0, 1fr);
gap: 12px;
padding: 11px 11px 11px 14px;
}
.jcia-photo-placeholder,
.jcia-photo {
width: 82px;
height: 105px;
}
.jcia-photo-placeholder {
padding-top: 70px;
}
.jcia-photo-placeholder::before {
width: 12px;
height: 12px;
top: 33px;
left: 34px;
}
.jcia-photo-placeholder::after {
width: 26px;
height: 12px;
top: 49px;
left: 27px;
}
.jcia-name {
font-size: 14px !important;
}
.jcia-name-accent {
width: 38px;
height: 3px;
}
.jcia-affiliation {
font-size: 12px !important;
}
.jcia-profile-links {
gap: 4px;
}
.jcia-profile-links a.jcia-btn {
min-height: 26px;
padding: 5px 7px !important;
font-size: 9.5px !important;
}
.jcia-expertise {
padding: 7px 8px;
}
.jcia-expertise-title {
font-size: 9px !important;
}
.jcia-expertise p {
font-size: 11px !important;
}
}
/* ==========================================================
28. VERY SMALL MOBILE
========================================================== */
@media (max-width: 420px) {
.jcia-profile-card {
grid-template-columns: 1fr;
}
.jcia-photo-placeholder,
.jcia-photo {
width: 90px;
height: 110px;
}
.jcia-role-left {
font-size: 14px !important;
}
.jcia-role-left::before {
width: 27px !important;
height: 27px !important;
min-width: 27px !important;
flex-basis: 27px !important;
}
.jcia-role-header::after {
font-size: 9px !important;
}
}
/* ==========================================================
PROFILE CARD WITHOUT PHOTO
========================================================== */
.jcia-profile-card.jcia-no-photo {
grid-template-columns: minmax(0, 1fr);
}
/* JCIA Contact Page - CSS only
*/
/* =========================================================
JCIA CONTACT PAGE
Sanitizer-safe CSS-only icon version
No icon markup, SVG, JavaScript or icon library required
========================================================= */
/* Inter font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
/* =========================================================
JCIA FONT SYSTEM
========================================================= */
html body .jcia-contact-page,
html body .jcia-contact-page *,
html body .jcia-contact-page *::before,
html body .jcia-contact-page *::after {
font-family:"Inter",Arial,Helvetica,sans-serif !important;
}
html body .jcia-contact-page p,
html body .jcia-contact-page a,
html body .jcia-contact-page div,
html body .jcia-contact-page span,
html body .jcia-contact-page strong,
html body .jcia-contact-page table,
html body .jcia-contact-page td,
html body .jcia-contact-page th {
font-family:"Inter",Arial,Helvetica,sans-serif !important;
}
html body .jcia-contact-page .jcia-contact-intro p {
font-family:"Inter",Arial,Helvetica,sans-serif !important;
font-size:15px !important;
font-weight:400 !important;
line-height:1.75 !important;
letter-spacing:0 !important;
color:#4d5560 !important;
}
/* =========================================================
1. BRAND TOKENS / RESET
========================================================= */
.jcia-contact-page {
--jcia-black:#070707;
--jcia-charcoal:#181818;
--jcia-yellow:#fff000;
--jcia-yellow-dark:#e2d400;
--jcia-yellow-soft:#fffdf1;
--jcia-cyan:#05afe0;
--jcia-aqua:#63c6b5;
--jcia-green:#a8d56f;
--jcia-link:#007da7;
--jcia-text:#161616;
--jcia-muted:#545b66;
--jcia-border:#dddddd;
--jcia-border-dark:#c8c8c8;
--jcia-white:#ffffff;
--jcia-soft:#fafafa;
--jcia-gradient:linear-gradient(
90deg,
#05afe0 0%,
#63c6b5 34%,
#b7dc6c 68%,
#fff000 100%
);
display:block!important;
width:100%!important;
max-width:1080px!important;
margin:0 auto!important;
padding:0!important;
font-family:Inter,Arial,Helvetica,sans-serif!important;
color:var(--jcia-text)!important;
line-height:1.6!important;
box-sizing:border-box!important;
float:none!important;
clear:both!important;
}
.jcia-contact-page *,
.jcia-contact-page *::before,
.jcia-contact-page *::after {
font-family:Inter,Arial,Helvetica,sans-serif!important;
box-sizing:border-box!important;
}
.jcia-contact-page div,
.jcia-contact-page section,
.jcia-contact-page nav,
.jcia-contact-page p,
.jcia-contact-page strong,
.jcia-contact-page a,
.jcia-contact-page h2,
.jcia-contact-page table,
.jcia-contact-page thead,
.jcia-contact-page tbody,
.jcia-contact-page tr,
.jcia-contact-page th,
.jcia-contact-page td {
float:none!important;
}
.jcia-contact-page a {
text-decoration:none!important;
}
.jcia-contact-page strong {
color:inherit!important;
font-weight:700!important;
}
/* =========================================================
2. INTRO
========================================================= */
.jcia-contact-page .jcia-contact-intro {
position:relative!important;
display:block!important;
width:100%!important;
margin:0 0 22px!important;
padding:0 0 18px!important;
border-bottom:1px solid #ececec!important;
}
.jcia-contact-page .jcia-contact-intro::after {
content:""!important;
position:absolute!important;
left:0!important;
bottom:-1px!important;
width:96px!important;
height:4px!important;
border-radius:999px!important;
background:var(--jcia-gradient)!important;
}
.jcia-contact-page .jcia-contact-intro p {
display:block!important;
width:100%!important;
max-width:820px!important;
margin:0!important;
padding:0!important;
color:#4d5560!important;
font-size:15px!important;
line-height:1.75!important;
font-weight:400!important;
}
/* =========================================================
3. QUICK ACTIONS
JCIA GRADIENT + GLASSMORPHISM
Icons remain CSS-only and sanitizer-safe
========================================================= */
.jcia-contact-page .jcia-primary-actions {
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:12px!important;
width:100%!important;
margin:0 0 24px!important;
padding:0!important;
}
.jcia-contact-page .jcia-action-card {
position:relative!important;
isolation:isolate!important;
display:flex!important;
align-items:center!important;
min-width:0!important;
min-height:76px!important;
margin:0!important;
padding:14px 14px 14px 58px!important;
border:1px solid rgba(255,255,255,.22)!important;
border-radius:10px!important;
color:#ffffff!important;
font-family:Inter,Arial,Helvetica,sans-serif!important;
font-size:12px!important;
line-height:1.35!important;
font-weight:700!important;
text-transform:uppercase!important;
background:
linear-gradient(
135deg,
rgba(10,10,10,.94) 0%,
rgba(22,22,22,.88) 55%,
rgba(5,175,224,.30) 100%
)!important;
-webkit-backdrop-filter:
blur(16px)
saturate(145%)!important;
backdrop-filter:
blur(20px)
saturate(160%)!important;
box-shadow:
0 8px 24px rgba(0,0,0,.10),
inset 0 1px 0 rgba(255,255,255,.16),
inset 0 -1px 0 rgba(255,255,255,.05)!important;
overflow:hidden!important;
transition:
transform .22s ease,
box-shadow .22s ease,
border-color .22s ease,
filter .22s ease!important;
}
.jcia-contact-page .jcia-action-card:hover {
transform:translateY(-3px)!important;
border-color:rgba(255,255,255,.38)!important;
box-shadow:
0 14px 30px rgba(0,0,0,.16),
0 0 20px rgba(5,175,224,.10),
inset 0 1px 0 rgba(255,255,255,.22)!important;
filter:brightness(1.03)!important;
color:#ffffff!important;
}
/* Soft glass sheen */
.jcia-contact-page .jcia-action-card > * {
position:relative!important;
z-index:3!important;
}
/* =========================================================
CSS-ONLY ICON BADGE
========================================================= */
.jcia-contact-page .jcia-action-card::before {
content:""!important;
position:absolute!important;
left:13px!important;
top:50%!important;
width:32px!important;
height:32px!important;
transform:translateY(-50%)!important;
border:1px solid rgba(255,255,255,.24)!important;
border-radius:7px!important;
background:
linear-gradient(
145deg,
rgba(255,255,255,.12),
rgba(255,255,255,.03)
)!important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.14),
0 4px 12px rgba(0,0,0,.10)!important;
z-index:2!important;
}
/* JCIA cyan→yellow top accent */
.jcia-contact-page .jcia-action-card {
border-top-color:rgba(255,255,255,.28)!important;
}
.jcia-contact-page .jcia-action-card::selection {
background:var(--jcia-yellow)!important;
color:#111!important;
}
/* Small gradient bar inside upper edge */
.jcia-contact-page .jcia-action-card {
background-clip:padding-box!important;
}
.jcia-contact-page .jcia-action-card::after {
z-index:4!important;
}
/* =========================================================
1. SUBMIT A MANUSCRIPT
Black → Cyan
========================================================= */
.jcia-contact-page .jcia-action-submit {
background:
radial-gradient(
circle at 100% 0%,
rgba(5,175,224,.26) 0%,
transparent 38%
),
linear-gradient(
135deg,
rgba(4,4,4,.97) 0%,
rgba(10,25,30,.93) 58%,
rgba(5,175,224,.52) 145%
)!important;
border-top:3px solid #05afe0!important;
}
/* document icon */
.jcia-contact-page .jcia-action-submit::after {
content:""!important;
position:absolute!important;
left:22px!important;
top:50%!important;
width:14px!important;
height:18px!important;
transform:translateY(-50%)!important;
border:1.6px solid var(--jcia-yellow)!important;
border-radius:1px!important;
background:
linear-gradient(var(--jcia-yellow),var(--jcia-yellow)) 3px 6px/7px 1.4px no-repeat,
linear-gradient(var(--jcia-yellow),var(--jcia-yellow)) 3px 10px/7px 1.4px no-repeat!important;
}
/* =========================================================
2. AUTHOR GUIDELINES
Black → Aqua
========================================================= */
.jcia-contact-page .jcia-action-guidelines {
background:
radial-gradient(
circle at 100% 0%,
rgba(99,198,181,.25) 0%,
transparent 38%
),
linear-gradient(
135deg,
rgba(4,4,4,.97) 0%,
rgba(15,28,25,.93) 58%,
rgba(99,198,181,.52) 145%
)!important;
border-top:3px solid #63c6b5!important;
}
/* open-book icon */
.jcia-contact-page .jcia-action-guidelines::after {
content:""!important;
position:absolute!important;
left:20px!important;
top:50%!important;
width:18px!important;
height:15px!important;
transform:translateY(-50%)!important;
border:1.6px solid var(--jcia-yellow)!important;
border-radius:2px!important;
background:
linear-gradient(
90deg,
transparent calc(50% - .7px),
var(--jcia-yellow) calc(50% - .7px),
var(--jcia-yellow) calc(50% + .7px),
transparent calc(50% + .7px)
)!important;
}
/* =========================================================
3. AIMS & SCOPE
Black → Yellow-green
========================================================= */
.jcia-contact-page .jcia-action-scope {
background:
radial-gradient(
circle at 100% 0%,
rgba(255,240,0,.20) 0%,
transparent 38%
),
linear-gradient(
135deg,
rgba(4,4,4,.97) 0%,
rgba(31,32,14,.93) 58%,
rgba(255,240,0,.43) 145%
)!important;
border-top:3px solid #b7dc6c!important;
}
/* target icon */
.jcia-contact-page .jcia-action-scope::after {
content:""!important;
position:absolute!important;
left:20px!important;
top:50%!important;
width:18px!important;
height:18px!important;
transform:translateY(-50%)!important;
border:1.6px solid var(--jcia-yellow)!important;
border-radius:50%!important;
box-shadow:
inset 0 0 0 4px rgba(10,10,10,.95),
inset 0 0 0 5.5px var(--jcia-yellow)!important;
}
/* =========================================================
4. CONTACT EDITORIAL OFFICE
Cyan → Aqua → Yellow glass
========================================================= */
.jcia-contact-page .jcia-action-contact {
color:#111111!important;
border:1px solid rgba(255,255,255,.54)!important;
border-top:3px solid #050505!important;
background:
radial-gradient(
circle at 15% 15%,
rgba(255,255,255,.40) 0%,
transparent 34%
),
linear-gradient(
135deg,
rgba(5,175,224,.90) 0%,
rgba(99,198,181,.86) 34%,
rgba(183,220,108,.88) 66%,
rgba(255,240,0,.96) 100%
)!important;
box-shadow:
0 8px 24px rgba(0,0,0,.10),
inset 0 1px 0 rgba(255,255,255,.56),
inset 0 -1px 0 rgba(255,255,255,.22)!important;
}
.jcia-contact-page .jcia-action-contact:hover {
color:#111111!important;
box-shadow:
0 14px 30px rgba(0,0,0,.15),
0 0 22px rgba(255,240,0,.18),
inset 0 1px 0 rgba(255,255,255,.68)!important;
}
.jcia-contact-page .jcia-action-contact::before {
border-color:rgba(0,0,0,.18)!important;
background:
linear-gradient(
145deg,
rgba(255,255,255,.30),
rgba(0,0,0,.04)
)!important;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.40),
0 4px 12px rgba(0,0,0,.08)!important;
}
/* envelope icon */
.jcia-contact-page .jcia-action-contact::after {
content:""!important;
position:absolute!important;
left:20px!important;
top:50%!important;
width:18px!important;
height:13px!important;
transform:translateY(-50%)!important;
border:1.6px solid var(--jcia-black)!important;
border-radius:2px!important;
background:
linear-gradient(
35deg,
transparent 47%,
var(--jcia-black) 48%,
var(--jcia-black) 52%,
transparent 53%
) left top/50% 72% no-repeat,
linear-gradient(
-35deg,
transparent 47%,
var(--jcia-black) 48%,
var(--jcia-black) 52%,
transparent 53%
) right top/50% 72% no-repeat!important;
}
/* =========================================================
4. SECONDARY NAVIGATION
Minimal academic symbol icons
========================================================= */
.jcia-contact-page .jcia-secondary-nav {
display:flex!important;
align-items:center!important;
flex-wrap:wrap!important;
width:100%!important;
margin:0 0 24px!important;
padding:10px 0!important;
border-top:1px solid var(--jcia-border)!important;
border-bottom:1px solid var(--jcia-border)!important;
}
.jcia-contact-page .jcia-secondary-link {
position:relative!important;
display:inline-flex!important;
align-items:center!important;
min-height:26px!important;
margin:0!important;
padding:5px 16px 5px 41px!important;
border-right:1px solid var(--jcia-border-dark)!important;
color:var(--jcia-black)!important;
font-size:11.5px!important;
line-height:1.4!important;
font-weight:700!important;
text-transform:uppercase!important;
}
.jcia-contact-page .jcia-secondary-link:first-child {
padding-left:31px!important;
}
.jcia-contact-page .jcia-secondary-link:last-child {
border-right:0!important;
}
.jcia-contact-page .jcia-secondary-link:hover {
color:var(--jcia-link)!important;
}
/* Common monochrome mini-icon */
.jcia-contact-page .jcia-secondary-link::before {
position:absolute!important;
left:15px!important;
top:50%!important;
width:20px!important;
transform:translateY(-50%)!important;
color:#111!important;
font-family:Arial,Helvetica,sans-serif!important;
font-size:16px!important;
line-height:1!important;
font-weight:600!important;
text-align:center!important;
}
.jcia-contact-page .jcia-secondary-link:first-child::before {
left:3px!important;
}
.jcia-contact-page .jcia-link-ethics::before {
content:"§"!important;
}
.jcia-contact-page .jcia-link-review::before {
content:"✓"!important;
}
.jcia-contact-page .jcia-link-board::before {
content:"••"!important;
letter-spacing:-2px!important;
}
.jcia-contact-page .jcia-link-faq::before {
content:"?"!important;
width:17px!important;
height:17px!important;
border:1.5px solid #111!important;
border-radius:50%!important;
font-size:11px!important;
line-height:15px!important;
}
/* =========================================================
5. CONTENT CARDS
========================================================= */
.jcia-contact-page .jcia-section {
position:relative!important;
display:block!important;
width:100%!important;
margin:0 0 22px!important;
padding:0!important;
border:1px solid var(--jcia-border)!important;
border-radius:6px!important;
background:#ffffff!important;
box-shadow:none!important;
overflow:hidden!important;
}
.jcia-contact-page .jcia-section::before {
content:""!important;
display:block!important;
width:100%!important;
height:4px!important;
background:var(--jcia-gradient)!important;
}
.jcia-contact-page .jcia-section-inner {
display:block!important;
width:100%!important;
margin:0!important;
padding:22px 24px!important;
}
.jcia-contact-page .jcia-section-title {
display:block!important;
width:100%!important;
margin:0 0 18px!important;
padding:0 0 10px!important;
border-bottom:1px solid #ececec!important;
color:var(--jcia-black)!important;
font-size:18px!important;
line-height:1.3!important;
font-weight:800!important;
text-transform:uppercase!important;
}
.jcia-contact-page .jcia-section-title::after {
content:""!important;
display:block!important;
width:48px!important;
height:3px!important;
margin-top:9px!important;
background:var(--jcia-yellow)!important;
}
/* =========================================================
6. EDITORIAL OFFICE
CSS-only institutional icon
========================================================= */
.jcia-contact-page .jcia-office-grid {
display:grid!important;
grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)!important;
gap:26px!important;
width:100%!important;
}
.jcia-contact-page .jcia-office-column {
position:relative!important;
display:flex!important;
align-items:flex-start!important;
width:100%!important;
min-width:0!important;
margin:0!important;
padding:0!important;
}
.jcia-contact-page .jcia-office-address-block {
padding-left:70px!important;
}
.jcia-contact-page .jcia-office-address-block::before {
content:""!important;
position:absolute!important;
left:0!important;
top:0!important;
width:54px!important;
height:54px!important;
border:1px solid #d2d2d2!important;
border-radius:6px!important;
background:
linear-gradient(#111,#111) 13px 34px/28px 2px no-repeat,
linear-gradient(#111,#111) 16px 22px/2px 13px no-repeat,
linear-gradient(#111,#111) 23px 22px/2px 13px no-repeat,
linear-gradient(#111,#111) 30px 22px/2px 13px no-repeat,
linear-gradient(#111,#111) 37px 22px/2px 13px no-repeat,
linear-gradient(
145deg,
transparent 49%,
#111 50%
) 13px 12px/14px 10px no-repeat,
linear-gradient(
215deg,
transparent 49%,
#111 50%
) 27px 12px/14px 10px no-repeat,
#fff!important;
box-shadow:inset 0 -4px 0 var(--jcia-yellow)!important;
}
.jcia-contact-page .jcia-office-editor-block {
border-left:1px solid var(--jcia-border)!important;
padding-left:26px!important;
}
.jcia-contact-page .jcia-office-name {
display:block!important;
margin:0 0 5px!important;
color:var(--jcia-black)!important;
font-size:14px!important;
line-height:1.55!important;
font-weight:700!important;
}
.jcia-contact-page .jcia-office-address {
display:block!important;
margin:0!important;
color:#4f5660!important;
font-size:13.5px!important;
line-height:1.75!important;
font-weight:400!important;
}
.jcia-contact-page .jcia-editor-label {
display:block!important;
margin:0 0 3px!important;
color:var(--jcia-black)!important;
font-size:13.5px!important;
line-height:1.5!important;
font-weight:800!important;
}
.jcia-contact-page .jcia-editor-name {
display:block!important;
margin:0 0 14px!important;
color:#343434!important;
font-size:13.5px!important;
line-height:1.6!important;
font-weight:400!important;
}
.jcia-contact-page .jcia-contact-line {
position:relative!important;
display:block!important;
width:100%!important;
margin:8px 0!important;
padding-left:27px!important;
font-size:13.5px!important;
line-height:1.5!important;
}
.jcia-contact-page .jcia-contact-line::before {
position:absolute!important;
left:0!important;
top:1px!important;
width:18px!important;
height:18px!important;
color:#111!important;
font-family:Arial,Helvetica,sans-serif!important;
font-size:15px!important;
line-height:18px!important;
font-weight:400!important;
text-align:center!important;
}
.jcia-contact-page .jcia-contact-email::before {
content:"@"!important;
font-weight:700!important;
}
.jcia-contact-page .jcia-contact-phone::before {
content:"☎"!important;
}
.jcia-contact-page .jcia-contact-line a {
color:var(--jcia-link)!important;
font-weight:600!important;
}
.jcia-contact-page .jcia-contact-line a:hover {
color:#000!important;
text-decoration:underline!important;
}
/* =========================================================
7. ENQUIRY GUIDE
Every icon is generated from CSS only
========================================================= */
.jcia-contact-page .jcia-guide-title {
display:block!important;
width:100%!important;
margin:0!important;
padding:17px 20px 12px!important;
color:var(--jcia-black)!important;
font-size:17px!important;
line-height:1.35!important;
font-weight:800!important;
text-transform:uppercase!important;
}
.jcia-contact-page .jcia-guide-table-wrap {
display:block!important;
width:100%!important;
margin:0!important;
padding:0 12px 14px!important;
overflow-x:auto!important;
-webkit-overflow-scrolling:touch!important;
}
.jcia-contact-page .jcia-guide-table {
display:table!important;
width:100%!important;
margin:0!important;
border-collapse:separate!important;
border-spacing:0!important;
border:1px solid var(--jcia-border)!important;
border-radius:5px!important;
table-layout:auto!important;
overflow:hidden!important;
}
.jcia-contact-page .jcia-guide-table thead {
display:table-header-group!important;
}
.jcia-contact-page .jcia-guide-table tbody {
display:table-row-group!important;
}
.jcia-contact-page .jcia-guide-table tr {
display:table-row!important;
}
.jcia-contact-page .jcia-guide-table th,
.jcia-contact-page .jcia-guide-table td {
display:table-cell!important;
float:none!important;
}
.jcia-contact-page .jcia-guide-table thead th {
padding:11px 13px!important;
border-top:4px solid var(--jcia-yellow)!important;
background:var(--jcia-black)!important;
color:#ffffff!important;
font-size:11.5px!important;
line-height:1.4!important;
font-weight:700!important;
text-align:center!important;
text-transform:uppercase!important;
vertical-align:middle!important;
}
.jcia-contact-page .jcia-guide-table thead th:first-child {
width:43%!important;
border-right:1px solid #363636!important;
}
.jcia-contact-page .jcia-guide-table tbody td {
padding:10px 13px!important;
border-bottom:1px solid #e9e9e9!important;
background:#ffffff!important;
color:var(--jcia-text)!important;
font-size:13px!important;
line-height:1.5!important;
font-weight:400!important;
vertical-align:middle!important;
}
.jcia-contact-page .jcia-guide-table tbody tr:nth-child(even) td {
background:#fafafa!important;
}
.jcia-contact-page .jcia-guide-table tbody tr:hover td {
background:var(--jcia-yellow-soft)!important;
}
.jcia-contact-page .jcia-guide-table tbody tr:last-child td {
border-bottom:0!important;
}
.jcia-contact-page .jcia-guide-enquiry {
position:relative!important;
display:flex!important;
align-items:center!important;
min-height:28px!important;
padding-left:41px!important;
}
/* Default icon badge */
.jcia-contact-page .jcia-guide-enquiry::before {
position:absolute!important;
left:0!important;
top:50%!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:28px!important;
height:28px!important;
transform:translateY(-50%)!important;
border:1px solid #d2d2d2!important;
border-radius:4px!important;
background:#ffffff!important;
color:#111!important;
box-shadow:inset 0 -2px 0 var(--jcia-yellow)!important;
font-family:Arial,Helvetica,sans-serif!important;
font-size:14px!important;
line-height:1!important;
font-weight:600!important;
text-align:center!important;
}
/* Minimal, monochrome, academic symbols */
.jcia-contact-page .jcia-row-submission .jcia-guide-enquiry::before {
content:"▤"!important;
}
.jcia-contact-page .jcia-row-status .jcia-guide-enquiry::before {
content:"◷"!important;
}
.jcia-contact-page .jcia-row-scope .jcia-guide-enquiry::before {
content:"◎"!important;
}
.jcia-contact-page .jcia-row-special .jcia-guide-enquiry::before {
content:"★"!important;
font-size:12px!important;
}
.jcia-contact-page .jcia-row-reviewer .jcia-guide-enquiry::before {
content:"✓"!important;
}
.jcia-contact-page .jcia-row-correction .jcia-guide-enquiry::before {
content:"✎"!important;
}
.jcia-contact-page .jcia-row-ethics .jcia-guide-enquiry::before {
content:"§"!important;
}
.jcia-contact-page .jcia-row-technical .jcia-guide-enquiry::before {
content:"▣"!important;
}
.jcia-contact-page .jcia-row-general .jcia-guide-enquiry::before {
content:"…"!important;
font-size:17px!important;
line-height:10px!important;
}
.jcia-contact-page .jcia-guide-action a {
color:var(--jcia-link)!important;
font-weight:600!important;
}
.jcia-contact-page .jcia-guide-action a:hover {
color:#000!important;
text-decoration:underline!important;
}
/* =========================================================
8. BEFORE CONTACTING US
CSS icons attached directly to each text item
========================================================= */
.jcia-contact-page .jcia-before-contact {
position:relative!important;
display:block!important;
width:100%!important;
margin:0 0 22px!important;
padding:22px 24px!important;
border:1px solid #e7db55!important;
border-radius:6px!important;
background:#fffef4!important;
overflow:hidden!important;
}
.jcia-contact-page .jcia-before-contact::before {
content:""!important;
position:absolute!important;
top:0!important;
left:0!important;
right:0!important;
height:4px!important;
background:var(--jcia-gradient)!important;
}
.jcia-contact-page .jcia-before-title {
display:block!important;
width:100%!important;
margin:0 0 18px!important;
padding:0!important;
color:var(--jcia-black)!important;
font-size:17px!important;
line-height:1.3!important;
font-weight:800!important;
text-transform:uppercase!important;
}
.jcia-contact-page .jcia-before-grid {
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
column-gap:34px!important;
row-gap:16px!important;
width:100%!important;
}
.jcia-contact-page .jcia-check-item {
position:relative!important;
display:block!important;
min-width:0!important;
min-height:36px!important;
margin:0!important;
padding:2px 0 0 47px!important;
color:var(--jcia-text)!important;
font-size:13.5px!important;
line-height:1.6!important;
font-weight:400!important;
white-space:normal!important;
word-break:normal!important;
}
.jcia-contact-page .jcia-check-item::before {
position:absolute!important;
left:0!important;
top:0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:34px!important;
height:34px!important;
border:1px solid #d1d1d1!important;
border-radius:5px!important;
background:#ffffff!important;
color:#111!important;
box-shadow:inset 0 -3px 0 var(--jcia-yellow)!important;
font-family:Arial,Helvetica,sans-serif!important;
font-size:15px!important;
line-height:1!important;
font-weight:600!important;
text-align:center!important;
}
.jcia-contact-page .jcia-before-submit::before {
content:"▤"!important;
}
.jcia-contact-page .jcia-before-id::before {
content:"ID"!important;
font-family:Inter,Arial,Helvetica,sans-serif!important;
font-size:9px!important;
font-weight:800!important;
}
.jcia-contact-page .jcia-before-scope::before {
content:"◎"!important;
}
.jcia-contact-page .jcia-before-support::before {
content:"▣"!important;
}
.jcia-contact-page .jcia-before-guidelines::before {
content:"≡"!important;
font-size:18px!important;
font-weight:500!important;
}
.jcia-contact-page .jcia-before-office::before {
content:"▦"!important;
}
/* =========================================================
9. CONTACT SUMMARY
Icons are generated on each card
========================================================= */
.jcia-contact-page .jcia-contact-summary {
position:relative!important;
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
width:100%!important;
margin:0 0 20px!important;
padding:0!important;
border:1px solid var(--jcia-border)!important;
border-radius:6px!important;
background:#ffffff!important;
overflow:hidden!important;
}
.jcia-contact-page .jcia-contact-summary::before {
content:""!important;
position:absolute!important;
top:0!important;
left:0!important;
right:0!important;
height:4px!important;
background:var(--jcia-gradient)!important;
}
.jcia-contact-page .jcia-summary-item {
position:relative!important;
display:block!important;
min-width:0!important;
margin:0!important;
padding:20px 18px 17px 68px!important;
background:#ffffff!important;
}
.jcia-contact-page .jcia-summary-item + .jcia-summary-item {
border-left:1px solid var(--jcia-border)!important;
}
.jcia-contact-page .jcia-summary-item::before {
position:absolute!important;
left:18px!important;
top:20px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:36px!important;
height:36px!important;
border:1px solid #d1d1d1!important;
border-radius:5px!important;
background:#ffffff!important;
color:#111!important;
box-shadow:inset 0 -3px 0 var(--jcia-yellow)!important;
font-family:Arial,Helvetica,sans-serif!important;
font-size:16px!important;
line-height:1!important;
font-weight:600!important;
text-align:center!important;
}
.jcia-contact-page .jcia-summary-address::before {
content:"⌖"!important;
}
.jcia-contact-page .jcia-summary-phone::before {
content:"☎"!important;
font-weight:400!important;
}
.jcia-contact-page .jcia-summary-email::before {
content:"@"!important;
font-family:Inter,Arial,Helvetica,sans-serif!important;
font-size:15px!important;
font-weight:800!important;
}
.jcia-contact-page .jcia-summary-label {
display:block!important;
margin:0 0 5px!important;
color:var(--jcia-black)!important;
font-size:11px!important;
line-height:1.35!important;
font-weight:800!important;
text-transform:uppercase!important;
}
.jcia-contact-page .jcia-summary-value {
display:block!important;
color:#505661!important;
font-size:12.5px!important;
line-height:1.55!important;
font-weight:400!important;
}
.jcia-contact-page .jcia-summary-value a {
color:var(--jcia-link)!important;
font-weight:600!important;
}
.jcia-contact-page .jcia-summary-value a:hover {
color:#000!important;
text-decoration:underline!important;
}
/* =========================================================
10. RESPONSIVE
========================================================= */
@media (max-width:900px) {
.jcia-contact-page .jcia-primary-actions {
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.jcia-contact-page .jcia-office-grid {
grid-template-columns:1fr!important;
gap:20px!important;
}
.jcia-contact-page .jcia-office-editor-block {
border-left:0!important;
border-top:1px solid var(--jcia-border)!important;
padding-left:0!important;
padding-top:20px!important;
}
.jcia-contact-page .jcia-before-grid {
grid-template-columns:1fr!important;
row-gap:15px!important;
}
.jcia-contact-page .jcia-contact-summary {
grid-template-columns:1fr!important;
}
.jcia-contact-page .jcia-summary-item + .jcia-summary-item {
border-left:0!important;
border-top:1px solid var(--jcia-border)!important;
}
}
@media (max-width:650px) {
.jcia-contact-page {
width:100%!important;
}
.jcia-contact-page .jcia-contact-intro p {
font-size:14px!important;
line-height:1.7!important;
}
.jcia-contact-page .jcia-primary-actions {
grid-template-columns:1fr!important;
gap:8px!important;
}
.jcia-contact-page .jcia-action-card {
min-height:64px!important;
}
.jcia-contact-page .jcia-secondary-nav {
display:grid!important;
grid-template-columns:1fr 1fr!important;
}
.jcia-contact-page .jcia-secondary-link,
.jcia-contact-page .jcia-secondary-link:first-child {
width:100%!important;
padding:8px 6px 8px 33px!important;
border-right:0!important;
font-size:10.5px!important;
}
.jcia-contact-page .jcia-secondary-link::before,
.jcia-contact-page .jcia-secondary-link:first-child::before {
left:6px!important;
}
.jcia-contact-page .jcia-section-inner {
padding:18px 16px!important;
}
.jcia-contact-page .jcia-section-title,
.jcia-contact-page .jcia-guide-title,
.jcia-contact-page .jcia-before-title {
font-size:16px!important;
}
.jcia-contact-page .jcia-office-address-block {
padding-left:0!important;
padding-top:66px!important;
}
.jcia-contact-page .jcia-office-address-block::before {
top:0!important;
}
.jcia-contact-page .jcia-guide-table {
min-width:650px!important;
}
.jcia-contact-page .jcia-before-contact {
padding:18px 16px!important;
}
.jcia-contact-page .jcia-check-item {
font-size:13px!important;
}
.jcia-contact-page .jcia-summary-item {
padding-left:66px!important;
}
}
/* =========================================================
JCIA UUM — DOUBLE-BLIND PEER REVIEW PROCESS
Colour system based on JCIA journal cover
Primary:
Black #000000
JCIA Yellow #FFF000
JCIA Cyan #05BAC4
UUM Blue #274886
========================================================= */
/* =========================================================
PAGE
========================================================= */
.jcia-pr-page {
max-width: 1180px;
margin: 0 auto;
padding: 10px 0 40px;
font-family: Arial, Helvetica, sans-serif;
color: #3f4448;
line-height: 1.7;
}
.jcia-pr-page *,
.jcia-pr-page *::before,
.jcia-pr-page *::after {
box-sizing: border-box;
}
/* =========================================================
HERO
Inspired by JCIA cover:
Cyan → yellow band + black field
========================================================= */
.jcia-pr-hero {
position: relative;
overflow: hidden;
background: #000000;
border-radius: 12px 12px 0 0;
padding: 50px 50px 46px;
margin-bottom: 0;
color: #ffffff;
border-top: 8px solid #05bac4;
}
/* gradient line across top area */
.jcia-pr-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8px;
background: linear-gradient(
90deg,
#05bac4 0%,
#31c1bd 25%,
#9dd79f 52%,
#d8e95b 72%,
#fff000 100%
);
}
/* decorative yellow circle */
.jcia-pr-hero::after {
content: "";
position: absolute;
width: 210px;
height: 210px;
border-radius: 50%;
border: 30px solid rgba(255,240,0,.08);
right: -55px;
top: -70px;
}
.jcia-pr-kicker {
position: relative;
z-index: 2;
font-size: 11px;
font-weight: 700;
letter-spacing: 2.2px;
text-transform: uppercase;
color: #fff000;
margin-bottom: 10px;
}
.jcia-pr-hero h1 {
position: relative;
z-index: 2;
margin: 0 0 14px;
color: #ffffff;
font-size: 37px;
line-height: 1.2;
font-weight: 800;
}
.jcia-pr-hero p {
position: relative;
z-index: 2;
max-width: 850px;
margin: 0;
color: #e8e8e8;
font-size: 15px;
line-height: 1.75;
}
/* =========================================================
ACCENT BAND
Matches cover bottom gradient
========================================================= */
.jcia-pr-accent {
width: 100%;
height: 7px;
margin: 0 0 27px;
background: linear-gradient(
90deg,
#05bac4 0%,
#38c2bb 27%,
#a9dc92 56%,
#e6ec45 78%,
#fff000 100%
);
border-radius: 0 0 5px 5px;
}
/* =========================================================
QUICK FACTS
========================================================= */
.jcia-pr-facts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 28px;
}
.jcia-pr-fact {
position: relative;
overflow: hidden;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 9px;
padding: 18px 13px 16px;
text-align: center;
}
/* alternating cyan/yellow visual accent */
.jcia-pr-fact:nth-child(odd) {
border-top: 4px solid #05bac4;
}
.jcia-pr-fact:nth-child(even) {
border-top: 4px solid #fff000;
}
.jcia-pr-fact strong {
display: block;
color: #111111;
font-size: 14px;
margin-bottom: 4px;
font-weight: 700;
}
.jcia-pr-fact span {
display: block;
color: #73777a;
font-size: 11px;
line-height: 1.45;
}
/* =========================================================
INTRODUCTION HIGHLIGHT
========================================================= */
.jcia-pr-intro {
padding: 21px 23px;
margin-bottom: 32px;
background: #f7f8f8;
border-left: 5px solid #05bac4;
border-bottom: 2px solid #fff000;
border-radius: 0 8px 8px 0;
}
.jcia-pr-intro strong {
display: block;
margin-bottom: 5px;
color: #111111;
font-size: 16px;
}
.jcia-pr-intro p {
margin: 0;
color: #4f5559;
font-size: 14px;
}
/* =========================================================
PROCESS HEADING
========================================================= */
.jcia-pr-process-heading {
text-align: center;
margin: 38px 0 25px;
}
.jcia-pr-process-heading .jcia-pr-small-title {
color: #274886;
text-transform: uppercase;
letter-spacing: 1.8px;
font-size: 10px;
font-weight: 700;
}
.jcia-pr-process-heading h2 {
margin: 6px 0 7px;
color: #111111;
font-size: 26px;
font-weight: 750;
}
.jcia-pr-process-heading h2::after {
content: "";
display: block;
width: 55px;
height: 4px;
margin: 10px auto 0;
background: #fff000;
}
.jcia-pr-process-heading p {
margin: 0 auto;
max-width: 700px;
color: #747b7f;
font-size: 13px;
}
/* =========================================================
PROCESS FLOW
========================================================= */
.jcia-pr-flow {
display: grid;
grid-template-columns: repeat(6, 1fr);
gap: 9px;
position: relative;
margin-bottom: 22px;
}
.jcia-pr-flow-item {
position: relative;
min-height: 150px;
padding: 18px 11px;
text-align: center;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 9px;
transition: border-color .2s ease;
}
.jcia-pr-flow-item:hover {
border-color: #05bac4;
}
/* black circles like JCIA cover */
.jcia-pr-flow-number {
display: flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
margin: 0 auto 10px;
border-radius: 50%;
background: #000000;
color: #fff000;
font-size: 12px;
font-weight: 800;
border: 2px solid #fff000;
}
.jcia-pr-flow-item h3 {
margin: 0 0 5px;
color: #111111;
font-size: 13px;
line-height: 1.35;
}
.jcia-pr-flow-item p {
margin: 0;
color: #777d80;
font-size: 10.5px;
line-height: 1.48;
}
.jcia-pr-flow-arrow {
position: absolute;
right: -9px;
top: 59px;
z-index: 3;
color: #05bac4;
font-size: 21px;
font-weight: 800;
}
.jcia-pr-flow-item:last-child .jcia-pr-flow-arrow {
display: none;
}
/* =========================================================
REVISION LOOP
========================================================= */
.jcia-pr-revision-loop {
max-width: 700px;
margin: 0 auto 37px;
padding: 12px 18px;
text-align: center;
background: #fffdec;
border: 1px solid #eee45a;
border-left: 5px solid #fff000;
border-radius: 6px;
color: #555027;
font-size: 12px;
}
.jcia-pr-revision-loop strong {
color: #111111;
}
/* =========================================================
DOUBLE-BLIND FEATURE
Main black JCIA-style panel
========================================================= */
.jcia-pr-blind {
position: relative;
overflow: hidden;
padding: 31px 31px;
margin-bottom: 34px;
background: #000000;
border-radius: 11px;
color: #ffffff;
text-align: center;
border-bottom: 6px solid #fff000;
}
.jcia-pr-blind::before {
content: "";
position: absolute;
top: 0;
left: 0;
height: 5px;
width: 100%;
background: linear-gradient(
90deg,
#05bac4 0%,
#77cea9 50%,
#fff000 100%
);
}
.jcia-pr-blind-label {
margin-bottom: 5px;
text-transform: uppercase;
letter-spacing: 1.8px;
color: #fff000;
font-size: 10px;
font-weight: 700;
}
.jcia-pr-blind h2 {
margin: 0 0 9px;
color: #ffffff;
font-size: 24px;
}
.jcia-pr-blind > p {
max-width: 780px;
margin: 0 auto 22px;
color: #dedede;
font-size: 13px;
}
.jcia-pr-blind-visual {
display: flex;
justify-content: center;
align-items: center;
gap: 14px;
}
.jcia-pr-blind-party {
min-width: 190px;
padding: 13px 19px;
background: #151515;
border: 1px solid #3a3a3a;
border-radius: 7px;
}
.jcia-pr-blind-party strong {
display: block;
color: #ffffff;
font-size: 13px;
letter-spacing: .5px;
}
.jcia-pr-blind-party span {
display: block;
margin-top: 3px;
color: #bfc4c6;
font-size: 10px;
}
.jcia-pr-blind-middle {
font-size: 24px;
font-weight: 700;
color: #fff000;
}
/* =========================================================
TWO COLUMN LAYOUT
========================================================= */
.jcia-pr-layout {
display: grid;
grid-template-columns: 235px minmax(0, 1fr);
gap: 28px;
align-items: start;
}
/* =========================================================
SIDEBAR
========================================================= */
.jcia-pr-sidebar {
position: sticky;
top: 20px;
}
.jcia-pr-nav {
overflow: hidden;
padding: 0;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 9px;
}
.jcia-pr-nav-title {
margin: 0;
padding: 14px 16px;
background: #000000;
border-bottom: 4px solid #fff000;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1.3px;
font-size: 10px;
font-weight: 700;
}
.jcia-pr-nav a {
display: block;
position: relative;
padding: 9px 10px 9px 22px;
border-bottom: 1px solid #eeeeee;
color: #4d5356 !important;
text-decoration: none !important;
font-size: 11.5px;
line-height: 1.4;
}
.jcia-pr-nav a:last-child {
border-bottom: none;
}
.jcia-pr-nav a::before {
content: "›";
position: absolute;
left: 10px;
color: #05aeb8;
font-weight: 800;
}
.jcia-pr-nav a:hover {
color: #000000 !important;
background: #fffde8;
border-left: 3px solid #fff000;
padding-left: 21px;
}
/* =========================================================
CONTENT
========================================================= */
.jcia-pr-content {
min-width: 0;
}
.jcia-pr-section {
position: relative;
padding: 28px 31px;
margin-bottom: 19px;
background: #ffffff;
border: 1px solid #dfdfdf;
border-radius: 9px;
scroll-margin-top: 20px;
}
.jcia-pr-section::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 5px;
height: 45px;
background: #fff000;
border-radius: 9px 0 0 0;
}
.jcia-pr-section-tag {
margin-bottom: 4px;
color: #274886;
text-transform: uppercase;
letter-spacing: 1.4px;
font-size: 10px;
font-weight: 700;
}
.jcia-pr-section h2 {
margin: 0 0 14px;
color: #111111;
font-size: 21px;
line-height: 1.3;
font-weight: 750;
}
.jcia-pr-section h3 {
margin: 21px 0 7px;
color: #274886;
font-size: 15px;
font-weight: 700;
}
.jcia-pr-section p {
margin: 0 0 12px;
color: #4e5559;
font-size: 13.5px;
line-height: 1.72;
}
.jcia-pr-section ul {
margin: 10px 0 13px;
padding-left: 20px;
}
.jcia-pr-section li {
margin-bottom: 6px;
color: #4e5559;
font-size: 13px;
line-height: 1.6;
}
.jcia-pr-section li::marker {
color: #05aeb8;
}
/* =========================================================
HIGHLIGHT BOX
========================================================= */
.jcia-pr-highlight {
margin: 18px 0;
padding: 16px 18px;
background: #f8f9f9;
border-left: 4px solid #05bac4;
border-bottom: 2px solid #fff000;
border-radius: 0 7px 7px 0;
}
.jcia-pr-highlight strong {
display: block;
margin-bottom: 4px;
color: #111111;
font-size: 13px;
}
.jcia-pr-highlight p {
margin: 0;
color: #575e62;
font-size: 12.5px;
}
/* =========================================================
REVIEW CRITERIA
========================================================= */
.jcia-pr-criteria {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 11px;
margin-top: 17px;
}
.jcia-pr-criterion {
position: relative;
padding: 16px 17px;
background: #fafafa;
border: 1px solid #e1e1e1;
border-radius: 7px;
}
.jcia-pr-criterion:nth-child(odd) {
border-top: 3px solid #05bac4;
}
.jcia-pr-criterion:nth-child(even) {
border-top: 3px solid #fff000;
}
.jcia-pr-criterion strong {
display: block;
margin-bottom: 4px;
color: #111111;
font-size: 13px;
}
.jcia-pr-criterion p {
margin: 0;
color: #686e72;
font-size: 11.5px;
line-height: 1.55;
}
/* =========================================================
DECISION CARDS
========================================================= */
.jcia-pr-decisions {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 11px;
margin-top: 16px;
}
.jcia-pr-decision {
padding: 16px 17px;
border-radius: 7px;
border: 1px solid #dddddd;
background: #fafafa;
}
.jcia-pr-decision strong {
display: block;
margin-bottom: 4px;
color: #111111;
font-size: 13px;
}
.jcia-pr-decision p {
margin: 0;
color: #666d70;
font-size: 11.5px;
line-height: 1.55;
}
.jcia-pr-decision.accept {
border-left: 5px solid #05bac4;
}
.jcia-pr-decision.minor {
border-left: 5px solid #d9db33;
}
.jcia-pr-decision.major {
border-left: 5px solid #f2b433;
}
.jcia-pr-decision.reject {
border-left: 5px solid #444444;
}
/* =========================================================
PRINCIPLE CARDS
========================================================= */
.jcia-pr-principles {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 11px;
margin-top: 16px;
}
.jcia-pr-principle {
padding: 16px;
background: #fafafa;
border: 1px solid #e1e1e1;
border-top: 3px solid #05bac4;
border-radius: 7px;
}
.jcia-pr-principle:nth-child(even) {
border-top-color: #fff000;
}
.jcia-pr-principle strong {
display: block;
margin-bottom: 4px;
color: #111111;
font-size: 13px;
}
.jcia-pr-principle p {
margin: 0;
color: #676e71;
font-size: 11.5px;
}
/* =========================================================
RELATED POLICIES
========================================================= */
.jcia-pr-related {
margin-top: 26px;
padding: 25px;
background: #f7f8f8;
border: 1px solid #dddddd;
border-top: 5px solid #fff000;
border-radius: 9px;
}
.jcia-pr-related h2 {
margin: 0 0 6px;
color: #111111;
font-size: 19px;
}
.jcia-pr-related > p {
margin: 0 0 14px;
color: #646b6f;
font-size: 12.5px;
}
.jcia-pr-related-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.jcia-pr-related-links a {
display: inline-block;
padding: 8px 13px;
background: #ffffff;
border: 1px solid #d2d2d2;
border-radius: 5px;
color: #274886 !important;
text-decoration: none !important;
font-size: 11px;
font-weight: 700;
}
.jcia-pr-related-links a:hover {
background: #000000;
border-color: #000000;
color: #fff000 !important;
}
/* =========================================================
SUBMIT CTA
Strong JCIA black/yellow treatment
========================================================= */
.jcia-pr-submit {
position: relative;
overflow: hidden;
margin-top: 19px;
padding: 27px 28px;
background: #000000;
border-radius: 9px;
border-bottom: 6px solid #fff000;
color: #ffffff;
}
.jcia-pr-submit::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 4px;
background: linear-gradient(
90deg,
#05bac4,
#8bd2a2,
#fff000
);
}
.jcia-pr-submit h2 {
margin: 0 0 6px;
color: #ffffff;
font-size: 20px;
}
.jcia-pr-submit p {
margin: 0 0 14px;
color: #dddddd;
font-size: 12.5px;
}
.jcia-pr-submit a {
display: inline-block;
padding: 10px 16px;
border-radius: 5px;
background: #fff000;
color: #000000 !important;
text-decoration: none !important;
font-size: 11.5px;
font-weight: 800;
}
.jcia-pr-submit a:hover {
background: #05bac4;
color: #000000 !important;
}
/* =========================================================
LAST UPDATED
========================================================= */
.jcia-pr-updated {
margin-top: 18px;
padding: 12px;
text-align: center;
color: #777d80;
background: #f5f5f5;
border-top: 2px solid #fff000;
border-radius: 5px;
font-size: 10px;
}
/* =========================================================
STANDARD LINKS WITHIN CONTENT
========================================================= */
.jcia-pr-page p a,
.jcia-pr-page li a {
color: #274886 !important;
text-decoration: none;
font-weight: 600;
}
.jcia-pr-page p a:hover,
.jcia-pr-page li a:hover {
color: #05aeb8 !important;
text-decoration: underline;
}
/* =========================================================
RESPONSIVE — TABLET
========================================================= */
@media screen and (max-width: 960px) {
.jcia-pr-flow {
grid-template-columns: repeat(3, 1fr);
}
.jcia-pr-flow-arrow {
display: none;
}
.jcia-pr-facts {
grid-template-columns: repeat(2, 1fr);
}
}
/* =========================================================
RESPONSIVE — SMALL TABLET
========================================================= */
@media screen and (max-width: 780px) {
.jcia-pr-layout {
grid-template-columns: 1fr;
}
.jcia-pr-sidebar {
position: static;
}
.jcia-pr-nav {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.jcia-pr-nav-title {
grid-column: 1 / -1;
}
}
/* =========================================================
RESPONSIVE — MOBILE
========================================================= */
@media screen and (max-width: 600px) {
.jcia-pr-page {
padding-left: 4px;
padding-right: 4px;
}
.jcia-pr-hero {
padding: 33px 23px 31px;
border-radius: 9px 9px 0 0;
}
.jcia-pr-hero h1 {
font-size: 27px;
}
.jcia-pr-hero p {
font-size: 13px;
}
.jcia-pr-facts {
grid-template-columns: repeat(2, 1fr);
gap: 7px;
}
.jcia-pr-fact {
padding: 14px 8px;
}
.jcia-pr-flow {
grid-template-columns: 1fr;
}
.jcia-pr-flow-item {
min-height: 0;
}
.jcia-pr-blind {
padding: 26px 19px;
}
.jcia-pr-blind-visual {
flex-direction: column;
}
.jcia-pr-blind-middle {
transform: rotate(90deg);
}
.jcia-pr-section {
padding: 22px 19px;
}
.jcia-pr-section h2 {
font-size: 20px;
}
.jcia-pr-criteria,
.jcia-pr-decisions,
.jcia-pr-principles {
grid-template-columns: 1fr;
}
.jcia-pr-nav {
grid-template-columns: 1fr;
}
.jcia-pr-related-links {
flex-direction: column;
}
.jcia-pr-related-links a {
width: 100%;
}
}
/* =========================================================
JCIA — OJS SUBMISSIONS PAGE
Simple styling for Author Guidance
========================================================= */
/* Main page */
.page_submissions {
color: #444444;
line-height: 1.65;
}
/* Main page title */
.page_submissions > h1 {
color: #111111;
font-size: 30px;
font-weight: 700;
border-bottom: 5px solid #fff000;
padding-bottom: 12px;
margin-bottom: 25px;
}
/* Section headings */
.page_submissions h2 {
color: #111111;
font-size: 20px;
font-weight: 700;
margin-top: 28px;
margin-bottom: 12px;
}
/* Smaller headings */
.page_submissions h3 {
color: #274886;
font-size: 15px;
font-weight: 700;
}
/* Paragraphs */
.page_submissions p {
color: #50565a;
font-size: 13.5px;
line-height: 1.7;
}
/* Lists */
.page_submissions ul {
margin: 15px 0;
padding-left: 0;
list-style: none;
}
.page_submissions ul li {
position: relative;
padding: 9px 10px 9px 29px;
margin: 0;
border-bottom: 1px solid #eeeeee;
color: #4c5357;
font-size: 13px;
}
.page_submissions ul li::before {
content: "✓";
position: absolute;
left: 7px;
top: 8px;
color: #05bac4;
font-weight: 700;
}
.page_submissions ul li:last-child {
border-bottom: none;
}
/* Links */
.page_submissions a {
color: #274886;
font-weight: 600;
text-decoration: none;
}
.page_submissions a:hover {
color: #05aeb8;
text-decoration: underline;
}
/* Login / Register / Submit buttons */
.page_submissions .cmp_button,
.page_submissions .pkp_button,
.page_submissions button,
.page_submissions input[type="submit"] {
background: #000000;
color: #fff000;
border: 0;
border-radius: 5px;
padding: 10px 17px;
font-size: 12px;
font-weight: 700;
}
.page_submissions .cmp_button:hover,
.page_submissions .pkp_button:hover,
.page_submissions button:hover,
.page_submissions input[type="submit"]:hover {
background: #05bac4;
color: #000000;
}
/* Horizontal separators */
.page_submissions hr {
border: 0;
border-top: 1px solid #dddddd;
margin: 25px 0;
}
/* Privacy statement */
.page_submissions .privacy_statement {
margin-top: 30px;
padding: 16px 18px;
background: #f7f7f7;
border-left: 4px solid #fff000;
color: #666666;
font-size: 11.5px;
}
/* Mobile */
@media screen and (max-width: 600px) {
.page_submissions > h1 {
font-size: 25px;
}
.page_submissions h2 {
font-size: 18px;
}
.page_submissions p,
.page_submissions ul li {
font-size: 12.5px;
}
}
/* =========================================================
JCIA — ABOUT THE JOURNAL
FULL CONSOLIDATED CSS
No hero
Glassmorphism + JCIA colour identity
Brand colours
---------------------------------------------------------
Black #000000
White #FFFFFF
JCIA Yellow #FFF000
JCIA Cyan #05BAC4
UUM Blue #274886
========================================================= */
/* =========================================================
PAGE
========================================================= */
.jcia-about-page {
--jcia-black: #000000;
--jcia-white: #ffffff;
--jcia-yellow: #fff000;
--jcia-cyan: #05bac4;
--jcia-cyan-dark: #069fa8;
--jcia-blue: #274886;
--jcia-text: #4f585d;
--jcia-muted: #6d7579;
--jcia-glass: rgba(255,255,255,.76);
--jcia-glass-soft: rgba(255,255,255,.62);
--jcia-border: rgba(255,255,255,.90);
--jcia-shadow:
0 10px 30px rgba(0,0,0,.055);
--jcia-shadow-hover:
0 15px 34px rgba(0,0,0,.09);
position: relative;
max-width: 1180px;
margin: 0 auto;
padding: 0 0 40px;
font-family:
Arial,
Helvetica,
sans-serif;
color: var(--jcia-text);
line-height: 1.7;
background:
radial-gradient(
circle at 2% 12%,
rgba(5,186,196,.08),
transparent 19%
),
radial-gradient(
circle at 98% 48%,
rgba(255,240,0,.07),
transparent 18%
),
radial-gradient(
circle at 8% 82%,
rgba(39,72,134,.035),
transparent 18%
),
linear-gradient(
180deg,
#ffffff 0%,
#fafcfc 50%,
#ffffff 100%
);
}
/* =========================================================
BOX MODEL
========================================================= */
.jcia-about-page *,
.jcia-about-page *::before,
.jcia-about-page *::after {
box-sizing: border-box;
}
/* =========================================================
OJS PAGE TITLE
========================================================= */
.page_about > h1,
.page_about_journal > h1 {
margin: 0 0 18px !important;
padding-bottom: 10px;
color: #111111;
font-size: 30px;
font-weight: 800;
line-height: 1.25;
border-bottom:
4px solid
var(--jcia-yellow);
}
/* =========================================================
STANDARD GLASS SECTION
========================================================= */
.jcia-about-section {
position: relative;
overflow: hidden;
margin: 0 0 20px;
padding: 27px 30px;
background:
linear-gradient(
135deg,
rgba(255,255,255,.82),
rgba(255,255,255,.65)
);
border:
1px solid
rgba(255,255,255,.92);
border-radius: 12px;
box-shadow:
var(--jcia-shadow);
-webkit-backdrop-filter:
blur(14px);
backdrop-filter:
blur(14px);
}
/* left JCIA accent */
.jcia-about-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 52px;
background:
linear-gradient(
180deg,
var(--jcia-yellow) 0%,
var(--jcia-cyan) 100%
);
border-radius:
12px 0 0 0;
}
/* =========================================================
SECTION LABEL
========================================================= */
.jcia-about-section-label {
margin: 0 0 4px;
color: var(--jcia-blue);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
}
/* =========================================================
SECTION TITLES
========================================================= */
.jcia-about-section h2 {
margin: 0 0 14px;
color: #111111;
font-size: 22px;
line-height: 1.3;
font-weight: 800;
}
.jcia-about-section h3 {
margin: 19px 0 7px;
color: var(--jcia-blue);
font-size: 14px;
font-weight: 700;
}
/* =========================================================
SECTION TEXT
========================================================= */
.jcia-about-section p {
margin: 0 0 12px;
color: var(--jcia-text);
font-size: 13px;
line-height: 1.72;
}
.jcia-about-section p:last-child {
margin-bottom: 0;
}
/* =========================================================
LINKS
========================================================= */
.jcia-about-page a {
color: var(--jcia-blue);
text-decoration: none;
}
.jcia-about-page p a {
font-weight: 700;
}
.jcia-about-page p a:hover {
color: var(--jcia-cyan-dark);
text-decoration: underline;
}
/* =========================================================
STANDALONE SECTION HEADING
========================================================= */
.jcia-about-heading {
margin: 30px 0 17px;
}
.jcia-about-heading.center {
text-align: center;
}
.jcia-about-heading-label {
margin-bottom: 3px;
color: var(--jcia-blue);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
}
.jcia-about-heading h2 {
margin: 0 0 6px;
color: #111111;
font-size: 23px;
line-height: 1.3;
}
.jcia-about-heading.center h2::after {
content: "";
display: block;
width: 55px;
height: 4px;
margin: 9px auto 0;
border-radius: 4px;
background:
linear-gradient(
90deg,
var(--jcia-cyan),
var(--jcia-yellow)
);
}
.jcia-about-heading p {
max-width: 800px;
margin: 0;
color: var(--jcia-muted);
font-size: 12px;
}
.jcia-about-heading.center p {
margin-left: auto;
margin-right: auto;
}
/* =========================================================
WHY PUBLISH WITH JCIA
========================================================= */
.jcia-about-benefits {
display: grid;
grid-template-columns:
repeat(3, minmax(0,1fr));
gap: 12px;
margin-bottom: 22px;
}
/* =========================================================
BENEFIT CARDS
========================================================= */
.jcia-about-benefit {
position: relative;
overflow: hidden;
min-width: 0;
min-height: 135px;
padding: 18px 18px 17px;
background:
linear-gradient(
135deg,
rgba(255,255,255,.80),
rgba(255,255,255,.60)
);
border:
1px solid
rgba(255,255,255,.92);
border-radius: 10px;
border-top:
4px solid
var(--jcia-cyan);
box-shadow:
var(--jcia-shadow);
-webkit-backdrop-filter:
blur(12px);
backdrop-filter:
blur(12px);
transition:
transform .2s ease,
box-shadow .2s ease;
}
.jcia-about-benefit:nth-child(even) {
border-top-color:
var(--jcia-yellow);
}
.jcia-about-benefit:hover {
transform: translateY(-2px);
box-shadow:
var(--jcia-shadow-hover);
}
.jcia-about-benefit-label {
margin-bottom: 4px;
color: var(--jcia-blue);
font-size: 9px;
font-weight: 700;
letter-spacing: 1.2px;
text-transform: uppercase;
}
.jcia-about-benefit strong {
display: block;
margin-bottom: 5px;
color: #111111;
font-size: 14px;
line-height: 1.35;
}
.jcia-about-benefit p {
margin: 0;
color: #687075;
font-size: 11px;
line-height: 1.55;
}
/* =========================================================
FEATURED BENEFITS
========================================================= */
.jcia-about-benefit.featured {
background:
linear-gradient(
135deg,
rgba(0,0,0,.96),
rgba(18,18,18,.93)
);
border:
1px solid
rgba(255,255,255,.09);
border-top:
4px solid
var(--jcia-yellow);
}
.jcia-about-benefit.featured
.jcia-about-benefit-label {
color:
var(--jcia-cyan);
}
.jcia-about-benefit.featured strong {
color:
var(--jcia-yellow);
}
.jcia-about-benefit.featured p {
color:
rgba(255,255,255,.77);
}
/* =========================================================
UUM SUPPORT
========================================================= */
.jcia-about-support {
position: relative;
overflow: hidden;
margin: 0 0 20px;
padding: 24px 26px;
background:
linear-gradient(
135deg,
rgba(0,0,0,.96),
rgba(16,16,16,.93)
);
border:
1px solid
rgba(255,255,255,.08);
border-top:
4px solid
var(--jcia-cyan);
border-bottom:
5px solid
var(--jcia-yellow);
border-radius: 11px;
text-align: center;
box-shadow:
0 12px 30px rgba(0,0,0,.12);
}
.jcia-about-support-label {
margin-bottom: 4px;
color: var(--jcia-cyan);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.jcia-about-support h2 {
margin: 0 0 6px;
color: #ffffff;
font-size: 20px;
}
.jcia-about-support p {
max-width: 800px;
margin: 0 auto;
color:
rgba(255,255,255,.76);
font-size: 12px;
}
.jcia-about-support strong {
color: var(--jcia-yellow);
}
/* =========================================================
RESEARCH TOPICS
========================================================= */
.jcia-about-topics {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 15px;
}
.jcia-about-topic {
display: inline-flex;
align-items: center;
padding: 7px 11px;
background:
rgba(255,255,255,.68);
border:
1px solid
rgba(185,195,198,.40);
border-left:
3px solid
var(--jcia-cyan);
border-radius: 20px;
color: #4c5458;
font-size: 10.5px;
font-weight: 600;
}
.jcia-about-topic:nth-child(even) {
border-left-color:
#e2d600;
}
/* =========================================================
SMALL LINK BUTTON
========================================================= */
.jcia-about-link-btn {
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: 16px;
padding: 8px 13px;
background: #000000;
border-radius: 5px;
color:
var(--jcia-yellow) !important;
text-decoration:
none !important;
font-size: 10.5px;
font-weight: 700;
}
.jcia-about-link-btn:hover {
background:
var(--jcia-cyan);
color:
#000000 !important;
}
/* =========================================================
TYPES OF CONTRIBUTIONS
FOUR IN ONE ROW
========================================================= */
.jcia-about-contrib-grid {
display: grid;
grid-template-columns:
repeat(4,minmax(0,1fr));
gap: 11px;
margin-top: 15px;
align-items: stretch;
}
.jcia-about-contrib {
min-width: 0;
height: 100%;
padding: 15px;
background:
linear-gradient(
135deg,
rgba(255,255,255,.75),
rgba(255,255,255,.56)
);
border:
1px solid
rgba(255,255,255,.90);
border-top:
3px solid
var(--jcia-cyan);
border-radius: 9px;
box-shadow:
0 6px 18px rgba(0,0,0,.04);
color: #596166;
font-size: 10.8px;
line-height: 1.55;
-webkit-backdrop-filter:
blur(10px);
backdrop-filter:
blur(10px);
}
.jcia-about-contrib:nth-child(even) {
border-top-color:
var(--jcia-yellow);
}
.jcia-about-contrib strong {
display: block;
margin-bottom: 6px;
color: #111111;
font-size: 12px;
line-height: 1.35;
}
/* =========================================================
JCIA AT A GLANCE
Same style as "What We Publish"
========================================================= */
.jcia-about-glance {
position: relative;
overflow: hidden;
margin: 0 0 20px;
padding: 27px 30px 30px;
background:
linear-gradient(
135deg,
rgba(255,255,255,.82),
rgba(255,255,255,.65)
);
border:
1px solid
rgba(255,255,255,.92);
border-radius: 12px;
box-shadow:
var(--jcia-shadow);
-webkit-backdrop-filter:
blur(14px);
backdrop-filter:
blur(14px);
}
/* left accent */
.jcia-about-glance::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 6px;
height: 52px;
background:
linear-gradient(
180deg,
var(--jcia-yellow) 0%,
var(--jcia-cyan) 100%
);
border-radius:
12px 0 0 0;
}
/* =========================================================
GLANCE HEADER
========================================================= */
.jcia-about-glance-header {
padding: 0;
margin: 0 0 18px;
background: transparent !important;
border: none !important;
}
.jcia-about-glance-header span {
display: block;
margin: 0 0 4px;
color:
var(--jcia-blue);
font-size: 10px;
font-weight: 700;
letter-spacing: 1.6px;
text-transform: uppercase;
}
.jcia-about-glance-header strong {
display: block;
margin: 0;
color: #111111;
font-size: 22px;
font-weight: 800;
line-height: 1.3;
}
/* =========================================================
GLANCE GRID
========================================================= */
.jcia-about-glance-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0,1fr));
gap: 10px 12px;
margin-top: 15px;
}
/* =========================================================
GLANCE ITEMS
========================================================= */
.jcia-about-glance-item {
display: grid;
grid-template-columns:
125px
minmax(0,1fr);
align-items: stretch;
min-width: 0;
overflow: hidden;
background:
rgba(255,255,255,.68);
border:
1px solid
rgba(195,202,205,.45);
border-radius: 8px;
box-shadow:
0 4px 13px rgba(0,0,0,.025);
}
.jcia-about-glance-item:nth-child(odd) {
border-left:
3px solid
var(--jcia-cyan);
}
.jcia-about-glance-item:nth-child(even) {
border-left:
3px solid
#e4d800;
}
/* =========================================================
GLANCE KEY
========================================================= */
.jcia-about-glance-key {
display: flex;
align-items: center;
padding: 10px 11px;
background:
rgba(247,248,248,.78);
border-right:
1px solid
rgba(190,198,201,.35);
color: #4d5559;
font-size: 10px;
font-weight: 700;
line-height: 1.4;
}
/* =========================================================
GLANCE VALUE
========================================================= */
.jcia-about-glance-value {
display: flex;
align-items: center;
min-width: 0;
padding: 10px 12px;
background:
rgba(255,255,255,.40);
color: #4f585d;
font-size: 10.8px;
line-height: 1.45;
overflow-wrap: anywhere;
}
.jcia-about-glance-value strong {
color: #111111;
font-weight: 700;
}
/* highlight last 3 items */
.jcia-about-glance-item:nth-last-child(-n+3)
.jcia-about-glance-value {
color: #111111;
font-weight: 700;
}
/* =========================================================
OPEN ACCESS
========================================================= */
.jcia-about-oa {
position: relative;
overflow: hidden;
margin: 0 0 20px;
padding: 25px 27px;
background:
linear-gradient(
135deg,
rgba(255,255,255,.82),
rgba(255,255,255,.63)
);
border:
1px solid
rgba(255,255,255,.90);
border-top:
4px solid
var(--jcia-cyan);
border-bottom:
3px solid
var(--jcia-yellow);
border-radius: 11px;
box-shadow:
var(--jcia-shadow);
-webkit-backdrop-filter:
blur(14px);
backdrop-filter:
blur(14px);
}
.jcia-about-oa-label {
color:
var(--jcia-blue);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.jcia-about-oa h2 {
margin: 3px 0 9px;
color: #111111;
font-size: 20px;
}
.jcia-about-oa p {
margin: 0 0 10px;
color:
var(--jcia-text);
font-size: 12.5px;
}
/* =========================================================
OPEN ACCESS BADGES
========================================================= */
.jcia-about-oa-badges {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 14px;
}
.jcia-about-oa-badge {
display: inline-block;
padding: 6px 10px;
background: #000000;
border-radius: 20px;
color:
var(--jcia-yellow);
font-size: 9.5px;
font-weight: 800;
}
/* =========================================================
PUBLICATION FREQUENCY
========================================================= */
.jcia-about-frequency {
margin: 0 0 20px;
padding: 25px;
background:
linear-gradient(
135deg,
rgba(255,255,255,.80),
rgba(255,255,255,.62)
);
border:
1px solid
rgba(255,255,255,.90);
border-radius: 11px;
text-align: center;
box-shadow:
var(--jcia-shadow);
-webkit-backdrop-filter:
blur(14px);
backdrop-filter:
blur(14px);
}
.jcia-about-frequency-label {
color:
var(--jcia-blue);
font-size: 9px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.jcia-about-frequency h2 {
margin: 3px 0 4px;
color: #111111;
font-size: 20px;
}
.jcia-about-frequency > p {
margin: 0 0 15px;
color:
var(--jcia-muted);
font-size: 11px;
}
/* =========================================================
ISSUE MONTHS
========================================================= */
.jcia-about-issues {
display: flex;
justify-content: center;
gap: 11px;
}
.jcia-about-issue {
min-width: 155px;
padding: 12px 16px;
background: #000000;
border-bottom:
4px solid
var(--jcia-yellow);
border-radius: 7px;
}
.jcia-about-issue strong {
display: block;
color:
var(--jcia-yellow);
font-size: 13px;
}
.jcia-about-issue span {
display: block;
color:
rgba(255,255,255,.70);
font-size: 9.5px;
}
/* =========================================================
DIGITAL PRESERVATION
========================================================= */
.jcia-about-preservation {
margin: 0 0 20px;
padding: 19px 21px;
background:
linear-gradient(
135deg,
rgba(255,255,255,.72),
rgba(255,255,255,.57)
);
border:
1px solid
rgba(255,255,255,.90);
border-left:
4px solid
var(--jcia-cyan);
border-radius:
0 9px 9px 0;
box-shadow:
0 6px 18px rgba(0,0,0,.04);
-webkit-backdrop-filter:
blur(12px);
backdrop-filter:
blur(12px);
}
.jcia-about-preservation strong {
display: block;
margin-bottom: 3px;
color: #111111;
font-size: 13px;
}
.jcia-about-preservation p {
margin: 0;
color: #626a6e;
font-size: 11.5px;
}
/* =========================================================
CALL FOR PAPERS
========================================================= */
.jcia-about-call {
position: relative;
overflow: hidden;
margin: 0 0 20px;
padding: 25px 27px;
background:
linear-gradient(
135deg,
rgba(0,0,0,.96),
rgba(17,17,17,.93)
);
border:
1px solid
rgba(255,255,255,.08);
border-top:
4px solid
var(--jcia-cyan);
border-bottom:
5px solid
var(--jcia-yellow);
border-radius: 11px;
color: #ffffff;
box-shadow:
0 12px 30px rgba(0,0,0,.13);
}
.jcia-about-call-label {
color:
var(--jcia-cyan);
font-size: 9.5px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
}
.jcia-about-call h2 {
margin: 3px 0 6px;
color: #ffffff;
font-size: 20px;
}
.jcia-about-call p {
max-width: 780px;
margin: 0 0 14px;
color:
rgba(255,255,255,.76);
font-size: 12px;
}
/* =========================================================
CALL ACTIONS
========================================================= */
.jcia-about-call-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
/* =========================================================
BUTTONS
========================================================= */
.jcia-about-btn-primary,
.jcia-about-btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 39px;
padding: 8px 14px;
border-radius: 5px;
text-decoration:
none !important;
font-size: 10.5px;
font-weight: 800;
}
.jcia-about-btn-primary {
background:
var(--jcia-yellow);
border:
1px solid
var(--jcia-yellow);
color:
#000000 !important;
}
.jcia-about-btn-primary:hover {
background:
var(--jcia-cyan);
border-color:
var(--jcia-cyan);
}
.jcia-about-btn-secondary {
background:
#ffffff;
border:
1px solid
rgba(255,255,255,.85);
color:
var(--jcia-blue) !important;
}
.jcia-about-btn-secondary:hover {
color:
#000000 !important;
}
/* =========================================================
FINAL CTA
========================================================= */
.jcia-about-final {
margin-top: 20px;
padding: 24px 26px;
background:
linear-gradient(
135deg,
rgba(255,255,255,.80),
rgba(255,255,255,.61)
);
border:
1px solid
rgba(255,255,255,.90);
border-top:
4px solid
var(--jcia-yellow);
border-bottom:
3px solid
var(--jcia-cyan);
border-radius: 11px;
text-align: center;
box-shadow:
var(--jcia-shadow);
-webkit-backdrop-filter:
blur(14px);
backdrop-filter:
blur(14px);
}
.jcia-about-final h2 {
margin: 0 0 5px;
color: #111111;
font-size: 20px;
}
.jcia-about-final p {
max-width: 680px;
margin: 0 auto 14px;
color: #646c70;
font-size: 11.5px;
}
.jcia-about-final-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
/* =========================================================
FOOTER
========================================================= */
.jcia-about-footer {
margin-top: 16px;
padding: 10px;
text-align: center;
background:
rgba(255,255,255,.60);
border:
1px solid
rgba(255,255,255,.88);
border-top:
2px solid
var(--jcia-yellow);
border-radius: 7px;
color: #7b8184;
font-size: 9.5px;
}
/* =========================================================
TABLET
========================================================= */
@media screen and (max-width: 1000px) {
.jcia-about-benefits {
grid-template-columns:
repeat(2,1fr);
}
.jcia-about-contrib-grid {
grid-template-columns:
repeat(2,1fr);
}
}
/* =========================================================
SMALL TABLET
========================================================= */
@media screen and (max-width: 850px) {
.jcia-about-glance-grid {
grid-template-columns:
1fr;
}
}
/* =========================================================
MOBILE
========================================================= */
@media screen and (max-width: 600px) {
.jcia-about-page {
padding-left: 4px;
padding-right: 4px;
}
.page_about > h1,
.page_about_journal > h1 {
margin-bottom:
15px !important;
font-size: 25px;
}
.jcia-about-section {
padding:
21px 18px;
}
.jcia-about-section h2 {
font-size: 19px;
}
.jcia-about-benefits {
grid-template-columns:
1fr;
}
.jcia-about-benefit {
min-height: 0;
}
.jcia-about-contrib-grid {
grid-template-columns:
1fr;
}
.jcia-about-glance {
padding:
22px 18px 20px;
}
.jcia-about-glance-header strong {
font-size: 19px;
}
.jcia-about-glance-item {
grid-template-columns:
105px
minmax(0,1fr);
}
.jcia-about-glance-key {
padding: 9px;
font-size: 9.5px;
}
.jcia-about-glance-value {
padding: 9px;
font-size: 10px;
}
.jcia-about-issues {
flex-direction: column;
}
.jcia-about-issue {
width: 100%;
}
.jcia-about-call-actions,
.jcia-about-final-actions {
flex-direction: column;
}
.jcia-about-call-actions a,
.jcia-about-final-actions a {
width: 100%;
}
}
/* =========================================================
VERY SMALL MOBILE
========================================================= */
@media screen and (max-width: 420px) {
.jcia-about-glance-item {
grid-template-columns:
1fr;
}
.jcia-about-glance-key {
border-right: none;
border-bottom:
1px solid
rgba(190,198,201,.30);
padding-bottom: 5px;
}
.jcia-about-glance-value {
padding-top: 6px;
}
.jcia-about-topic {
width: 100%;
border-radius: 6px;
}
}
/* =========================================================
FALLBACK
========================================================= */
@supports not (
(backdrop-filter: blur(10px))
or
(-webkit-backdrop-filter: blur(10px))
) {
.jcia-about-section,
.jcia-about-benefit,
.jcia-about-contrib,
.jcia-about-glance,
.jcia-about-oa,
.jcia-about-frequency,
.jcia-about-preservation,
.jcia-about-final {
background: #ffffff;
}
}
/* =========================================================
ACCESSIBILITY
========================================================= */
.jcia-about-page a:focus {
outline:
3px solid
rgba(5,186,196,.35);
outline-offset: 2px;
}
/* =========================================================
REDUCED MOTION
========================================================= */
@media (prefers-reduced-motion: reduce) {
.jcia-about-page *,
.jcia-about-page *::before,
.jcia-about-page *::after {
transition: none !important;
}
}
/* =========================================================
JCIA — MANUSCRIPT GUIDELINES
Journal of Computational Innovation and Analytics
UUM
Colour identity:
Black #000000
White #FFFFFF
JCIA Yellow #FFF000
JCIA Cyan #05BAC4
UUM Blue #274886
========================================================= */
/* =========================================================
PAGE
========================================================= */
.jcia-mg-page {
max-width: 1180px;
margin: 0 auto;
padding: 10px 0 40px;
font-family: Arial, Helvetica, sans-serif;
color: #444b4f;
line-height: 1.7;
}
.jcia-mg-page *,
.jcia-mg-page *::before,
.jcia-mg-page *::after {
box-sizing: border-box;
}
/* =========================================================
HERO
========================================================= */
.jcia-mg-hero {
position: relative;
overflow: hidden;
background: #000000;
color: #ffffff;
padding: 48px 48px 44px;
border-radius: 12px 12px 0 0;
}
.jcia-mg-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 8px;
background: linear-gradient(
90deg,
#05bac4 0%,
#3ec5b7 30%,
#a6dc91 60%,
#dfe950 78%,
#fff000 100%
);
}
.jcia-mg-hero::after {
content: "";
position: absolute;
width: 220px;
height: 220px;
border-radius: 50%;
border: 32px solid rgba(255,240,0,.07);
right: -65px;
top: -85px;
}
.jcia-mg-kicker {
position: relative;
z-index: 2;
color: #fff000;
font-size: 11px;
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin-bottom: 8px;
}
.jcia-mg-hero h1 {
position: relative;
z-index: 2;
margin: 0 0 12px;
color: #ffffff;
font-size: 37px;
line-height: 1.2;
font-weight: 800;
}
.jcia-mg-hero p {
position: relative;
z-index: 2;
max-width: 820px;
margin: 0 0 22px;
color: #e1e1e1;
font-size: 14px;
line-height: 1.72;
}
/* =========================================================
TEMPLATE BUTTON
========================================================= */
.jcia-mg-template-btn {
position: relative;
z-index: 3;
display: inline-block;
padding: 11px 18px;
background: #fff000;
color: #000000 !important;
border-radius: 6px;
text-decoration: none !important;
font-size: 12px;
font-weight: 800;
transition: background .2s ease;
}
.jcia-mg-template-btn:hover {
background: #05bac4;
color: #000000 !important;
}
/* =========================================================
COLOUR STRIP
========================================================= */
.jcia-mg-strip {
height: 7px;
margin-bottom: 26px;
background: linear-gradient(
90deg,
#05bac4 0%,
#4ac6b3 32%,
#a5dc91 60%,
#e6eb48 80%,
#fff000 100%
);
}
/* =========================================================
QUICK FACTS
========================================================= */
.jcia-mg-facts {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 12px;
margin-bottom: 27px;
}
.jcia-mg-fact {
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 8px;
padding: 17px 13px;
text-align: center;
}
.jcia-mg-fact:nth-child(odd) {
border-top: 4px solid #05bac4;
}
.jcia-mg-fact:nth-child(even) {
border-top: 4px solid #fff000;
}
.jcia-mg-fact strong {
display: block;
color: #111111;
font-size: 13px;
margin-bottom: 3px;
}
.jcia-mg-fact span {
display: block;
color: #777d80;
font-size: 10.5px;
line-height: 1.45;
}
/* =========================================================
INTRODUCTION
========================================================= */
.jcia-mg-intro {
padding: 20px 22px;
margin-bottom: 27px;
background: #f7f8f8;
border-left: 5px solid #05bac4;
border-bottom: 2px solid #fff000;
border-radius: 0 8px 8px 0;
}
.jcia-mg-intro strong {
display: block;
color: #111111;
font-size: 15px;
margin-bottom: 5px;
}
.jcia-mg-intro p {
margin: 0;
color: #51595d;
font-size: 13px;
}
/* =========================================================
PAGE LAYOUT
========================================================= */
.jcia-mg-layout {
display: grid;
grid-template-columns: 230px minmax(0, 1fr);
gap: 27px;
align-items: start;
}
/* =========================================================
SIDEBAR
========================================================= */
.jcia-mg-sidebar {
position: sticky;
top: 20px;
}
.jcia-mg-nav {
overflow: hidden;
background: #ffffff;
border: 1px solid #dddddd;
border-radius: 8px;
}
.jcia-mg-nav-title {
padding: 13px 15px;
margin: 0;
background: #000000;
border-bottom: 4px solid #fff000;
color: #ffffff;
text-transform: uppercase;
letter-spacing: 1.3px;
font-size: 10px;
font-weight: 700;
}
.jcia-mg-nav a {
display: block;
position: relative;
padding: 8px 10px 8px 21px;
border-bottom: 1px solid #eeeeee;
color: #50575b !important;
text-decoration: none !important;
font-size: 11.5px;
line-height: 1.4;
}
.jcia-mg-nav a:last-child {
border-bottom: none;
}
.jcia-mg-nav a::before {
content: "›";
position: absolute;
left: 9px;
color: #05aeb8;
font-weight: 800;
}
.jcia-mg-nav a:hover {
background: #fffde8;
color: #000000 !important;
}
/* =========================================================
CONTENT
========================================================= */
.jcia-mg-content {
min-width: 0;
}
/* =========================================================
STANDARD SECTION
========================================================= */
.jcia-mg-section {
position: relative;
background: #ffffff;
border: 1px solid #dedede;
border-radius: 9px;
padding: 27px 30px;
margin-bottom: 19px;
scroll-margin-top: 20px;
}
.jcia-mg-section::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 5px;
height: 42px;
background: #fff000;
border-radius: 8px 0 0 0;
}
.jcia-mg-section-label {
color: #274886;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.4px;
text-transform: uppercase;
margin-bottom: 3px;
}
.jcia-mg-section h2 {
margin: 0 0 13px;
color: #111111;
font-size: 21px;
line-height: 1.3;
}
.jcia-mg-section h3 {
margin: 20px 0 7px;
color: #274886;
font-size: 14px;
}
.jcia-mg-section p {
margin: 0 0 12px;
color: #50575b;
font-size: 13px;
line-height: 1.72;
}
.jcia-mg-section ul,
.jcia-mg-section ol {
margin: 10px 0 13px;
padding-left: 21px;
}
.jcia-mg-section li {
margin-bottom: 6px;
color: #50575b;
font-size: 12.5px;
line-height: 1.6;
}
.jcia-mg-section li::marker {
color: #05aeb8;
}
/* =========================================================
HIGHLIGHT
========================================================= */
.jcia-mg-highlight {
margin: 17px 0;
padding: 15px 17px;
background: #f7f8f8;
border-left: 4px solid #05bac4;
border-bottom: 2px solid #fff000;
border-radius: 0 7px 7px 0;
}
.jcia-mg-highlight strong {
display: block;
color: #111111;
font-size: 13px;
margin-bottom: 3px;
}
.jcia-mg-highlight p {
margin: 0;
font-size: 12px;
}
/* =========================================================
MANUSCRIPT STRUCTURE
========================================================= */
.jcia-mg-structure {
margin-top: 15px;
}
.jcia-mg-structure-item {
display: flex;
gap: 14px;
align-items: flex-start;
padding: 12px 0;
border-bottom: 1px solid #eeeeee;
}
.jcia-mg-structure-item:last-child {
border-bottom: none;
}
.jcia-mg-structure-number {
width: 32px;
height: 32px;
min-width: 32px;
border-radius: 50%;
background: #000000;
border: 2px solid #fff000;
color: #fff000;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: 800;
}
.jcia-mg-structure-text strong {
display: block;
color: #111111;
font-size: 12.5px;
margin-bottom: 2px;
}
.jcia-mg-structure-text span {
display: block;
color: #6a7175;
font-size: 11.5px;
line-height: 1.5;
}
/* =========================================================
DOUBLE BLIND BOX
========================================================= */
.jcia-mg-doubleblind {
position: relative;
overflow: hidden;
background: #000000;
color: #ffffff;
border-bottom: 6px solid #fff000;
border-radius: 9px;
padding: 26px 28px;
margin-bottom: 19px;
}
.jcia-mg-doubleblind::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(
90deg,
#05bac4,
#72cea7,
#fff000
);
}
.jcia-mg-doubleblind-label {
color: #fff000;
font-size: 10px;
font-weight: 700;
letter-spacing: 1.5px;
text-transform: uppercase;
margin-bottom: 4px;
}
.jcia-mg-doubleblind h2 {
margin: 0 0 8px;
color: #ffffff;
font-size: 21px;
}
.jcia-mg-doubleblind p {
color: #dedede;
font-size: 12.5px;
margin: 0 0 12px;
}
.jcia-mg-doubleblind ul {
margin: 8px 0 0;
padding-left: 19px;
}
.jcia-mg-doubleblind li {
color: #e4e4e4;
font-size: 12px;
margin-bottom: 5px;
}
.jcia-mg-doubleblind li::marker {
color: #fff000;
}
/* =========================================================
REQUIREMENT CARDS
========================================================= */
.jcia-mg-card-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 11px;
margin-top: 15px;
}
.jcia-mg-card {
background: #fafafa;
border: 1px solid #e1e1e1;
border-radius: 7px;
padding: 15px 16px;
}
.jcia-mg-card:nth-child(odd) {
border-top: 3px solid #05bac4;
}
.jcia-mg-card:nth-child(even) {
border-top: 3px solid #fff000;
}
.jcia-mg-card strong {
display: block;
color: #111111;
font-size: 12.5px;
margin-bottom: 4px;
}
.jcia-mg-card p {
margin: 0;
color: #666d70;
font-size: 11.5px;
line-height: 1.55;
}
/* =========================================================
DECLARATIONS
========================================================= */
.jcia-mg-declaration {
margin: 13px 0;
padding: 15px 17px;
border: 1px solid #e1e1e1;
border-left: 4px solid #05bac4;
border-radius: 0 7px 7px 0;
background: #fafafa;
}
.jcia-mg-declaration:nth-of-type(even) {
border-left-color: #e0d400;
}
.jcia-mg-declaration h3 {
margin: 0 0 5px;
color: #111111;
font-size: 13px;
}
.jcia-mg-declaration p {
margin: 0 0 7px;
font-size: 12px;
}
.jcia-mg-example {
padding: 10px 12px;
background: #ffffff;
border: 1px solid #e5e5e5;
border-radius: 5px;
color: #646b6f;
font-size: 11px;
line-height: 1.55;
}
.jcia-mg-example strong {
color: #274886;
}
/* =========================================================
CHECKLIST
========================================================= */
.jcia-mg-checklist {
margin: 12px 0 0 !important;
padding: 0 !important;
list-style: none;
}
.jcia-mg-checklist li {
position: relative;
padding: 8px 9px 8px 29px;
border-bottom: 1px solid #eeeeee;
margin: 0 !important;
}
.jcia-mg-checklist li:last-child {
border-bottom: none;
}
.jcia-mg-checklist li::before {
content: "✓";
position: absolute;
left: 7px;
top: 7px;
color: #05aeb8;
font-weight: 800;
}
/* =========================================================
RELATED LINKS
========================================================= */
.jcia-mg-links {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 13px;
}
.jcia-mg-links a {
display: inline-block;
padding: 8px 12px;
background: #f8f8f8;
border: 1px solid #d8d8d8;
border-radius: 5px;
color: #274886 !important;
font-size: 11px;
font-weight: 600;
text-decoration: none !important;
}
.jcia-mg-links a:hover {
background: #000000;
border-color: #000000;
color: #fff000 !important;
}
/* =========================================================
BOTTOM DOWNLOAD CTA
========================================================= */
.jcia-mg-bottom-cta {
position: relative;
overflow: hidden;
background: #000000;
color: #ffffff;
border-radius: 9px;
border-bottom: 6px solid #fff000;
padding: 28px 30px;
margin-top: 21px;
text-align: center;
}
.jcia-mg-bottom-cta::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(
90deg,
#05bac4,
#7bd0a3,
#fff000
);
}
.jcia-mg-bottom-cta h2 {
color: #ffffff;
font-size: 21px;
margin: 0 0 6px;
}
.jcia-mg-bottom-cta p {
max-width: 660px;
margin: 0 auto 16px;
color: #dcdcdc;
font-size: 12.5px;
}
/* =========================================================
FINAL ACTIONS
========================================================= */
.jcia-mg-bottom-actions {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 9px;
}
.jcia-mg-submit-btn {
display: inline-block;
padding: 11px 18px;
background: #ffffff;
color: #274886 !important;
border-radius: 6px;
text-decoration: none !important;
font-size: 12px;
font-weight: 700;
}
.jcia-mg-submit-btn:hover {
background: #05bac4;
color: #000000 !important;
}
/* =========================================================
FOOTER
========================================================= */
.jcia-mg-footer {
margin-top: 16px;
padding: 11px;
text-align: center;
background: #f5f5f5;
border-top: 2px solid #fff000;
border-radius: 5px;
color: #777d80;
font-size: 10px;
}
/* =========================================================
RESPONSIVE TABLET
========================================================= */
@media screen and (max-width: 900px) {
.jcia-mg-layout {
grid-template-columns: 1fr;
}
.jcia-mg-sidebar {
position: static;
}
.jcia-mg-nav {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.jcia-mg-nav-title {
grid-column: 1 / -1;
}
.jcia-mg-facts {
grid-template-columns: repeat(2, 1fr);
}
}
/* =========================================================
RESPONSIVE MOBILE
========================================================= */
@media screen and (max-width: 600px) {
.jcia-mg-page {
padding-left: 4px;
padding-right: 4px;
}
.jcia-mg-hero {
padding: 32px 22px 29px;
}
.jcia-mg-hero h1 {
font-size: 27px;
}
.jcia-mg-facts {
grid-template-columns: repeat(2, 1fr);
gap: 7px;
}
.jcia-mg-fact {
padding: 13px 8px;
}
.jcia-mg-nav {
grid-template-columns: 1fr;
}
.jcia-mg-section {
padding: 22px 19px;
}
.jcia-mg-card-grid {
grid-template-columns: 1fr;
}
.jcia-mg-links {
flex-direction: column;
}
.jcia-mg-links a {
width: 100%;
}
.jcia-mg-bottom-actions {
flex-direction: column;
}
.jcia-mg-bottom-actions a {
width: 100%;
}
}
/* ============================================================
JCIA — PUBLICATION POLICIES & GUIDELINES
GLASS MORPHISM
Colours inspired by JCIA visual identity
============================================================ */
.jcia-policy-directory,
.jcia-policy-directory * {
box-sizing: border-box;
}
/* ============================================================
MAIN CONTAINER
============================================================ */
.jcia-policy-directory {
--jcia-navy: #173f7a;
--jcia-cyan: #00afd1;
--jcia-teal: #18b9b4;
--jcia-lime: #d7eb51;
--jcia-yellow: #fff100;
--jcia-dark: #07131c;
--jcia-dark-2: #0c202c;
--glass-bg: rgba(255,255,255,0.10);
--glass-bg-hover: rgba(255,255,255,0.16);
--glass-border: rgba(255,255,255,0.20);
position: relative;
width: 100%;
margin: 30px 0;
padding: 40px 34px 34px;
overflow: hidden;
background:
radial-gradient(
circle at 8% 5%,
rgba(0,175,209,0.40) 0%,
transparent 31%
),
radial-gradient(
circle at 92% 12%,
rgba(255,241,0,0.24) 0%,
transparent 28%
),
radial-gradient(
circle at 75% 95%,
rgba(24,185,180,0.18) 0%,
transparent 32%
),
linear-gradient(
135deg,
#06131d 0%,
#0a2230 47%,
#08151f 100%
);
border: 1px solid rgba(255,255,255,0.13);
border-radius: 10px;
box-shadow:
0 22px 55px rgba(0,0,0,0.20);
font-family: inherit;
}
/* JCIA gradient top line */
.jcia-policy-directory::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 5px;
background: linear-gradient(
90deg,
#00afd1 0%,
#39c5bd 36%,
#d7eb51 70%,
#fff100 100%
);
}
/* subtle glow */
.jcia-policy-directory::after {
content: "";
position: absolute;
width: 260px;
height: 260px;
top: -150px;
right: -100px;
background: rgba(255,241,0,0.14);
border-radius: 50%;
filter: blur(50px);
pointer-events: none;
}
/* ============================================================
HEADER
============================================================ */
.jcia-policy-heading {
position: relative;
z-index: 2;
max-width: 780px;
margin: 0 0 32px;
}
.jcia-policy-kicker {
display: inline-flex;
align-items: center;
margin: 0 0 10px;
padding: 6px 11px;
background: rgba(0,175,209,0.10);
border: 1px solid rgba(81,217,235,0.26);
border-radius: 30px;
color: #75e5f0;
font-size: 10px;
font-weight: 700;
line-height: 1;
letter-spacing: 0.14em;
text-transform: uppercase;
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
}
.jcia-policy-heading h2 {
margin: 0 0 13px;
color: #ffffff;
font-size: 29px;
font-weight: 700;
line-height: 1.22;
}
.jcia-policy-heading h2::after {
content: "";
display: block;
width: 56px;
height: 3px;
margin-top: 13px;
background: linear-gradient(
90deg,
#00afd1,
#fff100
);
border-radius: 20px;
}
.jcia-policy-heading p {
max-width: 720px;
margin: 0;
color: rgba(255,255,255,0.70);
font-size: 13.5px;
font-weight: 400;
line-height: 1.65;
}
/* ============================================================
GRID
============================================================ */
.jcia-policy-grid {
position: relative;
z-index: 2;
display: grid;
grid-template-columns:
repeat(2, minmax(0,1fr));
gap: 15px;
}
/* ============================================================
GLASS POLICY CARD
============================================================ */
.jcia-policy-card {
position: relative;
display: grid;
grid-template-columns:
48px minmax(0,1fr) 32px;
align-items: start;
gap: 14px;
min-height: 156px;
padding: 21px 18px;
overflow: hidden;
background:
linear-gradient(
135deg,
rgba(255,255,255,0.115) 0%,
rgba(255,255,255,0.055) 100%
);
border: 1px solid rgba(255,255,255,0.17);
border-radius: 8px;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.13),
0 8px 25px rgba(0,0,0,0.13);
-webkit-backdrop-filter:
blur(18px) saturate(135%);
backdrop-filter:
blur(18px) saturate(135%);
text-decoration: none !important;
transition:
transform .22s ease,
border-color .22s ease,
background .22s ease,
box-shadow .22s ease;
}
/* cyan accent */
.jcia-policy-card::before {
content: "";
position: absolute;
top: 14px;
bottom: 14px;
left: 0;
width: 3px;
background: linear-gradient(
180deg,
#00afd1 0%,
#35c7be 100%
);
border-radius: 0 4px 4px 0;
}
/* glass shine */
.jcia-policy-card::after {
content: "";
position: absolute;
top: -70px;
left: -100px;
width: 180px;
height: 130px;
transform: rotate(-18deg);
background:
linear-gradient(
90deg,
transparent,
rgba(255,255,255,0.08),
transparent
);
pointer-events: none;
}
/* ============================================================
NUMBER CIRCLE
============================================================ */
.jcia-policy-icon {
display: flex;
align-items: center;
justify-content: center;
width: 43px;
height: 43px;
background:
linear-gradient(
135deg,
rgba(0,175,209,0.20),
rgba(255,255,255,0.07)
);
border: 1px solid rgba(71,216,228,0.36);
border-radius: 50%;
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.14);
color: #6ee4ef;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.05em;
transition:
transform .22s ease,
background .22s ease,
color .22s ease,
border-color .22s ease;
}
/* ============================================================
CONTENT
============================================================ */
.jcia-policy-content {
min-width: 0;
}
.jcia-policy-type {
display: block;
margin: 1px 0 6px;
color: #5edbe6;
font-size: 9.5px;
font-weight: 700;
line-height: 1.2;
letter-spacing: .10em;
text-transform: uppercase;
}
.jcia-policy-card h3 {
margin: 0 0 8px;
color: #ffffff;
font-size: 15px;
font-weight: 650;
line-height: 1.35;
transition: color .2s ease;
}
.jcia-policy-card p {
margin: 0;
color: rgba(255,255,255,0.66);
font-size: 12px;
font-weight: 400;
line-height: 1.55;
}
/* ============================================================
ARROW
============================================================ */
.jcia-policy-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 29px;
height: 29px;
margin-top: 5px;
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.16);
border-radius: 50%;
color: #72dfe9;
font-size: 16px;
line-height: 1;
transition:
transform .22s ease,
background .22s ease,
color .22s ease,
border-color .22s ease;
}
/* ============================================================
HOVER EFFECT
============================================================ */
.jcia-policy-card:hover,
.jcia-policy-card:focus {
transform: translateY(-4px);
background:
linear-gradient(
135deg,
rgba(255,255,255,0.17),
rgba(255,255,255,0.085)
);
border-color: rgba(80,220,230,0.42);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.18),
0 15px 35px rgba(0,0,0,0.22);
text-decoration: none !important;
outline: none;
}
.jcia-policy-card:hover h3,
.jcia-policy-card:focus h3 {
color: #fff43b;
}
.jcia-policy-card:hover .jcia-policy-icon,
.jcia-policy-card:focus .jcia-policy-icon {
transform: scale(1.06);
background: linear-gradient(
135deg,
#00afd1,
#18b9b4
);
border-color: rgba(255,255,255,0.45);
color: #ffffff;
}
.jcia-policy-card:hover .jcia-policy-arrow,
.jcia-policy-card:focus .jcia-policy-arrow {
transform: translateX(3px);
background: #fff100;
border-color: #fff100;
color: #07131c;
}
/* ============================================================
FEATURED — ARCHIVING / PRESERVATION
============================================================ */
.jcia-policy-featured {
background:
linear-gradient(
135deg,
rgba(255,241,0,0.12),
rgba(255,255,255,0.065)
);
border-color: rgba(255,241,0,0.25);
}
.jcia-policy-featured::before {
background: linear-gradient(
180deg,
#fff100,
#d7eb51
);
}
.jcia-policy-featured .jcia-policy-icon {
color: #fff45a;
background: rgba(255,241,0,0.10);
border-color: rgba(255,241,0,0.35);
}
.jcia-policy-featured .jcia-policy-type {
color: #fff45a;
}
/* small highlighted label */
.jcia-policy-highlight {
display: inline-flex;
margin-top: 11px;
padding: 5px 9px;
background: rgba(255,241,0,0.10);
border: 1px solid rgba(255,241,0,0.26);
border-radius: 20px;
color: #fff56d;
font-size: 9.5px;
font-weight: 650;
line-height: 1.2;
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
}
/* ============================================================
TABLET
============================================================ */
@media screen and (max-width: 860px) {
.jcia-policy-directory {
padding: 32px 24px 27px;
}
.jcia-policy-grid {
grid-template-columns: 1fr;
}
.jcia-policy-card {
min-height: 0;
}
}
/* ============================================================
MOBILE
============================================================ */
@media screen and (max-width: 520px) {
.jcia-policy-directory {
margin: 20px 0;
padding:
27px 15px 18px;
border-radius: 7px;
}
.jcia-policy-heading {
margin-bottom: 23px;
}
.jcia-policy-heading h2 {
font-size: 22px;
}
.jcia-policy-heading p {
font-size: 12.5px;
}
.jcia-policy-grid {
gap: 10px;
}
.jcia-policy-card {
grid-template-columns:
38px minmax(0,1fr) 25px;
gap: 10px;
padding: 16px 13px;
border-radius: 6px;
}
.jcia-policy-icon {
width: 35px;
height: 35px;
font-size: 9.5px;
}
.jcia-policy-card h3 {
font-size: 13.5px;
}
.jcia-policy-card p {
font-size: 11.5px;
}
.jcia-policy-arrow {
width: 24px;
height: 24px;
font-size: 13px;
}
}
/* ============================================================
JCIA — PUBLICATION ETHICS / MALPRACTICE STATEMENT
VERSION 2
------------------------------------------------------------
Academic + Modern UI
Top Horizontal Section Navigation
Full-width Reading Area
============================================================ */
/* ============================================================
VARIABLES
============================================================ */
.jcia-ethics-page {
--jcia-navy: #123f75;
--jcia-navy-dark: #082d55;
--jcia-blue: #006ca8;
--jcia-cyan: #00afd3;
--jcia-aqua: #39c7bd;
--jcia-lime: #d6e94d;
--jcia-yellow: #fff000;
--jcia-text: #283845;
--jcia-muted: #687782;
--jcia-line: #dce5e9;
--jcia-line-light: #e9eef1;
--jcia-bg: #f5f8fa;
--jcia-bg-soft: #f8fbfc;
--jcia-white: #ffffff;
width: 100%;
margin: 0;
padding: 0;
color: var(--jcia-text);
font-family: inherit;
box-sizing: border-box;
}
.jcia-ethics-page *,
.jcia-ethics-page *::before,
.jcia-ethics-page *::after {
box-sizing: border-box;
}
/* ============================================================
HERO
============================================================ */
.jcia-ethics-hero {
position: relative;
width: 100%;
margin: 0 0 18px;
overflow: hidden;
background:
radial-gradient(
circle at 93% 10%,
rgba(255,240,0,0.10) 0,
transparent 25%
),
radial-gradient(
circle at 8% 100%,
rgba(0,175,211,0.09) 0,
transparent 31%
),
linear-gradient(
135deg,
#ffffff 0%,
#f7fafb 54%,
#f4f9f8 100%
);
border:
1px solid var(--jcia-line);
border-radius:
6px;
box-shadow:
0 2px 6px rgba(20,47,65,0.035),
0 12px 28px rgba(20,47,65,0.05);
}
/* Top JCIA gradient */
.jcia-ethics-hero-accent {
width: 100%;
height: 5px;
background:
linear-gradient(
90deg,
#00afd3 0%,
#37c6bd 38%,
#d6e94d 72%,
#fff000 100%
);
}
/* Hero interior */
.jcia-ethics-hero-inner {
position: relative;
padding:
34px 38px 35px;
}
/* Decorative ring */
.jcia-ethics-hero-inner::after {
content: "";
position: absolute;
top: -55px;
right: -60px;
width: 210px;
height: 210px;
border:
34px solid rgba(0,175,211,0.035);
border-radius:
50%;
pointer-events:
none;
}
/* Small hero label */
.jcia-ethics-eyebrow {
display: inline-flex;
align-items: center;
margin:
0 0 11px;
padding:
6px 10px;
background:
rgba(0,175,211,0.07);
border:
1px solid rgba(0,175,211,0.18);
border-radius:
3px;
color:
#007f9e;
font-size:
10px;
font-weight:
700;
line-height:
1;
letter-spacing:
0.12em;
text-transform:
uppercase;
}
/* Main title */
.jcia-ethics-hero h1 {
position: relative;
z-index: 1;
max-width: 900px;
margin:
0 0 17px;
padding: 0;
color:
var(--jcia-navy-dark);
font-size:
clamp(27px, 3vw, 36px);
font-weight:
700;
line-height:
1.17;
letter-spacing:
-0.018em;
}
/* Underline accent */
.jcia-ethics-hero h1::after {
content: "";
display: block;
width:
66px;
height:
3px;
margin-top:
16px;
background:
linear-gradient(
90deg,
var(--jcia-cyan),
var(--jcia-yellow)
);
border-radius:
3px;
}
/* Hero introduction */
.jcia-ethics-lead {
position: relative;
z-index: 1;
max-width:
1000px;
margin: 0;
padding: 0;
color:
#53636e;
font-size:
14px;
font-weight:
400;
line-height:
1.75;
}
/* ============================================================
MAIN PAGE LAYOUT
------------------------------------------------------------
IMPORTANT:
Sidebar is now ABOVE content.
============================================================ */
.jcia-ethics-layout {
display: flex;
flex-direction: column;
width: 100%;
gap: 16px;
align-items: stretch;
}
/* ============================================================
TOP NAVIGATION
============================================================ */
.jcia-ethics-sidebar {
width: 100%;
margin: 0;
padding: 0;
min-width: 0;
}
/* Navigation container */
.jcia-ethics-nav {
position: relative;
display: grid;
grid-template-columns:
auto repeat(5, minmax(0, 1fr));
align-items: stretch;
gap: 6px;
width: 100%;
margin: 0;
padding: 7px;
background:
linear-gradient(
135deg,
#ffffff 0%,
#f7fafb 100%
);
border:
1px solid #d7e3e8;
border-radius:
6px;
box-shadow:
0 3px 12px rgba(20,51,70,0.045);
overflow: hidden;
}
/* JCIA top accent */
.jcia-ethics-nav::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background:
linear-gradient(
90deg,
var(--jcia-cyan) 0%,
var(--jcia-aqua) 44%,
var(--jcia-lime) 75%,
var(--jcia-yellow) 100%
);
}
/* ============================================================
ON THIS PAGE LABEL
============================================================ */
.jcia-ethics-nav-title {
display: flex;
align-items: center;
justify-content: center;
min-width: 100px;
margin: 0;
padding:
10px 12px;
border: 0;
border-right:
1px solid #e1e8ec;
color:
#74838c;
font-size:
9px;
font-weight:
700;
line-height:
1.25;
letter-spacing:
0.10em;
text-transform:
uppercase;
white-space:
nowrap;
}
/* ============================================================
TOP NAVIGATION LINKS
============================================================ */
.jcia-ethics-nav a {
position: relative;
display: flex;
align-items: center;
gap:
8px;
width:
100%;
min-width:
0;
min-height:
52px;
margin:
0;
padding:
8px 10px;
background:
transparent;
border:
1px solid transparent;
border-radius:
4px;
color:
#3c5060;
font-size:
10.5px;
font-weight:
500;
line-height:
1.3;
text-decoration:
none !important;
transition:
background .18s ease,
border-color .18s ease,
color .18s ease,
transform .18s ease,
box-shadow .18s ease;
}
/* Number */
.jcia-ethics-nav a span {
display: flex;
align-items: center;
justify-content: center;
flex:
0 0 29px;
width:
29px;
height:
29px;
background:
linear-gradient(
145deg,
#edf8fa,
#ffffff
);
border:
1px solid #d0e7eb;
border-radius:
50%;
color:
#008ca6;
font-size:
8.5px;
font-weight:
700;
line-height:
1;
transition:
background .18s ease,
border-color .18s ease,
color .18s ease;
}
/* Hover */
.jcia-ethics-nav a:hover,
.jcia-ethics-nav a:focus {
background:
linear-gradient(
135deg,
#f2fafb,
#ffffff
);
border-color:
#d5e8ec;
color:
#006d89;
transform:
translateY(-1px);
box-shadow:
0 3px 8px rgba(15,75,96,0.045);
outline:
none;
}
.jcia-ethics-nav a:hover span,
.jcia-ethics-nav a:focus span {
background:
linear-gradient(
135deg,
var(--jcia-cyan),
var(--jcia-aqua)
);
border-color:
var(--jcia-cyan);
color:
#ffffff;
}
/* Bottom accent on hover */
.jcia-ethics-nav a::after {
content: "";
position: absolute;
bottom:
2px;
left:
10px;
right:
10px;
height:
2px;
background:
linear-gradient(
90deg,
var(--jcia-cyan),
var(--jcia-yellow)
);
transform:
scaleX(0);
transform-origin:
left;
transition:
transform .2s ease;
}
.jcia-ethics-nav a:hover::after,
.jcia-ethics-nav a:focus::after {
transform:
scaleX(1);
}
/* ============================================================
MAIN CONTENT
============================================================ */
.jcia-ethics-content {
width: 100%;
min-width: 0;
margin: 0;
padding: 0;
}
/* ============================================================
MAIN SECTION CARD
============================================================ */
.jcia-ethics-section {
position: relative;
width: 100%;
margin:
0 0 18px;
padding:
28px 30px;
scroll-margin-top:
90px;
background:
#ffffff;
border:
1px solid var(--jcia-line);
border-radius:
6px;
box-shadow:
0 3px 14px rgba(23,53,70,0.04);
overflow:
hidden;
}
/* Section top accent */
.jcia-ethics-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background:
linear-gradient(
90deg,
var(--jcia-cyan) 0%,
var(--jcia-aqua) 45%,
transparent 100%
);
}
/* ============================================================
SECTION HEADER
============================================================ */
.jcia-section-header {
display: flex;
align-items: center;
gap:
15px;
margin:
0 0 22px;
padding:
0 0 17px;
border-bottom:
1px solid #e5ecef;
}
/* Main section number */
.jcia-section-number {
display: flex;
align-items: center;
justify-content: center;
flex:
0 0 44px;
width:
44px;
height:
44px;
background:
linear-gradient(
145deg,
#e7f7f9,
#fafdfd
);
border:
1px solid #cbe6ea;
border-radius:
50%;
color:
#008ba5;
font-size:
11px;
font-weight:
700;
line-height:
1;
letter-spacing:
.04em;
box-shadow:
inset 0 1px 0 rgba(255,255,255,.9);
}
/* Small category */
.jcia-section-kicker {
margin:
0 0 4px;
color:
#0090a6;
font-size:
9px;
font-weight:
700;
line-height:
1;
letter-spacing:
.10em;
text-transform:
uppercase;
}
/* Section heading */
.jcia-section-header h2 {
margin:
0;
padding:
0;
color:
var(--jcia-navy-dark);
font-size:
20px;
font-weight:
700;
line-height:
1.3;
}
/* ============================================================
PRINCIPLE CARDS
============================================================ */
.jcia-principle {
position: relative;
width: 100%;
margin:
0 0 12px;
padding:
18px 21px;
background:
linear-gradient(
135deg,
#f9fbfc 0%,
#ffffff 100%
);
border:
1px solid #dee7eb;
border-left:
3px solid #26b9c1;
border-radius:
4px;
transition:
border-color .18s ease,
box-shadow .18s ease,
transform .18s ease;
}
.jcia-principle:last-child {
margin-bottom:
0;
}
/* Hover */
.jcia-principle:hover {
transform:
translateY(-1px);
border-color:
#cbdde2;
border-left-color:
#009bb5;
box-shadow:
0 5px 15px rgba(18,56,75,.055);
}
/* Principle title */
.jcia-principle h3 {
display:
inline-block;
margin:
0 0 7px;
padding:
0;
color:
#174e6e;
font-size:
13px;
font-weight:
700;
line-height:
1.4;
}
/* Yellow miniature accent */
.jcia-principle h3::after {
content: "";
display:
inline-block;
width:
16px;
height:
2px;
margin:
0 0 3px 8px;
background:
var(--jcia-yellow);
}
/* Paragraph */
.jcia-principle p {
margin:
0 0 10px;
padding:
0;
max-width:
none;
color:
#4c5d68;
font-size:
13px;
font-weight:
400;
line-height:
1.72;
text-align:
left;
}
.jcia-principle p:last-child {
margin-bottom:
0;
}
/* ============================================================
GENERAL TEXT PANEL
============================================================ */
.jcia-text-panel {
position:
relative;
width:
100%;
padding:
19px 21px;
background:
linear-gradient(
135deg,
#f8fafb,
#ffffff
);
border:
1px solid #e0e7ea;
border-radius:
4px;
}
.jcia-text-panel p {
margin:
0;
padding:
0;
color:
#4e5d67;
font-size:
13px;
font-weight:
400;
line-height:
1.75;
}
/* ============================================================
REVIEW PROCESS FEATURE
============================================================ */
.jcia-review-panel {
background:
linear-gradient(
135deg,
rgba(0,175,211,0.055) 0%,
rgba(255,255,255,1) 65%
);
border-left:
4px solid var(--jcia-cyan);
}
/* ============================================================
COPYRIGHT SECTION
============================================================ */
.jcia-copyright-section {
background:
radial-gradient(
circle at 95% 0%,
rgba(255,240,0,.07),
transparent 29%
),
#ffffff;
}
.jcia-copyright-section::before {
background:
linear-gradient(
90deg,
var(--jcia-cyan) 0%,
var(--jcia-lime) 58%,
var(--jcia-yellow) 100%
);
}
.jcia-copyright-section
.jcia-section-number {
background:
linear-gradient(
135deg,
#fffde4,
#ffffff
);
border-color:
#ece5a3;
color:
#746900;
}
/* ============================================================
CONTENT LINKS
============================================================ */
.jcia-ethics-content a {
color:
#007c9d;
font-weight:
600;
text-decoration:
underline;
text-decoration-thickness:
1px;
text-underline-offset:
3px;
}
.jcia-ethics-content a:hover {
color:
#004d72;
}
/* ============================================================
TEXT SELECTION
============================================================ */
.jcia-ethics-page ::selection {
background:
#e5f234;
color:
#122c43;
}
/* ============================================================
ACCESSIBILITY
============================================================ */
.jcia-ethics-page a:focus-visible {
outline:
2px solid var(--jcia-cyan);
outline-offset:
2px;
}
/* ============================================================
LARGE SCREEN
============================================================ */
@media screen and (min-width: 1200px) {
.jcia-ethics-section {
padding:
30px 34px;
}
.jcia-principle {
padding:
19px 23px;
}
.jcia-principle p,
.jcia-text-panel p {
font-size:
13.25px;
line-height:
1.75;
}
}
/* ============================================================
TABLET
============================================================ */
@media screen and (max-width: 1000px) {
.jcia-ethics-nav {
grid-template-columns:
repeat(5, minmax(0,1fr));
}
.jcia-ethics-nav-title {
grid-column:
1 / -1;
justify-content:
flex-start;
min-width:
0;
padding:
7px 9px 6px;
border-right:
0;
border-bottom:
1px solid #e2e9ec;
}
.jcia-ethics-nav a {
justify-content:
flex-start;
min-height:
50px;
}
}
/* ============================================================
MEDIUM TABLET
============================================================ */
@media screen and (max-width: 800px) {
.jcia-ethics-nav {
grid-template-columns:
repeat(3, minmax(0,1fr));
}
.jcia-ethics-nav-title {
grid-column:
1 / -1;
}
.jcia-ethics-hero-inner {
padding:
30px 27px 31px;
}
.jcia-ethics-section {
padding:
25px 23px;
}
}
/* ============================================================
MOBILE
------------------------------------------------------------
Navigation changes to horizontal scrolling chips so it
does not consume excessive vertical space.
============================================================ */
@media screen and (max-width: 600px) {
.jcia-ethics-hero {
margin-bottom:
13px;
border-radius:
5px;
}
.jcia-ethics-hero-inner {
padding:
26px 19px 27px;
}
.jcia-ethics-hero h1 {
font-size:
24px;
line-height:
1.2;
}
.jcia-ethics-lead {
font-size:
12.5px;
line-height:
1.68;
}
/* ========================================
MOBILE HORIZONTAL NAV
======================================== */
.jcia-ethics-nav {
display:
flex;
align-items:
stretch;
gap:
6px;
width:
100%;
padding:
7px;
overflow-x:
auto;
overflow-y:
hidden;
scroll-snap-type:
x proximity;
-webkit-overflow-scrolling:
touch;
scrollbar-width:
thin;
scrollbar-color:
#b9dce2 transparent;
}
.jcia-ethics-nav::-webkit-scrollbar {
height:
4px;
}
.jcia-ethics-nav::-webkit-scrollbar-thumb {
background:
#b9dce2;
border-radius:
10px;
}
.jcia-ethics-nav-title {
display:
none;
}
.jcia-ethics-nav a {
flex:
0 0 155px;
min-width:
155px;
min-height:
48px;
padding:
7px 9px;
background:
#f9fbfc;
border:
1px solid #e0e8eb;
scroll-snap-align:
start;
font-size:
10px;
}
.jcia-ethics-nav a span {
flex-basis:
27px;
width:
27px;
height:
27px;
}
/* ========================================
CONTENT
======================================== */
.jcia-ethics-section {
margin-bottom:
14px;
padding:
20px 16px;
border-radius:
5px;
scroll-margin-top:
15px;
}
.jcia-section-header {
gap:
11px;
margin-bottom:
17px;
padding-bottom:
14px;
}
.jcia-section-number {
flex-basis:
38px;
width:
38px;
height:
38px;
font-size:
9.5px;
}
.jcia-section-header h2 {
font-size:
17px;
}
.jcia-principle {
padding:
15px 15px 15px 17px;
}
.jcia-principle h3 {
font-size:
12.5px;
}
.jcia-principle p,
.jcia-text-panel p {
font-size:
12.25px;
line-height:
1.67;
}
.jcia-text-panel {
padding:
16px;
}
}
/* ============================================================
VERY SMALL MOBILE
============================================================ */
@media screen and (max-width: 380px) {
.jcia-ethics-hero-inner {
padding:
23px 15px;
}
.jcia-ethics-hero h1 {
font-size:
22px;
}
.jcia-ethics-nav a {
flex-basis:
142px;
min-width:
142px;
}
.jcia-ethics-section {
padding:
18px 13px;
}
.jcia-section-kicker {
font-size:
8px;
}
.jcia-section-header h2 {
font-size:
16px;
}
}
/* ============================================================
JCIA — GENERATIVE AI POLICY
Academic + Contemporary Journal UI
============================================================ */
/* ============================================================
01. VARIABLES / BASE
============================================================ */
.jcia-ai-page {
--jcia-navy: #123f75;
--jcia-navy-deep: #082e55;
--jcia-cyan: #00afd3;
--jcia-teal: #35c6bd;
--jcia-lime: #d6e94d;
--jcia-yellow: #fff000;
--jcia-text: #344856;
--jcia-muted: #657682;
--jcia-line: #dbe5e9;
--jcia-line-soft: #e8eef1;
--jcia-panel: #f8fafb;
--jcia-white: #ffffff;
width: 100%;
margin: 0;
padding: 0;
color: var(--jcia-text);
font-family: inherit;
box-sizing: border-box;
}
.jcia-ai-page *,
.jcia-ai-page *::before,
.jcia-ai-page *::after {
box-sizing: border-box;
}
/* Smooth anchor movement */
html {
scroll-behavior: smooth;
}
/* ============================================================
02. HERO
============================================================ */
.jcia-ai-hero {
position: relative;
width: 100%;
margin: 0 0 16px;
overflow: hidden;
background:
radial-gradient(
circle at 96% 12%,
rgba(255,240,0,.13) 0%,
transparent 26%
),
radial-gradient(
circle at 5% 95%,
rgba(0,175,211,.10) 0%,
transparent 34%
),
linear-gradient(
135deg,
#ffffff 0%,
#f7fafb 56%,
#f5faf7 100%
);
border: 1px solid var(--jcia-line);
border-radius: 7px;
box-shadow:
0 2px 6px rgba(15,49,67,.035),
0 12px 30px rgba(15,49,67,.05);
}
/* JCIA signature gradient */
.jcia-ai-colourbar {
width: 100%;
height: 5px;
background:
linear-gradient(
90deg,
#00afd3 0%,
#32c6be 38%,
#d6e94d 73%,
#fff000 100%
);
}
.jcia-ai-hero-inner {
position: relative;
padding: 39px 42px 36px;
}
/* Abstract visual ring */
.jcia-ai-hero-inner::after {
content: "";
position: absolute;
top: -92px;
right: -58px;
width: 265px;
height: 265px;
border: 42px solid rgba(0,175,211,.035);
border-radius: 50%;
pointer-events: none;
}
/* secondary decorative ring */
.jcia-ai-hero-inner::before {
content: "";
position: absolute;
top: 46px;
right: 88px;
width: 94px;
height: 94px;
border: 1px solid rgba(0,175,211,.11);
border-radius: 50%;
pointer-events: none;
}
/* Eyebrow */
.jcia-ai-eyebrow {
position: relative;
z-index: 2;
display: inline-flex;
margin: 0 0 11px;
padding: 6px 10px;
background: rgba(0,175,211,.065);
border: 1px solid rgba(0,175,211,.18);
border-radius: 3px;
color: #00829c;
font-size: 9.5px;
font-weight: 700;
line-height: 1;
letter-spacing: .12em;
text-transform: uppercase;
}
/* Hero H1 */
.jcia-ai-hero h1 {
position: relative;
z-index: 2;
margin: 0 0 16px;
padding: 0;
max-width: 800px;
color: var(--jcia-navy-deep);
font-size: clamp(29px, 3.3vw, 39px);
font-weight: 700;
line-height: 1.14;
letter-spacing: -.02em;
}
/* coloured underline */
.jcia-ai-hero h1::after {
content: "";
display: block;
width: 67px;
height: 3px;
margin-top: 16px;
background:
linear-gradient(
90deg,
var(--jcia-cyan),
var(--jcia-yellow)
);
}
/* Intro */
.jcia-ai-lead {
position: relative;
z-index: 2;
max-width: 900px;
margin: 0;
color: #536570;
font-size: 13.5px;
font-weight: 400;
line-height: 1.75;
}
/* ============================================================
CORE PRINCIPLE
============================================================ */
.jcia-ai-principle {
position: relative;
z-index: 2;
display: flex;
align-items: center;
gap: 13px;
max-width: 760px;
margin-top: 23px;
padding: 12px 15px;
background: rgba(255,255,255,.74);
border:
1px solid rgba(0,175,211,.18);
border-left:
3px solid var(--jcia-cyan);
border-radius: 4px;
box-shadow:
0 3px 10px rgba(20,64,80,.035);
}
.jcia-ai-principle-icon {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 37px;
width: 37px;
height: 37px;
background:
linear-gradient(
135deg,
#e8f8fa,
#ffffff
);
border: 1px solid #cbe8ec;
border-radius: 50%;
color: #008ba3;
font-size: 10px;
font-weight: 750;
}
.jcia-ai-principle span {
display: block;
margin-bottom: 3px;
color: #008ca5;
font-size: 8px;
font-weight: 700;
line-height: 1;
letter-spacing: .1em;
text-transform: uppercase;
}
.jcia-ai-principle strong {
display: block;
color: #28475b;
font-size: 11.5px;
font-weight: 600;
line-height: 1.45;
}
/* ============================================================
03. TOP NAVIGATION
============================================================ */
.jcia-ai-nav {
position: relative;
display: grid;
grid-template-columns:
auto repeat(4, minmax(0,1fr));
gap: 5px;
align-items: stretch;
width: 100%;
margin: 0 0 16px;
padding: 7px;
background:
linear-gradient(
135deg,
#ffffff,
#f7fafb
);
border: 1px solid #d8e4e8;
border-radius: 6px;
box-shadow:
0 3px 12px rgba(18,55,72,.04);
overflow: hidden;
}
/* coloured top rule */
.jcia-ai-nav::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background:
linear-gradient(
90deg,
var(--jcia-cyan),
var(--jcia-teal),
var(--jcia-lime),
var(--jcia-yellow)
);
}
/* On this page */
.jcia-ai-nav-label {
display: flex;
align-items: center;
justify-content: center;
padding: 9px 13px;
border-right: 1px solid #e1e8eb;
color: #75848d;
font-size: 8.5px;
font-weight: 700;
line-height: 1;
letter-spacing: .10em;
text-transform: uppercase;
white-space: nowrap;
}
/* Navigation link */
.jcia-ai-nav a {
position: relative;
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 7px 9px;
background: transparent;
border: 1px solid transparent;
border-radius: 4px;
color: #435765;
font-size: 10.5px;
font-weight: 550;
line-height: 1.3;
text-decoration: none !important;
transition:
background .18s ease,
border-color .18s ease,
color .18s ease,
transform .18s ease;
}
/* Nav number */
.jcia-ai-nav a span {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 27px;
width: 27px;
height: 27px;
background: #edf8fa;
border: 1px solid #d1e7eb;
border-radius: 50%;
color: #008ba4;
font-size: 8px;
font-weight: 700;
}
/* Nav hover */
.jcia-ai-nav a:hover,
.jcia-ai-nav a:focus {
background: #f1f9fa;
border-color: #d5e8ec;
color: #006b86;
transform: translateY(-1px);
outline: none;
}
.jcia-ai-nav a:hover span,
.jcia-ai-nav a:focus span {
background:
linear-gradient(
135deg,
var(--jcia-cyan),
var(--jcia-teal)
);
border-color: var(--jcia-cyan);
color: #ffffff;
}
/* ============================================================
04. MAIN SECTION
============================================================ */
.jcia-ai-section {
position: relative;
width: 100%;
margin: 0 0 18px;
padding: 29px 31px;
background: #ffffff;
border: 1px solid var(--jcia-line);
border-radius: 6px;
box-shadow:
0 3px 14px rgba(20,53,69,.04);
overflow: hidden;
scroll-margin-top: 20px;
}
/* Section top accent */
.jcia-ai-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 2px;
background:
linear-gradient(
90deg,
var(--jcia-cyan),
var(--jcia-teal) 45%,
transparent 100%
);
}
/* Section header */
.jcia-ai-section-heading {
display: flex;
align-items: center;
gap: 14px;
margin: 0 0 21px;
padding: 0 0 16px;
border-bottom:
1px solid var(--jcia-line-soft);
}
/* Section number */
.jcia-ai-section-number {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 44px;
width: 44px;
height: 44px;
background:
linear-gradient(
145deg,
#e8f8fa,
#ffffff
);
border: 1px solid #cbe6ea;
border-radius: 50%;
color: #008ca5;
font-size: 10px;
font-weight: 700;
}
/* Kicker */
.jcia-ai-kicker {
margin: 0 0 4px;
color: #008ea6;
font-size: 8.5px;
font-weight: 700;
line-height: 1;
letter-spacing: .1em;
text-transform: uppercase;
}
/* H2 */
.jcia-ai-section-heading h2 {
margin: 0;
color: var(--jcia-navy-deep);
font-size: 20px;
font-weight: 700;
line-height: 1.25;
}
/* ============================================================
AUTHOR INTRO
============================================================ */
.jcia-ai-intro {
margin: 0 0 17px;
padding: 16px 19px;
background:
linear-gradient(
135deg,
#f4fafb,
#ffffff
);
border: 1px solid #dce9ec;
border-left:
4px solid var(--jcia-cyan);
border-radius: 4px;
}
.jcia-ai-intro p {
margin: 0;
color: #4d606c;
font-size: 12.75px;
font-weight: 400;
line-height: 1.7;
}
/* ============================================================
AUTHOR CARDS GRID
============================================================ */
.jcia-ai-grid {
display: grid;
grid-template-columns:
repeat(2, minmax(0,1fr));
gap: 12px;
margin-bottom: 19px;
}
.jcia-ai-card {
position: relative;
display: grid;
grid-template-columns:
38px minmax(0,1fr);
gap: 12px;
padding: 17px;
background:
linear-gradient(
135deg,
#fafcfc,
#ffffff
);
border: 1px solid #e0e7ea;
border-radius: 4px;
transition:
transform .18s ease,
box-shadow .18s ease,
border-color .18s ease;
}
.jcia-ai-card:hover {
transform: translateY(-2px);
border-color: #c9dde2;
box-shadow:
0 6px 16px rgba(18,57,76,.06);
}
/* Card number */
.jcia-ai-card-icon {
display: flex;
align-items: center;
justify-content: center;
width: 35px;
height: 35px;
background: #edf8fa;
border: 1px solid #d2e8eb;
border-radius: 50%;
color: #008ca5;
font-size: 8.5px;
font-weight: 700;
}
.jcia-ai-card-content {
min-width: 0;
}
/* Small category */
.jcia-ai-card-label {
display: block;
margin-bottom: 4px;
color: #008ea5;
font-size: 8px;
font-weight: 700;
line-height: 1;
letter-spacing: .09em;
text-transform: uppercase;
}
.jcia-ai-card h3 {
margin: 0 0 6px;
color: #184c6a;
font-size: 12.75px;
font-weight: 700;
line-height: 1.35;
}
.jcia-ai-card p {
margin: 0;
color: #566772;
font-size: 11.75px;
font-weight: 400;
line-height: 1.6;
}
/* ============================================================
05. AI VISUAL / IMAGE POLICY
============================================================ */
.jcia-ai-visual-policy {
position: relative;
margin-top: 6px;
padding: 22px;
background:
radial-gradient(
circle at 96% 0%,
rgba(255,240,0,.08),
transparent 28%
),
linear-gradient(
135deg,
#f6fafb,
#ffffff
);
border: 1px solid #dce7ea;
border-radius: 5px;
overflow: hidden;
}
/* JCIA mini colour bar */
.jcia-ai-visual-policy::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
background:
linear-gradient(
180deg,
var(--jcia-cyan),
var(--jcia-teal),
var(--jcia-lime),
var(--jcia-yellow)
);
}
/* Visual section heading */
.jcia-ai-visual-heading {
display: flex;
align-items: center;
gap: 11px;
margin: 0 0 17px;
}
.jcia-ai-visual-symbol {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 38px;
width: 38px;
height: 38px;
background:
linear-gradient(
135deg,
#e6f8fa,
#fffde5
);
border: 1px solid #d2e6df;
border-radius: 50%;
color: #008ca4;
font-size: 17px;
}
.jcia-ai-visual-heading span {
display: block;
margin-bottom: 3px;
color: #008ca4;
font-size: 8px;
font-weight: 700;
line-height: 1;
letter-spacing: .1em;
text-transform: uppercase;
}
.jcia-ai-visual-heading h3 {
margin: 0;
color: var(--jcia-navy-deep);
font-size: 16px;
font-weight: 700;
line-height: 1.3;
}
/* Three visual policy boxes */
.jcia-ai-visual-grid {
display: grid;
grid-template-columns:
repeat(3, minmax(0,1fr));
gap: 10px;
}
.jcia-ai-visual-item {
position: relative;
padding: 15px;
background: #ffffff;
border: 1px solid #e1e7ea;
border-radius: 4px;
overflow: hidden;
}
/* top bar */
.jcia-ai-visual-item::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 3px;
}
/* permitted */
.jcia-ai-permitted::before {
background:
linear-gradient(
90deg,
var(--jcia-cyan),
var(--jcia-teal)
);
}
/* conditional */
.jcia-ai-conditional::before {
background:
linear-gradient(
90deg,
var(--jcia-teal),
var(--jcia-lime)
);
}
/* prohibited */
.jcia-ai-prohibited::before {
background:
linear-gradient(
90deg,
#cf9c00,
var(--jcia-yellow)
);
}
/* Status badge */
.jcia-ai-status {
display: inline-flex;
margin-bottom: 8px;
padding: 4px 7px;
background: #f0f8f9;
border: 1px solid #d7e9ec;
border-radius: 20px;
color: #087e94;
font-size: 7.5px;
font-weight: 700;
line-height: 1;
letter-spacing: .05em;
text-transform: uppercase;
}
.jcia-ai-conditional .jcia-ai-status {
background: #f7fae9;
border-color: #e1e8b6;
color: #687a13;
}
.jcia-ai-prohibited .jcia-ai-status {
background: #fffbea;
border-color: #ece1a4;
color: #7c6b00;
}
.jcia-ai-visual-item h4 {
margin: 0 0 7px;
color: #244c64;
font-size: 11.75px;
font-weight: 700;
line-height: 1.4;
}
.jcia-ai-visual-item p {
margin: 0 0 8px;
color: #5b6a74;
font-size: 10.75px;
font-weight: 400;
line-height: 1.6;
}
.jcia-ai-visual-item p:last-child {
margin-bottom: 0;
}
/* ============================================================
INFORMATION NOTE
============================================================ */
.jcia-ai-note {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: 14px;
padding: 11px 13px;
background: #f5f9fa;
border: 1px solid #e1e9ec;
border-radius: 3px;
}
.jcia-ai-note-symbol {
display: flex;
align-items: center;
justify-content: center;
flex: 0 0 18px;
width: 18px;
height: 18px;
margin-top: 1px;
background: #008da6;
border-radius: 50%;
color: #ffffff;
font-size: 9px;
font-weight: 700;
}
.jcia-ai-note p {
margin: 0;
color: #60717a;
font-size: 10.5px;
line-height: 1.55;
}
/* ============================================================
06. REVIEWER / EDITOR RULE LIST
============================================================ */
.jcia-ai-rule-list {
display: grid;
gap: 10px;
}
.jcia-ai-rule {
display: grid;
grid-template-columns:
38px minmax(0,1fr);
gap: 13px;
align-items: start;
padding: 16px 18px;
background:
linear-gradient(
135deg,
#f9fbfc,
#ffffff
);
border: 1px solid #e0e7ea;
border-left:
3px solid #20b7c0;
border-radius: 4px;
transition:
transform .18s ease,
border-color .18s ease,
box-shadow .18s ease;
}
.jcia-ai-rule:hover {
transform: translateY(-1px);
border-color: #c9dce1;
border-left-color: #008fa9;
box-shadow:
0 5px 14px rgba(19,59,77,.05);
}
/* rule number */
.jcia-ai-rule-number {
display: flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
background: #edf8fa;
border: 1px solid #d1e6ea;
border-radius: 50%;
color: #008da5;
font-size: 8px;
font-weight: 700;
}
.jcia-ai-rule h3 {
margin: 0 0 5px;
color: #194d69;
font-size: 12.75px;
font-weight: 700;
line-height: 1.35;
}
.jcia-ai-rule p {
margin: 0;
color: #536570;
font-size: 11.75px;
font-weight: 400;
line-height: 1.65;
}
/* ============================================================
07. DISCLOSURE SECTION
============================================================ */
.jcia-ai-disclosure-section {
background:
radial-gradient(
circle at 95% 0%,
rgba(255,240,0,.08),
transparent 31%
),
#ffffff;
}
.jcia-ai-disclosure-section::before {
background:
linear-gradient(
90deg,
var(--jcia-cyan),
var(--jcia-lime),
var(--jcia-yellow)
);
}
.jcia-ai-disclosure-intro {
margin: 0 0 14px;
color: #52636e;
font-size: 12.5px;
line-height: 1.7;
}
/* Declaration example */
.jcia-ai-example {
position: relative;
padding: 18px 20px;
background:
linear-gradient(
135deg,
#f6fafb,
#fffef4
);
border: 1px solid #dce6e5;
border-left:
4px solid var(--jcia-lime);
border-radius: 4px;
}
.jcia-ai-example-label {
display: inline-flex;
margin: 0 0 8px;
padding: 4px 7px;
background: #eef7f8;
border: 1px solid #d3e7ea;
border-radius: 2px;
color: #00869f;
font-size: 8px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
}
.jcia-ai-example p {
margin: 0;
color: #405765;
font-size: 12px;
font-weight: 500;
line-height: 1.7;
}
/* ============================================================
08. FOOTER
============================================================ */
.jcia-ai-footer {
margin-top: 5px;
padding: 16px 18px;
background: #f8fafb;
border: 1px solid #e0e7ea;
border-radius: 4px;
}
.jcia-ai-footer-line {
width: 45px;
height: 2px;
margin-bottom: 9px;
background:
linear-gradient(
90deg,
var(--jcia-cyan),
var(--jcia-yellow)
);
}
.jcia-ai-footer p {
margin: 0;
color: #6a7881;
font-size: 10.5px;
line-height: 1.55;
}
/* ============================================================
09. ACCESSIBILITY
============================================================ */
.jcia-ai-page a:focus-visible {
outline:
2px solid var(--jcia-cyan);
outline-offset:
2px;
}
.jcia-ai-page ::selection {
background: #e3f135;
color: var(--jcia-navy-deep);
}
/* ============================================================
10. TABLET
============================================================ */
@media screen and (max-width: 900px) {
.jcia-ai-hero-inner {
padding:
32px 29px;
}
.jcia-ai-nav {
grid-template-columns:
repeat(4, minmax(0,1fr));
}
.jcia-ai-nav-label {
grid-column:
1 / -1;
justify-content:
flex-start;
padding:
7px 9px 5px;
border-right:
0;
border-bottom:
1px solid #e2e9ec;
}
.jcia-ai-section {
padding:
26px 24px;
}
.jcia-ai-visual-grid {
grid-template-columns:
1fr;
}
}
/* ============================================================
11. SMALL TABLET
============================================================ */
@media screen and (max-width: 700px) {
.jcia-ai-grid {
grid-template-columns:
1fr;
}
.jcia-ai-nav {
grid-template-columns:
repeat(2, minmax(0,1fr));
}
.jcia-ai-nav-label {
grid-column:
1 / -1;
}
}
/* ============================================================
12. MOBILE
============================================================ */
@media screen and (max-width: 520px) {
.jcia-ai-hero {
margin-bottom: 12px;
}
.jcia-ai-hero-inner {
padding:
25px 18px 26px;
}
.jcia-ai-hero h1 {
font-size:
25px;
}
.jcia-ai-lead {
font-size:
12.25px;
line-height:
1.68;
}
.jcia-ai-principle {
align-items:
flex-start;
padding:
11px 12px;
}
/* Horizontal mobile policy nav */
.jcia-ai-nav {
display: flex;
gap: 6px;
padding: 6px;
overflow-x: auto;
overflow-y: hidden;
-webkit-overflow-scrolling:
touch;
scrollbar-width:
thin;
}
.jcia-ai-nav-label {
display: none;
}
.jcia-ai-nav a {
flex:
0 0 128px;
min-width:
128px;
min-height:
43px;
background:
#f8fafb;
border:
1px solid #e0e8eb;
font-size:
9.5px;
}
.jcia-ai-section {
margin-bottom:
13px;
padding:
20px 15px;
}
.jcia-ai-section-heading {
gap:
10px;
margin-bottom:
16px;
padding-bottom:
13px;
}
.jcia-ai-section-number {
flex-basis:
38px;
width:
38px;
height:
38px;
}
.jcia-ai-section-heading h2 {
font-size:
17px;
}
.jcia-ai-intro {
padding:
14px 15px;
}
.jcia-ai-intro p {
font-size:
11.75px;
}
.jcia-ai-card {
padding:
14px;
}
.jcia-ai-visual-policy {
padding:
18px 14px;
}
.jcia-ai-visual-heading h3 {
font-size:
14px;
}
.jcia-ai-rule {
grid-template-columns:
32px minmax(0,1fr);
gap:
10px;
padding:
14px;
}
.jcia-ai-rule-number {
width:
30px;
height:
30px;
}
.jcia-ai-rule h3 {
font-size:
12px;
}
.jcia-ai-rule p {
font-size:
11.25px;
}
}
/* ============================================================
13. VERY SMALL MOBILE
============================================================ */
@media screen and (max-width: 360px) {
.jcia-ai-hero-inner {
padding:
22px 15px;
}
.jcia-ai-hero h1 {
font-size:
23px;
}
.jcia-ai-section {
padding:
18px 13px;
}
.jcia-ai-nav a {
flex-basis:
118px;
min-width:
118px;
}
}
/* ============================================================
JCIA — AIMS & SCOPE
MINIMAL ACADEMIC DESIGN
Enlarged Topic Font Size
============================================================ */
.jcia-aims-scope {
--jcia-navy: #0b3558;
--jcia-blue: #00a9cf;
--jcia-teal: #18b6ae;
--jcia-lime: #a7c900;
--jcia-yellow: #f3bc00;
--jcia-text: #354854;
--jcia-muted: #6b7880;
--jcia-border: #dce4e8;
--jcia-border-light: #e9edef;
width: 100%;
margin: 0;
padding: 0;
color: var(--jcia-text);
font-family: inherit;
box-sizing: border-box;
}
.jcia-aims-scope *,
.jcia-aims-scope *::before,
.jcia-aims-scope *::after {
box-sizing: border-box;
}
/* ============================================================
PAGE HEADER
============================================================ */
.jcia-scope-header {
margin: 0 0 24px;
padding: 0 0 17px;
border-bottom:
1px solid var(--jcia-border);
}
.jcia-scope-label {
display: block;
margin: 0 0 6px;
color: #0087a3;
font-size: 9px;
font-weight: 700;
line-height: 1;
letter-spacing: .12em;
text-transform: uppercase;
}
.jcia-scope-header h1 {
margin: 0;
padding: 0;
color: var(--jcia-navy);
font-size: 30px;
font-weight: 700;
line-height: 1.2;
letter-spacing: -.01em;
}
/* Small JCIA accent */
.jcia-scope-header h1::after {
content: "";
display: block;
width: 45px;
height: 2px;
margin-top: 11px;
background:
linear-gradient(
90deg,
#00a9cf,
#f3bc00
);
}
/* ============================================================
INTRODUCTORY TEXT
============================================================ */
.jcia-scope-introduction {
max-width: 100%;
margin: 0 0 30px;
}
.jcia-scope-introduction p {
margin:
0 0 15px;
padding: 0;
color: #435560;
font-size: 13px;
font-weight: 400;
line-height: 1.78;
text-align: left;
}
.jcia-scope-introduction p:last-child {
margin-bottom: 0;
}
/* Final scope statement */
.jcia-scope-statement {
margin-top: 21px !important;
padding-top: 16px !important;
border-top:
1px solid var(--jcia-border-light);
color:
var(--jcia-navy) !important;
font-weight:
600 !important;
}
/* ============================================================
FOUR THEMES
============================================================ */
.jcia-scope-themes {
display: grid;
grid-template-columns:
repeat(2, minmax(0,1fr));
gap:
22px 28px;
width: 100%;
margin-top: 5px;
}
/* ============================================================
INDIVIDUAL THEME
============================================================ */
.jcia-theme {
position: relative;
min-width: 0;
margin: 0;
padding:
0 0 20px;
background: transparent;
border: 0;
border-bottom:
1px solid var(--jcia-border);
box-shadow: none;
}
/* ============================================================
THEME HEADER
============================================================ */
.jcia-theme-heading {
display: flex;
align-items: center;
gap: 12px;
margin:
0 0 14px;
padding:
0 0 11px;
border-bottom:
1px solid var(--jcia-border-light);
}
/* Number */
.jcia-theme-number {
display: flex;
align-items: center;
justify-content: center;
flex:
0 0 35px;
width:
35px;
height:
35px;
border:
1px solid currentColor;
border-radius:
50%;
background:
transparent;
font-size:
9px;
font-weight:
700;
line-height:
1;
}
/* Small discipline label */
.jcia-theme-category {
display: block;
margin:
0 0 3px;
color:
#79858c;
font-size:
7.5px;
font-weight:
700;
line-height:
1;
letter-spacing:
.09em;
text-transform:
uppercase;
}
/* Theme title */
.jcia-theme h2 {
margin: 0;
padding: 0;
color:
var(--jcia-navy);
font-size:
16px;
font-weight:
700;
line-height:
1.25;
}
/* ============================================================
THEME COLOURS
============================================================ */
.jcia-theme-mathematics
.jcia-theme-number {
color:
var(--jcia-blue);
}
.jcia-theme-statistics
.jcia-theme-number {
color:
var(--jcia-teal);
}
.jcia-theme-decision
.jcia-theme-number {
color:
var(--jcia-lime);
}
.jcia-theme-computing
.jcia-theme-number {
color:
var(--jcia-yellow);
}
/* ============================================================
TOPIC LIST
ENLARGED FOR READABILITY
============================================================ */
.jcia-theme ul {
margin: 0;
padding: 0;
list-style: none;
}
.jcia-theme li {
position: relative;
margin: 0;
padding:
7px 0 7px 19px;
color:
#43545f;
font-size:
14px;
font-weight:
400;
line-height:
1.5;
}
/* Academic dot */
.jcia-theme li::before {
content: "";
position: absolute;
left: 1px;
top: 15px;
width:
5px;
height:
5px;
border-radius:
50%;
background:
#94a2aa;
}
/* Mathematics dot */
.jcia-theme-mathematics
li::before {
background:
var(--jcia-blue);
}
/* Statistics dot */
.jcia-theme-statistics
li::before {
background:
var(--jcia-teal);
}
/* Decision Sciences dot */
.jcia-theme-decision
li::before {
background:
var(--jcia-lime);
}
/* Computer Science Applications dot */
.jcia-theme-computing
li::before {
background:
var(--jcia-yellow);
}
/* ============================================================
ACCESSIBILITY
============================================================ */
.jcia-aims-scope ::selection {
background:
#e8ef77;
color:
#102e45;
}
/* ============================================================
TABLET
============================================================ */
@media screen and (max-width: 800px) {
.jcia-scope-themes {
grid-template-columns:
1fr;
gap:
20px;
}
.jcia-theme {
padding-bottom:
18px;
}
.jcia-theme li {
font-size:
13.5px;
}
}
/* ============================================================
MOBILE
============================================================ */
@media screen and (max-width: 520px) {
.jcia-scope-header {
margin-bottom:
19px;
}
.jcia-scope-header h1 {
font-size:
25px;
}
.jcia-scope-introduction {
margin-bottom:
25px;
}
.jcia-scope-introduction p {
font-size:
12.25px;
line-height:
1.7;
}
.jcia-theme-heading {
gap:
10px;
margin-bottom:
11px;
}
.jcia-theme-number {
flex-basis:
32px;
width:
32px;
height:
32px;
font-size:
8px;
}
.jcia-theme h2 {
font-size:
14.5px;
}
.jcia-theme li {
padding:
6px 0 6px 18px;
font-size:
13px;
line-height:
1.5;
}
.jcia-theme li::before {
top:
13px;
width:
4px;
height:
4px;
}
}
/* ============================================================
VERY SMALL MOBILE
============================================================ */
@media screen and (max-width: 360px) {
.jcia-scope-header h1 {
font-size:
23px;
}
.jcia-scope-introduction p {
font-size:
12px;
}
.jcia-theme h2 {
font-size:
14px;
}
.jcia-theme li {
font-size:
12.5px;
line-height:
1.5;
}
}
/* =========================================================
JCIA AUTHOR SERVICES
Journal of Computational Innovation and Analytics (JCIA)
UUM / OJS-SAFE STYLESHEET
Visual system aligned with the JCIA Contact page:
- Inter
- Navy #08265c
- Blue #164fa1
- Gold #e7aa12
- Light grey #f7f9fc
- Compact academic-journal layout
- Small-radius cards, restrained shadows, thin borders
HTML root expected:
...
========================================================= */
/* =========================================================
1. ROOT / GLOBAL RESET
========================================================= */
.jcia-as {
--jcia-navy: #08265c;
--jcia-navy-dark: #041b46;
--jcia-blue: #164fa1;
--jcia-blue-soft: #eef4fb;
--jcia-gold: #e7aa12;
--jcia-gold-dark: #c88d00;
--jcia-gold-soft: #fff9ec;
--jcia-text: #17233d;
--jcia-muted: #5f6c80;
--jcia-border: #dfe6ef;
--jcia-border-dark: #cfd8e5;
--jcia-white: #ffffff;
--jcia-soft: #f7f9fc;
display: block !important;
width: 100% !important;
max-width: 1080px !important;
margin: 0 auto !important;
padding: 0 !important;
font-family: Inter, Arial, Helvetica, sans-serif !important;
color: var(--jcia-text) !important;
font-size: 14px !important;
line-height: 1.6 !important;
box-sizing: border-box !important;
float: none !important;
clear: both !important;
background: transparent !important;
}
.jcia-as *,
.jcia-as *::before,
.jcia-as *::after {
box-sizing: border-box !important;
font-family: Inter, Arial, Helvetica, sans-serif !important;
}
.jcia-as div,
.jcia-as section,
.jcia-as article,
.jcia-as aside,
.jcia-as nav,
.jcia-as p,
.jcia-as span,
.jcia-as strong,
.jcia-as a,
.jcia-as h1,
.jcia-as h2,
.jcia-as h3,
.jcia-as details,
.jcia-as summary {
float: none !important;
}
.jcia-as h1,
.jcia-as h2,
.jcia-as h3,
.jcia-as p {
margin-top: 0 !important;
}
.jcia-as a {
text-decoration: none !important;
}
.jcia-as strong {
font-weight: 700 !important;
}
.jcia-as img,
.jcia-as svg {
max-width: 100% !important;
}
/* =========================================================
2. EYEBROW / SMALL LABELS
========================================================= */
.jcia-as .jcia-as__eyebrow {
display: inline-block !important;
margin: 0 0 8px !important;
padding: 0 !important;
color: var(--jcia-navy) !important;
font-size: 11px !important;
line-height: 1.35 !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
}
.jcia-as .jcia-as__eyebrow--light {
color: var(--jcia-gold-dark) !important;
}
/* =========================================================
3. HERO
Matches the clean JCIA Contact-page treatment
========================================================= */
.jcia-as .jcia-as__hero {
display: block !important;
width: 100% !important;
margin: 0 0 22px !important;
padding: 0 !important;
color: var(--jcia-text) !important;
background: transparent !important;
border: 0 !important;
position: relative !important;
}
.jcia-as .jcia-as__hero::after {
display: none !important;
content: none !important;
}
.jcia-as .jcia-as__hero-grid {
display: grid !important;
grid-template-columns: minmax(0, 1.45fr) minmax(260px, .55fr) !important;
gap: 26px !important;
align-items: stretch !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 4px 0 0 !important;
}
.jcia-as .jcia-as__hero-copy {
display: block !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.jcia-as .jcia-as__hero h1 {
display: block !important;
width: 100% !important;
max-width: 760px !important;
margin: 0 0 10px !important;
padding: 0 !important;
color: var(--jcia-navy) !important;
font-size: 30px !important;
line-height: 1.2 !important;
font-weight: 800 !important;
letter-spacing: 0 !important;
}
.jcia-as .jcia-as__hero-copy > p {
display: block !important;
width: 100% !important;
max-width: 760px !important;
margin: 0 !important;
padding: 0 !important;
color: #47556b !important;
font-size: 15px !important;
line-height: 1.75 !important;
font-weight: 400 !important;
}
.jcia-as .jcia-as__hero-copy > p strong {
color: var(--jcia-text) !important;
font-weight: 700 !important;
}
/* =========================================================
3A. JCIA ACADEMIC IMAGE
Use with either:
OR
...
The treatment is intentionally restrained and academic:
thin border, small radius, navy/gold detail, no heavy shadow.
========================================================= */
.jcia-as .jcia-image,
.jcia-as .jcia-as__hero-image {
display: block !important;
position: relative !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
background: var(--jcia-white) !important;
border: 1px solid var(--jcia-border) !important;
border-radius: 6px !important;
box-shadow: none !important;
overflow: hidden !important;
}
.jcia-as figure.jcia-image {
margin: 0 !important;
}
.jcia-as .jcia-image::before,
.jcia-as .jcia-as__hero-image::before {
content: "" !important;
display: block !important;
position: absolute !important;
z-index: 2 !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 4px !important;
background: linear-gradient(
90deg,
var(--jcia-navy) 0%,
var(--jcia-blue) 58%,
var(--jcia-gold) 100%
) !important;
pointer-events: none !important;
}
.jcia-as img.jcia-image {
position: relative !important;
width: 100% !important;
height: auto !important;
max-height: 360px !important;
object-fit: cover !important;
object-position: center !important;
border: 1px solid var(--jcia-border) !important;
border-radius: 6px !important;
background: var(--jcia-soft) !important;
}
.jcia-as figure.jcia-image > img,
.jcia-as .jcia-as__hero-image > img,
.jcia-as .jcia-image-wrap > img {
display: block !important;
width: 100% !important;
height: 100% !important;
min-height: 250px !important;
max-height: 360px !important;
margin: 0 !important;
padding: 0 !important;
object-fit: cover !important;
object-position: center !important;
border: 0 !important;
border-radius: 0 !important;
background: var(--jcia-soft) !important;
}
.jcia-as .jcia-image-wrap {
display: block !important;
position: relative !important;
width: 100% !important;
min-height: 250px !important;
margin: 0 !important;
padding: 0 !important;
overflow: hidden !important;
background: var(--jcia-soft) !important;
}
.jcia-as .jcia-image-caption,
.jcia-as .jcia-image figcaption {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 9px 12px !important;
border-top: 1px solid var(--jcia-border) !important;
background: #fbfcfe !important;
color: var(--jcia-muted) !important;
font-size: 11.5px !important;
line-height: 1.5 !important;
font-weight: 400 !important;
text-align: left !important;
}
.jcia-as .jcia-image-caption strong,
.jcia-as .jcia-image figcaption strong {
color: var(--jcia-navy) !important;
font-weight: 700 !important;
}
.jcia-as .jcia-image--academic img,
.jcia-as .jcia-as__hero-image img {
filter: saturate(.88) contrast(1.02) !important;
}
.jcia-as .jcia-image--contain img {
object-fit: contain !important;
background: #ffffff !important;
padding: 16px !important;
}
.jcia-as .jcia-image--portrait img {
aspect-ratio: 4 / 5 !important;
}
.jcia-as .jcia-image--landscape img,
.jcia-as .jcia-as__hero-image img {
aspect-ratio: 16 / 10 !important;
}
.jcia-as .jcia-image-credit {
display: block !important;
margin: 5px 0 0 !important;
padding: 0 !important;
color: #7a8595 !important;
font-size: 10.5px !important;
line-height: 1.45 !important;
font-style: italic !important;
}
/* =========================================================
4. HERO ACTION BUTTONS
========================================================= */
.jcia-as .jcia-as__actions,
.jcia-as .jcia-as__final-actions {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 10px !important;
width: 100% !important;
margin: 18px 0 0 !important;
padding: 0 !important;
}
.jcia-as .jcia-as__btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: auto !important;
min-height: 42px !important;
margin: 0 !important;
padding: 10px 16px !important;
border: 1px solid var(--jcia-navy) !important;
border-radius: 6px !important;
background: var(--jcia-navy) !important;
color: #ffffff !important;
font-size: 11.5px !important;
line-height: 1.35 !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: .02em !important;
box-shadow: none !important;
transition:
background-color .18s ease,
border-color .18s ease,
color .18s ease,
transform .18s ease !important;
}
.jcia-as .jcia-as__btn:hover,
.jcia-as .jcia-as__btn:focus {
background: var(--jcia-blue) !important;
border-color: var(--jcia-blue) !important;
color: #ffffff !important;
transform: translateY(-1px) !important;
}
.jcia-as .jcia-as__btn--lime,
.jcia-as .jcia-as__btn--blue {
background: var(--jcia-navy) !important;
border-color: var(--jcia-navy) !important;
color: #ffffff !important;
}
.jcia-as .jcia-as__btn--outline {
background: #ffffff !important;
border-color: var(--jcia-border-dark) !important;
color: var(--jcia-navy) !important;
}
.jcia-as .jcia-as__btn--outline:hover,
.jcia-as .jcia-as__btn--outline:focus {
background: var(--jcia-blue-soft) !important;
border-color: var(--jcia-blue) !important;
color: var(--jcia-blue) !important;
}
.jcia-as .jcia-as__btn--gold {
background: var(--jcia-gold) !important;
border-color: var(--jcia-gold) !important;
color: #ffffff !important;
}
.jcia-as .jcia-as__btn--gold:hover,
.jcia-as .jcia-as__btn--gold:focus {
background: var(--jcia-gold-dark) !important;
border-color: var(--jcia-gold-dark) !important;
}
/* =========================================================
5. HERO INFORMATION PANEL
========================================================= */
.jcia-as .jcia-as__hero-panel {
display: block !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid var(--jcia-border) !important;
border-radius: 6px !important;
background: var(--jcia-soft) !important;
color: var(--jcia-text) !important;
box-shadow: none !important;
overflow: hidden !important;
}
.jcia-as .jcia-as__panel-label {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 11px 14px !important;
background: var(--jcia-navy) !important;
color: #ffffff !important;
font-size: 10.5px !important;
line-height: 1.35 !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
}
.jcia-as .jcia-as__hero-stat {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 11px 14px !important;
background: #ffffff !important;
border-top: 1px solid var(--jcia-border) !important;
}
.jcia-as .jcia-as__hero-stat:first-of-type {
border-top: 0 !important;
}
.jcia-as .jcia-as__hero-stat strong {
display: block !important;
margin: 0 0 2px !important;
color: var(--jcia-navy) !important;
font-size: 13px !important;
line-height: 1.35 !important;
font-weight: 800 !important;
}
.jcia-as .jcia-as__hero-stat span {
display: block !important;
margin: 0 !important;
color: var(--jcia-muted) !important;
font-size: 12px !important;
line-height: 1.45 !important;
font-weight: 400 !important;
}
/* =========================================================
6. QUICK ACCESS BAR
========================================================= */
.jcia-as .jcia-as__quickbar {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
width: 100% !important;
max-width: none !important;
margin: 0 0 24px !important;
padding: 0 !important;
border: 1px solid var(--jcia-border) !important;
border-radius: 6px !important;
background: #ffffff !important;
overflow: hidden !important;
}
.jcia-as .jcia-as__quickbar a {
display: block !important;
width: 100% !important;
min-width: 0 !important;
min-height: 68px !important;
margin: 0 !important;
padding: 13px 14px !important;
background: #ffffff !important;
color: var(--jcia-text) !important;
border-right: 1px solid var(--jcia-border) !important;
transition:
background-color .18s ease,
color .18s ease !important;
}
.jcia-as .jcia-as__quickbar a:last-child {
border-right: 0 !important;
}
.jcia-as .jcia-as__quickbar a:hover,
.jcia-as .jcia-as__quickbar a:focus {
background: var(--jcia-blue-soft) !important;
}
.jcia-as .jcia-as__quickbar span {
display: block !important;
margin: 0 0 3px !important;
color: var(--jcia-gold-dark) !important;
font-size: 10px !important;
line-height: 1.3 !important;
font-weight: 800 !important;
}
.jcia-as .jcia-as__quickbar strong {
display: block !important;
margin: 0 !important;
color: var(--jcia-navy) !important;
font-size: 12px !important;
line-height: 1.4 !important;
font-weight: 700 !important;
}
/* =========================================================
7. COMMON SECTIONS
========================================================= */
.jcia-as .jcia-as__section {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 0 22px !important;
padding: 22px 24px !important;
background: var(--jcia-white) !important;
border: 1px solid var(--jcia-border) !important;
border-radius: 6px !important;
box-shadow: none !important;
overflow: hidden !important;
}
.jcia-as .jcia-as__section-head {
display: block !important;
width: 100% !important;
max-width: 780px !important;
margin: 0 0 22px !important;
padding: 0 !important;
}
.jcia-as .jcia-as__section-head h2,
.jcia-as .jcia-as__subheading {
display: block !important;
width: 100% !important;
margin: 0 0 10px !important;
padding: 0 0 9px !important;
color: var(--jcia-navy) !important;
font-size: 18px !important;
line-height: 1.3 !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: 0 !important;
border-bottom: 2px solid var(--jcia-gold) !important;
}
.jcia-as .jcia-as__section-head p {
display: block !important;
width: 100% !important;
max-width: 760px !important;
margin: 0 !important;
color: var(--jcia-muted) !important;
font-size: 14px !important;
line-height: 1.7 !important;
font-weight: 400 !important;
}
/* =========================================================
8. PUBLICATION JOURNEY
========================================================= */
.jcia-as .jcia-as__journey {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 12px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
.jcia-as .jcia-as__step {
position: relative !important;
display: block !important;
width: 100% !important;
min-width: 0 !important;
min-height: 250px !important;
margin: 0 !important;
padding: 18px !important;
background: #ffffff !important;
border: 1px solid var(--jcia-border) !important;
border-radius: 6px !important;
box-shadow: none !important;
transition:
border-color .18s ease,
background-color .18s ease,
transform .18s ease !important;
}
.jcia-as .jcia-as__step:hover {
z-index: 2 !important;
background: #fbfcfe !important;
border-color: var(--jcia-border-dark) !important;
transform: translateY(-1px) !important;
}
.jcia-as .jcia-as__step-no {
position: absolute !important;
top: 14px !important;
right: 14px !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 28px !important;
height: 28px !important;
margin: 0 !important;
padding: 0 !important;
border-radius: 50% !important;
background: var(--jcia-gold-soft) !important;
color: var(--jcia-gold-dark) !important;
font-size: 10.5px !important;
line-height: 1 !important;
font-weight: 800 !important;
}
.jcia-as .jcia-as__step-body {
display: block !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
.jcia-as .jcia-as__step-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 38px !important;
height: 38px !important;
margin: 0 0 28px !important;
padding: 0 !important;
border-radius: 50% !important;
border: 1px solid #d7e2f0 !important;
background: var(--jcia-blue-soft) !important;
color: var(--jcia-navy) !important;
font-size: 16px !important;
line-height: 1 !important;
font-weight: 800 !important;
}
.jcia-as .jcia-as__step h3 {
display: block !important;
margin: 0 0 7px !important;
padding: 0 !important;
color: var(--jcia-navy) !important;
font-size: 15px !important;
line-height: 1.35 !important;
font-weight: 800 !important;
}
.jcia-as .jcia-as__step p {
display: block !important;
min-height: 84px !important;
margin: 0 0 10px !important;
padding: 0 !important;
color: #455268 !important;
font-size: 13px !important;
line-height: 1.6 !important;
font-weight: 400 !important;
}
.jcia-as .jcia-as__step a {
display: inline !important;
color: var(--jcia-blue) !important;
font-size: 12.5px !important;
line-height: 1.45 !important;
font-weight: 700 !important;
}
.jcia-as .jcia-as__step a:hover,
.jcia-as .jcia-as__step a:focus {
color: var(--jcia-gold-dark) !important;
text-decoration: underline !important;
}
/* =========================================================
9. AUTHOR RESOURCE BAND
Converted from dark promotional area into JCIA-style section
========================================================= */
.jcia-as .jcia-as__band {
display: block !important;
width: 100% !important;
margin: 0 0 22px !important;
padding: 0 !important;
background: var(--jcia-soft) !important;
border: 1px solid var(--jcia-border) !important;
border-radius: 6px !important;
overflow: hidden !important;
}
.jcia-as .jcia-as__band-inner {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 22px 24px !important;
}
.jcia-as .jcia-as__band-head {
display: block !important;
width: 100% !important;
max-width: 780px !important;
margin: 0 0 22px !important;
padding: 0 !important;
}
.jcia-as .jcia-as__band-head h2 {
display: block !important;
margin: 0 !important;
padding: 0 0 9px !important;
color: var(--jcia-navy) !important;
font-size: 18px !important;
line-height: 1.3 !important;
font-weight: 800 !important;
text-transform: uppercase !important;
border-bottom: 2px solid var(--jcia-gold) !important;
}
.jcia-as .jcia-as__resource-grid {
display: grid !important;
grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
gap: 12px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.jcia-as .jcia-as__resource {
display: block !important;
width: 100% !important;
min-width: 0 !important;
min-height: 205px !important;
margin: 0 !important;
padding: 17px !important;
border: 1px solid var(--jcia-border) !important;
border-radius: 6px !important;
background: #ffffff !important;
color: var(--jcia-text) !important;
box-shadow: none !important;
transition:
border-color .18s ease,
background-color .18s ease,
transform .18s ease !important;
}
.jcia-as .jcia-as__resource:hover,
.jcia-as .jcia-as__resource:focus {
background: var(--jcia-blue-soft) !important;
border-color: #d2deed !important;
transform: translateY(-1px) !important;
}
.jcia-as .jcia-as__resource-kicker {
display: block !important;
margin: 0 0 28px !important;
color: var(--jcia-gold-dark) !important;
font-size: 10px !important;
line-height: 1.35 !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: .08em !important;
}
.jcia-as .jcia-as__resource h3 {
display: block !important;
margin: 0 0 7px !important;
color: var(--jcia-navy) !important;
font-size: 15px !important;
line-height: 1.35 !important;
font-weight: 800 !important;
}
.jcia-as .jcia-as__resource p {
display: block !important;
min-height: 62px !important;
margin: 0 0 10px !important;
color: #455268 !important;
font-size: 13px !important;
line-height: 1.6 !important;
font-weight: 400 !important;
}
.jcia-as .jcia-as__resource strong {
color: var(--jcia-blue) !important;
font-size: 12.5px !important;
line-height: 1.45 !important;
font-weight: 700 !important;
}
/* =========================================================
10. RESEARCH DOMAINS
========================================================= */
.jcia-as .jcia-as__domains {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
gap: 12px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.jcia-as .jcia-as__domains article {
display: block !important;
width: 100% !important;
min-width: 0 !important;
min-height: 220px !important;
margin: 0 !important;
padding: 17px !important;
background: #ffffff !important;
border: 1px solid var(--jcia-border) !important;
border-radius: 6px !important;
}
.jcia-as .jcia-as__domains article:hover {
background: #fbfcfe !important;
border-color: var(--jcia-border-dark) !important;
}
.jcia-as .jcia-as__domains article > span {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 28px !important;
height: 28px !important;
margin: 0 0 28px !important;
border-radius: 50% !important;
background: var(--jcia-blue-soft) !important;
color: var(--jcia-navy) !important;
font-size: 10px !important;
line-height: 1 !important;
font-weight: 800 !important;
}
.jcia-as .jcia-as__domains h3 {
display: block !important;
margin: 0 0 7px !important;
color: var(--jcia-navy) !important;
font-size: 14.5px !important;
line-height: 1.35 !important;
font-weight: 800 !important;
}
.jcia-as .jcia-as__domains p {
display: block !important;
margin: 0 !important;
color: #455268 !important;
font-size: 12.5px !important;
line-height: 1.6 !important;
font-weight: 400 !important;
}
.jcia-as .jcia-as__center {
display: block !important;
width: 100% !important;
margin: 20px 0 0 !important;
text-align: center !important;
}
.jcia-as .jcia-as__text-link {
display: inline !important;
color: var(--jcia-blue) !important;
font-size: 12.5px !important;
line-height: 1.45 !important;
font-weight: 700 !important;
}
.jcia-as .jcia-as__text-link:hover,
.jcia-as .jcia-as__text-link:focus {
color: var(--jcia-gold-dark) !important;
text-decoration: underline !important;
}
/* =========================================================
11. PUBLISHING TIMELINES
========================================================= */
.jcia-as .jcia-as__metrics-section {
display: block !important;
width: 100% !important;
margin: 0 0 22px !important;
padding: 0 !important;
background: #ffffff !important;
border: 1px solid var(--jcia-border) !important;
border-radius: 6px !important;
overflow: hidden !important;
}
.jcia-as .jcia-as__metrics-inner {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 22px 24px !important;
}
.jcia-as .jcia-as__section-head--light h2 {
color: var(--jcia-navy) !important;
}
.jcia-as .jcia-as__section-head--light p {
color: var(--jcia-muted) !important;
}
.jcia-as .jcia-as__metrics {
display: grid !important;
grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid var(--jcia-border) !important;
border-radius: 6px !important;
background: #ffffff !important;
overflow: hidden !important;
}
.jcia-as .jcia-as__metrics > div {
display: block !important;
width: 100% !important;
min-width: 0 !important;
min-height: 118px !important;
margin: 0 !important;
padding: 20px 16px !important;
background: #ffffff !important;
border-right: 1px solid var(--jcia-border) !important;
}
.jcia-as .jcia-as__metrics > div:last-child {
border-right: 0 !important;
}
.jcia-as .jcia-as__metrics strong {
display: block !important;
margin: 0 0 8px !important;
color: var(--jcia-navy) !important;
font-size: 21px !important;
line-height: 1.15 !important;
font-weight: 800 !important;
}
.jcia-as .jcia-as__metrics span {
display: block !important;
color: var(--jcia-muted) !important;
font-size: 12px !important;
line-height: 1.45 !important;
font-weight: 400 !important;
}
/* =========================================================
12. SUBMISSION READINESS + CALL FOR PAPERS
========================================================= */
.jcia-as .jcia-as__two-col {
display: grid !important;
grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr) !important;
gap: 26px !important;
align-items: start !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.jcia-as .jcia-as__checks {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 9px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.jcia-as .jcia-as__checks > div {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
justify-content: flex-start !important;
gap: 10px !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 10px 12px !important;
background: #ffffff !important;
border: 1px solid var(--jcia-border) !important;
border-radius: 6px !important;
}
.jcia-as .jcia-as__checks > div > span {
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 22px !important;
width: 22px !important;
min-width: 22px !important;
height: 22px !important;
margin: 1px 0 0 !important;
padding: 0 !important;
border-radius: 50% !important;
background: var(--jcia-gold) !important;
color: #ffffff !important;
font-size: 11px !important;
line-height: 1 !important;
font-weight: 800 !important;
}
.jcia-as .jcia-as__checks p {
display: block !important;
flex: 1 1 auto !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
color: var(--jcia-text) !important;
font-size: 13px !important;
line-height: 1.55 !important;
font-weight: 400 !important;
}
/* =========================================================
13. CALL FOR PAPERS CARD
========================================================= */
.jcia-as .jcia-as__cfp {
display: block !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 22px 24px !important;
background: var(--jcia-gold-soft) !important;
color: var(--jcia-text) !important;
border: 1px solid #efd58e !important;
border-radius: 6px !important;
box-shadow: none !important;
}
.jcia-as .jcia-as__cfp-tag {
display: inline-block !important;
margin: 0 0 28px !important;
padding: 5px 8px !important;
background: var(--jcia-gold) !important;
color: #ffffff !important;
border-radius: 4px !important;
font-size: 10px !important;
line-height: 1.3 !important;
font-weight: 800 !important;
text-transform: uppercase !important;
letter-spacing: .07em !important;
}
.jcia-as .jcia-as__cfp h3 {
display: block !important;
margin: 0 0 12px !important;
padding: 0 !important;
color: var(--jcia-navy) !important;
font-size: 23px !important;
line-height: 1.2 !important;
font-weight: 800 !important;
}
.jcia-as .jcia-as__cfp p {
display: block !important;
margin: 0 0 13px !important;
color: #455268 !important;
font-size: 13px !important;
line-height: 1.65 !important;
font-weight: 400 !important;
}
.jcia-as .jcia-as__cfp a {
display: inline !important;
color: var(--jcia-blue) !important;
font-size: 12.5px !important;
line-height: 1.45 !important;
font-weight: 700 !important;
}
.jcia-as .jcia-as__cfp a:hover,
.jcia-as .jcia-as__cfp a:focus {
color: var(--jcia-gold-dark) !important;
text-decoration: underline !important;
}
/* =========================================================
14. FAQ
========================================================= */
.jcia-as .jcia-as__faq-section {
display: block !important;
width: 100% !important;
margin: 0 0 22px !important;
padding: 0 !important;
background: var(--jcia-soft) !important;
border: 1px solid var(--jcia-border) !important;
border-radius: 6px !important;
overflow: hidden !important;
}
.jcia-as .jcia-as__faq-inner {
display: block !important;
width: 100% !important;
max-width: none !important;
margin: 0 !important;
padding: 22px 24px !important;
}
.jcia-as .jcia-as__faq {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
.jcia-as .jcia-as__faq details {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: 1px solid var(--jcia-border) !important;
border-radius: 6px !important;
background: #ffffff !important;
overflow: hidden !important;
}
.jcia-as .jcia-as__faq summary {
display: block !important;
width: 100% !important;
margin: 0 !important;
padding: 13px 42px 13px 15px !important;
color: var(--jcia-navy) !important;
font-size: 13px !important;
line-height: 1.5 !important;
font-weight: 700 !important;
cursor: pointer !important;
list-style: none !important;
position: relative !important;
}
.jcia-as .jcia-as__faq summary::-webkit-details-marker {
display: none !important;
}
.jcia-as .jcia-as__faq summary::after {
content: "+" !important;
position: absolute !important;
right: 15px !important;
top: 50% !important;
transform: translateY(-50%) !important;
color: var(--jcia-gold-dark) !important;
font-size: 18px !important;
line-height: 1 !important;
font-weight: 700 !important;
}
.jcia-as .jcia-as__faq details[open] summary::after {
content: "–" !important;
}
.jcia-as .jcia-as__faq details > div {
display: block !important;
margin: 0 !important;
padding: 0 15px 14px !important;
color: #455268 !important;
font-size: 13px !important;
line-height: 1.65 !important;
font-weight: 400 !important;
}
/* =========================================================
15. FINAL CTA
JCIA navy + gold accent
========================================================= */
.jcia-as .jcia-as__final {
display: grid !important;
grid-template-columns: minmax(0, 1fr) auto !important;
gap: 24px !important;
align-items: center !important;
width: 100% !important;
max-width: none !important;
margin: 0 0 20px !important;
padding: 22px 24px !important;
background: var(--jcia-navy) !important;
color: #ffffff !important;
border: 1px solid var(--jcia-navy) !important;
border-radius: 6px !important;
box-shadow: none !important;
}
.jcia-as .jcia-as__final .jcia-as__eyebrow {
color: var(--jcia-gold) !important;
}
.jcia-as .jcia-as__final h2 {
display: block !important;
margin: 0 0 6px !important;
padding: 0 !important;
color: #ffffff !important;
font-size: 20px !important;
line-height: 1.25 !important;
font-weight: 800 !important;
text-transform: uppercase !important;
}
.jcia-as .jcia-as__final p {
display: block !important;
margin: 0 !important;
color: #dce6f3 !important;
font-size: 13px !important;
line-height: 1.6 !important;
font-weight: 400 !important;
}
.jcia-as .jcia-as__final-actions {
width: auto !important;
margin: 0 !important;
justify-content: flex-end !important;
}
.jcia-as .jcia-as__final .jcia-as__btn--lime {
background: var(--jcia-gold) !important;
border-color: var(--jcia-gold) !important;
color: #ffffff !important;
}
.jcia-as .jcia-as__final .jcia-as__btn--lime:hover,
.jcia-as .jcia-as__final .jcia-as__btn--lime:focus {
background: var(--jcia-gold-dark) !important;
border-color: var(--jcia-gold-dark) !important;
}
.jcia-as .jcia-as__final .jcia-as__btn--outline {
background: transparent !important;
border-color: rgba(255,255,255,.45) !important;
color: #ffffff !important;
}
.jcia-as .jcia-as__final .jcia-as__btn--outline:hover,
.jcia-as .jcia-as__final .jcia-as__btn--outline:focus {
background: rgba(255,255,255,.08) !important;
border-color: #ffffff !important;
color: #ffffff !important;
}
/* =========================================================
16. LINK CONSISTENCY
========================================================= */
.jcia-as .jcia-as__step a,
.jcia-as .jcia-as__resource strong,
.jcia-as .jcia-as__text-link,
.jcia-as .jcia-as__cfp a {
transition: color .18s ease !important;
}
/* =========================================================
17. FOCUS / ACCESSIBILITY
========================================================= */
.jcia-as a:focus-visible,
.jcia-as summary:focus-visible {
outline: 2px solid var(--jcia-gold) !important;
outline-offset: 2px !important;
}
/* =========================================================
18. RESPONSIVE — TABLET
========================================================= */
@media (max-width: 900px) {
.jcia-as {
width: 100% !important;
max-width: 100% !important;
}
.jcia-as .jcia-as__hero-grid {
grid-template-columns: 1fr !important;
gap: 18px !important;
}
.jcia-as .jcia-as__hero-panel {
max-width: none !important;
}
.jcia-as .jcia-as__quickbar {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.jcia-as .jcia-as__quickbar a:nth-child(2) {
border-right: 0 !important;
}
.jcia-as .jcia-as__quickbar a:nth-child(-n+2) {
border-bottom: 1px solid var(--jcia-border) !important;
}
.jcia-as .jcia-as__journey {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.jcia-as .jcia-as__resource-grid {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.jcia-as .jcia-as__domains {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.jcia-as .jcia-as__metrics {
grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.jcia-as .jcia-as__metrics > div:nth-child(2) {
border-right: 0 !important;
}
.jcia-as .jcia-as__metrics > div:nth-child(-n+2) {
border-bottom: 1px solid var(--jcia-border) !important;
}
.jcia-as .jcia-as__two-col {
grid-template-columns: 1fr !important;
gap: 20px !important;
}
.jcia-as .jcia-as__final {
grid-template-columns: 1fr !important;
gap: 18px !important;
}
.jcia-as .jcia-as__final-actions {
width: 100% !important;
justify-content: flex-start !important;
}
}
/* =========================================================
19. RESPONSIVE — MOBILE
========================================================= */
@media (max-width: 650px) {
.jcia-as {
width: 100% !important;
padding: 0 !important;
}
.jcia-as .jcia-as__hero h1 {
font-size: 26px !important;
}
.jcia-as .jcia-as__hero-copy > p {
font-size: 14px !important;
line-height: 1.7 !important;
}
.jcia-as .jcia-as__actions,
.jcia-as .jcia-as__final-actions {
display: grid !important;
grid-template-columns: 1fr !important;
gap: 8px !important;
}
.jcia-as .jcia-as__btn {
width: 100% !important;
}
.jcia-as .jcia-as__quickbar {
grid-template-columns: 1fr !important;
}
.jcia-as .jcia-as__quickbar a {
border-right: 0 !important;
border-bottom: 1px solid var(--jcia-border) !important;
}
.jcia-as .jcia-as__quickbar a:last-child {
border-bottom: 0 !important;
}
.jcia-as .jcia-as__section,
.jcia-as .jcia-as__band-inner,
.jcia-as .jcia-as__metrics-inner,
.jcia-as .jcia-as__faq-inner,
.jcia-as .jcia-as__final {
padding: 20px 18px !important;
}
.jcia-as .jcia-as__section-head h2,
.jcia-as .jcia-as__band-head h2,
.jcia-as .jcia-as__subheading {
font-size: 17px !important;
}
.jcia-as .jcia-as__journey,
.jcia-as .jcia-as__resource-grid,
.jcia-as .jcia-as__domains,
.jcia-as .jcia-as__metrics {
grid-template-columns: 1fr !important;
}
.jcia-as .jcia-as__step,
.jcia-as .jcia-as__resource,
.jcia-as .jcia-as__domains article {
min-height: 0 !important;
}
.jcia-as .jcia-as__step p,
.jcia-as .jcia-as__resource p {
min-height: 0 !important;
}
.jcia-as .jcia-as__metrics > div {
min-height: 0 !important;
border-right: 0 !important;
border-bottom: 1px solid var(--jcia-border) !important;
}
.jcia-as .jcia-as__metrics > div:last-child {
border-bottom: 0 !important;
}
.jcia-as .jcia-as__cfp {
padding: 20px 18px !important;
}
.jcia-as .jcia-as__cfp h3 {
font-size: 20px !important;
}
.jcia-as .jcia-as__final h2 {
font-size: 18px !important;
}
}
/* =========================================================
20. VERY SMALL SCREENS
========================================================= */
@media (max-width: 420px) {
.jcia-as .jcia-as__hero h1 {
font-size: 24px !important;
}
.jcia-as .jcia-as__section,
.jcia-as .jcia-as__band-inner,
.jcia-as .jcia-as__metrics-inner,
.jcia-as .jcia-as__faq-inner,
.jcia-as .jcia-as__final {
padding-left: 15px !important;
padding-right: 15px !important;
}
.jcia-as .jcia-as__step,
.jcia-as .jcia-as__resource,
.jcia-as .jcia-as__domains article {
padding: 15px !important;
}
}
/* JCIA image responsive adjustments */
@media (max-width: 900px) {
.jcia-as figure.jcia-image > img,
.jcia-as .jcia-as__hero-image > img,
.jcia-as .jcia-image-wrap > img {
min-height: 220px !important;
max-height: 320px !important;
}
}
@media (max-width: 650px) {
.jcia-as .jcia-image,
.jcia-as .jcia-as__hero-image,
.jcia-as img.jcia-image {
border-radius: 5px !important;
}
.jcia-as figure.jcia-image > img,
.jcia-as .jcia-as__hero-image > img,
.jcia-as .jcia-image-wrap > img {
min-height: 190px !important;
max-height: 270px !important;
}
.jcia-as .jcia-image-caption,
.jcia-as .jcia-image figcaption {
padding: 8px 10px !important;
font-size: 11px !important;
}
}