/**
* JACODESMATH Official Theme
* Official Theme for Journal of Algebra Combinatorics Discrete Structures and Applications
* Copyright (c) 2026 JACODESMATH. All rights reserved.
*/
/* Modern, fast typography with local fallback stack */
html {
height: auto !important;
min-height: 100% !important;
overflow-x: clip;
}
body {
height: auto !important;
min-height: 100% !important;
position: relative !important;
}
.pkp_structure_page {
overflow: visible !important;
position: relative !important;
}
:root {
--tech-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
--tech-font-mono: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, monospace;
/* Primary Brand (JACODESMATH #2 Orijinal İpeksi Işık Kıvrımı Palette) */
--tech-primary: #0b6fae;
--tech-primary-hover: #084f7c;
--tech-primary-light: #1f95d5;
--tech-primary-rgb: 11, 111, 174;
--tech-accent: #1f95d5;
--tech-accent-rgb: 31, 149, 213;
--tech-cyan: #77d9f0;
/* Deep Navy & Tech Dark */
--tech-navy-dark: #06406e;
--tech-navy-mid: #09528a;
--tech-navy-surface: #0c6aab;
--tech-navy-card: #0a3f69;
/* Gradients */
--tech-gradient: linear-gradient(135deg, #002c40 0%, #006798 50%, #001f2e 100%);
--tech-gradient-dark: linear-gradient(135deg, #00141f 0%, #002c40 50%, #001f2e 100%);
--tech-gradient-hero: linear-gradient(135deg, #00141f 0%, #002c40 45%, #005a85 80%, #001f2e 100%);
--tech-gradient-card: linear-gradient(180deg, rgba(255, 255, 255, 0.08) 0%, rgba(255, 255, 255, 0.02) 100%);
--tech-subtle: #f0f7fb;
--tech-subtle-blue: #e0f2fe;
/* Grayscale & UI Surfaces */
--tech-bg: #f8fafc;
--tech-surface: #ffffff;
--tech-gray-50: #f8fafc;
--tech-gray-100: #f1f5f9;
--tech-gray-200: #e2e8f0;
--tech-gray-300: #cbd5e1;
--tech-gray-400: #94a3b8;
--tech-gray-600: #475569;
--tech-gray-700: #334155;
--tech-gray-800: #1e293b;
--tech-gray-900: #0f172a;
/* Shadows & Elevations */
--tech-shadow-2xs: 0 1px 2px 0 rgba(3, 54, 146, 0.04);
--tech-shadow-sm: 0 2px 5px 0 rgba(3, 54, 146, 0.06);
--tech-shadow: 0 6px 16px -2px rgba(3, 54, 146, 0.08), 0 2px 6px -1px rgba(0, 0, 0, 0.04);
--tech-shadow-lg: 0 14px 30px -4px rgba(3, 54, 146, 0.12), 0 6px 12px -3px rgba(0, 0, 0, 0.06);
--tech-shadow-xl: 0 22px 42px -6px rgba(3, 54, 146, 0.18), 0 12px 18px -4px rgba(0, 0, 0, 0.08);
/* Radius */
--tech-radius-sm: 0.45rem;
--tech-radius: 0.75rem;
--tech-radius-lg: 1rem;
--tech-radius-xl: 1.5rem;
}
/* Base resets & typography with JACODESMATH Silk Caustic Helix Motif */
body {
font-family: var(--tech-font);
color: var(--tech-gray-800);
background-color: #f7f9fc !important;
background-image:
url("data:image/svg+xml,"),
radial-gradient(ellipse at 50% 0%, rgba(3, 54, 146, 0.02) 0%, transparent 75%) !important;
background-attachment: fixed !important;
background-repeat: repeat, no-repeat !important;
background-size: 400px 600px, 100% 100% !important;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Ensure structure wrappers are transparent so fixed body background shines through */
.pkp_structure_page,
.pkp_structure_main,
.pkp_structure_content {
background: transparent !important;
background-color: transparent !important;
}
::selection {
background-color: var(--tech-primary);
color: #ffffff;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: var(--tech-gray-100);
}
::-webkit-scrollbar-thumb {
background: var(--tech-gray-300);
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--tech-primary);
}
/* ==========================================================================
PAGE LAYOUT & CONTAINER (Balanced side margins & comfortable reading width)
========================================================================== */
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
width: 100%;
padding-right: 1.25rem !important;
padding-left: 1.25rem !important;
margin-right: auto;
margin-left: auto;
}
@media (min-width: 1200px) {
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
max-width: 1180px !important;
padding-right: 1.5rem !important;
padding-left: 1.5rem !important;
}
}
@media (min-width: 1400px) {
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
max-width: 1300px !important;
padding-right: 1.75rem !important;
padding-left: 1.75rem !important;
}
}
@media (min-width: 1600px) {
.container,
.container-sm,
.container-md,
.container-lg,
.container-xl,
.container-xxl {
max-width: 1340px !important;
padding-right: 2rem !important;
padding-left: 2rem !important;
}
}
/* ==========================================================================
1. TOP BAR
========================================================================== */
.tech-top-bar {
background: var(--tech-navy-dark);
color: #a0aec0;
font-size: 0.8125rem;
padding: 0.45rem 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.tech-top-bar a {
color: #cbd5e1;
text-decoration: none;
transition: all 0.2s ease;
}
.tech-top-bar a:hover {
color: #ffffff;
}
.tech-top-bar .issn-badge {
display: inline-flex;
align-items: center;
gap: 0.35rem;
padding: 0.15rem 0.55rem;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 0.35rem;
color: #ffffff;
font-size: 0.775rem;
font-family: var(--tech-font-mono);
transition: all 0.2s ease;
}
.tech-top-bar a.issn-badge:hover {
background: rgba(255, 255, 255, 0.18);
border-color: rgba(255, 255, 255, 0.35);
color: #ffffff;
transform: translateY(-1px);
}
/* ==========================================================================
2. MAIN HEADER & NAVBAR (Sticky / Fixed on Scroll with Colored Bottom Border)
========================================================================== */
.tech-navbar {
background: rgba(255, 255, 255, 0.98);
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 4px 18px rgba(3, 54, 146, 0.1);
padding: 0.75rem 0;
border-bottom: 3px solid var(--tech-primary);
border-image: linear-gradient(90deg, #033692 0%, #00b4d8 50%, #033692 100%) 1;
transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
position: -webkit-sticky !important;
position: sticky !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1040 !important;
}
.tech-navbar.is-fixed,
.tech-navbar.is-sticky {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 9999 !important;
box-shadow: 0 8px 24px rgba(3, 54, 146, 0.16) !important;
background: rgba(255, 255, 255, 0.98) !important;
border-bottom: 3px solid var(--tech-primary) !important;
border-image: linear-gradient(90deg, #033692 0%, #00b4d8 50%, #033692 100%) 1 !important;
padding: 0.45rem 0 !important;
}
.tech-brand {
display: flex;
align-items: center;
gap: 0.75rem;
text-decoration: none;
color: var(--tech-gray-900);
flex-shrink: 0;
}
.tech-brand-logo {
height: 58px;
width: 58px;
border-radius: 12px;
padding: 3px;
background: #ffffff;
border: 1.5px solid rgba(var(--tech-primary-rgb), 0.15);
box-shadow: 0 3px 10px rgba(0, 44, 64, 0.1);
object-fit: contain;
flex-shrink: 0;
transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.tech-brand:hover .tech-brand-logo {
transform: scale(1.05);
box-shadow: 0 4px 14px rgba(2, 132, 199, 0.25);
border-color: var(--tech-accent);
}
.tech-brand-info {
display: flex;
flex-direction: column;
justify-content: center;
}
.tech-brand-initials {
font-size: 1.75rem;
font-weight: 900;
color: var(--tech-primary);
line-height: 1.05;
letter-spacing: 0.03em;
text-transform: uppercase;
margin-bottom: 0.15rem;
display: block;
transition: color 0.2s ease;
}
.tech-brand:hover .tech-brand-initials {
color: var(--tech-primary-hover);
}
.tech-brand-title {
font-family: var(--tech-font);
font-size: 1.05rem;
font-weight: 800;
color: var(--tech-primary);
line-height: 1.25;
letter-spacing: -0.015em;
display: block;
white-space: normal;
transition: color 0.2s ease;
}
.tech-brand:hover .tech-brand-title {
color: var(--tech-primary-hover);
}
@media (max-width: 1199.98px) {
.tech-brand-title {
font-size: 0.98rem;
}
}
@media (max-width: 991.98px) {
.tech-brand-title {
white-space: normal;
font-size: 0.92rem;
}
}
.tech-brand-name {
font-size: 1.15rem;
font-weight: 800;
color: var(--tech-gray-900);
letter-spacing: -0.02em;
line-height: 1.25;
margin-bottom: 0.1rem;
}
.tech-brand:hover .tech-brand-name {
color: var(--tech-primary);
}
.tech-brand-tagline {
font-size: 0.75rem;
font-weight: 600;
color: var(--tech-gray-600);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.tech-brand-acronym {
background: var(--tech-gradient);
color: #ffffff;
font-size: 0.825rem;
font-weight: 800;
letter-spacing: 0.06em;
padding: 0.35rem 0.8rem;
border-radius: 0.5rem;
box-shadow: 0 3px 8px rgba(var(--tech-primary-rgb), 0.3);
display: inline-flex;
align-items: center;
justify-content: center;
line-height: 1;
text-transform: uppercase;
border: 1px solid rgba(255, 255, 255, 0.25);
transition: all 0.2s ease;
}
/* Nav Menu links */
.tech-nav .nav-link {
font-family: var(--tech-font);
font-size: 0.9rem;
font-weight: 600;
color: var(--tech-gray-700);
padding: 0.55rem 0.9rem !important;
border-radius: var(--tech-radius-sm);
text-transform: none;
letter-spacing: 0.01em;
transition: all 0.2s ease;
position: relative;
}
.tech-nav .nav-link:hover,
.tech-nav .nav-link:focus,
.tech-nav .nav-link.active,
.tech-nav .nav-item.active .nav-link {
color: var(--tech-primary);
background-color: var(--tech-subtle);
}
.tech-nav .nav-link.active::after,
.tech-nav .nav-item.active .nav-link::after {
content: '';
position: absolute;
bottom: 0;
left: 20%;
right: 20%;
height: 3px;
background: var(--tech-primary);
border-radius: 3px 3px 0 0;
}
@media (min-width: 992px) {
.tech-nav .nav-item.dropdown:hover > .dropdown-menu {
display: block !important;
margin-top: 0;
}
/* When hovering over the navbar on desktop, immediately hide all non-hovered dropdown menus */
.tech-nav:hover .nav-item.dropdown:not(:hover) > .dropdown-menu {
display: none !important;
}
}
.tech-nav .dropdown-menu {
border: 1px solid var(--tech-gray-200);
border-radius: var(--tech-radius);
box-shadow: var(--tech-shadow-lg);
padding: 0.6rem;
min-width: 14rem;
animation: techFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.tech-nav .dropdown-item {
font-family: var(--tech-font);
font-size: 0.86rem;
font-weight: 600;
color: var(--tech-gray-700);
padding: 0.55rem 0.85rem;
border-radius: 0.4rem;
transition: all 0.15s ease;
}
.tech-nav .dropdown-item:hover {
background-color: var(--tech-subtle);
color: var(--tech-primary);
transform: translateX(3px);
}
@keyframes techFadeIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
/* Search Button in Navbar (JOCSTEC circular pill style) */
.btn-tech-search-nav {
display: inline-flex;
align-items: center;
justify-content: center;
width: 38px;
height: 38px;
border-radius: 50%;
background-color: #f0f6ff;
color: var(--tech-primary);
border: 1.5px solid #c8dcf7;
font-size: 0.95rem;
text-decoration: none;
transition: all 0.2s ease;
}
.btn-tech-search-nav:hover {
background-color: var(--tech-primary);
color: #ffffff;
border-color: var(--tech-primary);
box-shadow: 0 4px 10px rgba(var(--tech-primary-rgb), 0.25);
transform: translateY(-1px);
}
/* Logged-In User Navigation Dropdown */
.btn-tech-user {
background-color: #f0f6ff;
border: 1.5px solid #c8dcf7;
color: var(--tech-primary);
font-size: 0.85rem;
font-weight: 700;
border-radius: 50rem;
padding: 0.28rem 0.95rem 0.28rem 0.4rem;
transition: all 0.2s ease;
}
.btn-tech-user:hover,
.btn-tech-user:focus {
background-color: #ffffff;
border-color: var(--tech-primary);
box-shadow: var(--tech-shadow-sm);
color: var(--tech-primary);
}
.tech-user-avatar-badge {
width: 28px;
height: 28px;
border-radius: 50%;
background: var(--tech-gradient);
color: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.825rem;
}
.tech-user-name {
font-size: 0.85rem;
font-weight: 700;
}
.tech-user-dropdown-menu {
min-width: 230px;
border-radius: var(--tech-radius);
box-shadow: var(--tech-shadow-xl);
padding: 0;
overflow: hidden;
margin-top: 0.5rem !important;
}
.tech-user-dropdown-menu .dropdown-item {
font-size: 0.825rem;
font-weight: 600;
color: var(--tech-gray-700);
transition: all 0.15s ease;
}
.tech-user-dropdown-menu .dropdown-item:hover {
background-color: var(--tech-subtle);
color: var(--tech-primary);
transform: translateX(3px);
}
/* Guest Navigation Buttons (Exact Pill style from JOCSTEC) */
.btn-tech-login-btn {
background-color: #eef5ff;
color: var(--tech-primary);
border: 1.5px solid #c8dcf7;
font-weight: 700;
font-size: 0.875rem;
border-radius: 50rem;
padding: 0.38rem 1.15rem;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.45rem;
transition: all 0.2s ease;
}
.btn-tech-login-btn:hover {
background-color: var(--tech-primary);
color: #ffffff;
border-color: var(--tech-primary);
box-shadow: 0 4px 10px rgba(var(--tech-primary-rgb), 0.25);
transform: translateY(-1px);
}
.btn-tech-register-btn {
background-color: #ffffff;
color: var(--tech-primary);
border: 1.5px solid #cdd8e6;
font-weight: 700;
font-size: 0.875rem;
border-radius: 50rem;
padding: 0.38rem 1.15rem;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.45rem;
transition: all 0.2s ease;
}
.btn-tech-register-btn:hover {
background-color: #f8fafc;
color: var(--tech-primary-hover);
border-color: var(--tech-primary);
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.08);
transform: translateY(-1px);
}
/* User & Action Buttons */
.btn-tech-outline {
background-color: var(--tech-subtle);
color: var(--tech-primary);
border: 1px solid rgba(var(--tech-primary-rgb), 0.25);
font-weight: 700;
font-size: 0.85rem;
border-radius: 2rem;
padding: 0.45rem 1.15rem;
transition: all 0.2s ease;
}
.btn-tech-outline:hover {
background-color: var(--tech-primary);
color: #ffffff;
box-shadow: 0 4px 10px rgba(var(--tech-primary-rgb), 0.25);
}
.btn-tech-primary {
background: var(--tech-gradient);
color: #ffffff;
border: none;
font-weight: 700;
font-size: 0.85rem;
border-radius: 2rem;
padding: 0.45rem 1.25rem;
box-shadow: 0 4px 12px rgba(var(--tech-primary-rgb), 0.3);
transition: all 0.2s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.btn-tech-primary:hover {
filter: brightness(1.1);
color: #ffffff;
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(var(--tech-primary-rgb), 0.4);
}
/* ==========================================================================
3. HERO SECTION (JACODESMATH #2 Orijinal İpeksi Işık Kıvrımı)
========================================================================== */
.tech-hero {
background: linear-gradient(135deg, #06406e 0%, #0c6aab 42%, #1f95d5 78%, #09528a 100%);
position: relative;
overflow: hidden;
padding: 52px 0 68px;
color: #ffffff;
border-bottom: 2px solid rgba(255, 255, 255, 0.14);
}
/* Ambient Radial Light Glows */
.tech-hero-orb {
position: absolute;
border-radius: 50%;
filter: blur(65px);
pointer-events: none;
opacity: 0.55;
z-index: 0;
animation: techOrbFloat 14s ease-in-out infinite alternate;
}
.tech-hero-orb-1 {
width: 480px;
height: 480px;
top: -150px;
right: 5%;
background: radial-gradient(circle, rgba(0, 180, 216, 0.35) 0%, transparent 70%);
}
.tech-hero-orb-2 {
width: 420px;
height: 420px;
bottom: -180px;
left: 10%;
background: radial-gradient(circle, rgba(2, 132, 199, 0.35) 0%, transparent 70%);
animation-delay: -5s;
}
.tech-hero-orb-3 {
width: 320px;
height: 320px;
top: 30%;
right: 35%;
background: radial-gradient(circle, rgba(56, 189, 248, 0.22) 0%, transparent 70%);
animation-delay: -9s;
}
/* Interactive Mathematical Waves & Constellation Canvas */
.tech-hero-canvas {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
/* 1. Glowing Ambient Lighting Orbs */
.tech-hero-orb {
position: absolute;
border-radius: 50%;
pointer-events: none;
will-change: transform;
z-index: 0;
}
.tech-hero-orb-1 {
width: 480px;
height: 480px;
background: radial-gradient(circle, rgba(0, 180, 216, 0.3) 0%, rgba(0, 180, 216, 0.08) 50%, transparent 70%);
top: -120px;
right: -80px;
filter: blur(45px);
animation: techOrbFloat1 11s ease-in-out infinite alternate;
}
.tech-hero-orb-2 {
width: 420px;
height: 420px;
background: radial-gradient(circle, rgba(3, 54, 146, 0.5) 0%, rgba(30, 64, 175, 0.18) 50%, transparent 70%);
bottom: -100px;
left: -60px;
filter: blur(50px);
animation: techOrbFloat2 14s ease-in-out infinite alternate;
}
.tech-hero-orb-3 {
width: 360px;
height: 360px;
background: radial-gradient(circle, rgba(129, 140, 248, 0.22) 0%, rgba(56, 189, 248, 0.1) 45%, transparent 70%);
top: 30%;
left: 35%;
filter: blur(45px);
animation: techOrbFloat3 16s ease-in-out infinite;
}
/* 7. Floating Glowing Tech Data Particles */
.tech-hero-particles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
z-index: 1;
}
.tech-hero-particles .particle {
position: absolute;
border-radius: 50%;
pointer-events: none;
opacity: 0;
animation: techParticleFloat 10s ease-in-out infinite;
}
.tech-hero-particles .p-1 {
width: 4px;
height: 4px;
left: 6%;
bottom: -10px;
background: #38bdf8;
box-shadow: 0 0 10px #38bdf8;
animation-duration: 8.5s;
animation-delay: 0s;
}
.tech-hero-particles .p-2 {
width: 6px;
height: 6px;
left: 18%;
bottom: -10px;
background: #00b4d8;
box-shadow: 0 0 14px #00b4d8;
animation-duration: 11s;
animation-delay: 2s;
}
.tech-hero-particles .p-3 {
width: 3px;
height: 3px;
left: 28%;
bottom: -10px;
background: #a5f3fc;
box-shadow: 0 0 8px #a5f3fc;
animation-duration: 8s;
animation-delay: 4s;
}
.tech-hero-particles .p-4 {
width: 5px;
height: 5px;
left: 38%;
bottom: -10px;
background: #60a5fa;
box-shadow: 0 0 10px #60a5fa;
animation-duration: 10.5s;
animation-delay: 1s;
}
.tech-hero-particles .p-5 {
width: 4px;
height: 4px;
left: 48%;
bottom: -10px;
background: #818cf8;
box-shadow: 0 0 10px #818cf8;
animation-duration: 12.5s;
animation-delay: 4.8s;
}
.tech-hero-particles .p-6 {
width: 6px;
height: 6px;
left: 58%;
bottom: -10px;
background: #2dd4bf;
box-shadow: 0 0 14px #2dd4bf;
animation-duration: 9.5s;
animation-delay: 2.8s;
}
.tech-hero-particles .p-7 {
width: 3px;
height: 3px;
left: 68%;
bottom: -10px;
background: #a5f3fc;
box-shadow: 0 0 8px #a5f3fc;
animation-duration: 13.5s;
animation-delay: 6s;
}
.tech-hero-particles .p-8 {
width: 5px;
height: 5px;
left: 78%;
bottom: -10px;
background: #f0abfc;
box-shadow: 0 0 12px #f0abfc;
animation-duration: 10s;
animation-delay: 3.5s;
}
.tech-hero-particles .p-9 {
width: 4px;
height: 4px;
left: 86%;
bottom: -10px;
background: #38bdf8;
box-shadow: 0 0 10px #38bdf8;
animation-duration: 9s;
animation-delay: 1.5s;
}
.tech-hero-particles .p-10 {
width: 6px;
height: 6px;
left: 94%;
bottom: -10px;
background: #00b4d8;
box-shadow: 0 0 14px #00b4d8;
animation-duration: 11.5s;
animation-delay: 5.2s;
}
.tech-hero-particles .p-11 {
width: 5px;
height: 5px;
left: 12%;
bottom: -10px;
background: #2dd4bf;
box-shadow: 0 0 10px #2dd4bf;
animation-duration: 10s;
animation-delay: 6.8s;
}
.tech-hero-particles .p-12 {
width: 3px;
height: 3px;
left: 82%;
bottom: -10px;
background: #c084fc;
box-shadow: 0 0 8px #c084fc;
animation-duration: 12s;
animation-delay: 7.2s;
}
/* Ensure Hero Content is Above Background Effects */
.tech-hero-content {
position: relative;
z-index: 2;
}
/* ==========================================================================
HERO KEYFRAME ANIMATIONS
========================================================================== */
@keyframes techHeroGradient {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes techCircuitDrift {
0% {
background-position: 0 0;
}
100% {
background-position: 180px 180px;
}
}
@keyframes techHudRotateClockwise {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(360deg);
}
}
@keyframes techHudRotateCounter {
0% {
transform: translate(-50%, -50%) rotate(0deg);
}
100% {
transform: translate(-50%, -50%) rotate(-360deg);
}
}
@keyframes techBeamShoot {
0% {
transform: translate3d(0, 0, 0) rotate(-35deg);
opacity: 0;
}
12% {
opacity: 0.95;
}
45% {
transform: translate3d(1400px, 980px, 0) rotate(-35deg);
opacity: 0;
}
100% {
transform: translate3d(1400px, 980px, 0) rotate(-35deg);
opacity: 0;
}
}
@keyframes techGridScroll {
0% {
background-position: 0 0;
}
100% {
background-position: 0 36px;
}
}
@keyframes techScanSweep {
0% {
left: -100%;
opacity: 0;
}
15% {
opacity: 1;
}
55% {
left: 200%;
opacity: 0.9;
}
56%, 100% {
left: 200%;
opacity: 0;
}
}
@keyframes techOrbFloat1 {
0% {
transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}
33% {
transform: translate3d(-35px, 25px, 0) scale(1.08) rotate(4deg);
}
66% {
transform: translate3d(20px, 45px, 0) scale(0.95) rotate(-3deg);
}
100% {
transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
}
}
@keyframes techOrbFloat2 {
0% {
transform: translate3d(0, 0, 0) scale(1);
}
33% {
transform: translate3d(45px, -30px, 0) scale(1.12);
}
66% {
transform: translate3d(-25px, -45px, 0) scale(0.92);
}
100% {
transform: translate3d(0, 0, 0) scale(1);
}
}
@keyframes techOrbFloat3 {
0% {
transform: translate3d(0, 0, 0) scale(0.85);
opacity: 0.45;
}
50% {
transform: translate3d(-40px, -20px, 0) scale(1.15);
opacity: 0.75;
}
100% {
transform: translate3d(0, 0, 0) scale(0.85);
opacity: 0.45;
}
}
@keyframes techParticleFloat {
0% {
transform: translateY(0) scale(0.5);
opacity: 0;
}
20% {
opacity: 0.8;
}
50% {
transform: translateY(-130px) translateX(25px) scale(1);
opacity: 0.9;
}
80% {
opacity: 0.4;
}
100% {
transform: translateY(-260px) translateX(-20px) scale(0.4);
opacity: 0;
}
}
@keyframes techCardFloat {
0% {
transform: translateY(0);
}
100% {
transform: translateY(-8px);
}
}
.tech-hero-badge {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.22);
color: #ffffff;
padding: 0.3rem 0.8rem;
border-radius: 2rem;
font-family: var(--tech-font);
font-size: 0.775rem;
font-weight: 700;
display: inline-flex;
align-items: center;
gap: 0.4rem;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
transition: all 0.2s ease;
}
.tech-hero-badge:hover {
background: rgba(255, 255, 255, 0.2);
border-color: rgba(255, 255, 255, 0.45);
transform: translateY(-1px);
}
.tech-hero-title {
font-family: var(--tech-font);
font-size: 2.15rem;
font-weight: 800;
letter-spacing: -0.03em;
line-height: 1.2;
margin-bottom: 0.75rem;
color: #ffffff;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.tech-hero-title .highlight {
background: linear-gradient(135deg, #ffffff 0%, #a5f3fc 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.tech-hero-desc {
font-family: var(--tech-font);
font-size: 0.95rem;
line-height: 1.6;
color: #e2e8f0;
max-width: 620px;
}
/* ==========================================================================
CONCEPT 1: 3D FLOATING BOOK SHOWCASE (NO DARK BOX CONTAINER)
========================================================================== */
.tech-hero-book-showcase {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 0.5rem;
}
.tech-book-aura-wrap {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
}
.tech-book-aura-wrap::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 125%;
height: 120%;
background: radial-gradient(circle, rgba(0, 212, 255, 0.32) 0%, rgba(12, 106, 171, 0.12) 55%, transparent 75%);
filter: blur(28px);
pointer-events: none;
z-index: 0;
transition: all 0.4s ease;
}
.tech-book-aura-wrap:hover::before {
width: 145%;
height: 135%;
background: radial-gradient(circle, rgba(0, 225, 255, 0.48) 0%, rgba(12, 106, 171, 0.22) 55%, transparent 75%);
filter: blur(34px);
}
.tech-book-3d {
position: relative;
display: inline-block;
width: 250px;
aspect-ratio: 864 / 1225;
border-radius: 4px 10px 10px 4px;
overflow: hidden;
box-shadow:
-10px 0 20px rgba(0, 18, 42, 0.4),
-16px 20px 40px rgba(0, 18, 42, 0.55),
0 24px 44px rgba(0, 18, 42, 0.38);
transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease;
text-decoration: none;
animation: techBookFloat 6s ease-in-out infinite alternate;
}
.tech-book-3d:hover {
transform: translateY(-8px) scale(1.02);
box-shadow:
-14px 0 24px rgba(0, 18, 42, 0.5),
-20px 28px 48px rgba(0, 18, 42, 0.65),
0 32px 56px rgba(0, 18, 42, 0.48),
0 0 28px rgba(0, 212, 255, 0.4);
}
.tech-book-cover {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 4px 10px 10px 4px;
}
/* Doğal ve İnce Sol Cilt Kenarı: Yazılara taşmayan, sadece sol sınırda 8px mikro kıvrım */
.tech-book-crease {
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 8px;
background: linear-gradient(
to right,
rgba(0, 0, 0, 0.35) 0%,
rgba(255, 255, 255, 0.22) 40%,
transparent 100%
);
pointer-events: none;
z-index: 2;
border-radius: 4px 0 0 4px;
}
/* Sol dış sınırın pürüzsüz cilt derinliği */
.tech-book-3d::after {
content: '';
position: absolute;
top: 0;
left: 0;
bottom: 0;
width: 2px;
background: rgba(255, 255, 255, 0.25);
box-shadow: inset 1px 0 2px rgba(0, 0, 0, 0.4);
pointer-events: none;
z-index: 3;
}
@keyframes techBookFloat {
0% { transform: translateY(0); }
100% { transform: translateY(-7px); }
}
.tech-book-info {
margin-top: 0.85rem;
text-align: center;
}
.tech-book-badge {
display: inline-block;
padding: 0.32rem 1.15rem;
border-radius: 2rem;
background: #0284c7;
color: #ffffff;
font-family: var(--tech-font);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.05em;
box-shadow: 0 4px 12px rgba(2, 132, 199, 0.35);
transition: all 0.2s ease;
}
.tech-book-badge:hover {
background: #0369a1;
transform: translateY(-1px);
}
.tech-book-title {
font-family: var(--tech-font);
font-size: 1.25rem;
font-weight: 700;
letter-spacing: -0.01em;
margin-top: 0.35rem;
text-shadow: 0 2px 8px rgba(0, 24, 52, 0.4);
}
.tech-book-meta {
font-family: var(--tech-font);
font-size: 0.84rem;
color: rgba(200, 230, 255, 0.85);
text-shadow: 0 1px 4px rgba(0, 24, 52, 0.35);
}
.btn-hero-cta-main {
background: #ffffff;
color: var(--tech-primary);
font-family: var(--tech-font);
font-weight: 700;
padding: 0.55rem 1.4rem;
border-radius: 2rem;
border: none;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
transition: all 0.25s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
letter-spacing: 0.01em;
}
.btn-hero-cta-main:hover {
color: var(--tech-navy-dark);
transform: translateY(-2px);
box-shadow: 0 10px 24px rgba(0, 0, 0, 0.35);
background: #f8fafc;
}
.btn-hero-cta-outline {
background: rgba(255, 255, 255, 0.12);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: #ffffff;
font-family: var(--tech-font);
font-weight: 600;
padding: 0.55rem 1.25rem;
border-radius: 2rem;
border: 1px solid rgba(255, 255, 255, 0.35);
transition: all 0.25s ease;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
}
.btn-hero-cta-outline:hover {
background: rgba(255, 255, 255, 0.25);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.65);
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
}
/* Right Side: Futuristic Tech Graphic & Floating Issue Showcase */
.tech-showcase-card {
background: rgba(255, 255, 255, 0.96);
border-radius: var(--tech-radius-lg);
padding: 1.15rem;
box-shadow: 0 18px 36px -8px rgba(2, 19, 48, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.6);
backdrop-filter: blur(16px);
color: var(--tech-gray-900);
transition: all 0.35s ease;
position: relative;
animation: techCardFloat 6s ease-in-out infinite alternate;
will-change: transform;
}
.tech-showcase-card:hover {
transform: translateY(-8px);
box-shadow: 0 26px 48px -8px rgba(2, 19, 48, 0.52), 0 0 0 2px rgba(0, 180, 216, 0.5);
animation-play-state: paused;
}
.tech-showcase-cover-wrapper {
background: #ffffff;
border-radius: var(--tech-radius);
padding: 0.25rem;
border: 1px solid var(--tech-gray-200);
display: flex;
align-items: center;
justify-content: center;
max-height: 210px;
overflow: hidden;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.08);
}
.tech-showcase-cover {
border-radius: calc(var(--tech-radius) - 2px);
max-height: 200px;
max-width: 100%;
width: auto;
height: auto;
object-fit: contain !important;
display: block;
margin: 0 auto;
}
.tech-showcase-fallback {
background: var(--tech-gradient);
border-radius: var(--tech-radius);
height: 160px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: #ffffff;
text-align: center;
padding: 1rem;
}
.tech-showcase-title {
font-size: 0.8125rem;
font-weight: 700;
line-height: 1.35;
color: var(--tech-gray-900);
margin-bottom: 0.4rem;
text-align: center;
}
.tech-showcase-title a {
color: var(--tech-gray-900);
text-decoration: none;
transition: color 0.2s ease;
}
.tech-showcase-title a:hover {
color: var(--tech-primary);
}
/* Tech Category Pills in Hero */
.tech-pill-grid {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: 1rem;
}
.tech-pill {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #e2e8f0;
font-size: 0.725rem;
font-weight: 600;
padding: 0.25rem 0.65rem;
border-radius: 1rem;
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
/* Legacy Sticky Bar Guard (Removed in modern theme) */
#jacodes-article-sticky-bar,
.jacodes-article-sticky-bar {
display: none !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* ==========================================================================
4. LIVE METRICS COUNTER BAR (5-BOX LAYOUT + TOOLTIPS)
========================================================================== */
.tech-metrics-bar {
margin-top: -2.85rem;
position: relative;
z-index: 25;
margin-bottom: 2.5rem;
}
.tech-metrics-grid-5 {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 0.85rem;
}
@media (max-width: 1199.98px) {
.tech-metrics-grid-5 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}
@media (max-width: 767.98px) {
.tech-metrics-grid-5 {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 479.98px) {
.tech-metrics-grid-5 {
grid-template-columns: 1fr;
}
}
.tech-metric-card {
background: #ffffff;
border-radius: var(--tech-radius);
border: 2px solid var(--tech-primary) !important;
padding: 0.9rem 1.05rem;
box-shadow: 0 4px 14px rgba(3, 54, 146, 0.08);
display: flex;
align-items: center;
gap: 0.85rem;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: visible;
}
.tech-metric-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(3, 54, 146, 0.2);
border-color: var(--tech-primary-hover) !important;
z-index: 30;
}
.tech-metric-icon {
width: 44px;
height: 44px;
border-radius: 0.7rem;
background: var(--tech-subtle);
color: var(--tech-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.3rem;
flex-shrink: 0;
box-shadow: inset 0 0 0 1px rgba(var(--tech-primary-rgb), 0.15);
}
.tech-metric-value {
font-size: 1.5rem;
font-weight: 800;
color: var(--tech-gray-900);
line-height: 1.1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.tech-metric-label {
font-size: 0.65rem;
font-weight: 700;
color: var(--tech-gray-600);
text-transform: uppercase;
letter-spacing: 0.03em;
line-height: 1.25;
margin-top: 0.35rem;
}
/* Info Icon & Hover Tooltip */
.tech-metric-info {
position: absolute;
top: 7px;
right: 9px;
color: #64748b;
font-size: 0.86rem;
line-height: 1;
cursor: pointer;
transition: color 0.15s ease, transform 0.15s ease;
z-index: 5;
}
.tech-metric-info:hover,
.tech-metric-info:focus {
color: var(--tech-primary);
outline: none;
}
.tech-metric-info::after {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 9px);
right: -6px;
width: 245px;
background: #0f172a;
color: #f8fafc;
font-family: var(--tech-font);
font-size: 0.72rem;
font-weight: 500;
line-height: 1.42;
text-transform: none;
letter-spacing: normal;
padding: 0.6rem 0.75rem;
border-radius: 0.55rem;
box-shadow: 0 10px 25px rgba(15, 23, 42, 0.28);
border: 1px solid rgba(255, 255, 255, 0.14);
opacity: 0;
visibility: hidden;
transform: translateY(4px);
transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
pointer-events: none;
z-index: 50;
}
.tech-metric-info::before {
content: '';
position: absolute;
bottom: calc(100% + 4px);
right: 3px;
width: 9px;
height: 9px;
background: #0f172a;
transform: rotate(45deg);
border-right: 1px solid rgba(255, 255, 255, 0.14);
border-bottom: 1px solid rgba(255, 255, 255, 0.14);
opacity: 0;
visibility: hidden;
transition: opacity 0.18s ease, visibility 0.18s ease;
pointer-events: none;
z-index: 51;
}
.tech-metric-info:hover::after,
.tech-metric-info:focus::after,
.tech-metric-info:hover::before,
.tech-metric-info:focus::before {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
/* ==========================================================================
5. THREE-COLUMN HOMEPAGE LAYOUT
========================================================================== */
/* Section Headings */
.tech-col-title {
font-size: 1.15rem;
font-weight: 800;
color: var(--tech-gray-900);
text-transform: uppercase;
letter-spacing: 0.04em;
padding-bottom: 0.75rem;
margin-bottom: 1.25rem;
border-bottom: 2px solid var(--tech-gray-200);
display: flex;
align-items: center;
gap: 0.55rem;
position: relative;
}
.tech-col-title::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 45px;
height: 2px;
background: var(--tech-primary);
}
.tech-col-title i {
color: var(--tech-primary);
font-size: 1.25rem;
}
/* LEFT COLUMN: ABOUT THE JOURNAL CARD (4-Side Colored Border) */
.tech-about-card {
background: #ffffff;
border: 2px solid var(--tech-primary) !important;
border-top: 4px solid var(--tech-primary) !important;
border-radius: var(--tech-radius-lg, 1rem);
padding: 1.75rem;
margin-bottom: 1.75rem;
box-shadow: 0 4px 20px rgba(var(--tech-primary-rgb), 0.08) !important;
position: relative;
overflow: hidden;
transition: all 0.25s ease;
}
.tech-about-card:hover {
box-shadow: 0 8px 28px rgba(var(--tech-primary-rgb), 0.14) !important;
}
/* LEFT COLUMN: KOTAK KETERANGAN EDISI (Issue Header Card - 4-Side Colored Border) */
.tech-issue-header-card {
background: #ffffff !important;
border: 2px solid var(--tech-primary) !important;
border-top: 4px solid var(--tech-primary) !important;
border-radius: var(--tech-radius-lg, 1rem) !important;
box-shadow: 0 4px 20px rgba(var(--tech-primary-rgb), 0.08) !important;
position: relative;
overflow: hidden;
margin-bottom: 1.5rem !important;
transition: all 0.25s ease;
}
.tech-issue-header-card:hover {
box-shadow: 0 8px 28px rgba(var(--tech-primary-rgb), 0.14) !important;
transform: translateY(-2px);
}
/* LEFT COLUMN: INDIVIDUAL ARTICLE CARDS (4-Side Colored Border) */
.tech-article-card {
background: #ffffff;
border: 1.5px solid var(--tech-primary) !important;
border-left: 4.5px solid var(--tech-primary) !important;
border-radius: var(--tech-radius);
padding: 1.35rem 1.4rem;
margin-bottom: 1.25rem;
box-shadow: 0 2px 10px rgba(var(--tech-primary-rgb), 0.06);
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
position: relative;
overflow: hidden;
}
.tech-article-card:hover {
transform: translateY(-3px);
box-shadow: 0 8px 24px rgba(var(--tech-primary-rgb), 0.16);
border-color: var(--tech-primary) !important;
}
/* Article Cover Image with Colored List Border */
.tech-article-cover-col {
flex: 0 0 auto;
width: 130px;
margin-right: 1.25rem !important;
}
.tech-article-cover-link {
width: 130px;
height: 130px;
aspect-ratio: 1 / 1;
border-radius: 6px;
overflow: hidden;
border: 1px solid var(--tech-primary, #033692) !important;
border-left: 4px solid var(--tech-primary, #033692) !important;
background: #ffffff !important;
padding: 4px !important;
box-shadow: 0 2px 8px rgba(var(--tech-primary-rgb, 3, 54, 146), 0.12);
display: flex !important;
align-items: center;
justify-content: center;
text-decoration: none;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
box-sizing: border-box;
}
.tech-article-cover-link:hover,
.tech-article-card:hover .tech-article-cover-link {
border-color: var(--tech-primary-hover, #022566) !important;
border-left-color: var(--tech-accent, #00b4d8) !important;
box-shadow: 0 6px 18px rgba(var(--tech-primary-rgb, 3, 54, 146), 0.22);
transform: translateY(-2px);
}
.tech-article-cover-img {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
object-fit: contain; /* 100% visible, never cut off or cropped */
object-position: center;
background-color: #ffffff;
border-radius: 3px;
display: block;
transition: transform 0.3s ease;
}
.tech-article-card:hover .tech-article-cover-img {
transform: scale(1.04);
}
.tech-article-body-col {
padding-left: 0.35rem;
}
@media (max-width: 575.98px) {
.tech-article-cover-col {
width: 100%;
margin-right: 0 !important;
margin-bottom: 0.85rem;
display: flex;
justify-content: center;
}
.tech-article-cover-link {
width: 135px;
height: 135px;
}
.tech-article-body-col {
padding-left: 0;
}
}
/* Article Detail Page 1:1 Cover */
.tech-detail-cover-wrapper {
width: 100%;
max-width: 240px;
aspect-ratio: 1 / 1;
border-radius: var(--tech-radius);
overflow: hidden;
border: 1px solid var(--tech-gray-200);
background: #ffffff;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
justify-content: center;
margin: 0 auto;
}
.tech-detail-cover-img {
width: 100%;
height: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
object-position: center;
background-color: #ffffff;
}
.tech-article-category {
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
background: var(--tech-subtle);
color: var(--tech-primary);
border: 1px solid rgba(var(--tech-primary-rgb), 0.2);
padding: 0.25rem 0.65rem;
border-radius: 0.4rem;
display: inline-flex;
align-items: center;
gap: 0.35rem;
}
.tech-article-title {
font-size: 1.075rem;
font-weight: 700;
line-height: 1.45;
margin: 0.5rem 0 0.4rem;
color: var(--tech-primary);
}
.tech-article-title a {
color: var(--tech-primary) !important;
text-decoration: none;
transition: color 0.2s ease;
}
.tech-article-title a:hover {
color: var(--tech-primary-hover) !important;
text-decoration: underline;
}
.tech-article-authors {
font-size: 0.85rem;
color: var(--tech-gray-600);
margin-bottom: 0.65rem;
display: flex;
align-items: center;
gap: 0.4rem;
}
.tech-article-meta {
font-size: 0.785rem;
color: var(--tech-gray-600);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.85rem;
}
.tech-doi-pill {
font-size: 0.775rem;
font-family: var(--tech-font-mono);
background: var(--tech-gray-100);
color: var(--tech-gray-700);
border: 1px solid var(--tech-gray-200);
border-radius: 0.4rem;
padding: 0.25rem 0.55rem;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.35rem;
transition: all 0.15s ease;
}
.tech-doi-pill:hover {
background: var(--tech-gray-200);
color: var(--tech-gray-900);
}
.tech-article-galleys {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 8px !important;
}
.btn-tech-pdf {
background: var(--tech-subtle);
color: var(--tech-primary);
border: 1px solid rgba(var(--tech-primary-rgb), 0.25);
font-size: 0.8rem;
font-weight: 700;
padding: 0.35rem 0.85rem;
border-radius: 0.45rem;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.4rem;
margin: 2px 0;
transition: all 0.2s ease;
}
.btn-tech-pdf:hover {
background: var(--tech-primary);
color: #ffffff;
box-shadow: 0 4px 10px rgba(var(--tech-primary-rgb), 0.3);
}
/* MIDDLE COLUMN: ABOUT THE JOURNAL */
.tech-info-card {
background: #ffffff;
border: 1px solid var(--tech-gray-200);
border-radius: var(--tech-radius);
padding: 1.4rem;
margin-bottom: 1.5rem;
box-shadow: var(--tech-shadow-2xs);
}
.tech-info-item {
display: flex;
align-items: flex-start;
gap: 0.85rem;
padding: 0.75rem 0;
border-bottom: 1px solid var(--tech-gray-100);
}
.tech-info-item:last-child {
border-bottom: none;
padding-bottom: 0;
}
.tech-info-icon {
width: 36px;
height: 36px;
border-radius: 0.5rem;
background: var(--tech-subtle);
color: var(--tech-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.1rem;
flex-shrink: 0;
}
/* FULL-WIDTH ABOUT THE JOURNAL SECTION */
.tech-about-fullwidth-section .card {
transition: all 0.3s ease;
}
.tech-about-specs-grid {
margin-top: 0.15rem !important;
margin-bottom: 0.75rem !important;
row-gap: 0.25rem !important;
}
.tech-about-spec-item {
display: flex;
align-items: center;
gap: 0.65rem;
padding: 0.4rem 0.7rem;
background: #ffffff;
border: 1px solid var(--tech-primary, #033692);
border-left: 4px solid var(--tech-primary, #033692);
border-radius: 4px;
transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 1px 2px rgba(var(--tech-primary-rgb, 3, 54, 146), 0.05);
height: 100%;
}
.tech-about-spec-item:hover {
border-color: var(--tech-primary-hover, #022566);
border-left-color: var(--tech-accent, #00b4d8);
background: var(--tech-subtle, #eef4ff);
transform: translateY(-1px);
box-shadow: 0 3px 8px rgba(var(--tech-primary-rgb, 3, 54, 146), 0.12);
}
.tech-about-spec-icon {
width: 32px;
height: 32px;
border-radius: 4px;
background: rgba(var(--tech-primary-rgb, 3, 54, 146), 0.08);
color: var(--tech-primary, #033692);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.95rem;
flex-shrink: 0;
transition: all 0.18s ease;
}
.tech-about-spec-item:hover .tech-about-spec-icon {
background: var(--tech-primary, #033692);
color: #ffffff;
transform: scale(1.04);
}
.tech-about-spec-content {
flex: 1;
min-width: 0;
}
.tech-about-spec-label {
display: block;
font-size: 0.675rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #64748b;
margin-bottom: 1px;
line-height: 1.1;
}
.tech-about-spec-value {
font-size: 0.8125rem;
font-weight: 700;
color: #0f172a;
line-height: 1.25;
word-break: break-word;
}
.tech-info-box-hover {
background-color: var(--tech-gray-50);
border: 1px solid var(--tech-gray-200) !important;
transition: all 0.25s ease;
}
.tech-info-box-hover:hover {
background-color: #ffffff;
border-color: var(--tech-primary) !important;
transform: translateY(-2px);
box-shadow: var(--tech-shadow-sm);
}
/* Card Indexing Terpisah di Atas Footer */
.tech-indexing-container {
margin-top: 3.5rem !important;
margin-bottom: 3.5rem !important;
}
.tech-indexing-card {
background: #ffffff;
border-radius: var(--tech-radius);
border: 2px solid var(--tech-primary);
box-shadow: 0 8px 24px rgba(var(--tech-primary-rgb), 0.08);
padding: 2.25rem 2rem;
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.tech-indexing-card::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 4px;
background: var(--tech-gradient);
}
.tech-indexing-card:hover {
box-shadow: 0 12px 32px rgba(var(--tech-primary-rgb), 0.14);
transform: translateY(-2px);
}
.tech-index-badge-footer {
background: var(--tech-gray-50);
border: 1px solid var(--tech-gray-200);
border-radius: 2rem;
padding: 0.5rem 1.15rem;
font-size: 0.825rem;
font-weight: 700;
color: var(--tech-gray-700);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 0.45rem;
transition: all 0.2s ease;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
.tech-index-badge-footer:hover {
background: #ffffff;
border-color: var(--tech-primary);
color: var(--tech-primary);
transform: translateY(-2px);
box-shadow: var(--tech-shadow-sm);
}
/* Indexing & Abstracting Logos (Harmonized Uniform Dimensions) */
.tech-indexing-custom-content {
color: var(--tech-gray-700);
line-height: 1.6;
text-align: center;
width: 100%;
}
.tech-indexing-custom-content p,
.tech-indexing-custom-content div {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
gap: 0.85rem !important;
margin-bottom: 0 !important;
}
.tech-indexing-custom-content a {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 60px !important;
min-width: 130px !important;
max-width: 180px !important;
padding: 0.45rem 0.85rem !important;
background: #ffffff !important;
border: 1px solid var(--tech-gray-200) !important;
border-radius: var(--tech-radius-sm) !important;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04) !important;
transition: all 0.25s ease !important;
text-decoration: none !important;
margin: 0 !important;
position: relative;
overflow: hidden;
}
.tech-indexing-custom-content a:hover {
border-color: var(--tech-primary) !important;
box-shadow: 0 4px 14px rgba(var(--tech-primary-rgb), 0.16) !important;
transform: translateY(-2px) !important;
}
.tech-indexing-custom-content img {
max-height: 42px !important;
max-width: 140px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
margin: 0 !important;
transition: transform 0.25s ease !important;
}
.tech-indexing-custom-content a:hover img {
transform: scale(1.05) !important;
}
/* Fallback Indexing Badges */
.tech-index-grid {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.85rem;
}
.tech-index-badge-footer {
background: #ffffff;
border: 1px solid var(--tech-gray-200);
border-radius: var(--tech-radius-sm);
height: 52px;
min-width: 130px;
padding: 0.5rem 1.15rem;
font-size: 0.825rem;
font-weight: 700;
color: var(--tech-gray-700);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.45rem;
transition: all 0.25s ease;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
}
.tech-index-badge-footer:hover {
background: #ffffff;
border-color: var(--tech-primary);
color: var(--tech-primary);
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(var(--tech-primary-rgb), 0.16);
}
/* ==========================================================================
SIDEBAR & BLOCK PLUGINS STYLING (Compact & Refined)
========================================================================== */
.tech-sidebar-wrapper,
.tech-sidebar-blocks {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* Individual Sidebar Block Card & Generic Widget Card (4-Side Colored Border) */
.tech-widget-card,
.tech-sidebar-blocks .pkp_block,
.tech-sidebar-blocks .block,
.tech-sidebar-blocks .tech-widget-card {
background: #ffffff;
border: 2px solid var(--tech-primary) !important;
border-radius: var(--tech-radius);
box-shadow: 0 4px 16px rgba(var(--tech-primary-rgb), 0.08);
padding: 1.15rem 1.05rem;
margin-bottom: 0 !important;
position: relative;
overflow: hidden;
transition: all 0.25s ease;
}
.tech-widget-card:hover,
.tech-sidebar-blocks .pkp_block:hover,
.tech-sidebar-blocks .block:hover,
.tech-sidebar-blocks .tech-widget-card:hover {
border-color: var(--tech-primary) !important;
box-shadow: 0 8px 24px rgba(var(--tech-primary-rgb), 0.16);
transform: translateY(-2px);
}
/* Remove redundant pseudo-element line */
.tech-widget-card::before,
.tech-sidebar-blocks .pkp_block::before,
.tech-sidebar-blocks .block::before,
.tech-sidebar-blocks .tech-widget-card::before {
display: none !important;
}
/* Block Title / Header (Modern Themed Banner Header) */
.tech-widget-card .tech-col-title,
.tech-sidebar-blocks .title:not(.pkp_screen_reader),
.tech-sidebar-blocks .pkp_block_title,
.tech-sidebar-blocks h2:not(.pkp_screen_reader),
.tech-sidebar-blocks h3:not(.pkp_screen_reader),
.tech-sidebar-blocks h4:not(.pkp_screen_reader),
.tech-sidebar-blocks .tech-col-title,
.tech-sidebar-sticky .tech-widget-card .tech-col-title {
font-size: 0.835rem;
font-weight: 800;
color: #ffffff !important;
text-transform: uppercase;
letter-spacing: 0.06em;
background: var(--tech-gradient, linear-gradient(135deg, #033692 0%, #0a4ebd 100%));
margin: -1.15rem -1.05rem 0.95rem -1.05rem;
padding: 0.7rem 1.05rem;
border-radius: 0;
display: flex;
align-items: center;
gap: 0.55rem;
position: relative;
box-shadow: 0 2px 8px rgba(3, 54, 146, 0.15);
border-bottom: 2px solid rgba(255, 255, 255, 0.18);
}
.tech-widget-card .tech-col-title i,
.tech-sidebar-blocks .title:not(.pkp_screen_reader) i,
.tech-sidebar-blocks .pkp_block_title i,
.tech-sidebar-blocks h2:not(.pkp_screen_reader) i,
.tech-sidebar-blocks h3:not(.pkp_screen_reader) i,
.tech-sidebar-blocks h4:not(.pkp_screen_reader) i,
.tech-sidebar-blocks .tech-col-title i,
.tech-sidebar-sticky .tech-widget-card .tech-col-title i {
color: #fde047 !important;
font-size: 0.95rem;
display: inline-flex;
align-items: center;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
.tech-sidebar-blocks h2.pkp_screen_reader,
.tech-sidebar-blocks .title.pkp_screen_reader {
display: none !important;
}
/* Content Inside Blocks */
.tech-sidebar-blocks .content {
font-size: 0.8125rem;
color: var(--tech-gray-700);
line-height: 1.6;
}
/* List Items Inside Sidebar Blocks (Colored Border Lists) */
.tech-sidebar-blocks ul,
.tech-sidebar-wrapper ul,
#sidebar ul,
.pkp_structure_sidebar ul {
list-style: none !important;
padding-left: 0 !important;
margin-bottom: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 0.22rem !important;
}
.tech-sidebar-blocks ul li,
.tech-sidebar-wrapper ul li,
#sidebar ul li,
.pkp_structure_sidebar ul li,
.pkp_block.block_custom .content ul li,
.pkp_block.block_information .content ul li,
.pkp_block.block_custom ul li,
.pkp_block.block_information ul li {
padding: 0 !important;
margin: 0 !important;
background: #ffffff !important;
border: 1px solid var(--tech-primary, #033692) !important;
border-left: 4px solid var(--tech-primary, #033692) !important;
border-radius: 4px !important;
transition: all 0.18s cubic-bezier(0.16, 1, 0.3, 1) !important;
box-shadow: 0 1px 3px rgba(var(--tech-primary-rgb, 3, 54, 146), 0.08) !important;
overflow: hidden !important;
display: block !important;
box-sizing: border-box !important;
}
.tech-sidebar-blocks ul li:hover,
.tech-sidebar-wrapper ul li:hover,
#sidebar ul li:hover,
.pkp_structure_sidebar ul li:hover,
.pkp_block.block_custom .content ul li:hover,
.pkp_block.block_information .content ul li:hover,
.pkp_block.block_custom ul li:hover,
.pkp_block.block_information ul li:hover {
border-color: var(--tech-primary-hover, #022566) !important;
background: var(--tech-subtle, #eef4ff) !important;
transform: translateX(3px) !important;
box-shadow: 0 2px 8px rgba(var(--tech-primary-rgb, 3, 54, 146), 0.16) !important;
}
.tech-sidebar-blocks ul li a,
.tech-sidebar-wrapper ul li a,
#sidebar ul li a,
.pkp_structure_sidebar ul li a,
.tech-sidebar-blocks .block_custom ul li a,
.tech-sidebar-blocks .block_information ul li a {
display: flex !important;
align-items: center !important;
justify-content: flex-start !important;
padding: 0.32rem 0.65rem !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
color: var(--tech-gray-900, #0f172a) !important;
font-size: 0.8rem !important;
line-height: 1.3 !important;
font-weight: 700 !important;
text-decoration: none !important;
transition: all 0.15s ease !important;
gap: 0.45rem !important;
width: 100% !important;
box-sizing: border-box !important;
}
.tech-sidebar-blocks ul li a:hover,
.tech-sidebar-wrapper ul li a:hover,
#sidebar ul li a:hover,
.pkp_structure_sidebar ul li a:hover,
.tech-sidebar-blocks .block_custom ul li a:hover,
.tech-sidebar-blocks .block_information ul li a:hover {
background: transparent !important;
border-color: transparent !important;
color: var(--tech-primary, #033692) !important;
transform: none !important;
box-shadow: none !important;
}
.tech-sidebar-blocks ul li a i,
.tech-sidebar-blocks ul li a em,
.tech-sidebar-wrapper ul li a i,
.tech-sidebar-wrapper ul li a em,
#sidebar ul li a i,
#sidebar ul li a em,
.pkp_structure_sidebar ul li a i,
.pkp_structure_sidebar ul li a em,
.tech-sidebar-blocks .block_custom .content ul li a em,
.tech-sidebar-blocks .block_custom .content ul li a i {
color: var(--tech-primary, #033692) !important;
font-size: 0.85rem !important;
width: 16px !important;
text-align: center !important;
flex-shrink: 0 !important;
font-style: normal !important;
}
/* ==========================================================================
Most Read Articles Block (.block_most_read)
========================================================================== */
.tech-sidebar-blocks .block_most_read ul,
.tech-sidebar-blocks .block_most_read ul.most_read,
.tech-sidebar-wrapper .block_most_read ul,
#sidebar .block_most_read ul,
.pkp_structure_sidebar .block_most_read ul {
display: flex !important;
flex-direction: column !important;
gap: 0.65rem !important;
padding: 0 !important;
margin: 0 !important;
list-style: none !important;
counter-reset: tech-most-read-counter !important;
}
.tech-sidebar-blocks .block_most_read ul li,
.tech-sidebar-blocks .block_most_read ul.most_read li.most_read_article,
.tech-sidebar-wrapper .block_most_read ul li,
#sidebar .block_most_read ul li,
.pkp_structure_sidebar .block_most_read ul li {
display: grid !important;
grid-template-columns: 28px 1fr !important;
grid-template-rows: auto auto !important;
column-gap: 0.65rem !important;
row-gap: 0.35rem !important;
align-items: start !important;
counter-increment: tech-most-read-counter !important;
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-left: 3px solid var(--tech-primary, #033692) !important;
border-radius: 6px !important;
padding: 0.65rem 0.75rem !important;
margin: 0 !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
transform: none !important;
box-sizing: border-box !important;
position: relative !important;
overflow: visible !important;
}
/* Number / Rank Badge */
.tech-sidebar-blocks .block_most_read ul li::before,
.tech-sidebar-blocks .block_most_read ul.most_read li.most_read_article::before,
.tech-sidebar-wrapper .block_most_read ul li::before,
#sidebar .block_most_read ul li::before,
.pkp_structure_sidebar .block_most_read ul li::before {
content: counter(tech-most-read-counter) !important;
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
border-radius: 6px !important;
background: var(--tech-subtle, #eef4ff) !important;
color: var(--tech-primary, #033692) !important;
border: 1px solid rgba(var(--tech-primary-rgb, 3, 54, 146), 0.18) !important;
font-size: 0.775rem !important;
font-weight: 800 !important;
line-height: 1 !important;
margin-top: 1px !important;
transition: all 0.2s ease !important;
}
/* Top 3 rank highlighting */
.tech-sidebar-blocks .block_most_read ul.most_read li.most_read_article:nth-child(1)::before,
.tech-sidebar-blocks .block_most_read ul.most_read li.most_read_article:nth-child(2)::before,
.tech-sidebar-blocks .block_most_read ul.most_read li.most_read_article:nth-child(3)::before,
.tech-sidebar-wrapper .block_most_read ul.most_read li.most_read_article:nth-child(1)::before,
.tech-sidebar-wrapper .block_most_read ul.most_read li.most_read_article:nth-child(2)::before,
.tech-sidebar-wrapper .block_most_read ul.most_read li.most_read_article:nth-child(3)::before,
#sidebar .block_most_read ul.most_read li.most_read_article:nth-child(1)::before,
#sidebar .block_most_read ul.most_read li.most_read_article:nth-child(2)::before,
#sidebar .block_most_read ul.most_read li.most_read_article:nth-child(3)::before {
background: var(--tech-primary, #033692) !important;
color: #ffffff !important;
border-color: var(--tech-primary, #033692) !important;
box-shadow: 0 2px 6px rgba(var(--tech-primary-rgb, 3, 54, 146), 0.25) !important;
}
.tech-sidebar-blocks .block_most_read ul li:hover,
.tech-sidebar-blocks .block_most_read ul.most_read li.most_read_article:hover,
.tech-sidebar-wrapper .block_most_read ul li:hover,
#sidebar .block_most_read ul li:hover,
.pkp_structure_sidebar .block_most_read ul li:hover {
background: #f8fafc !important;
border-color: var(--tech-primary, #033692) !important;
border-left: 3px solid var(--tech-primary, #033692) !important;
box-shadow: 0 3px 10px rgba(var(--tech-primary-rgb, 3, 54, 146), 0.12) !important;
transform: translateY(-2px) !important;
}
.tech-sidebar-blocks .block_most_read ul li:hover::before {
transform: scale(1.08) !important;
}
.tech-sidebar-blocks .block_most_read ul li a,
.tech-sidebar-blocks .block_most_read ul.most_read li a,
.tech-sidebar-wrapper .block_most_read ul li a,
#sidebar .block_most_read ul li a,
.pkp_structure_sidebar .block_most_read ul li a {
display: inline !important;
align-items: unset !important;
justify-content: unset !important;
padding: 0 !important;
margin: 0 !important;
background: transparent !important;
border: none !important;
border-radius: 0 !important;
width: auto !important;
box-shadow: none !important;
transform: none !important;
gap: 0 !important;
}
.tech-sidebar-blocks .block_most_read .most_read_article_title,
.tech-sidebar-wrapper .block_most_read .most_read_article_title,
#sidebar .block_most_read .most_read_article_title,
.pkp_structure_sidebar .block_most_read .most_read_article_title {
grid-column: 2 !important;
grid-row: 1 !important;
margin-bottom: 0 !important;
line-height: 1.4 !important;
}
.tech-sidebar-blocks .block_most_read .most_read_article_title a,
.tech-sidebar-wrapper .block_most_read .most_read_article_title a,
#sidebar .block_most_read .most_read_article_title a,
.pkp_structure_sidebar .block_most_read .most_read_article_title a {
color: var(--tech-gray-900, #0f172a) !important;
font-size: 0.815rem !important;
font-weight: 600 !important;
line-height: 1.4 !important;
text-decoration: none !important;
transition: color 0.15s ease !important;
display: -webkit-box !important;
-webkit-line-clamp: 3 !important;
-webkit-box-orient: vertical !important;
overflow: hidden !important;
}
.tech-sidebar-blocks .block_most_read ul li:hover .most_read_article_title a,
.tech-sidebar-blocks .block_most_read .most_read_article_title a:hover {
color: var(--tech-primary, #033692) !important;
text-decoration: none !important;
}
.tech-sidebar-blocks .block_most_read .most_read_article_stats,
.tech-sidebar-wrapper .block_most_read .most_read_article_stats,
#sidebar .block_most_read .most_read_article_stats,
.pkp_structure_sidebar .block_most_read .most_read_article_stats {
grid-column: 2 !important;
grid-row: 2 !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.35rem !important;
background: var(--tech-subtle, #eef4ff) !important;
color: var(--tech-primary, #033692) !important;
border: 1px solid rgba(var(--tech-primary-rgb, 3, 54, 146), 0.12) !important;
border-radius: 20px !important;
padding: 0.15rem 0.5rem !important;
font-size: 0.715rem !important;
font-weight: 600 !important;
line-height: 1.2 !important;
width: fit-content !important;
transition: all 0.2s ease !important;
margin: 0 !important;
}
.tech-sidebar-blocks .block_most_read .most_read_article_stats i,
.tech-sidebar-wrapper .block_most_read .most_read_article_stats i,
#sidebar .block_most_read .most_read_article_stats i,
.pkp_structure_sidebar .block_most_read .most_read_article_stats i {
color: var(--tech-primary, #033692) !important;
font-size: 0.75rem !important;
width: auto !important;
text-align: center !important;
transition: color 0.2s ease !important;
}
.tech-sidebar-blocks .block_most_read ul li:hover .most_read_article_stats {
background: var(--tech-primary, #033692) !important;
color: #ffffff !important;
border-color: var(--tech-primary, #033692) !important;
}
.tech-sidebar-blocks .block_most_read ul li:hover .most_read_article_stats i {
color: #ffffff !important;
}
/* ==========================================================================
Google Scholar Citation Block (.block_google_citation)
========================================================================== */
.tech-sidebar-blocks .block_google_citation .table,
.tech-sidebar-wrapper .block_google_citation .table,
#sidebar .block_google_citation .table,
.pkp_structure_sidebar .block_google_citation .table {
border-radius: 6px !important;
overflow: hidden !important;
background: #ffffff !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important;
}
.tech-sidebar-blocks .block_google_citation .table thead th,
.tech-sidebar-wrapper .block_google_citation .table thead th,
#sidebar .block_google_citation .table thead th,
.pkp_structure_sidebar .block_google_citation .table thead th {
background: var(--tech-gray-50, #f8fafc) !important;
border-bottom: 1px solid #e2e8f0 !important;
}
.tech-sidebar-blocks .block_google_citation .gsc-barchart-container,
.tech-sidebar-wrapper .block_google_citation .gsc-barchart-container,
#sidebar .block_google_citation .gsc-barchart-container,
.pkp_structure_sidebar .block_google_citation .gsc-barchart-container {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03) !important;
}
.tech-sidebar-blocks .block_google_citation .gsc-barchart-col:hover .gsc-bar-fill,
.tech-sidebar-wrapper .block_google_citation .gsc-barchart-col:hover .gsc-bar-fill {
filter: brightness(1.15) !important;
transform: scaleY(1.04) !important;
}
.tech-sidebar-blocks .block_google_citation .btn-outline-primary,
.tech-sidebar-wrapper .block_google_citation .btn-outline-primary,
#sidebar .block_google_citation .btn-outline-primary,
.pkp_structure_sidebar .block_google_citation .btn-outline-primary {
border-color: var(--tech-primary, #033692) !important;
color: var(--tech-primary, #033692) !important;
transition: all 0.2s ease !important;
}
.tech-sidebar-blocks .block_google_citation .btn-outline-primary:hover,
.tech-sidebar-wrapper .block_google_citation .btn-outline-primary:hover,
#sidebar .block_google_citation .btn-outline-primary:hover,
.pkp_structure_sidebar .block_google_citation .btn-outline-primary:hover {
background: var(--tech-primary, #033692) !important;
color: #ffffff !important;
box-shadow: 0 3px 8px rgba(var(--tech-primary-rgb, 3, 54, 146), 0.25) !important;
}
/* Custom Block Manager Paragraphs */
.tech-sidebar-blocks .content p {
margin-bottom: 0.4rem;
}
.tech-sidebar-blocks .content p:last-child {
margin-bottom: 0;
}
/* ==========================================================================
Images & Banners Inside Sidebar (Center Aligned)
========================================================================== */
.tech-sidebar-blocks img,
.tech-sidebar-wrapper img,
#sidebar img,
.pkp_structure_sidebar img,
.tech-sidebar-sticky .tech-detail-cover-img {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: 100% !important;
height: auto !important;
border-radius: 0.4rem;
text-align: center !important;
transition: transform 0.2s ease, filter 0.2s ease;
}
.tech-sidebar-blocks a:hover img,
.tech-sidebar-wrapper a:hover img,
#sidebar a:hover img,
.pkp_structure_sidebar a:hover img {
transform: scale(1.02);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.12));
}
/* Ensure paragraph, div, and badan containers in sidebar center their contents */
.tech-sidebar-blocks .content p,
.tech-sidebar-wrapper .content p,
#sidebar .content p,
.pkp_structure_sidebar .content p,
.tech-sidebar-blocks .content div,
.tech-sidebar-wrapper .content div,
#sidebar .content div,
.tech-sidebar-blocks .badan,
.tech-sidebar-wrapper .badan,
#sidebar .badan,
.tech-sidebar-blocks .block_custom p,
.tech-sidebar-wrapper .block_custom p,
#sidebar .block_custom p {
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Ensure any link wrapping an image centers the image */
.tech-sidebar-blocks a:has(> img),
.tech-sidebar-wrapper a:has(> img),
#sidebar a:has(> img),
.pkp_structure_sidebar a:has(> img) {
display: inline-flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: 100% !important;
}
.tech-sidebar-blocks a > img,
.tech-sidebar-wrapper a > img,
#sidebar a > img,
.pkp_structure_sidebar a > img {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Containers with images using modern flex layout */
.tech-sidebar-blocks p:has(img),
.tech-sidebar-wrapper p:has(img),
#sidebar p:has(img),
.pkp_structure_sidebar p:has(img),
.tech-sidebar-blocks div:has(> img),
.tech-sidebar-wrapper div:has(> img),
#sidebar div:has(> img),
.tech-sidebar-blocks .badan:has(img),
.tech-sidebar-wrapper .badan:has(img),
#sidebar .badan:has(img) {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
gap: 0.65rem !important;
width: 100% !important;
}
/* Histats counter & external widget counters */
#histats_counter,
#histats_counter div,
#histats_counter a,
#histats_counter img {
display: flex !important;
justify-content: center !important;
align-items: center !important;
margin-left: auto !important;
margin-right: auto !important;
text-align: center !important;
}
.tech-sidebar-blocks iframe,
.tech-sidebar-wrapper iframe,
#sidebar iframe,
.pkp_structure_sidebar iframe {
display: block !important;
margin-left: auto !important;
margin-right: auto !important;
max-width: 100% !important;
}
/* Article Details Sidebar: Cover Image & CC License */
.tech-sidebar-sticky .tech-detail-cover-wrapper {
display: flex !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
margin-left: auto !important;
margin-right: auto !important;
width: 100% !important;
}
/* Article Details Sidebar: CC License & Copyright */
.tech-sidebar-sticky .cc-license-badge,
.tech-license-content .cc-license-badge {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
align-items: center !important;
text-align: center !important;
margin: 0 auto !important;
width: 100% !important;
gap: 0.65rem !important;
}
.tech-sidebar-sticky .cc-license-badge a[rel="license"],
.tech-license-content .cc-license-badge a[rel="license"] {
display: inline-block !important;
margin: 0 auto !important;
text-align: center !important;
transition: transform 0.2s ease;
}
.tech-sidebar-sticky .cc-license-badge a[rel="license"]:hover,
.tech-license-content .cc-license-badge a[rel="license"]:hover {
transform: scale(1.05);
}
.tech-sidebar-sticky .cc-license-badge img,
.tech-license-content .cc-license-badge img {
display: block !important;
margin: 0 auto !important;
max-width: 100% !important;
height: auto !important;
border-radius: 4px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}
.tech-sidebar-sticky .cc-license-badge p,
.tech-license-content .cc-license-badge p {
font-size: 0.75rem !important;
color: var(--tech-gray-700, #334155) !important;
line-height: 1.45 !important;
margin: 0 !important;
text-align: center !important;
}
.tech-sidebar-sticky .cc-license-badge p a,
.tech-license-content .cc-license-badge p a {
color: var(--tech-primary, #033692) !important;
font-weight: 600 !important;
text-decoration: none !important;
transition: all 0.15s ease;
}
.tech-sidebar-sticky .cc-license-badge p a:hover,
.tech-license-content .cc-license-badge p a:hover {
color: var(--tech-primary-hover, #022566) !important;
text-decoration: underline !important;
}
/* License Content Container & Boxes */
.tech-license-badge-box {
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: var(--tech-radius-sm, 0.45rem) !important;
transition: all 0.2s ease;
}
.tech-license-badge-box:hover {
border-color: rgba(var(--tech-primary-rgb, 3, 54, 146), 0.3) !important;
box-shadow: 0 2px 8px rgba(var(--tech-primary-rgb, 3, 54, 146), 0.06);
}
.tech-license-copyright-box {
background: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: var(--tech-radius-sm, 0.45rem) !important;
padding: 0.65rem 0.85rem !important;
transition: all 0.2s ease;
}
.tech-license-copyright-box:hover {
border-color: rgba(var(--tech-primary-rgb, 3, 54, 146), 0.3) !important;
box-shadow: 0 2px 8px rgba(var(--tech-primary-rgb, 3, 54, 146), 0.06);
}
/* Form Controls Inside Sidebar */
.tech-sidebar-blocks select,
.tech-sidebar-blocks input[type="text"],
.tech-sidebar-blocks input[type="search"] {
font-size: 0.8125rem;
border-radius: var(--tech-radius-sm);
border: 1px solid var(--tech-gray-300);
padding: 0.35rem 0.65rem;
width: 100%;
}
/* ==========================================================================
6. ARTICLE DETAILS PAGE
========================================================================== */
.tech-article-detail-box {
background: #ffffff;
border-radius: var(--tech-radius-lg);
border: 1px solid var(--tech-gray-200);
padding: 2.25rem 2.5rem;
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
margin-bottom: 2rem;
}
@media (max-width: 767.98px) {
.tech-article-detail-box {
padding: 1.5rem 1.25rem;
}
}
.tech-detail-header-title {
font-size: 1.95rem;
font-weight: 800;
line-height: 1.35;
color: var(--tech-primary) !important;
letter-spacing: -0.02em;
margin-top: 0.5rem;
margin-bottom: 1.25rem;
}
@media (max-width: 767.98px) {
.tech-detail-header-title {
font-size: 1.45rem;
}
}
.tech-author-box {
background: var(--tech-gray-50);
border: 1px solid var(--tech-gray-200);
border-radius: var(--tech-radius);
padding: 1rem 1.15rem;
transition: all 0.25s ease;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
}
.tech-author-box:hover {
background: #ffffff;
border-color: var(--tech-primary);
box-shadow: 0 4px 12px rgba(var(--tech-primary-rgb), 0.1);
transform: translateY(-2px);
}
.tech-author-avatar {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--tech-subtle);
color: var(--tech-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.2rem;
flex-shrink: 0;
}
.tech-abstract-card {
background: #f8fafc;
border-left: 4px solid var(--tech-primary);
border-radius: 0 var(--tech-radius) var(--tech-radius) 0;
padding: 1.5rem 1.75rem;
margin: 1.25rem 0;
font-size: 0.975rem;
line-height: 1.85;
color: var(--tech-gray-800);
text-align: justify;
}
/* MSC tags: Exactly identical to Keywords styling and interaction */
.tech-msc-tag {
cursor: pointer;
}
.tech-msc-tag:hover {
background: var(--tech-primary) !important;
color: #ffffff !important;
border-color: var(--tech-primary) !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(var(--tech-primary-rgb), 0.25);
}
.tech-keyword-tag,
a.tech-keyword-tag,
span.tech-keyword-tag {
background: var(--tech-subtle) !important;
color: var(--tech-primary) !important;
font-size: 0.8125rem !important;
font-weight: 700 !important;
padding: 0.35rem 0.85rem !important;
border-radius: 2rem !important;
border: 1px solid rgba(var(--tech-primary-rgb), 0.2) !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.3rem !important;
margin: 0.25rem 0.25rem 0.25rem 0 !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
text-decoration: none !important;
cursor: pointer !important;
}
.tech-keyword-tag:hover,
a.tech-keyword-tag:hover,
span.tech-keyword-tag:hover {
background: var(--tech-primary) !important;
color: #ffffff !important;
border-color: var(--tech-primary) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(var(--tech-primary-rgb), 0.25) !important;
}
.tech-keyword-tag:hover i,
a.tech-keyword-tag:hover i,
span.tech-keyword-tag:hover i {
color: #ffffff !important;
opacity: 1 !important;
}
.tech-references-content {
font-family: inherit;
font-size: 0.875rem;
line-height: 1.85;
color: var(--tech-gray-800);
word-break: break-word;
background: var(--tech-gray-50);
border: 1px solid var(--tech-gray-200);
border-radius: var(--tech-radius);
padding: 1.25rem 1.5rem;
max-height: none !important;
overflow: visible !important;
}
.tech-sidebar-sticky {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* How to Cite / Citation Style Language Widget */
.tech-sidebar-sticky .item.citation,
.item.citation {
background: #ffffff;
border: 2px solid var(--tech-primary) !important;
border-top: 4px solid var(--tech-primary) !important;
border-radius: var(--tech-radius);
box-shadow: 0 4px 16px rgba(var(--tech-primary-rgb), 0.08);
padding: 1.15rem 1.05rem;
margin-bottom: 0 !important;
position: relative;
overflow: hidden;
}
/* Remove redundant line */
.tech-sidebar-sticky .item.citation::before,
.item.citation::before {
display: none !important;
}
.item.citation .sub_item.citation_display h2.label,
.item.citation h2.label {
font-size: 0.835rem;
font-weight: 800;
color: #ffffff !important;
text-transform: uppercase;
letter-spacing: 0.06em;
background: var(--tech-gradient, linear-gradient(135deg, #033692 0%, #0a4ebd 100%));
margin: -1.15rem -1.05rem 0.95rem -1.05rem;
padding: 0.7rem 1.05rem;
border-radius: 0;
display: flex;
align-items: center;
gap: 0.55rem;
position: relative;
box-shadow: 0 2px 8px rgba(3, 54, 146, 0.15);
border-bottom: 2px solid rgba(255, 255, 255, 0.18);
}
.item.citation h2.label::before {
content: '\F517';
font-family: 'bootstrap-icons';
color: #fde047 !important;
font-size: 0.95rem;
}
.item.citation #citationOutput {
background: var(--tech-gray-50);
border: 1px solid var(--tech-gray-200);
border-radius: var(--tech-radius-sm);
padding: 0.75rem 0.85rem;
font-size: 0.8rem;
line-height: 1.6;
color: var(--tech-gray-800);
margin-bottom: 0.85rem;
word-break: break-word;
}
.item.citation .csl-left-margin {
display: none !important;
}
.item.citation [aria-hidden="true"] {
display: none !important;
}
.item.citation .citation_formats {
margin-top: 0.85rem;
}
.item.citation .citation_formats_button {
background: var(--tech-subtle);
color: var(--tech-primary);
border: 1px solid rgba(var(--tech-primary-rgb), 0.25);
font-weight: 700;
font-size: 0.8rem;
border-radius: var(--tech-radius-sm);
padding: 0.45rem 0.85rem;
width: 100%;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.2s ease;
}
.item.citation .citation_formats_button:hover {
background: var(--tech-primary);
color: #ffffff;
}
.item.citation .citation_formats_button::after {
content: '\F282'; /* bi-chevron-down */
font-family: 'bootstrap-icons';
}
.item.citation .citation_formats_button[aria-expanded="true"]::after {
content: '\F286'; /* bi-chevron-up */
}
.item.citation .citation_formats_list {
background: #ffffff;
border: 1px solid var(--tech-gray-200);
border-radius: var(--tech-radius-sm);
padding: 0.5rem 0.75rem;
margin-top: 0.5rem;
max-height: 220px;
overflow-y: auto;
}
.item.citation .citation_formats_styles {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.item.citation .citation_formats_styles li a {
display: block;
padding: 0.35rem 0.6rem;
border-radius: 0.35rem;
background: var(--tech-gray-50);
color: var(--tech-gray-800);
text-decoration: none;
font-size: 0.775rem;
font-weight: 600;
transition: all 0.15s ease;
}
.item.citation .citation_formats_styles li a:hover {
background: var(--tech-primary);
color: #ffffff;
}
.item.citation .citation_formats .label {
font-size: 0.75rem;
font-weight: 700;
color: var(--tech-gray-600);
margin: 0.75rem 0 0.35rem;
text-transform: uppercase;
letter-spacing: 0.04em;
display: block;
}
.tech-social-btn {
width: 38px;
height: 38px;
border-radius: 0.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff !important;
text-decoration: none;
font-size: 1.05rem;
transition: transform 0.2s ease;
}
.tech-social-btn:hover {
transform: translateY(-2px);
filter: brightness(1.1);
}
/* Article License & Copyright Widget */
.tech-license-content {
font-size: 0.8rem;
line-height: 1.5;
color: var(--tech-gray-700);
}
.tech-license-content img {
max-width: 100%;
height: auto;
margin-bottom: 0.35rem;
}
.tech-license-content a {
color: var(--tech-primary);
text-decoration: none;
word-break: break-word;
}
.tech-license-content a:hover {
color: var(--tech-primary-hover);
text-decoration: underline;
}
.cc-license-badge {
line-height: 1.4;
font-size: 0.775rem;
color: var(--tech-gray-600);
}
.cc-license-badge a {
display: inline-block;
margin-bottom: 0.25rem;
}
/* ==========================================================================
7. INNER PAGE HEADER BANNER
========================================================================== */
.tech-inner-banner {
background: var(--tech-gradient);
padding: 2.75rem 0 3.25rem;
color: #ffffff;
position: relative;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tech-inner-banner::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.1'%3E%3Cpath d='M0 40h35l15 15v25M80 0v35l15 15h25M120 80h15l15 15v30M40 120v15l15 15h25'/%3E%3Cpath d='M40 20h20v20M20 80v20h20M100 40v20h20M140 100v20h-20M60 140v-20h20'/%3E%3Ccircle cx='50' cy='80' r='3' fill='%2338bdf8' fill-opacity='0.35'/%3E%3Ccircle cx='120' cy='50' r='3' fill='%2338bdf8' fill-opacity='0.35'/%3E%3Ccircle cx='150' cy='125' r='3' fill='%2338bdf8' fill-opacity='0.35'/%3E%3Ccircle cx='80' cy='150' r='3' fill='%2338bdf8' fill-opacity='0.35'/%3E%3Ccircle cx='60' cy='40' r='2.5' fill='%23ffffff' fill-opacity='0.3'/%3E%3Ccircle cx='40' cy='100' r='2.5' fill='%23ffffff' fill-opacity='0.3'/%3E%3C/g%3E%3C/svg%3E");
background-size: 160px 160px;
opacity: 0.6;
pointer-events: none;
animation: techCircuitDrift 50s linear infinite;
}
.tech-breadcrumb a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
}
.tech-breadcrumb a:hover {
color: #ffffff;
text-decoration: underline;
}
/* ==========================================================================
8. MODERN HIGH-TECH FOOTER (Harmonious Silk Vortex & Discrete Network)
========================================================================== */
.tech-footer {
background-color: #020c1b;
background-image:
linear-gradient(180deg, rgba(2, 12, 27, 0.93) 0%, rgba(3, 22, 53, 0.78) 50%, rgba(1, 8, 20, 0.95) 100%),
url('../images/footer_bg_silk_vortex.jpg');
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
color: #94a3b8;
padding: 4.5rem 0 0;
border-top: 1px solid rgba(0, 180, 216, 0.35);
position: relative;
overflow: hidden;
}
/* Subtle Ambient Silk Wave Glow Overlay */
.tech-footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle at 85% 80%, rgba(0, 210, 255, 0.12), transparent 50%),
radial-gradient(circle at 15% 20%, rgba(3, 54, 146, 0.25), transparent 60%);
pointer-events: none;
opacity: 0.9;
}
/* Glowing Top Accent Line */
.tech-footer::after {
content: '';
position: absolute;
top: 0;
left: 5%;
right: 5%;
height: 2px;
background: linear-gradient(90deg, transparent, #00d2ff, #033692, transparent);
box-shadow: 0 0 16px rgba(0, 210, 255, 0.7);
pointer-events: none;
}
.tech-footer-brand {
display: inline-flex;
align-items: center;
gap: 0.85rem;
text-decoration: none;
transition: transform 0.2s ease;
}
.tech-footer-brand:hover {
transform: translateY(-2px);
}
.tech-footer-brand-logo {
max-height: 50px;
width: auto;
object-fit: contain;
background: #ffffff;
padding: 5px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.tech-footer-brand-initials {
font-size: 1.65rem;
font-weight: 900;
line-height: 1.1;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #ffffff;
background: linear-gradient(135deg, #ffffff 0%, #7dd3fc 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.tech-footer-brand-title {
font-size: 0.775rem;
color: #cbd5e1;
line-height: 1.3;
margin-top: 2px;
}
.tech-footer-about {
color: #94a3b8;
font-size: 0.875rem;
line-height: 1.7;
margin-bottom: 1.25rem;
}
.tech-footer-badge {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 6px;
padding: 0.35rem 0.65rem;
font-size: 0.8rem;
color: #cbd5e1;
display: inline-flex;
align-items: center;
gap: 0.4rem;
transition: all 0.2s ease;
}
.tech-footer-badge:hover {
background: rgba(0, 180, 216, 0.12);
border-color: rgba(0, 180, 216, 0.3);
color: #ffffff;
}
.tech-footer-title {
color: #ffffff;
font-size: 1.05rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1.35rem;
position: relative;
padding-bottom: 0.65rem;
display: flex;
align-items: center;
gap: 0.45rem;
}
.tech-footer-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 35px;
height: 2.5px;
border-radius: 2px;
background: linear-gradient(90deg, var(--tech-accent), var(--tech-primary));
box-shadow: 0 0 8px rgba(0, 180, 216, 0.6);
}
.tech-footer-links {
list-style: none;
padding-left: 0;
margin-bottom: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.tech-footer-links li {
margin: 0;
}
.tech-footer-links a {
color: #94a3b8;
text-decoration: none;
font-size: 0.885rem;
font-weight: 500;
transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.tech-footer-links a:hover {
color: #ffffff;
transform: translateX(4px);
}
.tech-footer-links a i {
color: var(--tech-accent);
font-size: 0.75rem;
transition: transform 0.2s ease;
}
.tech-footer-links a:hover i {
color: #38bdf8;
transform: translateX(2px);
}
.tech-footer-contact-item {
display: flex;
align-items: flex-start;
gap: 0.65rem;
margin-bottom: 0.75rem;
font-size: 0.85rem;
color: #cbd5e1;
line-height: 1.5;
}
.tech-footer-contact-icon {
width: 28px;
height: 28px;
border-radius: 6px;
background: rgba(0, 180, 216, 0.12);
border: 1px solid rgba(0, 180, 216, 0.25);
color: var(--tech-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
flex-shrink: 0;
margin-top: 1px;
}
.tech-social-btn {
width: 36px;
height: 36px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff !important;
font-size: 1rem;
text-decoration: none;
transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.tech-social-btn:hover {
transform: translateY(-3px) scale(1.08);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
border-color: rgba(255, 255, 255, 0.4);
}
.tech-footer-pkp-box {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 0.75rem 0.85rem;
transition: all 0.22s ease;
backdrop-filter: blur(8px);
}
.tech-footer-pkp-box:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(0, 180, 216, 0.35);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.tech-footer-bottom {
padding: 1.5rem 0;
margin-top: 3.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-size: 0.85rem;
color: #64748b;
position: relative;
z-index: 1;
}
/* ==========================================================================
9. FLOATING ACTIONS (WhatsApp Chat & Back to Top)
========================================================================== */
.tech-floating-actions {
position: fixed;
bottom: 10px;
right: 30px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
z-index: 9990;
pointer-events: none;
}
.tech-floating-actions > * {
pointer-events: auto;
}
/* Floating WhatsApp Chat Button */
.tech-float-whatsapp {
display: flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
color: #ffffff !important;
text-decoration: none !important;
padding: 10px 16px 10px 14px;
border-radius: 50px;
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4), 0 2px 6px rgba(0, 0, 0, 0.15);
border: 1.5px solid rgba(255, 255, 255, 0.4);
transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
font-size: 0.875rem;
font-weight: 700;
position: relative;
overflow: hidden;
}
.tech-float-whatsapp::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: 50px;
background: rgba(255, 255, 255, 0.2);
opacity: 0;
transition: opacity 0.2s ease;
}
.tech-float-whatsapp:hover::before {
opacity: 1;
}
.tech-float-whatsapp i {
font-size: 1.35rem;
line-height: 1;
display: inline-block;
animation: techWaPulse 2.5s infinite;
}
.tech-float-whatsapp .tech-float-label {
display: inline-block;
white-space: nowrap;
letter-spacing: 0.01em;
}
.tech-float-whatsapp:hover {
transform: translateY(-4px) scale(1.04);
box-shadow: 0 10px 28px rgba(37, 211, 102, 0.55), 0 4px 10px rgba(0, 0, 0, 0.2);
color: #ffffff !important;
}
@keyframes techWaPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15) rotate(-6deg); }
}
/* Floating Back to Top Button */
.tech-back-to-top {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--tech-gradient);
color: #ffffff !important;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 18px rgba(3, 54, 146, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
border: 1.5px solid rgba(255, 255, 255, 0.35);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(16px) scale(0.85);
transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none !important;
font-size: 1.2rem;
}
.tech-back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.tech-back-to-top:hover {
transform: translateY(-4px) scale(1.08);
box-shadow: 0 10px 26px rgba(3, 54, 146, 0.55), 0 4px 10px rgba(0, 0, 0, 0.2);
color: #ffffff !important;
}
@media (max-width: 575.98px) {
.tech-floating-actions {
bottom: 16px;
right: 22px;
gap: 10px;
}
.tech-float-whatsapp {
padding: 10px;
border-radius: 50%;
width: 44px;
height: 44px;
justify-content: center;
}
.tech-float-whatsapp .tech-float-label {
display: none;
}
.tech-back-to-top {
width: 40px;
height: 40px;
}
}
/* OJS block plugins */
.pkp_block {
background: #ffffff;
border: 1px solid var(--tech-gray-200);
border-radius: var(--tech-radius);
padding: 1.4rem;
margin-bottom: 1.5rem;
box-shadow: var(--tech-shadow-2xs);
}
.pkp_block .title {
font-size: 0.95rem;
font-weight: 800;
color: var(--tech-gray-900);
margin-bottom: 1rem;
padding-bottom: 0.55rem;
border-bottom: 2px solid var(--tech-subtle);
display: flex;
align-items: center;
gap: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pkp_block .content ul {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.pkp_block .content ul li {
padding: 0.45rem 0;
border-bottom: 1px dashed var(--tech-gray-200);
}
.pkp_block .content ul li:last-child {
border-bottom: none;
}
.pkp_block .content ul li a {
color: var(--tech-gray-700);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s ease;
}
.pkp_block .content ul li a:hover {
color: var(--tech-primary);
}
/* Reading Progress Bar */
#tech-reading-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: linear-gradient(90deg, #00b4d8, #033692);
z-index: 9999;
width: 0%;
transition: width 0.1s ease;
}
/* ==========================================================================
9. COMPREHENSIVE MOBILE-FRIENDLY & RESPONSIVE UI RULES
========================================================================== */
/* Global Mobile Fixes */
html, body {
overflow-x: clip !important;
max-width: 100vw;
-webkit-text-size-adjust: 100%;
}
img, svg {
max-width: 100%;
height: auto;
}
.table-responsive {
-webkit-overflow-scrolling: touch;
}
/* --- TABLETS & MOBILE (< 992px) --- */
@media (max-width: 991.98px) {
/* Navbar & Navigation */
.tech-navbar {
padding: 0.65rem 0;
}
.navbar-toggler {
padding: 0.5rem 0.65rem;
background: #f1f5f9;
border-radius: 8px;
border: 1px solid #e2e8f0 !important;
transition: all 0.2s ease;
}
.navbar-toggler:focus {
box-shadow: 0 0 0 3px rgba(3, 54, 146, 0.15) !important;
}
.tech-nav {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 1.15rem 1rem;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
margin-top: 0.75rem;
}
.tech-nav .navbar-nav .nav-item {
border-bottom: 1px solid #f1f5f9;
}
.tech-nav .navbar-nav .nav-item:last-child {
border-bottom: none;
}
.tech-nav .navbar-nav .nav-link {
padding: 0.65rem 0.5rem;
font-size: 0.95rem;
font-weight: 600;
}
.tech-nav .dropdown-menu {
border: 1px solid #e2e8f0;
box-shadow: none;
background: #f8fafc;
margin-left: 0.5rem;
border-radius: 8px;
padding: 0.35rem;
}
/* Hero Section Banner */
.tech-hero {
padding: 2.75rem 0 2rem;
}
.tech-hero-title {
font-size: clamp(1.5rem, 4.5vw, 2.25rem);
line-height: 1.25;
}
.tech-hero-desc {
font-size: 0.95rem;
margin-bottom: 1.25rem;
}
.tech-hero-stats {
margin-top: 2rem;
padding-top: 1.5rem;
}
/* Metrics Ribbon */
.tech-metric-card {
padding: 1rem 0.85rem;
}
.tech-metric-number {
font-size: 1.5rem;
}
/* Content Columns */
.tech-sidebar-wrapper,
.tech-sidebar-blocks {
margin-top: 1.5rem;
}
}
/* --- SMARTPHONES LANDSCAPE & PORTRAIT (< 768px) --- */
@media (max-width: 767.98px) {
/* Brand Header */
.tech-brand {
gap: 0.65rem;
}
.tech-brand-logo,
.tech-brand div[style*="width: 44px"] {
width: 38px !important;
height: 38px !important;
}
.tech-brand-initials {
font-size: 1.05rem;
}
.tech-brand-title {
font-size: 0.8rem;
max-width: 260px;
line-height: 1.25;
}
/* Hero Section */
.tech-hero {
padding: 2.25rem 0 1.5rem;
text-align: center;
}
.tech-hero-actions {
justify-content: center;
}
/* About the Journal Card */
.tech-about-card {
padding: 1.25rem 1rem;
margin-bottom: 1.25rem;
}
/* Kotak Keterangan Edisi */
.tech-issue-header-card {
margin-bottom: 1.25rem !important;
}
.tech-issue-header-card .card-body {
padding: 1.25rem 1rem !important;
}
/* Indexing Badges */
.tech-indexing-card {
padding: 1.25rem 1rem;
margin-bottom: 1.25rem;
}
.tech-index-badge-footer {
padding: 0.4rem 0.75rem;
font-size: 0.775rem;
}
/* Article Cards */
.tech-article-card {
padding: 1.15rem 1rem;
margin-bottom: 1rem;
}
.tech-article-title {
font-size: 0.975rem;
line-height: 1.4;
}
.tech-article-authors {
font-size: 0.825rem;
}
/* Monthly Downloads & World Map Sections */
.tech-stats-section-card {
padding: 1.25rem 1rem;
margin-bottom: 1.25rem;
}
/* Footer */
.tech-footer {
padding: 2.75rem 0 0;
}
.tech-footer-bottom {
margin-top: 2rem;
padding: 1.25rem 0;
text-align: center;
}
}
/* --- EXTRA SMALL SMARTPHONES (< 576px) --- */
@media (max-width: 575.98px) {
/* Brand Container */
.tech-brand-title {
max-width: 210px;
font-size: 0.75rem;
}
.tech-brand-initials {
font-size: 0.95rem;
}
/* Hero CTA Buttons Full Width */
.tech-hero-actions {
flex-direction: column;
width: 100%;
}
.tech-hero-actions .btn {
width: 100%;
justify-content: center;
}
/* 4-Features Grid in About Card: 1 column on extra small */
.tech-about-card .row.g-2 > div {
width: 100%;
}
/* Article Card Cover & Buttons */
.tech-article-cover-col {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 0.65rem;
}
.tech-article-cover-link {
width: 110px;
height: 110px;
}
/* Bottom Row of Article Card (DOI + PDF) */
.tech-article-card .d-flex.justify-content-between {
flex-direction: column;
align-items: stretch !important;
gap: 0.65rem !important;
}
.btn-tech-pdf {
width: 100%;
justify-content: center;
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
/* Action buttons in About card */
.tech-about-card .d-flex.gap-2.pt-2 {
flex-direction: column;
}
.tech-about-card .d-flex.gap-2.pt-2 .btn {
width: 100%;
text-align: center;
justify-content: center;
}
/* Sidebar Blocks */
.tech-widget-card,
.tech-sidebar-blocks .pkp_block,
.tech-sidebar-blocks .block,
.tech-sidebar-blocks .tech-widget-card {
padding: 1rem 0.85rem;
}
.tech-widget-card .tech-col-title,
.tech-sidebar-blocks .title:not(.pkp_screen_reader),
.tech-sidebar-blocks .pkp_block_title,
.tech-sidebar-blocks .tech-col-title {
margin: -1rem -0.85rem 0.85rem -0.85rem;
padding: 0.65rem 0.85rem;
font-size: 0.8rem;
}
/* Monthly Downloads Chart Container */
.tech-monthly-chart-box {
height: 240px !important;
padding: 0.75rem 0.5rem !important;
}
/* Authors World Map */
.tech-authors-map-container .card {
padding: 1.25rem 1rem !important;
}
.tech-authors-map-wrapper {
min-height: 220px;
}
}
/* ==========================================================================
AUTH & USER PAGES (Login, Register, Reset Password, Messages)
========================================================================== */
.page_register,
.page_login,
.page_lost_password,
.page_message,
.page_register_complete {
min-height: 60vh;
}
.page_register .form-control:focus,
.page_register .form-select:focus,
.page_login .form-control:focus,
.page_lost_password .form-control:focus {
border-color: var(--tech-primary) !important;
box-shadow: 0 0 0 0.25rem rgba(var(--tech-primary-rgb), 0.15) !important;
}
.page_register .input-group-text,
.page_lost_password .input-group-text {
color: var(--tech-primary);
background-color: #ffffff;
}
.page_register .form-check-input:checked,
.page_login .form-check-input:checked,
.page_lost_password .form-check-input:checked {
background-color: var(--tech-primary);
border-color: var(--tech-primary);
}
.page_register .form-check-input:focus,
.page_login .form-check-input:focus,
.page_lost_password .form-check-input:focus {
border-color: var(--tech-primary);
box-shadow: 0 0 0 0.2rem rgba(var(--tech-primary-rgb), 0.2);
}
/* Responsive adjustment for Hero HUD rings */
@media (max-width: 991.98px) {
.tech-hero-hud {
display: none !important;
}
}
/* Accessibility: Respect Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
.tech-hero,
.tech-hero::before,
.tech-inner-banner::before,
.tech-hero-orb,
.tech-hero-orb-1,
.tech-hero-orb-2,
.tech-hero-orb-3,
.tech-hero-scanline,
.tech-hero-particles .particle,
.tech-showcase-card,
.tech-hud-ring,
.tech-hud-ring-outer,
.tech-hud-ring-inner,
.tech-beam,
.tech-hero-grid-perspective {
animation: none !important;
transform: none !important;
}
.tech-hero-canvas {
display: none !important;
}
}
/* ==========================================================================
JACODESMATH Theme - Article Details: 12-Month Views & Downloads Chart
========================================================================== */
.tech-usage-stats-card {
position: relative;
}
.tech-chart-header-icon {
width: 40px;
height: 40px;
background: var(--tech-subtle);
color: var(--tech-primary) !important;
border: 1px solid rgba(var(--tech-primary-rgb), 0.2);
}
.tech-chart-filter-group .btn {
font-size: 0.75rem !important;
font-weight: 600 !important;
padding: 4px 11px !important;
border-color: #cbd5e1 !important;
color: #475569 !important;
background-color: #ffffff !important;
transition: all 0.15s ease !important;
}
.tech-chart-filter-group .btn:hover {
background-color: var(--tech-subtle) !important;
color: var(--tech-primary) !important;
border-color: var(--tech-primary) !important;
}
.tech-chart-filter-group .btn.active {
background-color: var(--tech-primary) !important;
color: #ffffff !important;
border-color: var(--tech-primary) !important;
box-shadow: 0 2px 6px rgba(var(--tech-primary-rgb), 0.25) !important;
}
.tech-chart-wrapper {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 0.75rem !important;
}
/* ==========================================================================
JACODESMATH Theme - Article Details: References / Citations Styling
========================================================================== */
.tech-references-section {
position: relative;
}
.tech-ref-header-icon {
width: 40px;
height: 40px;
background: var(--tech-subtle);
color: var(--tech-primary) !important;
border: 1px solid rgba(var(--tech-primary-rgb), 0.2);
}
.tech-ref-count-badge {
background: var(--tech-subtle) !important;
color: var(--tech-primary) !important;
border: 1px solid rgba(var(--tech-primary-rgb), 0.25) !important;
font-size: 0.725rem !important;
padding: 4px 10px !important;
}
/* References List: Generous spacing between items */
.tech-references-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 13px !important;
}
/* Individual Reference Item: Modern Card with Theme Border Accent */
.tech-reference-item {
position: relative !important;
display: flex !important;
align-items: flex-start !important;
gap: 14px !important;
padding: 14px 18px !important;
background-color: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-left: 4px solid var(--tech-primary) !important;
border-radius: 0.65rem !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.tech-reference-item:hover {
background-color: #ffffff !important;
border-color: #cbd5e1 !important;
border-left-color: var(--tech-primary) !important;
box-shadow: 0 4px 14px rgba(3, 54, 146, 0.08) !important;
transform: translateY(-1px) !important;
}
/* Reference Index Number Badge */
.tech-ref-index-col {
flex-shrink: 0;
display: flex;
align-items: center;
}
.tech-ref-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 36px !important;
padding: 3px 6px !important;
background: #ffffff !important;
color: var(--tech-primary) !important;
border: 1px solid rgba(var(--tech-primary-rgb), 0.25) !important;
border-radius: 6px !important;
font-weight: 700 !important;
font-size: 0.775rem !important;
font-family: var(--tech-font-mono), monospace !important;
line-height: 1.3 !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
transition: all 0.15s ease !important;
}
.tech-reference-item:hover .tech-ref-badge {
background: var(--tech-primary) !important;
color: #ffffff !important;
border-color: var(--tech-primary) !important;
}
/* Reference Body & Text */
.tech-ref-body {
flex-grow: 1 !important;
min-width: 0 !important;
}
.tech-ref-text {
font-size: 0.885rem !important;
line-height: 1.72 !important;
color: #334155 !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
text-align: justify !important;
}
/* Active Links for DOIs and Web URLs */
.tech-ref-link {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 1px 8px !important;
margin: 2px 2px !important;
background-color: #ffffff !important;
border: 1px solid rgba(var(--tech-primary-rgb), 0.25) !important;
border-radius: 4px !important;
color: var(--tech-primary) !important;
font-size: 0.785rem !important;
font-weight: 600 !important;
text-decoration: none !important;
word-break: break-all !important;
transition: all 0.15s ease !important;
vertical-align: middle !important;
}
.tech-ref-link i {
font-size: 0.75rem !important;
}
.tech-ref-link:hover {
background-color: var(--tech-primary) !important;
color: #ffffff !important;
border-color: var(--tech-primary) !important;
box-shadow: 0 2px 6px rgba(3, 54, 146, 0.2) !important;
text-decoration: none !important;
}
.tech-ref-link:hover i {
color: #ffffff !important;
}
/* Action Buttons (Google Scholar, Copy Citation) */
.tech-ref-actions {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 7px !important;
}
.tech-ref-btn {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
font-size: 0.725rem !important;
font-weight: 600 !important;
color: #64748b !important;
background-color: #ffffff !important;
border: 1px solid #e2e8f0 !important;
padding: 3px 9px !important;
border-radius: 5px !important;
text-decoration: none !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
line-height: 1.4 !important;
}
.tech-ref-btn i {
font-size: 0.725rem !important;
}
.tech-ref-btn:hover {
color: var(--tech-primary) !important;
border-color: var(--tech-primary) !important;
background-color: var(--tech-subtle) !important;
text-decoration: none !important;
}
.tech-ref-btn-scholar:hover {
color: #1a73e8 !important;
border-color: #1a73e8 !important;
background-color: #f0f6ff !important;
}
.tech-ref-btn.is-copied {
color: #16a34a !important;
border-color: #16a34a !important;
background-color: #f0fdf4 !important;
}
/* Raw References Fallback */
.tech-references-raw {
line-height: 1.85 !important;
font-size: 0.885rem !important;
background-color: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 0.65rem !important;
padding: 16px 20px !important;
color: #334155 !important;
}
/* References Accordion Toggle (JACODESMATH Production Feature) */
.jacodes-refs-toggle {
background: #f8fbfd !important;
border: 1px solid #d2e3ee !important;
border-radius: 6px !important;
color: #0876b6 !important;
display: flex !important;
align-items: center !important;
font-size: 15px !important;
font-weight: 800 !important;
height: 48px !important;
margin-top: 18px !important;
padding: 0 18px !important;
width: 100% !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
text-align: left !important;
outline: none !important;
}
.jacodes-refs-toggle:hover {
background: #edf7fc !important;
border-color: #0876b6 !important;
color: #0876b6 !important;
}
.jacodes-refs-toggle:focus-visible {
box-shadow: 0 0 0 3px rgba(8, 118, 182, 0.25) !important;
}
.jacodes-toggle-icon {
align-items: center !important;
display: inline-flex !important;
justify-content: center !important;
margin-left: auto !important;
width: 16px !important;
height: 16px !important;
}
.jacodes-toggle-icon::before {
border: solid #0b3760 !important;
border-width: 0 2px 2px 0 !important;
content: "" !important;
display: inline-block !important;
height: 8px !important;
transform: rotate(45deg) !important;
width: 8px !important;
transition: transform 0.25s ease !important;
}
.jacodes-refs-toggle[aria-expanded="true"] .jacodes-toggle-icon::before {
transform: rotate(-135deg) !important;
}
.tech-references-list.jacodes-refs-hidden {
display: none !important;
margin-top: 13px !important;
}
.tech-references-list.jacodes-refs-hidden.jacodes-refs-expanded {
display: flex !important;
}
/* Responsive adjustment for Mobile */
@media (max-width: 575.98px) {
.tech-reference-item {
flex-direction: column !important;
gap: 8px !important;
padding: 12px 14px !important;
}
.tech-ref-badge {
min-width: 32px !important;
font-size: 0.725rem !important;
}
}
/* ==========================================================================
Dimensions Cited By Section (JACODESMATH Production Feature)
========================================================================== */
.jacodes-cited-by,
.jacodes-author-articles {
background: #f8fbfd !important;
border: 1px solid #d9e8f1 !important;
border-radius: 8px !important;
box-shadow: 0 1px 4px rgba(15, 40, 60, 0.035) !important;
overflow: hidden !important;
}
.jacodes-cited-by summary.jacodes-details-summary,
.jacodes-author-articles summary.jacodes-details-summary {
align-items: center !important;
color: #0b3760 !important;
cursor: pointer !important;
display: flex !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
gap: 14px !important;
min-height: 60px !important;
padding: 0 20px !important;
background: transparent !important;
border-bottom: 1px solid transparent !important;
transition: background 0.2s ease !important;
list-style: none !important;
}
.jacodes-cited-by summary.jacodes-details-summary::-webkit-details-marker,
.jacodes-author-articles summary.jacodes-details-summary::-webkit-details-marker {
display: none !important;
}
.jacodes-cited-by[open] summary.jacodes-details-summary,
.jacodes-author-articles[open] summary.jacodes-details-summary {
background: #f1f8fd !important;
border-bottom: 1px solid #d9e8f1 !important;
}
.jacodes-cited-by .jacodes-details-text,
.jacodes-author-articles .jacodes-details-text {
font-size: 1.05rem !important;
font-weight: 700 !important;
color: #0b3760 !important;
letter-spacing: -0.01em !important;
margin-left: 0.75rem !important;
}
.jacodes-details-icon {
align-items: center !important;
background: #e6f4fd !important;
border-radius: 999px !important;
color: #0876b6 !important;
display: inline-flex !important;
flex: 0 0 34px !important;
height: 34px !important;
justify-content: center !important;
width: 34px !important;
}
.jacodes-details-chevron {
align-items: center !important;
display: inline-flex !important;
justify-content: center !important;
margin-left: auto !important;
}
.jacodes-details-chevron::before {
border: solid #0b3760 !important;
border-width: 0 2px 2px 0 !important;
content: "" !important;
display: inline-block !important;
height: 8px !important;
transform: rotate(45deg) !important;
width: 8px !important;
transition: transform 0.25s ease !important;
}
.jacodes-cited-by[open] .jacodes-details-chevron::before,
.jacodes-author-articles[open] .jacodes-details-chevron::before {
transform: rotate(-135deg) !important;
}
/* ==========================================================================
9. SIDEBAR ISSUES ACCORDION WIDGET (JACODESMATH ORIGINAL)
========================================================================== */
@media (min-width: 992px) {
.col-lg-3:has(.tech-sidebar-sticky-issues),
.row:has(.tech-sidebar-sticky-issues) > .col-lg-3 {
align-self: stretch !important;
}
.tech-sidebar-sticky-issues {
position: -webkit-sticky !important;
position: sticky !important;
top: 92px !important;
z-index: 20 !important;
align-self: flex-start !important;
width: 100% !important;
}
.tech-sidebar-sticky-issues .journal-issues-card {
max-height: calc(100vh - 115px) !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}
.tech-sidebar-sticky-issues .journal-issues-card:hover {
box-shadow: 0 8px 24px rgba(3, 54, 146, 0.12) !important;
}
/* Sleek modern scrollbar if accordion expands beyond viewport */
.tech-sidebar-sticky-issues .journal-issues-card::-webkit-scrollbar {
width: 5px !important;
}
.tech-sidebar-sticky-issues .journal-issues-card::-webkit-scrollbar-track {
background: #f1f5f9 !important;
border-radius: 4px !important;
}
.tech-sidebar-sticky-issues .journal-issues-card::-webkit-scrollbar-thumb {
background: rgba(11, 111, 174, 0.3) !important;
border-radius: 4px !important;
}
.tech-sidebar-sticky-issues .journal-issues-card::-webkit-scrollbar-thumb:hover {
background: rgba(11, 111, 174, 0.6) !important;
}
}
.journal-issues-card {
background: #ffffff !important;
border: 1px solid #dfe7ee !important;
border-radius: 12px !important;
padding: 18px 18px !important;
box-shadow: 0 2px 10px rgba(0, 44, 64, 0.05) !important;
box-sizing: border-box !important;
width: 100% !important;
}
.journal-issues-card .journal-issues-title {
display: flex !important;
align-items: center !important;
gap: 10px !important;
color: var(--tech-primary) !important;
font-size: 1.1rem !important;
font-weight: 800 !important;
line-height: 1.3 !important;
margin: 0 0 14px 0 !important;
padding-bottom: 10px !important;
border-bottom: 2px solid #e1e7ec !important;
letter-spacing: -0.01em !important;
}
.journal-issues-card .journal-issues-title::before {
content: "" !important;
display: inline-block !important;
width: 22px !important;
height: 22px !important;
flex: 0 0 22px !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 22px 22px !important;
background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20' stroke='%23033692' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z' stroke='%23033692' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 7h8M8 11h6' stroke='%23033692' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
.journal-issues-accordion {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
}
.jacodes-issues-year {
border-bottom: 1px solid #edf2f6 !important;
transition: background-color 0.15s ease !important;
}
.jacodes-issues-year:last-child {
border-bottom: none !important;
}
.jacodes-issues-year-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 9px 8px !important;
border-radius: 6px !important;
cursor: pointer !important;
user-select: none !important;
list-style: none !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
}
.jacodes-issues-year-header::-webkit-details-marker,
.jacodes-issues-year-header::marker {
display: none !important;
}
.jacodes-issues-year-header:hover {
background-color: #f0f6fa !important;
}
.jacodes-issues-year-header:hover .jacodes-issues-year-name {
color: var(--tech-accent) !important;
}
.jacodes-issues-year[open] > .jacodes-issues-year-header {
background-color: #f0f7fc !important;
}
.jacodes-issues-year[open] > .jacodes-issues-year-header .jacodes-issues-year-name {
color: var(--tech-primary) !important;
font-weight: 700 !important;
}
.jacodes-issues-year-name {
font-size: 14px !important;
font-weight: 600 !important;
color: #1f2933 !important;
line-height: 1.2 !important;
}
.jacodes-issues-badge {
margin-left: auto !important;
margin-right: 10px !important;
background: #eef3f7 !important;
color: #5a738e !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 1px 7px !important;
border-radius: 10px !important;
line-height: 1.4 !important;
}
.jacodes-issues-year[open] > .jacodes-issues-year-header .jacodes-issues-badge {
background: #e0f0fb !important;
color: var(--tech-primary) !important;
}
.jacodes-issues-arrow { display: none !important; }
.jacodes-issues-year-header::after {
content: "" !important;
display: inline-block !important;
width: 7px !important;
height: 7px !important;
border-right: 2px solid #8fa2b3 !important;
border-bottom: 2px solid #8fa2b3 !important;
transform: rotate(-45deg) !important;
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease !important;
margin-right: 4px !important;
flex-shrink: 0 !important;
}
.jacodes-issues-year[open] > .jacodes-issues-year-header::after {
transform: rotate(45deg) !important;
border-color: var(--tech-primary) !important;
}
.jacodes-issues-items {
list-style: none !important;
margin: 3px 0 8px 0 !important;
padding: 2px 0 2px 10px !important;
border-left: 2px solid #e1eaf0 !important;
}
.jacodes-issues-item {
margin: 3px 0 !important;
}
.jacodes-issue-link {
display: flex !important;
flex-wrap: wrap !important;
align-items: baseline !important;
justify-content: space-between !important;
gap: 6px 10px !important;
padding: 6px 9px !important;
border-radius: 6px !important;
text-decoration: none !important;
transition: all 0.16s ease !important;
}
.jacodes-issue-link:hover {
background-color: #f0f7fd !important;
transform: translateX(3px) !important;
text-decoration: none !important;
}
.jacodes-issue-label {
font-size: 13px !important;
font-weight: 600 !important;
color: #0b3760 !important;
line-height: 1.3 !important;
transition: color 0.16s ease !important;
}
.jacodes-issue-link:hover .jacodes-issue-label {
color: var(--tech-accent) !important;
}
.jacodes-issue-date {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 12px !important;
font-weight: 400 !important;
color: #6c8299 !important;
line-height: 1.3 !important;
transition: color 0.16s ease !important;
}
.jacodes-issue-link:hover .jacodes-issue-date {
color: var(--tech-primary) !important;
}
.jacodes-issues-item.is-current .jacodes-issue-link {
background-color: #e8f3fc !important;
border-left: 3px solid var(--tech-primary) !important;
padding-left: 7px !important;
}
.jacodes-issues-item.is-current .jacodes-issue-label {
color: var(--tech-primary) !important;
font-weight: 700 !important;
}
.jacodes-current-badge {
display: inline-block !important;
background: var(--tech-gradient) !important;
color: #ffffff !important;
font-size: 9.5px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
padding: 1px 6px !important;
border-radius: 4px !important;
line-height: 1.3 !important;
}
.journal-issues-footer {
margin-top: 14px !important;
padding-top: 12px !important;
border-top: 1px solid #edf2f6 !important;
}
.journal-issues-archive-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 8px 12px !important;
border-radius: 6px !important;
background: #f0f6fa !important;
border: 1px solid #d2e1ee !important;
color: var(--tech-primary) !important;
font-size: 12.5px !important;
font-weight: 700 !important;
text-decoration: none !important;
text-align: center !important;
transition: all 0.18s ease !important;
}
.journal-issues-archive-btn:hover {
background: var(--tech-primary) !important;
color: #ffffff !important;
border-color: var(--tech-primary) !important;
box-shadow: 0 4px 10px rgba(var(--tech-primary-rgb), 0.25) !important;
}
/* ==========================================================================
JACODESMATH Author Badges (ORCID, MathSciNet, zbMATH Open, ROR)
========================================================================== */
.jacodes-author-identifiers {
display: inline-flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 6px !important;
min-height: 28px !important;
}
.jacodes-author-identifiers:empty {
display: none !important;
border-top: none !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
/* 1. ORCID */
.jacodes-author-orcid {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
transition: transform 0.2s ease !important;
flex-shrink: 0 !important;
vertical-align: middle !important;
}
.jacodes-author-orcid svg {
width: 20px !important;
height: 20px !important;
display: block !important;
flex-shrink: 0 !important;
}
.jacodes-author-orcid:hover {
transform: scale(1.12) !important;
}
/* 2. MathSciNet */
.jacodes-author-mathscinet {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
height: 22px !important;
padding: 0 8px !important;
border-radius: 11px !important;
background: #f0f6fc !important;
border: 1px solid #0055b8 !important;
color: #0047ba !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
text-decoration: none !important;
margin: 0 !important;
vertical-align: middle !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 2px rgba(0, 85, 184, 0.12) !important;
flex-shrink: 0 !important;
line-height: 1 !important;
}
.jacodes-author-mathscinet img,
.jacodes-author-mathscinet svg {
width: 13px !important;
height: 13px !important;
object-fit: contain !important;
display: block !important;
flex-shrink: 0 !important;
}
.jacodes-author-mathscinet:hover {
background: #0055b8 !important;
color: #ffffff !important;
border-color: #003d82 !important;
transform: scale(1.05) !important;
box-shadow: 0 2px 6px rgba(0, 85, 184, 0.3) !important;
text-decoration: none !important;
}
/* 3. zbMATH Open */
.jacodes-author-zbmath {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 22px !important;
padding: 0 7px !important;
border-radius: 11px !important;
background: #ffffff !important;
border: 1px solid #cbd5e1 !important;
text-decoration: none !important;
margin: 0 !important;
vertical-align: middle !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
flex-shrink: 0 !important;
line-height: 1 !important;
}
.jacodes-author-zbmath img {
height: 13px !important;
width: auto !important;
display: block !important;
object-fit: contain !important;
flex-shrink: 0 !important;
}
.jacodes-author-zbmath:hover {
background: #f8fafc !important;
border-color: #a31c54 !important;
transform: scale(1.05) !important;
box-shadow: 0 2px 6px rgba(163, 28, 84, 0.25) !important;
text-decoration: none !important;
}
/* 4. ROR */
.jacodes-author-ror {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
height: 22px !important;
padding: 0 8px !important;
border-radius: 11px !important;
background: #f0f9f7 !important;
border: 1px solid #53baa1 !important;
color: #1a6b5a !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
text-decoration: none !important;
margin: 0 !important;
vertical-align: middle !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 2px rgba(83, 186, 161, 0.15) !important;
flex-shrink: 0 !important;
line-height: 1 !important;
}
.jacodes-author-ror svg {
width: 15px !important;
height: 11px !important;
display: block !important;
flex-shrink: 0 !important;
}
.jacodes-author-ror:hover {
background: #53baa1 !important;
color: #ffffff !important;
border-color: #429d87 !important;
transform: scale(1.05) !important;
box-shadow: 0 2px 6px rgba(83, 186, 161, 0.35) !important;
text-decoration: none !important;
}
.jacodes-author-ror:hover svg polygon,
.jacodes-author-ror:hover svg path {
fill: #ffffff !important;
}
/* 5. Article Details Card Links & Rows */
.jacodes-details-list .jacodes-detail-row {
transition: background-color 0.15s ease;
}
.jacodes-details-list .jacodes-detail-row:last-child {
border-bottom: 0 !important;
}
.jacodes-doi-link {
color: var(--tech-primary, #033692);
text-decoration: none;
font-weight: 600;
font-size: 0.825rem;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color 0.15s ease;
}
.jacodes-doi-link:hover {
color: #002266;
text-decoration: underline;
}
.jacodes-doi-link::after {
content: "↗";
font-size: 0.75rem;
line-height: 1;
opacity: 0.6;
}
/* 6. Article Details Card Rows */
.jacodes-details-list .jacodes-detail-row {
padding: 0.45rem 0 !important;
}
/* 7. How to Cite: Inline Expandable Accordion */
#cslCitationFormats,
.citation_formats_list {
display: none;
margin-top: 0.65rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 0.65rem;
transition: all 0.25s ease;
}
#cslCitationFormats[aria-hidden="true"],
.citation_formats_list[aria-hidden="true"] {
display: none !important;
}
#cslCitationFormats[aria-hidden="false"],
.citation_formats_list[aria-hidden="false"] {
display: block !important;
animation: cslFadeDown 0.2s ease-out;
}
@keyframes cslFadeDown {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.citation_formats_styles {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.citation_formats_styles li {
margin-bottom: 2px;
}
.citation_formats_styles a {
display: block;
padding: 0.35rem 0.55rem;
color: #334155 !important;
text-decoration: none !important;
font-size: 0.8rem;
border-radius: 4px;
transition: background-color 0.15s ease, color 0.15s ease;
}
.citation_formats_styles a:hover,
.citation_formats_styles a:focus {
background-color: #e2e8f0 !important;
color: var(--tech-primary, #033692) !important;
font-weight: 600;
}
.citation_formats_button .citation-chevron {
transition: transform 0.2s ease;
}
.citation_formats_button[aria-expanded="true"] .citation-chevron {
transform: rotate(180deg);
}
/* 8. Citation Action Buttons (Copy, RIS, BibTeX) matching production */
.jacodes-citation-actions {
display: flex;
flex-direction: column;
gap: 7px;
width: 100%;
box-sizing: border-box;
}
.jacodes-citation-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
background: #ffffff !important;
color: #334155 !important;
border: 1px solid #cbd5e1 !important;
border-radius: 6px !important;
padding: 7px 10px !important;
font-size: 0.825rem !important;
font-weight: 500 !important;
text-decoration: none !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
box-sizing: border-box !important;
line-height: 1.25 !important;
text-align: center !important;
}
.jacodes-citation-btn:hover {
background: #f8fafc !important;
border-color: var(--tech-primary, #033692) !important;
color: var(--tech-primary, #033692) !important;
}
.jacodes-citation-btn svg {
flex-shrink: 0 !important;
}
.jacodes-citation-copy-btn {
width: 100% !important;
}
.jacodes-citation-download-row {
display: flex !important;
gap: 7px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.jacodes-citation-download-row .jacodes-citation-download-btn {
flex: 1 1 50% !important;
min-width: 0 !important;
white-space: nowrap !important;
font-size: 0.775rem !important;
padding: 7px 5px !important;
}
/* Citations Metrics in Sidebar */
.tech-citation-badge-wrapper {
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.tech-scopus-circle {
width: 62px !important;
height: 62px !important;
border-radius: 50% !important;
background: #fff3e8 !important;
border: 2.5px solid #e9711c !important;
color: #e9711c !important;
box-shadow: 0 3px 10px rgba(233, 113, 28, 0.16) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.tech-scopus-circle:hover {
transform: translateY(-2px) scale(1.04) !important;
box-shadow: 0 5px 15px rgba(233, 113, 28, 0.28) !important;
border-color: #d85c0b !important;
background: #ffede0 !important;
}
.tech-scopus-circle:active {
transform: translateY(0) scale(0.98) !important;
}
.tech-citation-link {
text-decoration: none !important;
line-height: 1.25 !important;
transition: opacity 0.15s ease !important;
}
.tech-citation-link:hover {
opacity: 0.85 !important;
}
.tech-dimensions-link {
color: var(--tech-primary) !important;
}
.tech-scopus-link {
color: #e9711c !important;
}
.tech-citation-label {
font-size: 0.8rem !important;
font-weight: 700 !important;
line-height: 1.25 !important;
}
.tech-citation-sublabel {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
font-size: 0.725rem !important;
font-weight: 600 !important;
line-height: 1.2 !important;
}
.tech-citation-sublabel i {
font-size: 0.65rem !important;
}
/* ==========================================================================
10. ISSUE LANDING PAGE (Current Issue & Archives)
========================================================================== */
.tech-issue-showcase-card {
background-color: #f7fbff !important;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 480' fill='none'%3E%3Cpath d='M-100 480 C 180 390 420 490 700 420 C 950 360 1080 390 1300 450 L1300 500 L-100 500 Z' fill='%2338bdf8' fill-opacity='0.16'/%3E%3Cpath d='M-50 490 C 220 420 500 510 780 440 C 1000 380 1150 410 1300 470 L1300 500 L-50 500 Z' fill='%230284c7' fill-opacity='0.11'/%3E%3C/svg%3E"),
linear-gradient(135deg, #ffffff 0%, #f1f8fe 45%, #def0fe 100%) !important;
background-position: right bottom, center center !important;
background-repeat: no-repeat, no-repeat !important;
background-size: cover, cover !important;
border: 1px solid #bfdbfe !important;
border-radius: 24px !important;
box-shadow: 0 16px 40px rgba(11, 111, 174, 0.08), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
position: relative !important;
overflow: hidden !important;
padding: 2.75rem 3.25rem !important;
}
.tech-issue-showcase-card > .row {
position: relative;
z-index: 1;
}
/* Badge */
.tech-issue-current-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
background: linear-gradient(135deg, #023a78 0%, #0353a4 100%) !important;
color: #ffffff !important;
font-size: 0.78rem !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
padding: 0.42rem 1.15rem !important;
border-radius: 50px !important;
box-shadow: 0 4px 12px rgba(2, 58, 120, 0.22) !important;
}
/* Title row */
.tech-issue-title-row {
display: flex !important;
align-items: baseline !important;
flex-wrap: wrap !important;
gap: 0.5rem !important;
}
.tech-issue-main-title {
font-family: var(--tech-font), system-ui, -apple-system, sans-serif !important;
color: #0052cc !important;
font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
font-weight: 800 !important;
letter-spacing: -0.03em !important;
line-height: 1.1 !important;
text-align: left !important;
margin: 0 !important;
}
.tech-issue-title-divider {
color: #94a3b8 !important;
font-size: 2.2rem !important;
font-weight: 300 !important;
line-height: 1 !important;
margin: 0 0.25rem !important;
display: inline-block !important;
}
.tech-issue-sub-title {
font-family: var(--tech-font), system-ui, -apple-system, sans-serif !important;
color: #033692 !important;
font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
line-height: 1.1 !important;
}
/* Accent cyan bar */
.tech-issue-accent-bar {
width: 52px !important;
height: 4.5px !important;
background: linear-gradient(90deg, #38bdf8, #0ea5e9) !important;
border-radius: 3px !important;
margin-top: 0.6rem !important;
margin-bottom: 1.6rem !important;
box-shadow: 0 2px 6px rgba(14, 165, 233, 0.35) !important;
}
/* Journal full name */
.tech-issue-journal-name {
color: #1e293b !important;
font-family: var(--tech-font), system-ui, -apple-system, sans-serif !important;
font-size: 1.05rem !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
line-height: 1.4 !important;
}
/* 4 White Metric Cards */
.tech-issue-stats-grid {
margin-top: 0.5rem !important;
}
.tech-issue-stat-box {
background: #ffffff !important;
border: 1px solid #e1effc !important;
border-radius: 16px !important;
padding: 0.85rem 1rem !important;
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
height: 100% !important;
box-shadow: 0 4px 14px rgba(11, 111, 174, 0.05) !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.tech-issue-stat-box:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 24px rgba(11, 111, 174, 0.12) !important;
border-color: #bae6fd !important;
}
.tech-issue-stat-icon {
font-size: 1.75rem !important;
line-height: 1 !important;
color: #0284c7 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.tech-issue-stat-icon.text-cyan {
color: #0ea5e9 !important;
}
.tech-issue-stat-content {
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
.tech-issue-stat-val {
font-size: 1.4rem !important;
font-weight: 800 !important;
color: #0f172a !important;
line-height: 1.1 !important;
font-family: var(--tech-font), system-ui, -apple-system, sans-serif !important;
}
.tech-issue-stat-lbl {
font-size: 0.785rem !important;
font-weight: 600 !important;
color: #64748b !important;
margin-top: 2px !important;
}
.tech-issue-stat-title {
font-size: 0.95rem !important;
font-weight: 800 !important;
color: #0f172a !important;
line-height: 1.15 !important;
}
.tech-issue-stat-sub {
font-size: 0.725rem !important;
font-weight: 500 !important;
color: #64748b !important;
margin-top: 2px !important;
white-space: nowrap !important;
}
/* ==========================================================================
11. ARCHIVE PAGE — YEAR ACCORDIONS & ISSUE CARDS
========================================================================== */
.tech-archive-year-group {
background: #ffffff !important;
border: 1px solid #e1effc !important;
border-radius: 18px !important;
overflow: hidden !important;
box-shadow: 0 4px 16px rgba(11, 111, 174, 0.04) !important;
transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.tech-archive-year-group:hover {
border-color: #cae3fc !important;
box-shadow: 0 8px 24px rgba(11, 111, 174, 0.08) !important;
}
.tech-archive-year-group[open] {
border-color: #bae6fd !important;
box-shadow: 0 10px 28px rgba(11, 111, 174, 0.1) !important;
}
.tech-archive-year-summary {
list-style: none !important;
cursor: pointer !important;
padding: 1.15rem 1.4rem !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: linear-gradient(90deg, #ffffff 0%, #f8fbfd 100%) !important;
transition: all 0.2s ease !important;
user-select: none !important;
}
.tech-archive-year-summary::-webkit-details-marker {
display: none !important;
}
.tech-archive-year-group[open] > .tech-archive-year-summary {
background: linear-gradient(90deg, #f0f7fe 0%, #e8f4fd 100%) !important;
border-bottom: 1px solid #cae3fc !important;
}
.tech-archive-year-summary:hover {
background: #f0f7fe !important;
}
.tech-archive-year-icon-box {
width: 42px;
height: 42px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(3, 54, 146, 0.08) 0%, rgba(14, 165, 233, 0.12) 100%);
display: flex;
align-items: center;
justify-content: center;
color: #033692;
font-size: 1.15rem;
flex-shrink: 0;
}
.tech-archive-year-title {
font-family: var(--tech-font), system-ui, sans-serif !important;
font-size: 1.35rem !important;
font-weight: 800 !important;
color: #033692 !important;
letter-spacing: -0.01em !important;
}
.tech-archive-year-pill {
background: #ffffff !important;
color: #0284c7 !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
padding: 0.35rem 0.85rem !important;
border-radius: 50px !important;
border: 1px solid #cae3fc !important;
box-shadow: 0 2px 6px rgba(11, 111, 174, 0.06) !important;
}
.tech-archive-chevron-circle {
width: 32px;
height: 32px;
border-radius: 50%;
background: #ffffff;
border: 1px solid #e1effc;
display: flex;
align-items: center;
justify-content: center;
color: #0b6fae;
font-size: 0.85rem;
transition: transform 0.3s ease, background 0.2s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.tech-archive-year-group[open] .tech-archive-chevron-circle {
transform: rotate(180deg);
background: #0284c7;
color: #ffffff;
border-color: #0284c7;
}
.tech-archive-year-body {
padding: 1.6rem 1.4rem !important;
background: #fbfdff !important;
}
.tech-archive-issue-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 20px !important;
box-shadow: 0 4px 18px rgba(11, 111, 174, 0.05) !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
.tech-archive-issue-card .card-body {
padding: 1rem 0.8rem !important;
}
.tech-archive-issue-card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 16px 36px rgba(11, 111, 174, 0.12) !important;
border-color: #bae6fd !important;
}
.tech-archive-card-cover-wrap {
background: linear-gradient(135deg, #f8fafd 0%, #f0f7fe 100%) !important;
padding: 1.25rem 0.85rem !important;
text-align: center !important;
border-bottom: 1px solid #f1f5f9 !important;
}
.tech-archive-card-img {
max-height: 180px !important;
width: auto !important;
object-fit: cover !important;
border-radius: 4px 10px 10px 4px !important;
box-shadow: 4px 8px 20px rgba(2, 44, 92, 0.2) !important;
transition: transform 0.3s ease !important;
}
.tech-archive-issue-card:hover .tech-archive-card-img {
transform: scale(1.03) !important;
}
.tech-archive-issue-card .card-title a {
color: #1e293b !important;
transition: color 0.2s ease !important;
}
.tech-archive-issue-card:hover .card-title a {
color: #0052cc !important;
}
/* Card Badges & Horizontal Dual-Meta Box (Exact Mockup Match - Compact 3-Column Grid) */
.tech-card-vol-badge {
background: linear-gradient(135deg, #003882 0%, #0052cc 100%) !important;
color: #ffffff !important;
font-size: 0.75rem !important;
font-weight: 800 !important;
padding: 0.3rem 0.7rem !important;
border-radius: 50px !important;
letter-spacing: -0.01em !important;
display: inline-block !important;
white-space: nowrap !important;
box-shadow: 0 2px 8px rgba(0, 56, 130, 0.2) !important;
}
.tech-card-oa-pill {
background: #ecfdf5 !important;
color: #059669 !important;
border: 1.5px solid #a7f3d0 !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
padding: 0.26rem 0.6rem !important;
border-radius: 50px !important;
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
}
.tech-card-dual-meta-box {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 0.4rem 0.5rem !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
transition: all 0.2s ease !important;
margin-bottom: 0.85rem !important;
gap: 0.25rem !important;
}
.tech-archive-issue-card:hover .tech-card-dual-meta-box {
border-color: #cae3fc !important;
box-shadow: 0 4px 12px rgba(11, 111, 174, 0.06) !important;
}
.tech-card-meta-left {
display: flex !important;
align-items: center !important;
gap: 0.35rem !important;
min-width: 0 !important;
}
.tech-card-cal-icon {
font-size: 1.05rem !important;
color: #0284c7 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.tech-card-period-pill {
background: #e8f3fe !important;
color: #0f172a !important;
font-size: 0.78rem !important;
font-weight: 800 !important;
padding: 0.2rem 0.42rem !important;
border-radius: 6px !important;
white-space: nowrap !important;
font-family: var(--tech-font), system-ui, sans-serif !important;
letter-spacing: -0.01em !important;
}
.tech-card-meta-divider {
width: 1.5px !important;
height: 22px !important;
background-color: #38bdf8 !important;
margin: 0 0.35rem !important;
flex-shrink: 0 !important;
}
.tech-card-meta-right {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
flex-shrink: 0 !important;
text-align: left !important;
}
.tech-card-meta-label {
display: block !important;
font-size: 0.58rem !important;
font-weight: 800 !important;
letter-spacing: 0.05em !important;
color: #64748b !important;
text-transform: uppercase !important;
line-height: 1 !important;
margin-bottom: 2px !important;
}
.tech-card-meta-val {
display: block !important;
font-size: 0.78rem !important;
font-weight: 800 !important;
color: #0f172a !important;
line-height: 1.1 !important;
white-space: nowrap !important;
}
.tech-card-action-btn {
border: 1.5px solid #38bdf8 !important;
color: #0052cc !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
padding: 0.45rem 1rem !important;
border-radius: 50px !important;
background: #ffffff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.35rem !important;
transition: all 0.25s ease !important;
}
.tech-card-action-btn:hover {
background: linear-gradient(135deg, #0052cc 0%, #0284c7 100%) !important;
color: #ffffff !important;
border-color: transparent !important;
box-shadow: 0 4px 14px rgba(0, 82, 204, 0.25) !important;
transform: translateY(-1px) !important;
}
/* ==========================================================================
SUBMISSIONS PORTAL & JOURNAL STATUS (JACODESMATH Theme)
========================================================================== */
/* Submissions Hero Showcase Banner */
.tech-submissions-hero-card {
position: relative;
background: linear-gradient(135deg, #f0f7fe 0%, #e6f1fc 100%);
border: 1px solid #cae3fc;
border-radius: 20px;
padding: 2.2rem 2.6rem;
box-shadow: 0 8px 24px rgba(11, 111, 174, 0.05);
overflow: hidden;
}
.tech-submissions-hero-card::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50%;
background-image: url("data:image/svg+xml,%3Csvg width='700' height='200' viewBox='0 0 700 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%230b6fae' stroke-width='0.9' opacity='0.22'%3E%3Cpath d='M80 160L170 80L280 130L360 40L460 100L550 30L650 70'/%3E%3Cpath d='M130 30L170 80L260 25L360 40L430 130L460 100'/%3E%3Cpath d='M280 130L340 180L460 100L520 170L650 70'/%3E%3Cpath d='M170 80L230 170L340 180'/%3E%3Cpath d='M360 40L420 10L550 30L600 120L650 70'/%3E%3Cpath d='M460 100L520 55L550 30'/%3E%3Cpath d='M280 130L320 65L360 40'/%3E%3Cpath d='M230 170L290 190L370 155L430 130'/%3E%3Cpath d='M520 170L575 190L650 140L680 50'/%3E%3C/g%3E%3Cg fill='%230b6fae'%3E%3Ccircle cx='170' cy='80' r='5' opacity='0.35'/%3E%3Ccircle cx='280' cy='130' r='5' opacity='0.35'/%3E%3Ccircle cx='360' cy='40' r='5.5' opacity='0.4'/%3E%3Ccircle cx='460' cy='100' r='5' opacity='0.35'/%3E%3Ccircle cx='550' cy='30' r='5.5' opacity='0.4'/%3E%3Ccircle cx='650' cy='70' r='5' opacity='0.35'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
background-size: cover;
pointer-events: none;
}
.tech-submissions-hero-inner {
position: relative;
z-index: 2;
max-width: 780px;
}
.tech-submissions-hero-title {
font-size: 2.2rem;
font-weight: 850;
color: #0f172a;
letter-spacing: -0.02em;
}
.tech-submissions-hero-desc {
font-size: 1.05rem;
line-height: 1.65;
}
/* Submissions Cards */
.tech-subm-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 2.2rem 2.4rem;
box-shadow: 0 4px 18px rgba(11, 111, 174, 0.04);
transition: all 0.3s ease;
}
.tech-subm-card:hover {
border-color: #bae6fd;
box-shadow: 0 10px 28px rgba(11, 111, 174, 0.07);
}
.tech-subm-icon-box {
width: 46px;
height: 46px;
border-radius: 14px;
background: linear-gradient(135deg, #e0f2fe 0%, #cae7fc 100%);
color: var(--tech-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(11, 111, 174, 0.12);
}
/* Account Cards */
.tech-account-card {
background: #f8fafd;
border: 1.5px solid #dbeafe !important;
border-radius: 18px !important;
padding: 1.8rem 1.6rem !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.tech-account-card:hover {
background: #ffffff;
border-color: var(--tech-primary) !important;
box-shadow: 0 12px 28px rgba(11, 111, 174, 0.1);
transform: translateY(-3px);
}
.tech-avatar-circle {
width: 58px;
height: 58px;
border-radius: 50%;
background: #e8f4fc;
border: 2px solid #cae3fc;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(11, 111, 174, 0.08);
}
/* Gradient Buttons */
.tech-btn-gradient {
background: linear-gradient(135deg, #0052cc 0%, #0284c7 100%) !important;
border: none !important;
transition: all 0.25s ease !important;
}
.tech-btn-gradient:hover {
background: linear-gradient(135deg, #003e9c 0%, #0369a1 100%) !important;
box-shadow: 0 6px 18px rgba(0, 82, 204, 0.3) !important;
transform: translateY(-1px);
}
/* Journal Status Card in Sidebar */
.journal-status-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 20px !important;
padding: 1.4rem 1.4rem !important;
box-shadow: 0 4px 18px rgba(11, 111, 174, 0.04) !important;
}
.journal-status-title {
color: var(--tech-primary) !important;
font-size: 1.15rem !important;
font-weight: 800 !important;
padding-bottom: 0.85rem !important;
margin: 0 0 0.85rem 0 !important;
border-bottom: 1.5px solid #edf2f7 !important;
display: flex !important;
align-items: center !important;
}
.journal-status-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.tech-sidebar-blocks .journal-status-list li,
.journal-status-list li {
display: grid !important;
grid-template-columns: 34px minmax(0, 1fr) !important;
column-gap: 12px !important;
row-gap: 3px !important;
align-items: start !important;
padding: 0.75rem 0 !important;
background: transparent !important;
border: none !important;
border-bottom: 1px solid #edf2f6 !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
text-align: left !important;
}
.tech-sidebar-blocks .journal-status-list li:last-child,
.journal-status-list li:last-child {
border-bottom: none !important;
padding-bottom: 0.2rem !important;
}
.tech-sidebar-blocks .journal-status-list li:hover {
background: transparent !important;
transform: none !important;
border-color: #edf2f6 !important;
}
.journal-status-list .status-icon {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
font-size: 11px !important;
font-weight: 800 !important;
line-height: 1 !important;
margin-top: 2px !important;
}
.journal-status-list .status-open {
background: #dcfce7 !important;
color: #15803d !important;
}
.journal-status-list .status-apc {
background: #fef3c7 !important;
color: #b45309 !important;
}
.journal-status-list .status-cc {
background: #f3e8ff !important;
color: #7e22ce !important;
}
.journal-status-list .status-frequency {
background: #f1f5f9 !important;
color: #334155 !important;
}
.journal-status-list .status-indexing {
background: #e0f2fe !important;
color: #0284c7 !important;
font-size: 14px !important;
}
.journal-status-list .status-name {
grid-column: 2 !important;
grid-row: 1 !important;
font-size: 0.88rem !important;
font-weight: 750 !important;
color: #0f172a !important;
text-decoration: none !important;
line-height: 1.3 !important;
}
.journal-status-list .status-text {
grid-column: 2 !important;
grid-row: 2 !important;
font-size: 0.78rem !important;
color: #64748b !important;
line-height: 1.4 !important;
}
.tech-indexing-pill {
display: inline-block !important;
background: #f1f5f9 !important;
color: #0284c7 !important;
padding: 0.2rem 0.55rem !important;
border-radius: 6px !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
text-decoration: none !important;
border: 1px solid #e2e8f0 !important;
transition: all 0.2s ease !important;
}
.tech-indexing-pill:hover {
background: #0284c7 !important;
color: #ffffff !important;
border-color: #0284c7 !important;
}
/* Sidebar Make a Submission CTA */
.tech-sidebar-cta-btn {
background: linear-gradient(135deg, #0052cc 0%, #0284c7 100%) !important;
border: none !important;
border-radius: 14px !important;
font-size: 0.95rem !important;
font-weight: 800 !important;
box-shadow: 0 6px 18px rgba(0, 82, 204, 0.22) !important;
transition: all 0.25s ease !important;
}
.tech-sidebar-cta-btn:hover {
background: linear-gradient(135deg, #003e9c 0%, #0369a1 100%) !important;
box-shadow: 0 10px 24px rgba(0, 82, 204, 0.32) !important;
transform: translateY(-2px) !important;
color: #ffffff !important;
}
/* Privacy Statement Contact Card */
.tech-privacy-contact-card {
background: linear-gradient(135deg, #f8fafd 0%, #f0f7fe 100%) !important;
border: 1.5px solid #dbeafe !important;
border-radius: 20px !important;
padding: 2.2rem 2.4rem !important;
box-shadow: 0 4px 20px rgba(11, 111, 174, 0.05) !important;
transition: all 0.3s ease !important;
}
.tech-privacy-contact-card:hover {
border-color: #93c5fd !important;
box-shadow: 0 8px 24px rgba(11, 111, 174, 0.08) !important;
}
.tech-contact-icon-box {
width: 48px !important;
height: 48px !important;
border-radius: 14px !important;
background: #ffffff !important;
border: 1.5px solid #cae3fc !important;
color: var(--tech-primary) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.4rem !important;
flex-shrink: 0 !important;
box-shadow: 0 3px 10px rgba(11, 111, 174, 0.1) !important;
}
.tech-contact-pill-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 14px !important;
padding: 1.25rem 1.4rem !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
transition: all 0.2s ease !important;
}
.tech-contact-pill-card:hover {
border-color: #cae3fc !important;
box-shadow: 0 4px 14px rgba(11, 111, 174, 0.08) !important;
}
.letter-spacing-wide {
letter-spacing: 0.06em !important;
font-size: 0.72rem !important;
}
.tech-privacy-consent-note {
border-top-color: #e2e8f0 !important;
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
}
.tech-privacy-consent-note i {
font-size: 1.05rem !important;
color: var(--tech-primary) !important;
flex-shrink: 0 !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
}
.tech-contact-pill-card .btn {
margin-top: 0.55rem !important;
}
/* ==========================================================================
16. SUBMISSION PORTAL HERO SHOWCASE BANNER
========================================================================== */
.tech-subm-portal-pill,
.tech-issue-current-pill {
display: inline-flex !important;
align-items: center !important;
gap: 0.45rem !important;
background: linear-gradient(135deg, #023a78 0%, #0353a4 100%) !important;
color: #ffffff !important;
font-size: 0.78rem !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
padding: 0.42rem 1.15rem !important;
border-radius: 50px !important;
box-shadow: 0 4px 12px rgba(2, 58, 120, 0.22) !important;
}
.tech-subm-banner-notice {
margin-top: 1rem !important;
max-width: 740px !important;
}
.tech-subm-banner-p {
font-size: 1.05rem !important;
color: #334155 !important;
line-height: 1.65 !important;
letter-spacing: -0.01em !important;
}
.tech-subm-banner-p a {
color: #0052cc !important;
font-weight: 700 !important;
transition: color 0.2s ease !important;
}
.tech-subm-banner-p a:hover {
color: #003e9c !important;
text-decoration: underline !important;
}
.tech-subm-accent-bar {
width: 52px !important;
height: 4.5px !important;
background: linear-gradient(90deg, #38bdf8, #0ea5e9) !important;
border-radius: 3px !important;
margin-top: 0.8rem !important;
margin-bottom: 1.6rem !important;
box-shadow: 0 2px 6px rgba(14, 165, 233, 0.35) !important;
}
.tech-subm-action-card {
background: #ffffff !important;
border: 1.5px solid #e2e8f0 !important;
border-radius: 16px !important;
padding: 0.75rem 1.25rem !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.85rem !important;
text-decoration: none !important;
color: #0f172a !important;
box-shadow: 0 4px 14px rgba(11, 111, 174, 0.05) !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
white-space: nowrap !important;
}
.tech-subm-action-card:hover {
border-color: #93c5fd !important;
background: #ffffff !important;
box-shadow: 0 8px 24px rgba(11, 111, 174, 0.12) !important;
transform: translateY(-2px) !important;
color: #0052cc !important;
}
.tech-subm-action-icon {
font-size: 1.6rem !important;
color: #0052cc !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
transition: transform 0.25s ease !important;
}
.tech-subm-action-card:hover .tech-subm-action-icon {
transform: scale(1.08) !important;
}
.tech-subm-action-text {
font-size: 0.95rem !important;
font-weight: 750 !important;
color: #0f172a !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.tech-subm-action-card:hover .tech-subm-action-text {
color: #0052cc !important;
}
.tech-subm-illustration-wrap {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
}
.tech-subm-portal-img {
max-height: 250px !important;
width: auto !important;
object-fit: contain !important;
filter: drop-shadow(0 14px 28px rgba(11, 111, 174, 0.16)) !important;
transition: transform 0.35s ease !important;
}
.tech-subm-illustration-wrap:hover .tech-subm-portal-img {
transform: translateY(-4px) scale(1.02) !important;
}
/* APC Diamond Open Access Orbital Seal */
.tech-apc-seal-wrap {
position: relative !important;
width: 290px !important;
height: 290px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
}
.tech-apc-orbit-svg {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
z-index: 1 !important;
background: transparent !important;
}
.tech-apc-orbit-text-top {
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
fill: #033692 !important;
letter-spacing: 3.5px !important;
}
.tech-apc-orbit-text-bot {
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
font-size: 10.5px !important;
font-weight: 800 !important;
fill: #0084c7 !important;
letter-spacing: 2.2px !important;
}
.tech-apc-crystal-core {
max-width: 195px !important;
max-height: 195px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
position: relative !important;
z-index: 2 !important;
background: transparent !important;
filter: drop-shadow(0 14px 28px rgba(11, 111, 174, 0.18)) !important;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.tech-apc-seal-wrap:hover .tech-apc-crystal-core {
transform: translateY(-4px) scale(1.04) !important;
}
/* ==========================================================================
17. AIMS & SCOPE PAGE
========================================================================== */
.tech-aims-body > p:first-of-type {
display: none !important;
}
.tech-aims-body > p {
font-size: 1.05rem !important;
color: #334155 !important;
line-height: 1.75 !important;
margin-bottom: 1.35rem !important;
}
.tech-aims-body > p.p1:nth-of-type(2) {
font-size: 1.25rem !important;
font-weight: 800 !important;
color: #0f172a !important;
margin-top: 0.5rem !important;
margin-bottom: 1.25rem !important;
letter-spacing: -0.01em !important;
position: relative !important;
padding-left: 1.1rem !important;
}
.tech-aims-body > p.p1:nth-of-type(2)::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 15% !important;
height: 70% !important;
width: 4px !important;
background: linear-gradient(180deg, #0052cc 0%, #38bdf8 100%) !important;
border-radius: 4px !important;
}
.tech-aims-body ul {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
gap: 0.95rem !important;
padding-left: 0 !important;
list-style: none !important;
margin: 1.25rem 0 2.5rem 0 !important;
}
.tech-aims-body ul li {
background: #f8fafd !important;
border: 1.5px solid #e2e8f0 !important;
border-radius: 14px !important;
padding: 1rem 1.35rem !important;
font-size: 0.98rem !important;
font-weight: 650 !important;
color: #1e293b !important;
display: flex !important;
align-items: center !important;
gap: 0.85rem !important;
box-shadow: 0 2px 8px rgba(11, 111, 174, 0.03) !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.tech-aims-body ul li::before {
content: "\F272" !important; /* Bootstrap icon bi-check-circle-fill */
font-family: "bootstrap-icons" !important;
color: #0052cc !important;
font-size: 1.2rem !important;
flex-shrink: 0 !important;
line-height: 1 !important;
}
.tech-aims-body ul li:hover {
background: #ffffff !important;
border-color: #93c5fd !important;
box-shadow: 0 8px 20px rgba(11, 111, 174, 0.1) !important;
transform: translateY(-2px) !important;
color: #0052cc !important;
}
/* ==========================================================================
18. SUBMISSION GUIDELINES PAGE
========================================================================== */
.tech-guidelines-body h2,
.tech-guidelines-body h3 {
font-size: 1.35rem !important;
font-weight: 800 !important;
color: #0f172a !important;
margin-top: 2.25rem !important;
margin-bottom: 1.15rem !important;
padding-left: 1.1rem !important;
position: relative !important;
display: flex !important;
align-items: center !important;
letter-spacing: -0.01em !important;
}
.tech-guidelines-body h2:first-of-type,
.tech-guidelines-body h3:first-of-type {
margin-top: 0 !important;
}
.tech-guidelines-body h2::before,
.tech-guidelines-body h3::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 15% !important;
height: 70% !important;
width: 4px !important;
background: linear-gradient(180deg, #0052cc 0%, #38bdf8 100%) !important;
border-radius: 4px !important;
}
.tech-guidelines-body h4 {
font-size: 1.08rem !important;
font-weight: 750 !important;
color: #0052cc !important;
margin-top: 1.5rem !important;
margin-bottom: 0.65rem !important;
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
}
.tech-guidelines-body h4::before {
content: "•" !important;
color: #38bdf8 !important;
font-size: 1.5rem !important;
line-height: 1 !important;
}
.tech-guidelines-body p {
font-size: 1.02rem !important;
color: #334155 !important;
line-height: 1.75 !important;
margin-bottom: 1.15rem !important;
}
.tech-guidelines-body strong {
color: #0f172a !important;
font-weight: 700 !important;
}
.tech-guidelines-body ul {
padding-left: 1.5rem !important;
margin-bottom: 1.5rem !important;
}
.tech-guidelines-body ul li {
font-size: 1rem !important;
color: #334155 !important;
line-height: 1.7 !important;
margin-bottom: 0.5rem !important;
}
/* Accordion under Item 5: Manuscript Preparation with LaTeX */
.jacodes-guideline-accordion {
display: grid !important;
gap: 12px !important;
margin: 24px 0 36px !important;
}
.jacodes-guideline-panel {
overflow: hidden !important;
border: 1.5px solid #e2e8f0 !important;
border-radius: 16px !important;
background: #ffffff !important;
box-shadow: 0 2px 8px rgba(11, 111, 174, 0.03) !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.jacodes-guideline-panel[open] {
border-color: #93c5fd !important;
box-shadow: 0 8px 24px rgba(11, 111, 174, 0.08) !important;
}
.jacodes-guideline-summary {
display: grid !important;
grid-template-columns: 42px minmax(0, 1fr) 32px !important;
gap: 14px !important;
align-items: center !important;
min-height: 62px !important;
padding: 12px 20px !important;
background: #f8fafd !important;
color: #0f172a !important;
cursor: pointer !important;
list-style: none !important;
user-select: none !important;
transition: background 0.2s ease !important;
}
.jacodes-guideline-summary::-webkit-details-marker {
display: none !important;
}
.jacodes-guideline-summary:hover {
background: #f0f7fe !important;
}
.jacodes-guideline-panel[open] .jacodes-guideline-summary {
background: #f0f7fe !important;
border-bottom: 1.5px solid #dbeafe !important;
}
.jacodes-guideline-index {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 38px !important;
height: 38px !important;
border-radius: 50% !important;
background: #e0f2fe !important;
color: #0052cc !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
.jacodes-guideline-title {
min-width: 0 !important;
color: #0f172a !important;
font-size: 1.05rem !important;
font-weight: 750 !important;
line-height: 1.35 !important;
}
.jacodes-guideline-toggle {
position: relative !important;
display: block !important;
width: 30px !important;
height: 30px !important;
border: 1.5px solid #cae3fc !important;
border-radius: 50% !important;
background: #ffffff !important;
transition: border-color 0.2s ease !important;
}
.jacodes-guideline-toggle::before,
.jacodes-guideline-toggle::after {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 12px !important;
height: 2px !important;
border-radius: 2px !important;
background: #0052cc !important;
transform: translate(-50%, -50%) !important;
transition: transform 0.25s ease !important;
}
.jacodes-guideline-toggle::after {
transform: translate(-50%, -50%) rotate(90deg) !important;
}
.jacodes-guideline-panel[open] .jacodes-guideline-toggle::after {
transform: translate(-50%, -50%) rotate(0deg) !important;
}
.jacodes-guideline-panel-content {
padding: 24px 28px !important;
background: #ffffff !important;
}
.jacodes-guideline-panel-content > :first-child {
margin-top: 0 !important;
}
.jacodes-guideline-panel-content > :last-child {
margin-bottom: 0 !important;
}
.jacodes-guideline-panel-content p {
color: #334155 !important;
font-size: 1rem !important;
line-height: 1.75 !important;
margin-bottom: 1rem !important;
}
.jacodes-guideline-panel-content a {
color: #0052cc !important;
font-weight: 650 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
.jacodes-guidelines-bottom-buttons .btn {
transition: all 0.25s ease !important;
}
.jacodes-guidelines-bottom-buttons .btn:hover {
transform: translateY(-2px) !important;
}
/* Complete OpenType ligature disabling globally to prevent 'fi', 'ffi', 'fl' glyph merging (ensuring clear dot on 'i' in 'official', 'Profile', 'Affiliation', etc.) */
html,
body,
*,
*::before,
*::after {
font-variant-ligatures: no-common-ligatures no-discretionary-ligatures no-historical-ligatures none !important;
font-feature-settings: "liga" 0, "calt" 0, "clig" 0, "dlig" 0, "hlig" 0 !important;
}
/* ==========================================================================
21. CONTACT PAGE STYLING
========================================================================== */
.tech-contact-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 20px !important;
padding: 1.75rem 1.5rem !important;
display: flex !important;
flex-direction: column !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
box-shadow: 0 4px 16px rgba(11, 111, 174, 0.04) !important;
}
.tech-contact-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 14px 30px rgba(11, 111, 174, 0.1) !important;
border-color: #93c5fd !important;
}
.tech-contact-header {
display: flex !important;
align-items: center !important;
gap: 1rem !important;
margin-bottom: 1.25rem !important;
padding-bottom: 1rem !important;
border-bottom: 1px solid #f1f5f9 !important;
}
.tech-contact-icon-wrap {
width: 50px !important;
height: 50px !important;
border-radius: 14px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.4rem !important;
flex-shrink: 0 !important;
}
.tech-contact-body {
flex-grow: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 1rem !important;
margin-bottom: 1.5rem !important;
}
.tech-contact-item {
display: flex !important;
align-items: flex-start !important;
gap: 0.75rem !important;
}
.tech-contact-footer {
margin-top: auto !important;
padding-top: 0.5rem !important;
}
/* ==========================================================================
22. EDITORIAL TEAM PAGE STYLING
========================================================================== */
.tech-editor-featured-card {
background: linear-gradient(135deg, #f0f7ff 0%, #e2effe 100%) !important;
border: 1px solid #bfdbfe !important;
box-shadow: 0 10px 30px rgba(11, 111, 174, 0.08) !important;
}
.tech-editor-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 18px !important;
padding: 1.5rem !important;
display: flex !important;
flex-direction: column !important;
box-shadow: 0 4px 14px rgba(11, 111, 174, 0.04) !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.tech-editor-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 14px 28px rgba(11, 111, 174, 0.1) !important;
border-color: #93c5fd !important;
}
.tech-section-badge {
width: 32px !important;
height: 32px !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1rem !important;
flex-shrink: 0 !important;
}
.tech-member-compact-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 14px !important;
padding: 1rem 1.15rem !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
transition: all 0.25s ease !important;
}
.tech-member-compact-card:hover {
transform: translateY(-2px) !important;
border-color: #93c5fd !important;
box-shadow: 0 8px 20px rgba(11, 111, 174, 0.08) !important;
}
/* ==========================================================================
Article Page - Monthly Downloads (pure HTML/CSS chart)
========================================================================== */
.jacodes-mchart {
width: 100%;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.jacodes-mchart-plot {
position: relative;
height: 130px;
border-bottom: 1px solid #cbd5e1;
}
.jacodes-mchart-grid {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
pointer-events: none;
}
.jacodes-mchart-grid span {
display: block;
border-top: 1px dashed #eef2f7;
}
.jacodes-mchart-grid span:last-child { border-top-color: transparent; }
.jacodes-mchart-bars {
position: absolute;
inset: 14px 0 0 0;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 3px;
align-items: end;
}
.jacodes-mchart-col {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
cursor: default;
}
.jacodes-mchart-bar {
display: block;
width: 72%;
min-width: 6px;
border-radius: 3px 3px 0 0;
background: linear-gradient(180deg, #0369a1 0%, #38bdf8 100%);
transition: filter 0.15s ease;
}
.jacodes-mchart-col:hover .jacodes-mchart-bar { filter: brightness(0.88); }
.jacodes-mchart-val {
font-size: 9.5px;
font-weight: 700;
color: #0b3760;
line-height: 1;
margin-bottom: 3px;
white-space: nowrap;
}
.jacodes-mchart-labels {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 3px;
margin-top: 6px;
}
.jacodes-mchart-lbl {
text-align: center;
font-size: 9px;
font-weight: 600;
color: #64748b;
line-height: 1.2;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: visible;
}
/* ==========================================================================
JACODESMATH Modern Auth Pages (Login, Register, Lost Password)
========================================================================== */
.tech-auth-wrapper {
max-width: 480px;
margin: 1.5rem auto 3.5rem auto;
}
.tech-auth-wrapper-wide {
max-width: 860px;
margin: 1.5rem auto 3.5rem auto;
}
.tech-auth-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 10px 30px -5px rgba(11, 37, 69, 0.08), 0 4px 6px -2px rgba(11, 37, 69, 0.03);
transition: all 0.3s ease;
}
.tech-auth-card:hover {
border-color: #cbd5e1;
box-shadow: 0 14px 36px -5px rgba(11, 37, 69, 0.11);
}
.tech-auth-badge {
width: 58px;
height: 58px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.55rem;
margin: 0 auto 1.25rem auto;
}
.tech-auth-badge-primary {
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
color: #ffffff;
box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35);
}
.tech-auth-badge-success {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #ffffff;
box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}
.tech-auth-badge-warning {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: #ffffff;
box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
}
.tech-auth-title {
font-weight: 800;
color: #0b2545;
font-size: 1.65rem;
letter-spacing: -0.02em;
margin-bottom: 0.35rem;
}
.tech-auth-subtitle {
color: #64748b;
font-size: 0.92rem;
margin-bottom: 1.75rem;
line-height: 1.5;
}
.tech-auth-group {
margin-bottom: 1.25rem;
}
.tech-auth-group label {
display: block;
font-weight: 600;
font-size: 0.85rem;
color: #334155;
margin-bottom: 0.4rem;
}
.tech-auth-input-group {
position: relative;
display: flex;
align-items: stretch;
width: 100%;
}
.tech-auth-input-group .input-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
font-size: 1.05rem;
z-index: 4;
pointer-events: none;
}
.tech-auth-input-group .form-control,
.tech-auth-input-group select.form-control {
padding-left: 42px !important;
height: 46px;
border: 1px solid #cbd5e1;
border-radius: 10px !important;
font-size: 0.92rem;
background-color: #f8fafc;
color: #1e293b;
transition: all 0.2s ease;
}
.tech-auth-input-group .form-control:focus,
.tech-auth-input-group select.form-control:focus {
background-color: #ffffff;
border-color: #0284c7;
box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
outline: none;
}
.tech-auth-submit-btn {
background: linear-gradient(135deg, #0b2545 0%, #134074 100%);
border: none;
color: #ffffff !important;
font-weight: 700;
font-size: 0.95rem;
padding: 0.75rem 1.5rem;
border-radius: 10px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(11, 37, 69, 0.2);
text-decoration: none;
cursor: pointer;
}
.tech-auth-submit-btn:hover {
background: linear-gradient(135deg, #134074 0%, #0b2545 100%);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(11, 37, 69, 0.28);
}
.tech-auth-divider {
display: flex;
align-items: center;
text-align: center;
margin: 1.5rem 0;
color: #94a3b8;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.tech-auth-divider::before,
.tech-auth-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid #e2e8f0;
}
.tech-auth-divider:not(:empty)::before { margin-right: .75em; }
.tech-auth-divider:not(:empty)::after { margin-left: .75em; }
.tech-auth-footer {
text-align: center;
border-top: 1px solid #f1f5f9;
margin-top: 1.5rem;
padding-top: 1.25rem;
color: #64748b;
font-size: 0.88rem;
}
.tech-auth-section-title {
font-weight: 700;
color: #0b2545;
font-size: 1.08rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #e2e8f0;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* ==========================================================================
JACODESMATH Modern Search Page
========================================================================== */
.tech-search-filter-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 18px;
padding: 1.5rem;
box-shadow: 0 4px 18px rgba(11, 37, 69, 0.04);
}
.tech-empty-icon-circle {
width: 72px;
height: 72px;
border-radius: 50%;
background: #f1f5f9;
color: #64748b;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
border: 1px solid #e2e8f0;
}
.tech-date-filter-grid {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap: 6px;
}
.tech-date-filter-grid select {
font-size: 0.85rem !important;
padding: 0.45rem 0.5rem !important;
height: 40px !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
background-color: #f8fafc !important;
color: #1e293b !important;
}
.tech-date-filter-grid select:focus {
background-color: #ffffff !important;
border-color: #0284c7 !important;
box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
outline: none !important;
}
.tech-search-hero {
background: linear-gradient(135deg, #f0f7ff 0%, #e0effe 100%);
border: 1px solid #bfdbfe;
}
/* Privacy Statement Contact Card */
.tech-privacy-contact-card {
background: linear-gradient(135deg, #f8fafc 0%, #f1f8fe 100%);
border: 1px solid #bfdbfe;
border-radius: 16px;
padding: 1.5rem 1.75rem;
margin-top: 2rem;
margin-bottom: 1.5rem;
box-shadow: 0 4px 14px rgba(11, 111, 174, 0.04);
}
/* ==========================================================================
Floating Slide-In Article Quick Dock (Left Edge on Scroll Down)
========================================================================== */
.tech-article-float-dock {
position: fixed;
left: 1.25rem;
top: 50%;
z-index: 1035;
width: 156px;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 2px solid var(--tech-primary);
border-radius: 0.95rem;
padding: 0.65rem 0.7rem;
box-shadow: 0 12px 30px rgba(3, 54, 146, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);
display: flex;
flex-direction: column;
gap: 0.48rem;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-130%, -50%);
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.25s ease;
}
.tech-article-float-dock.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(0, -50%);
}
.tech-float-issue-pill {
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
background: var(--tech-subtle);
color: var(--tech-primary) !important;
border: 1px solid rgba(3, 54, 146, 0.18);
border-radius: 0.55rem;
padding: 0.38rem 0.45rem;
font-size: 0.72rem;
font-weight: 800;
white-space: nowrap;
text-decoration: none !important;
text-align: center;
line-height: 1.2;
transition: all 0.18s ease;
}
.tech-float-issue-pill:hover {
background: #dbeafe;
color: var(--tech-primary-hover) !important;
}
.tech-float-pdf-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
background: var(--tech-gradient);
color: #ffffff !important;
border-radius: 0.55rem;
padding: 0.5rem 0.55rem;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.03em;
text-decoration: none !important;
box-shadow: 0 4px 10px rgba(3, 54, 146, 0.22);
transition: all 0.2s ease;
}
.tech-float-pdf-btn:hover {
filter: brightness(1.08);
transform: translateY(-1px);
color: #ffffff !important;
}
.tech-float-stats-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.55rem;
padding: 0.42rem 0.48rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.tech-float-stat-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.15rem;
font-size: 0.75rem;
}
.tech-float-stat-text {
display: flex;
align-items: baseline;
gap: 0.25rem;
}
.tech-float-stat-val {
font-weight: 800;
color: var(--tech-gray-900);
font-variant-numeric: tabular-nums;
}
.tech-float-stat-lbl {
font-size: 0.66rem;
font-weight: 600;
color: var(--tech-gray-600);
}
.tech-float-stat-divider {
height: 1px;
background: #e2e8f0;
}
.tech-float-share-wrap {
position: relative;
}
.tech-float-share-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.38rem;
background: #ffffff;
color: var(--tech-gray-900);
border: 1px solid #cbd5e1;
border-radius: 0.55rem;
padding: 0.42rem 0.5rem;
font-size: 0.76rem;
font-weight: 700;
cursor: pointer;
transition: all 0.18s ease;
}
.tech-float-share-btn:hover,
.tech-float-share-btn[aria-expanded="true"] {
border-color: var(--tech-primary);
color: var(--tech-primary);
background: var(--tech-subtle);
}
.tech-float-share-menu {
position: absolute;
left: calc(100% + 10px);
bottom: 0;
width: 220px;
background: #ffffff;
border: 2px solid var(--tech-primary);
border-radius: 0.8rem;
padding: 0.65rem;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.2);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-8px);
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 1040;
}
.tech-float-share-menu.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(0);
}
.tech-float-share-header {
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--tech-gray-600);
margin-bottom: 0.45rem;
text-align: center;
}
.tech-float-share-icons {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.25rem;
margin-bottom: 0.45rem;
}
.tech-float-copy-doi {
width: 100%;
border: 1px solid #cbd5e1;
background: #f8fafc;
color: var(--tech-primary);
border-radius: 0.45rem;
padding: 0.32rem 0.45rem;
font-size: 0.7rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
cursor: pointer;
transition: all 0.15s ease;
}
.tech-float-copy-doi:hover {
background: var(--tech-subtle);
border-color: var(--tech-primary);
}
@media (max-width: 991.98px) {
.tech-article-float-dock {
display: none !important;
}
}/* Keyword & MSC tags - Unifying and tags with exact same visuals & hover */
.tech-keyword-tag,
a.tech-keyword-tag,
span.tech-keyword-tag {
background: var(--tech-subtle) !important;
color: var(--tech-primary) !important;
font-size: 0.8125rem !important;
font-weight: 700 !important;
padding: 0.35rem 0.85rem !important;
border-radius: 2rem !important;
border: 1px solid rgba(var(--tech-primary-rgb), 0.2) !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.3rem !important;
margin: 0.25rem 0.25rem 0.25rem 0 !important;
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
text-decoration: none !important;
cursor: pointer !important;
}
.tech-keyword-tag:hover,
a.tech-keyword-tag:hover,
span.tech-keyword-tag:hover {
background: var(--tech-primary) !important;
color: #ffffff !important;
border-color: var(--tech-primary) !important;
transform: translateY(-1px) !important;
box-shadow: 0 4px 12px rgba(var(--tech-primary-rgb), 0.25) !important;
}
.tech-keyword-tag:hover i,
a.tech-keyword-tag:hover i,
span.tech-keyword-tag:hover i {
color: #ffffff !important;
opacity: 1 !important;
}
.tech-references-content {
font-family: inherit;
font-size: 0.875rem;
line-height: 1.85;
color: var(--tech-gray-800);
word-break: break-word;
background: var(--tech-gray-50);
border: 1px solid var(--tech-gray-200);
border-radius: var(--tech-radius);
padding: 1.25rem 1.5rem;
max-height: none !important;
overflow: visible !important;
}
.tech-sidebar-sticky {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
/* How to Cite / Citation Style Language Widget */
.tech-sidebar-sticky .item.citation,
.item.citation {
background: #ffffff;
border: 2px solid var(--tech-primary) !important;
border-top: 4px solid var(--tech-primary) !important;
border-radius: var(--tech-radius);
box-shadow: 0 4px 16px rgba(var(--tech-primary-rgb), 0.08);
padding: 1.15rem 1.05rem;
margin-bottom: 0 !important;
position: relative;
overflow: hidden;
}
/* Remove redundant line */
.tech-sidebar-sticky .item.citation::before,
.item.citation::before {
display: none !important;
}
.item.citation .sub_item.citation_display h2.label,
.item.citation h2.label {
font-size: 0.835rem;
font-weight: 800;
color: #ffffff !important;
text-transform: uppercase;
letter-spacing: 0.06em;
background: var(--tech-gradient, linear-gradient(135deg, #033692 0%, #0a4ebd 100%));
margin: -1.15rem -1.05rem 0.95rem -1.05rem;
padding: 0.7rem 1.05rem;
border-radius: 0;
display: flex;
align-items: center;
gap: 0.55rem;
position: relative;
box-shadow: 0 2px 8px rgba(3, 54, 146, 0.15);
border-bottom: 2px solid rgba(255, 255, 255, 0.18);
}
.item.citation h2.label::before {
content: '\F517';
font-family: 'bootstrap-icons';
color: #fde047 !important;
font-size: 0.95rem;
}
.item.citation #citationOutput {
background: var(--tech-gray-50);
border: 1px solid var(--tech-gray-200);
border-radius: var(--tech-radius-sm);
padding: 0.75rem 0.85rem;
font-size: 0.8rem;
line-height: 1.6;
color: var(--tech-gray-800);
margin-bottom: 0.85rem;
word-break: break-word;
}
.item.citation .csl-left-margin {
display: none !important;
}
.item.citation [aria-hidden="true"] {
display: none !important;
}
.item.citation .citation_formats {
margin-top: 0.85rem;
}
.item.citation .citation_formats_button {
background: var(--tech-subtle);
color: var(--tech-primary);
border: 1px solid rgba(var(--tech-primary-rgb), 0.25);
font-weight: 700;
font-size: 0.8rem;
border-radius: var(--tech-radius-sm);
padding: 0.45rem 0.85rem;
width: 100%;
text-align: left;
display: flex;
align-items: center;
justify-content: space-between;
cursor: pointer;
transition: all 0.2s ease;
}
.item.citation .citation_formats_button:hover {
background: var(--tech-primary);
color: #ffffff;
}
.item.citation .citation_formats_button::after {
content: '\F282'; /* bi-chevron-down */
font-family: 'bootstrap-icons';
}
.item.citation .citation_formats_button[aria-expanded="true"]::after {
content: '\F286'; /* bi-chevron-up */
}
.item.citation .citation_formats_list {
background: #ffffff;
border: 1px solid var(--tech-gray-200);
border-radius: var(--tech-radius-sm);
padding: 0.5rem 0.75rem;
margin-top: 0.5rem;
max-height: 220px;
overflow-y: auto;
}
.item.citation .citation_formats_styles {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.item.citation .citation_formats_styles li a {
display: block;
padding: 0.35rem 0.6rem;
border-radius: 0.35rem;
background: var(--tech-gray-50);
color: var(--tech-gray-800);
text-decoration: none;
font-size: 0.775rem;
font-weight: 600;
transition: all 0.15s ease;
}
.item.citation .citation_formats_styles li a:hover {
background: var(--tech-primary);
color: #ffffff;
}
.item.citation .citation_formats .label {
font-size: 0.75rem;
font-weight: 700;
color: var(--tech-gray-600);
margin: 0.75rem 0 0.35rem;
text-transform: uppercase;
letter-spacing: 0.04em;
display: block;
}
.tech-social-btn {
width: 38px;
height: 38px;
border-radius: 0.5rem;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff !important;
text-decoration: none;
font-size: 1.05rem;
transition: transform 0.2s ease;
}
.tech-social-btn:hover {
transform: translateY(-2px);
filter: brightness(1.1);
}
/* Article License & Copyright Widget */
.tech-license-content {
font-size: 0.8rem;
line-height: 1.5;
color: var(--tech-gray-700);
}
.tech-license-content img {
max-width: 100%;
height: auto;
margin-bottom: 0.35rem;
}
.tech-license-content a {
color: var(--tech-primary);
text-decoration: none;
word-break: break-word;
}
.tech-license-content a:hover {
color: var(--tech-primary-hover);
text-decoration: underline;
}
.cc-license-badge {
line-height: 1.4;
font-size: 0.775rem;
color: var(--tech-gray-600);
}
.cc-license-badge a {
display: inline-block;
margin-bottom: 0.25rem;
}
/* ==========================================================================
7. INNER PAGE HEADER BANNER
========================================================================== */
.tech-inner-banner {
background: var(--tech-gradient);
padding: 2.75rem 0 3.25rem;
color: #ffffff;
position: relative;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.tech-inner-banner::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round' stroke-opacity='0.1'%3E%3Cpath d='M0 40h35l15 15v25M80 0v35l15 15h25M120 80h15l15 15v30M40 120v15l15 15h25'/%3E%3Cpath d='M40 20h20v20M20 80v20h20M100 40v20h20M140 100v20h-20M60 140v-20h20'/%3E%3Ccircle cx='50' cy='80' r='3' fill='%2338bdf8' fill-opacity='0.35'/%3E%3Ccircle cx='120' cy='50' r='3' fill='%2338bdf8' fill-opacity='0.35'/%3E%3Ccircle cx='150' cy='125' r='3' fill='%2338bdf8' fill-opacity='0.35'/%3E%3Ccircle cx='80' cy='150' r='3' fill='%2338bdf8' fill-opacity='0.35'/%3E%3Ccircle cx='60' cy='40' r='2.5' fill='%23ffffff' fill-opacity='0.3'/%3E%3Ccircle cx='40' cy='100' r='2.5' fill='%23ffffff' fill-opacity='0.3'/%3E%3C/g%3E%3C/svg%3E");
background-size: 160px 160px;
opacity: 0.6;
pointer-events: none;
animation: techCircuitDrift 50s linear infinite;
}
.tech-breadcrumb a {
color: rgba(255, 255, 255, 0.8);
text-decoration: none;
font-weight: 500;
font-size: 0.875rem;
}
.tech-breadcrumb a:hover {
color: #ffffff;
text-decoration: underline;
}
/* ==========================================================================
8. MODERN HIGH-TECH FOOTER (Harmonious Silk Vortex & Discrete Network)
========================================================================== */
.tech-footer {
background-color: #020c1b;
background-image:
linear-gradient(180deg, rgba(2, 12, 27, 0.93) 0%, rgba(3, 22, 53, 0.78) 50%, rgba(1, 8, 20, 0.95) 100%),
url('../images/footer_bg_silk_vortex.jpg');
background-size: cover;
background-position: center bottom;
background-repeat: no-repeat;
color: #94a3b8;
padding: 4.5rem 0 0;
border-top: 1px solid rgba(0, 180, 216, 0.35);
position: relative;
overflow: hidden;
}
/* Subtle Ambient Silk Wave Glow Overlay */
.tech-footer::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: radial-gradient(circle at 85% 80%, rgba(0, 210, 255, 0.12), transparent 50%),
radial-gradient(circle at 15% 20%, rgba(3, 54, 146, 0.25), transparent 60%);
pointer-events: none;
opacity: 0.9;
}
/* Glowing Top Accent Line */
.tech-footer::after {
content: '';
position: absolute;
top: 0;
left: 5%;
right: 5%;
height: 2px;
background: linear-gradient(90deg, transparent, #00d2ff, #033692, transparent);
box-shadow: 0 0 16px rgba(0, 210, 255, 0.7);
pointer-events: none;
}
.tech-footer-brand {
display: inline-flex;
align-items: center;
gap: 0.85rem;
text-decoration: none;
transition: transform 0.2s ease;
}
.tech-footer-brand:hover {
transform: translateY(-2px);
}
.tech-footer-brand-logo {
max-height: 50px;
width: auto;
object-fit: contain;
background: #ffffff;
padding: 5px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.tech-footer-brand-initials {
font-size: 1.65rem;
font-weight: 900;
line-height: 1.1;
letter-spacing: 0.04em;
text-transform: uppercase;
color: #ffffff;
background: linear-gradient(135deg, #ffffff 0%, #7dd3fc 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.tech-footer-brand-title {
font-size: 0.775rem;
color: #cbd5e1;
line-height: 1.3;
margin-top: 2px;
}
.tech-footer-about {
color: #94a3b8;
font-size: 0.875rem;
line-height: 1.7;
margin-bottom: 1.25rem;
}
.tech-footer-badge {
background: rgba(255, 255, 255, 0.06);
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: 6px;
padding: 0.35rem 0.65rem;
font-size: 0.8rem;
color: #cbd5e1;
display: inline-flex;
align-items: center;
gap: 0.4rem;
transition: all 0.2s ease;
}
.tech-footer-badge:hover {
background: rgba(0, 180, 216, 0.12);
border-color: rgba(0, 180, 216, 0.3);
color: #ffffff;
}
.tech-footer-title {
color: #ffffff;
font-size: 1.05rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 1.35rem;
position: relative;
padding-bottom: 0.65rem;
display: flex;
align-items: center;
gap: 0.45rem;
}
.tech-footer-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 35px;
height: 2.5px;
border-radius: 2px;
background: linear-gradient(90deg, var(--tech-accent), var(--tech-primary));
box-shadow: 0 0 8px rgba(0, 180, 216, 0.6);
}
.tech-footer-links {
list-style: none;
padding-left: 0;
margin-bottom: 0;
display: flex;
flex-direction: column;
gap: 0.6rem;
}
.tech-footer-links li {
margin: 0;
}
.tech-footer-links a {
color: #94a3b8;
text-decoration: none;
font-size: 0.885rem;
font-weight: 500;
transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
display: inline-flex;
align-items: center;
gap: 0.45rem;
}
.tech-footer-links a:hover {
color: #ffffff;
transform: translateX(4px);
}
.tech-footer-links a i {
color: var(--tech-accent);
font-size: 0.75rem;
transition: transform 0.2s ease;
}
.tech-footer-links a:hover i {
color: #38bdf8;
transform: translateX(2px);
}
.tech-footer-contact-item {
display: flex;
align-items: flex-start;
gap: 0.65rem;
margin-bottom: 0.75rem;
font-size: 0.85rem;
color: #cbd5e1;
line-height: 1.5;
}
.tech-footer-contact-icon {
width: 28px;
height: 28px;
border-radius: 6px;
background: rgba(0, 180, 216, 0.12);
border: 1px solid rgba(0, 180, 216, 0.25);
color: var(--tech-accent);
display: flex;
align-items: center;
justify-content: center;
font-size: 0.85rem;
flex-shrink: 0;
margin-top: 1px;
}
.tech-social-btn {
width: 36px;
height: 36px;
border-radius: 8px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #ffffff !important;
font-size: 1rem;
text-decoration: none;
transition: all 0.22s cubic-bezier(0.16, 1, 0.3, 1);
border: 1px solid rgba(255, 255, 255, 0.15);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
}
.tech-social-btn:hover {
transform: translateY(-3px) scale(1.08);
box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
border-color: rgba(255, 255, 255, 0.4);
}
.tech-footer-pkp-box {
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.08);
border-radius: 8px;
padding: 0.75rem 0.85rem;
transition: all 0.22s ease;
backdrop-filter: blur(8px);
}
.tech-footer-pkp-box:hover {
background: rgba(255, 255, 255, 0.06);
border-color: rgba(0, 180, 216, 0.35);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.tech-footer-bottom {
padding: 1.5rem 0;
margin-top: 3.5rem;
border-top: 1px solid rgba(255, 255, 255, 0.08);
font-size: 0.85rem;
color: #64748b;
position: relative;
z-index: 1;
}
/* ==========================================================================
9. FLOATING ACTIONS (WhatsApp Chat & Back to Top)
========================================================================== */
.tech-floating-actions {
position: fixed;
bottom: 10px;
right: 30px;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 12px;
z-index: 9990;
pointer-events: none;
}
.tech-floating-actions > * {
pointer-events: auto;
}
/* Floating WhatsApp Chat Button */
.tech-float-whatsapp {
display: flex;
align-items: center;
gap: 8px;
background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
color: #ffffff !important;
text-decoration: none !important;
padding: 10px 16px 10px 14px;
border-radius: 50px;
box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4), 0 2px 6px rgba(0, 0, 0, 0.15);
border: 1.5px solid rgba(255, 255, 255, 0.4);
transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
font-size: 0.875rem;
font-weight: 700;
position: relative;
overflow: hidden;
}
.tech-float-whatsapp::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
border-radius: 50px;
background: rgba(255, 255, 255, 0.2);
opacity: 0;
transition: opacity 0.2s ease;
}
.tech-float-whatsapp:hover::before {
opacity: 1;
}
.tech-float-whatsapp i {
font-size: 1.35rem;
line-height: 1;
display: inline-block;
animation: techWaPulse 2.5s infinite;
}
.tech-float-whatsapp .tech-float-label {
display: inline-block;
white-space: nowrap;
letter-spacing: 0.01em;
}
.tech-float-whatsapp:hover {
transform: translateY(-4px) scale(1.04);
box-shadow: 0 10px 28px rgba(37, 211, 102, 0.55), 0 4px 10px rgba(0, 0, 0, 0.2);
color: #ffffff !important;
}
@keyframes techWaPulse {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.15) rotate(-6deg); }
}
/* Floating Back to Top Button */
.tech-back-to-top {
width: 42px;
height: 42px;
border-radius: 50%;
background: var(--tech-gradient);
color: #ffffff !important;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 6px 18px rgba(3, 54, 146, 0.35), 0 2px 6px rgba(0, 0, 0, 0.12);
border: 1.5px solid rgba(255, 255, 255, 0.35);
cursor: pointer;
opacity: 0;
visibility: hidden;
transform: translateY(16px) scale(0.85);
transition: all 0.28s cubic-bezier(0.16, 1, 0.3, 1);
text-decoration: none !important;
font-size: 1.2rem;
}
.tech-back-to-top.is-visible {
opacity: 1;
visibility: visible;
transform: translateY(0) scale(1);
}
.tech-back-to-top:hover {
transform: translateY(-4px) scale(1.08);
box-shadow: 0 10px 26px rgba(3, 54, 146, 0.55), 0 4px 10px rgba(0, 0, 0, 0.2);
color: #ffffff !important;
}
@media (max-width: 575.98px) {
.tech-floating-actions {
bottom: 16px;
right: 22px;
gap: 10px;
}
.tech-float-whatsapp {
padding: 10px;
border-radius: 50%;
width: 44px;
height: 44px;
justify-content: center;
}
.tech-float-whatsapp .tech-float-label {
display: none;
}
.tech-back-to-top {
width: 40px;
height: 40px;
}
}
/* OJS block plugins */
.pkp_block {
background: #ffffff;
border: 1px solid var(--tech-gray-200);
border-radius: var(--tech-radius);
padding: 1.4rem;
margin-bottom: 1.5rem;
box-shadow: var(--tech-shadow-2xs);
}
.pkp_block .title {
font-size: 0.95rem;
font-weight: 800;
color: var(--tech-gray-900);
margin-bottom: 1rem;
padding-bottom: 0.55rem;
border-bottom: 2px solid var(--tech-subtle);
display: flex;
align-items: center;
gap: 0.5rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pkp_block .content ul {
list-style: none;
padding-left: 0;
margin-bottom: 0;
}
.pkp_block .content ul li {
padding: 0.45rem 0;
border-bottom: 1px dashed var(--tech-gray-200);
}
.pkp_block .content ul li:last-child {
border-bottom: none;
}
.pkp_block .content ul li a {
color: var(--tech-gray-700);
text-decoration: none;
font-size: 0.875rem;
font-weight: 500;
transition: all 0.2s ease;
}
.pkp_block .content ul li a:hover {
color: var(--tech-primary);
}
/* Reading Progress Bar */
#tech-reading-progress {
position: fixed;
top: 0;
left: 0;
height: 3px;
background: linear-gradient(90deg, #00b4d8, #033692);
z-index: 9999;
width: 0%;
transition: width 0.1s ease;
}
/* ==========================================================================
9. COMPREHENSIVE MOBILE-FRIENDLY & RESPONSIVE UI RULES
========================================================================== */
/* Global Mobile Fixes */
html, body {
overflow-x: clip !important;
max-width: 100vw;
-webkit-text-size-adjust: 100%;
}
img, svg {
max-width: 100%;
height: auto;
}
.table-responsive {
-webkit-overflow-scrolling: touch;
}
/* --- TABLETS & MOBILE (< 992px) --- */
@media (max-width: 991.98px) {
/* Navbar & Navigation */
.tech-navbar {
padding: 0.65rem 0;
}
.navbar-toggler {
padding: 0.5rem 0.65rem;
background: #f1f5f9;
border-radius: 8px;
border: 1px solid #e2e8f0 !important;
transition: all 0.2s ease;
}
.navbar-toggler:focus {
box-shadow: 0 0 0 3px rgba(3, 54, 146, 0.15) !important;
}
.tech-nav {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 12px;
padding: 1.15rem 1rem;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.08);
margin-top: 0.75rem;
}
.tech-nav .navbar-nav .nav-item {
border-bottom: 1px solid #f1f5f9;
}
.tech-nav .navbar-nav .nav-item:last-child {
border-bottom: none;
}
.tech-nav .navbar-nav .nav-link {
padding: 0.65rem 0.5rem;
font-size: 0.95rem;
font-weight: 600;
}
.tech-nav .dropdown-menu {
border: 1px solid #e2e8f0;
box-shadow: none;
background: #f8fafc;
margin-left: 0.5rem;
border-radius: 8px;
padding: 0.35rem;
}
/* Hero Section Banner */
.tech-hero {
padding: 2.75rem 0 2rem;
}
.tech-hero-title {
font-size: clamp(1.5rem, 4.5vw, 2.25rem);
line-height: 1.25;
}
.tech-hero-desc {
font-size: 0.95rem;
margin-bottom: 1.25rem;
}
.tech-hero-stats {
margin-top: 2rem;
padding-top: 1.5rem;
}
/* Metrics Ribbon */
.tech-metric-card {
padding: 1rem 0.85rem;
}
.tech-metric-number {
font-size: 1.5rem;
}
/* Content Columns */
.tech-sidebar-wrapper,
.tech-sidebar-blocks {
margin-top: 1.5rem;
}
}
/* --- SMARTPHONES LANDSCAPE & PORTRAIT (< 768px) --- */
@media (max-width: 767.98px) {
/* Brand Header */
.tech-brand {
gap: 0.65rem;
}
.tech-brand-logo,
.tech-brand div[style*="width: 44px"] {
width: 38px !important;
height: 38px !important;
}
.tech-brand-initials {
font-size: 1.05rem;
}
.tech-brand-title {
font-size: 0.8rem;
max-width: 260px;
line-height: 1.25;
}
/* Hero Section */
.tech-hero {
padding: 2.25rem 0 1.5rem;
text-align: center;
}
.tech-hero-actions {
justify-content: center;
}
/* About the Journal Card */
.tech-about-card {
padding: 1.25rem 1rem;
margin-bottom: 1.25rem;
}
/* Kotak Keterangan Edisi */
.tech-issue-header-card {
margin-bottom: 1.25rem !important;
}
.tech-issue-header-card .card-body {
padding: 1.25rem 1rem !important;
}
/* Indexing Badges */
.tech-indexing-card {
padding: 1.25rem 1rem;
margin-bottom: 1.25rem;
}
.tech-index-badge-footer {
padding: 0.4rem 0.75rem;
font-size: 0.775rem;
}
/* Article Cards */
.tech-article-card {
padding: 1.15rem 1rem;
margin-bottom: 1rem;
}
.tech-article-title {
font-size: 0.975rem;
line-height: 1.4;
}
.tech-article-authors {
font-size: 0.825rem;
}
/* Monthly Downloads & World Map Sections */
.tech-stats-section-card {
padding: 1.25rem 1rem;
margin-bottom: 1.25rem;
}
/* Footer */
.tech-footer {
padding: 2.75rem 0 0;
}
.tech-footer-bottom {
margin-top: 2rem;
padding: 1.25rem 0;
text-align: center;
}
}
/* --- EXTRA SMALL SMARTPHONES (< 576px) --- */
@media (max-width: 575.98px) {
/* Brand Container */
.tech-brand-title {
max-width: 210px;
font-size: 0.75rem;
}
.tech-brand-initials {
font-size: 0.95rem;
}
/* Hero CTA Buttons Full Width */
.tech-hero-actions {
flex-direction: column;
width: 100%;
}
.tech-hero-actions .btn {
width: 100%;
justify-content: center;
}
/* 4-Features Grid in About Card: 1 column on extra small */
.tech-about-card .row.g-2 > div {
width: 100%;
}
/* Article Card Cover & Buttons */
.tech-article-cover-col {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 0.65rem;
}
.tech-article-cover-link {
width: 110px;
height: 110px;
}
/* Bottom Row of Article Card (DOI + PDF) */
.tech-article-card .d-flex.justify-content-between {
flex-direction: column;
align-items: stretch !important;
gap: 0.65rem !important;
}
.btn-tech-pdf {
width: 100%;
justify-content: center;
padding: 0.5rem 1rem;
font-size: 0.85rem;
}
/* Action buttons in About card */
.tech-about-card .d-flex.gap-2.pt-2 {
flex-direction: column;
}
.tech-about-card .d-flex.gap-2.pt-2 .btn {
width: 100%;
text-align: center;
justify-content: center;
}
/* Sidebar Blocks */
.tech-widget-card,
.tech-sidebar-blocks .pkp_block,
.tech-sidebar-blocks .block,
.tech-sidebar-blocks .tech-widget-card {
padding: 1rem 0.85rem;
}
.tech-widget-card .tech-col-title,
.tech-sidebar-blocks .title:not(.pkp_screen_reader),
.tech-sidebar-blocks .pkp_block_title,
.tech-sidebar-blocks .tech-col-title {
margin: -1rem -0.85rem 0.85rem -0.85rem;
padding: 0.65rem 0.85rem;
font-size: 0.8rem;
}
/* Monthly Downloads Chart Container */
.tech-monthly-chart-box {
height: 240px !important;
padding: 0.75rem 0.5rem !important;
}
/* Authors World Map */
.tech-authors-map-container .card {
padding: 1.25rem 1rem !important;
}
.tech-authors-map-wrapper {
min-height: 220px;
}
}
/* ==========================================================================
AUTH & USER PAGES (Login, Register, Reset Password, Messages)
========================================================================== */
.page_register,
.page_login,
.page_lost_password,
.page_message,
.page_register_complete {
min-height: 60vh;
}
.page_register .form-control:focus,
.page_register .form-select:focus,
.page_login .form-control:focus,
.page_lost_password .form-control:focus {
border-color: var(--tech-primary) !important;
box-shadow: 0 0 0 0.25rem rgba(var(--tech-primary-rgb), 0.15) !important;
}
.page_register .input-group-text,
.page_lost_password .input-group-text {
color: var(--tech-primary);
background-color: #ffffff;
}
.page_register .form-check-input:checked,
.page_login .form-check-input:checked,
.page_lost_password .form-check-input:checked {
background-color: var(--tech-primary);
border-color: var(--tech-primary);
}
.page_register .form-check-input:focus,
.page_login .form-check-input:focus,
.page_lost_password .form-check-input:focus {
border-color: var(--tech-primary);
box-shadow: 0 0 0 0.2rem rgba(var(--tech-primary-rgb), 0.2);
}
/* Responsive adjustment for Hero HUD rings */
@media (max-width: 991.98px) {
.tech-hero-hud {
display: none !important;
}
}
/* Accessibility: Respect Reduced Motion Preferences */
@media (prefers-reduced-motion: reduce) {
.tech-hero,
.tech-hero::before,
.tech-inner-banner::before,
.tech-hero-orb,
.tech-hero-orb-1,
.tech-hero-orb-2,
.tech-hero-orb-3,
.tech-hero-scanline,
.tech-hero-particles .particle,
.tech-showcase-card,
.tech-hud-ring,
.tech-hud-ring-outer,
.tech-hud-ring-inner,
.tech-beam,
.tech-hero-grid-perspective {
animation: none !important;
transform: none !important;
}
.tech-hero-canvas {
display: none !important;
}
}
/* ==========================================================================
JACODESMATH Theme - Article Details: 12-Month Views & Downloads Chart
========================================================================== */
.tech-usage-stats-card {
position: relative;
}
.tech-chart-header-icon {
width: 40px;
height: 40px;
background: var(--tech-subtle);
color: var(--tech-primary) !important;
border: 1px solid rgba(var(--tech-primary-rgb), 0.2);
}
.tech-chart-filter-group .btn {
font-size: 0.75rem !important;
font-weight: 600 !important;
padding: 4px 11px !important;
border-color: #cbd5e1 !important;
color: #475569 !important;
background-color: #ffffff !important;
transition: all 0.15s ease !important;
}
.tech-chart-filter-group .btn:hover {
background-color: var(--tech-subtle) !important;
color: var(--tech-primary) !important;
border-color: var(--tech-primary) !important;
}
.tech-chart-filter-group .btn.active {
background-color: var(--tech-primary) !important;
color: #ffffff !important;
border-color: var(--tech-primary) !important;
box-shadow: 0 2px 6px rgba(var(--tech-primary-rgb), 0.25) !important;
}
.tech-chart-wrapper {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 0.75rem !important;
}
/* ==========================================================================
JACODESMATH Theme - Article Details: References / Citations Styling
========================================================================== */
.tech-references-section {
position: relative;
}
.tech-ref-header-icon {
width: 40px;
height: 40px;
background: var(--tech-subtle);
color: var(--tech-primary) !important;
border: 1px solid rgba(var(--tech-primary-rgb), 0.2);
}
.tech-ref-count-badge {
background: var(--tech-subtle) !important;
color: var(--tech-primary) !important;
border: 1px solid rgba(var(--tech-primary-rgb), 0.25) !important;
font-size: 0.725rem !important;
padding: 4px 10px !important;
}
/* References List: Generous spacing between items */
.tech-references-list {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 13px !important;
}
/* Individual Reference Item: Modern Card with Theme Border Accent */
.tech-reference-item {
position: relative !important;
display: flex !important;
align-items: flex-start !important;
gap: 14px !important;
padding: 14px 18px !important;
background-color: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-left: 4px solid var(--tech-primary) !important;
border-radius: 0.65rem !important;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.tech-reference-item:hover {
background-color: #ffffff !important;
border-color: #cbd5e1 !important;
border-left-color: var(--tech-primary) !important;
box-shadow: 0 4px 14px rgba(3, 54, 146, 0.08) !important;
transform: translateY(-1px) !important;
}
/* Reference Index Number Badge */
.tech-ref-index-col {
flex-shrink: 0;
display: flex;
align-items: center;
}
.tech-ref-badge {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 36px !important;
padding: 3px 6px !important;
background: #ffffff !important;
color: var(--tech-primary) !important;
border: 1px solid rgba(var(--tech-primary-rgb), 0.25) !important;
border-radius: 6px !important;
font-weight: 700 !important;
font-size: 0.775rem !important;
font-family: var(--tech-font-mono), monospace !important;
line-height: 1.3 !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) !important;
transition: all 0.15s ease !important;
}
.tech-reference-item:hover .tech-ref-badge {
background: var(--tech-primary) !important;
color: #ffffff !important;
border-color: var(--tech-primary) !important;
}
/* Reference Body & Text */
.tech-ref-body {
flex-grow: 1 !important;
min-width: 0 !important;
}
.tech-ref-text {
font-size: 0.885rem !important;
line-height: 1.72 !important;
color: #334155 !important;
word-break: break-word !important;
overflow-wrap: break-word !important;
text-align: justify !important;
}
/* Active Links for DOIs and Web URLs */
.tech-ref-link {
display: inline-flex !important;
align-items: center !important;
gap: 4px !important;
padding: 1px 8px !important;
margin: 2px 2px !important;
background-color: #ffffff !important;
border: 1px solid rgba(var(--tech-primary-rgb), 0.25) !important;
border-radius: 4px !important;
color: var(--tech-primary) !important;
font-size: 0.785rem !important;
font-weight: 600 !important;
text-decoration: none !important;
word-break: break-all !important;
transition: all 0.15s ease !important;
vertical-align: middle !important;
}
.tech-ref-link i {
font-size: 0.75rem !important;
}
.tech-ref-link:hover {
background-color: var(--tech-primary) !important;
color: #ffffff !important;
border-color: var(--tech-primary) !important;
box-shadow: 0 2px 6px rgba(3, 54, 146, 0.2) !important;
text-decoration: none !important;
}
.tech-ref-link:hover i {
color: #ffffff !important;
}
/* Action Buttons (Google Scholar, Copy Citation) */
.tech-ref-actions {
display: flex !important;
flex-wrap: wrap !important;
align-items: center !important;
gap: 7px !important;
}
.tech-ref-btn {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
font-size: 0.725rem !important;
font-weight: 600 !important;
color: #64748b !important;
background-color: #ffffff !important;
border: 1px solid #e2e8f0 !important;
padding: 3px 9px !important;
border-radius: 5px !important;
text-decoration: none !important;
cursor: pointer !important;
transition: all 0.15s ease !important;
line-height: 1.4 !important;
}
.tech-ref-btn i {
font-size: 0.725rem !important;
}
.tech-ref-btn:hover {
color: var(--tech-primary) !important;
border-color: var(--tech-primary) !important;
background-color: var(--tech-subtle) !important;
text-decoration: none !important;
}
.tech-ref-btn-scholar:hover {
color: #1a73e8 !important;
border-color: #1a73e8 !important;
background-color: #f0f6ff !important;
}
.tech-ref-btn.is-copied {
color: #16a34a !important;
border-color: #16a34a !important;
background-color: #f0fdf4 !important;
}
/* Raw References Fallback */
.tech-references-raw {
line-height: 1.85 !important;
font-size: 0.885rem !important;
background-color: #f8fafc !important;
border: 1px solid #e2e8f0 !important;
border-radius: 0.65rem !important;
padding: 16px 20px !important;
color: #334155 !important;
}
/* References Accordion Toggle (JACODESMATH Production Feature) */
.jacodes-refs-toggle {
background: #f8fbfd !important;
border: 1px solid #d2e3ee !important;
border-radius: 6px !important;
color: #0876b6 !important;
display: flex !important;
align-items: center !important;
font-size: 15px !important;
font-weight: 800 !important;
height: 48px !important;
margin-top: 18px !important;
padding: 0 18px !important;
width: 100% !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
text-align: left !important;
outline: none !important;
}
.jacodes-refs-toggle:hover {
background: #edf7fc !important;
border-color: #0876b6 !important;
color: #0876b6 !important;
}
.jacodes-refs-toggle:focus-visible {
box-shadow: 0 0 0 3px rgba(8, 118, 182, 0.25) !important;
}
.jacodes-toggle-icon {
align-items: center !important;
display: inline-flex !important;
justify-content: center !important;
margin-left: auto !important;
width: 16px !important;
height: 16px !important;
}
.jacodes-toggle-icon::before {
border: solid #0b3760 !important;
border-width: 0 2px 2px 0 !important;
content: "" !important;
display: inline-block !important;
height: 8px !important;
transform: rotate(45deg) !important;
width: 8px !important;
transition: transform 0.25s ease !important;
}
.jacodes-refs-toggle[aria-expanded="true"] .jacodes-toggle-icon::before {
transform: rotate(-135deg) !important;
}
.tech-references-list.jacodes-refs-hidden {
display: none !important;
margin-top: 13px !important;
}
.tech-references-list.jacodes-refs-hidden.jacodes-refs-expanded {
display: flex !important;
}
/* Responsive adjustment for Mobile */
@media (max-width: 575.98px) {
.tech-reference-item {
flex-direction: column !important;
gap: 8px !important;
padding: 12px 14px !important;
}
.tech-ref-badge {
min-width: 32px !important;
font-size: 0.725rem !important;
}
}
/* ==========================================================================
Dimensions Cited By Section (JACODESMATH Production Feature)
========================================================================== */
.jacodes-cited-by,
.jacodes-author-articles {
background: #f8fbfd !important;
border: 1px solid #d9e8f1 !important;
border-radius: 8px !important;
box-shadow: 0 1px 4px rgba(15, 40, 60, 0.035) !important;
overflow: hidden !important;
}
.jacodes-cited-by summary.jacodes-details-summary,
.jacodes-author-articles summary.jacodes-details-summary {
align-items: center !important;
color: #0b3760 !important;
cursor: pointer !important;
display: flex !important;
font-size: 1.05rem !important;
font-weight: 700 !important;
gap: 14px !important;
min-height: 60px !important;
padding: 0 20px !important;
background: transparent !important;
border-bottom: 1px solid transparent !important;
transition: background 0.2s ease !important;
list-style: none !important;
}
.jacodes-cited-by summary.jacodes-details-summary::-webkit-details-marker,
.jacodes-author-articles summary.jacodes-details-summary::-webkit-details-marker {
display: none !important;
}
.jacodes-cited-by[open] summary.jacodes-details-summary,
.jacodes-author-articles[open] summary.jacodes-details-summary {
background: #f1f8fd !important;
border-bottom: 1px solid #d9e8f1 !important;
}
.jacodes-cited-by .jacodes-details-text,
.jacodes-author-articles .jacodes-details-text {
font-size: 1.05rem !important;
font-weight: 700 !important;
color: #0b3760 !important;
letter-spacing: -0.01em !important;
margin-left: 0.75rem !important;
}
.jacodes-details-icon {
align-items: center !important;
background: #e6f4fd !important;
border-radius: 999px !important;
color: #0876b6 !important;
display: inline-flex !important;
flex: 0 0 34px !important;
height: 34px !important;
justify-content: center !important;
width: 34px !important;
}
.jacodes-details-chevron {
align-items: center !important;
display: inline-flex !important;
justify-content: center !important;
margin-left: auto !important;
}
.jacodes-details-chevron::before {
border: solid #0b3760 !important;
border-width: 0 2px 2px 0 !important;
content: "" !important;
display: inline-block !important;
height: 8px !important;
transform: rotate(45deg) !important;
width: 8px !important;
transition: transform 0.25s ease !important;
}
.jacodes-cited-by[open] .jacodes-details-chevron::before,
.jacodes-author-articles[open] .jacodes-details-chevron::before {
transform: rotate(-135deg) !important;
}
/* ==========================================================================
9. SIDEBAR ISSUES ACCORDION WIDGET (JACODESMATH ORIGINAL)
========================================================================== */
@media (min-width: 992px) {
.col-lg-3:has(.tech-sidebar-sticky-issues),
.row:has(.tech-sidebar-sticky-issues) > .col-lg-3 {
align-self: stretch !important;
}
.tech-sidebar-sticky-issues {
position: -webkit-sticky !important;
position: sticky !important;
top: 92px !important;
z-index: 20 !important;
align-self: flex-start !important;
width: 100% !important;
}
.tech-sidebar-sticky-issues .journal-issues-card {
max-height: calc(100vh - 115px) !important;
overflow-y: auto !important;
overscroll-behavior: contain !important;
transition: box-shadow 0.25s ease, transform 0.25s ease !important;
}
.tech-sidebar-sticky-issues .journal-issues-card:hover {
box-shadow: 0 8px 24px rgba(3, 54, 146, 0.12) !important;
}
/* Sleek modern scrollbar if accordion expands beyond viewport */
.tech-sidebar-sticky-issues .journal-issues-card::-webkit-scrollbar {
width: 5px !important;
}
.tech-sidebar-sticky-issues .journal-issues-card::-webkit-scrollbar-track {
background: #f1f5f9 !important;
border-radius: 4px !important;
}
.tech-sidebar-sticky-issues .journal-issues-card::-webkit-scrollbar-thumb {
background: rgba(11, 111, 174, 0.3) !important;
border-radius: 4px !important;
}
.tech-sidebar-sticky-issues .journal-issues-card::-webkit-scrollbar-thumb:hover {
background: rgba(11, 111, 174, 0.6) !important;
}
}
.journal-issues-card {
background: #ffffff !important;
border: 1px solid #dfe7ee !important;
border-radius: 12px !important;
padding: 18px 18px !important;
box-shadow: 0 2px 10px rgba(0, 44, 64, 0.05) !important;
box-sizing: border-box !important;
width: 100% !important;
}
.journal-issues-card .journal-issues-title {
display: flex !important;
align-items: center !important;
gap: 10px !important;
color: var(--tech-primary) !important;
font-size: 1.1rem !important;
font-weight: 800 !important;
line-height: 1.3 !important;
margin: 0 0 14px 0 !important;
padding-bottom: 10px !important;
border-bottom: 2px solid #e1e7ec !important;
letter-spacing: -0.01em !important;
}
.journal-issues-card .journal-issues-title::before {
content: "" !important;
display: inline-block !important;
width: 22px !important;
height: 22px !important;
flex: 0 0 22px !important;
background-repeat: no-repeat !important;
background-position: center !important;
background-size: 22px 22px !important;
background-image: url("data:image/svg+xml,%3Csvg width='22' height='22' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 19.5A2.5 2.5 0 0 1 6.5 17H20' stroke='%23033692' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z' stroke='%23033692' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8 7h8M8 11h6' stroke='%23033692' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") !important;
}
.journal-issues-accordion {
display: flex !important;
flex-direction: column !important;
gap: 3px !important;
}
.jacodes-issues-year {
border-bottom: 1px solid #edf2f6 !important;
transition: background-color 0.15s ease !important;
}
.jacodes-issues-year:last-child {
border-bottom: none !important;
}
.jacodes-issues-year-header {
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
padding: 9px 8px !important;
border-radius: 6px !important;
cursor: pointer !important;
user-select: none !important;
list-style: none !important;
transition: background-color 0.15s ease, color 0.15s ease !important;
}
.jacodes-issues-year-header::-webkit-details-marker,
.jacodes-issues-year-header::marker {
display: none !important;
}
.jacodes-issues-year-header:hover {
background-color: #f0f6fa !important;
}
.jacodes-issues-year-header:hover .jacodes-issues-year-name {
color: var(--tech-accent) !important;
}
.jacodes-issues-year[open] > .jacodes-issues-year-header {
background-color: #f0f7fc !important;
}
.jacodes-issues-year[open] > .jacodes-issues-year-header .jacodes-issues-year-name {
color: var(--tech-primary) !important;
font-weight: 700 !important;
}
.jacodes-issues-year-name {
font-size: 14px !important;
font-weight: 600 !important;
color: #1f2933 !important;
line-height: 1.2 !important;
}
.jacodes-issues-badge {
margin-left: auto !important;
margin-right: 10px !important;
background: #eef3f7 !important;
color: #5a738e !important;
font-size: 11px !important;
font-weight: 700 !important;
padding: 1px 7px !important;
border-radius: 10px !important;
line-height: 1.4 !important;
}
.jacodes-issues-year[open] > .jacodes-issues-year-header .jacodes-issues-badge {
background: #e0f0fb !important;
color: var(--tech-primary) !important;
}
.jacodes-issues-arrow { display: none !important; }
.jacodes-issues-year-header::after {
content: "" !important;
display: inline-block !important;
width: 7px !important;
height: 7px !important;
border-right: 2px solid #8fa2b3 !important;
border-bottom: 2px solid #8fa2b3 !important;
transform: rotate(-45deg) !important;
transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease !important;
margin-right: 4px !important;
flex-shrink: 0 !important;
}
.jacodes-issues-year[open] > .jacodes-issues-year-header::after {
transform: rotate(45deg) !important;
border-color: var(--tech-primary) !important;
}
.jacodes-issues-items {
list-style: none !important;
margin: 3px 0 8px 0 !important;
padding: 2px 0 2px 10px !important;
border-left: 2px solid #e1eaf0 !important;
}
.jacodes-issues-item {
margin: 3px 0 !important;
}
.jacodes-issue-link {
display: flex !important;
flex-wrap: wrap !important;
align-items: baseline !important;
justify-content: space-between !important;
gap: 6px 10px !important;
padding: 6px 9px !important;
border-radius: 6px !important;
text-decoration: none !important;
transition: all 0.16s ease !important;
}
.jacodes-issue-link:hover {
background-color: #f0f7fd !important;
transform: translateX(3px) !important;
text-decoration: none !important;
}
.jacodes-issue-label {
font-size: 13px !important;
font-weight: 600 !important;
color: #0b3760 !important;
line-height: 1.3 !important;
transition: color 0.16s ease !important;
}
.jacodes-issue-link:hover .jacodes-issue-label {
color: var(--tech-accent) !important;
}
.jacodes-issue-date {
display: inline-flex !important;
align-items: center !important;
gap: 6px !important;
font-size: 12px !important;
font-weight: 400 !important;
color: #6c8299 !important;
line-height: 1.3 !important;
transition: color 0.16s ease !important;
}
.jacodes-issue-link:hover .jacodes-issue-date {
color: var(--tech-primary) !important;
}
.jacodes-issues-item.is-current .jacodes-issue-link {
background-color: #e8f3fc !important;
border-left: 3px solid var(--tech-primary) !important;
padding-left: 7px !important;
}
.jacodes-issues-item.is-current .jacodes-issue-label {
color: var(--tech-primary) !important;
font-weight: 700 !important;
}
.jacodes-current-badge {
display: inline-block !important;
background: var(--tech-gradient) !important;
color: #ffffff !important;
font-size: 9.5px !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.5px !important;
padding: 1px 6px !important;
border-radius: 4px !important;
line-height: 1.3 !important;
}
.journal-issues-footer {
margin-top: 14px !important;
padding-top: 12px !important;
border-top: 1px solid #edf2f6 !important;
}
.journal-issues-archive-btn {
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 8px !important;
padding: 8px 12px !important;
border-radius: 6px !important;
background: #f0f6fa !important;
border: 1px solid #d2e1ee !important;
color: var(--tech-primary) !important;
font-size: 12.5px !important;
font-weight: 700 !important;
text-decoration: none !important;
text-align: center !important;
transition: all 0.18s ease !important;
}
.journal-issues-archive-btn:hover {
background: var(--tech-primary) !important;
color: #ffffff !important;
border-color: var(--tech-primary) !important;
box-shadow: 0 4px 10px rgba(var(--tech-primary-rgb), 0.25) !important;
}
/* ==========================================================================
JACODESMATH Author Badges (ORCID, MathSciNet, zbMATH Open, ROR)
========================================================================== */
.jacodes-author-identifiers {
display: inline-flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 6px !important;
min-height: 28px !important;
}
.jacodes-author-identifiers:empty {
display: none !important;
border-top: none !important;
padding-top: 0 !important;
margin-top: 0 !important;
}
/* 1. ORCID */
.jacodes-author-orcid {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
transition: transform 0.2s ease !important;
flex-shrink: 0 !important;
vertical-align: middle !important;
}
.jacodes-author-orcid svg {
width: 20px !important;
height: 20px !important;
display: block !important;
flex-shrink: 0 !important;
}
.jacodes-author-orcid:hover {
transform: scale(1.12) !important;
}
/* 2. MathSciNet */
.jacodes-author-mathscinet {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
height: 22px !important;
padding: 0 8px !important;
border-radius: 11px !important;
background: #f0f6fc !important;
border: 1px solid #0055b8 !important;
color: #0047ba !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
text-decoration: none !important;
margin: 0 !important;
vertical-align: middle !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 2px rgba(0, 85, 184, 0.12) !important;
flex-shrink: 0 !important;
line-height: 1 !important;
}
.jacodes-author-mathscinet img,
.jacodes-author-mathscinet svg {
width: 13px !important;
height: 13px !important;
object-fit: contain !important;
display: block !important;
flex-shrink: 0 !important;
}
.jacodes-author-mathscinet:hover {
background: #0055b8 !important;
color: #ffffff !important;
border-color: #003d82 !important;
transform: scale(1.05) !important;
box-shadow: 0 2px 6px rgba(0, 85, 184, 0.3) !important;
text-decoration: none !important;
}
/* 3. zbMATH Open */
.jacodes-author-zbmath {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
height: 22px !important;
padding: 0 7px !important;
border-radius: 11px !important;
background: #ffffff !important;
border: 1px solid #cbd5e1 !important;
text-decoration: none !important;
margin: 0 !important;
vertical-align: middle !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06) !important;
flex-shrink: 0 !important;
line-height: 1 !important;
}
.jacodes-author-zbmath img {
height: 13px !important;
width: auto !important;
display: block !important;
object-fit: contain !important;
flex-shrink: 0 !important;
}
.jacodes-author-zbmath:hover {
background: #f8fafc !important;
border-color: #a31c54 !important;
transform: scale(1.05) !important;
box-shadow: 0 2px 6px rgba(163, 28, 84, 0.25) !important;
text-decoration: none !important;
}
/* 4. ROR */
.jacodes-author-ror {
display: inline-flex !important;
align-items: center !important;
gap: 5px !important;
height: 22px !important;
padding: 0 8px !important;
border-radius: 11px !important;
background: #f0f9f7 !important;
border: 1px solid #53baa1 !important;
color: #1a6b5a !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
letter-spacing: 0.02em !important;
text-decoration: none !important;
margin: 0 !important;
vertical-align: middle !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 2px rgba(83, 186, 161, 0.15) !important;
flex-shrink: 0 !important;
line-height: 1 !important;
}
.jacodes-author-ror svg {
width: 15px !important;
height: 11px !important;
display: block !important;
flex-shrink: 0 !important;
}
.jacodes-author-ror:hover {
background: #53baa1 !important;
color: #ffffff !important;
border-color: #429d87 !important;
transform: scale(1.05) !important;
box-shadow: 0 2px 6px rgba(83, 186, 161, 0.35) !important;
text-decoration: none !important;
}
.jacodes-author-ror:hover svg polygon,
.jacodes-author-ror:hover svg path {
fill: #ffffff !important;
}
/* 5. Article Details Card Links & Rows */
.jacodes-details-list .jacodes-detail-row {
transition: background-color 0.15s ease;
}
.jacodes-details-list .jacodes-detail-row:last-child {
border-bottom: 0 !important;
}
.jacodes-doi-link {
color: var(--tech-primary, #033692);
text-decoration: none;
font-weight: 600;
font-size: 0.825rem;
display: inline-flex;
align-items: center;
gap: 4px;
transition: color 0.15s ease;
}
.jacodes-doi-link:hover {
color: #002266;
text-decoration: underline;
}
.jacodes-doi-link::after {
content: "↗";
font-size: 0.75rem;
line-height: 1;
opacity: 0.6;
}
/* 6. Article Details Card Rows */
.jacodes-details-list .jacodes-detail-row {
padding: 0.45rem 0 !important;
}
/* 7. How to Cite: Inline Expandable Accordion */
#cslCitationFormats,
.citation_formats_list {
display: none;
margin-top: 0.65rem;
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 0.65rem;
transition: all 0.25s ease;
}
#cslCitationFormats[aria-hidden="true"],
.citation_formats_list[aria-hidden="true"] {
display: none !important;
}
#cslCitationFormats[aria-hidden="false"],
.citation_formats_list[aria-hidden="false"] {
display: block !important;
animation: cslFadeDown 0.2s ease-out;
}
@keyframes cslFadeDown {
from {
opacity: 0;
transform: translateY(-6px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.citation_formats_styles {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
}
.citation_formats_styles li {
margin-bottom: 2px;
}
.citation_formats_styles a {
display: block;
padding: 0.35rem 0.55rem;
color: #334155 !important;
text-decoration: none !important;
font-size: 0.8rem;
border-radius: 4px;
transition: background-color 0.15s ease, color 0.15s ease;
}
.citation_formats_styles a:hover,
.citation_formats_styles a:focus {
background-color: #e2e8f0 !important;
color: var(--tech-primary, #033692) !important;
font-weight: 600;
}
.citation_formats_button .citation-chevron {
transition: transform 0.2s ease;
}
.citation_formats_button[aria-expanded="true"] .citation-chevron {
transform: rotate(180deg);
}
/* 8. Citation Action Buttons (Copy, RIS, BibTeX) matching production */
.jacodes-citation-actions {
display: flex;
flex-direction: column;
gap: 7px;
width: 100%;
box-sizing: border-box;
}
.jacodes-citation-btn {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 6px !important;
background: #ffffff !important;
color: #334155 !important;
border: 1px solid #cbd5e1 !important;
border-radius: 6px !important;
padding: 7px 10px !important;
font-size: 0.825rem !important;
font-weight: 500 !important;
text-decoration: none !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
box-sizing: border-box !important;
line-height: 1.25 !important;
text-align: center !important;
}
.jacodes-citation-btn:hover {
background: #f8fafc !important;
border-color: var(--tech-primary, #033692) !important;
color: var(--tech-primary, #033692) !important;
}
.jacodes-citation-btn svg {
flex-shrink: 0 !important;
}
.jacodes-citation-copy-btn {
width: 100% !important;
}
.jacodes-citation-download-row {
display: flex !important;
gap: 7px !important;
width: 100% !important;
box-sizing: border-box !important;
}
.jacodes-citation-download-row .jacodes-citation-download-btn {
flex: 1 1 50% !important;
min-width: 0 !important;
white-space: nowrap !important;
font-size: 0.775rem !important;
padding: 7px 5px !important;
}
/* Citations Metrics in Sidebar */
.tech-citation-badge-wrapper {
height: 70px;
display: flex;
justify-content: center;
align-items: center;
}
.tech-scopus-circle {
width: 62px !important;
height: 62px !important;
border-radius: 50% !important;
background: #fff3e8 !important;
border: 2.5px solid #e9711c !important;
color: #e9711c !important;
box-shadow: 0 3px 10px rgba(233, 113, 28, 0.16) !important;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
justify-content: center !important;
text-decoration: none !important;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.tech-scopus-circle:hover {
transform: translateY(-2px) scale(1.04) !important;
box-shadow: 0 5px 15px rgba(233, 113, 28, 0.28) !important;
border-color: #d85c0b !important;
background: #ffede0 !important;
}
.tech-scopus-circle:active {
transform: translateY(0) scale(0.98) !important;
}
.tech-citation-link {
text-decoration: none !important;
line-height: 1.25 !important;
transition: opacity 0.15s ease !important;
}
.tech-citation-link:hover {
opacity: 0.85 !important;
}
.tech-dimensions-link {
color: var(--tech-primary) !important;
}
.tech-scopus-link {
color: #e9711c !important;
}
.tech-citation-label {
font-size: 0.8rem !important;
font-weight: 700 !important;
line-height: 1.25 !important;
}
.tech-citation-sublabel {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
gap: 3px !important;
font-size: 0.725rem !important;
font-weight: 600 !important;
line-height: 1.2 !important;
}
.tech-citation-sublabel i {
font-size: 0.65rem !important;
}
/* ==========================================================================
10. ISSUE LANDING PAGE (Current Issue & Archives)
========================================================================== */
.tech-issue-showcase-card {
background-color: #f7fbff !important;
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 480' fill='none'%3E%3Cpath d='M-100 480 C 180 390 420 490 700 420 C 950 360 1080 390 1300 450 L1300 500 L-100 500 Z' fill='%2338bdf8' fill-opacity='0.16'/%3E%3Cpath d='M-50 490 C 220 420 500 510 780 440 C 1000 380 1150 410 1300 470 L1300 500 L-50 500 Z' fill='%230284c7' fill-opacity='0.11'/%3E%3C/svg%3E"),
linear-gradient(135deg, #ffffff 0%, #f1f8fe 45%, #def0fe 100%) !important;
background-position: right bottom, center center !important;
background-repeat: no-repeat, no-repeat !important;
background-size: cover, cover !important;
border: 1px solid #bfdbfe !important;
border-radius: 24px !important;
box-shadow: 0 16px 40px rgba(11, 111, 174, 0.08), 0 2px 8px rgba(0, 0, 0, 0.02) !important;
position: relative !important;
overflow: hidden !important;
padding: 2.75rem 3.25rem !important;
}
.tech-issue-showcase-card > .row {
position: relative;
z-index: 1;
}
/* Badge */
.tech-issue-current-pill {
display: inline-flex;
align-items: center;
gap: 0.45rem;
background: linear-gradient(135deg, #023a78 0%, #0353a4 100%) !important;
color: #ffffff !important;
font-size: 0.78rem !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
padding: 0.42rem 1.15rem !important;
border-radius: 50px !important;
box-shadow: 0 4px 12px rgba(2, 58, 120, 0.22) !important;
}
/* Title row */
.tech-issue-title-row {
display: flex !important;
align-items: baseline !important;
flex-wrap: wrap !important;
gap: 0.5rem !important;
}
.tech-issue-main-title {
font-family: var(--tech-font), system-ui, -apple-system, sans-serif !important;
color: #0052cc !important;
font-size: clamp(2rem, 3.5vw, 2.75rem) !important;
font-weight: 800 !important;
letter-spacing: -0.03em !important;
line-height: 1.1 !important;
text-align: left !important;
margin: 0 !important;
}
.tech-issue-title-divider {
color: #94a3b8 !important;
font-size: 2.2rem !important;
font-weight: 300 !important;
line-height: 1 !important;
margin: 0 0.25rem !important;
display: inline-block !important;
}
.tech-issue-sub-title {
font-family: var(--tech-font), system-ui, -apple-system, sans-serif !important;
color: #033692 !important;
font-size: clamp(1.4rem, 2.4vw, 1.9rem) !important;
font-weight: 700 !important;
letter-spacing: -0.01em !important;
line-height: 1.1 !important;
}
/* Accent cyan bar */
.tech-issue-accent-bar {
width: 52px !important;
height: 4.5px !important;
background: linear-gradient(90deg, #38bdf8, #0ea5e9) !important;
border-radius: 3px !important;
margin-top: 0.6rem !important;
margin-bottom: 1.6rem !important;
box-shadow: 0 2px 6px rgba(14, 165, 233, 0.35) !important;
}
/* Journal full name */
.tech-issue-journal-name {
color: #1e293b !important;
font-family: var(--tech-font), system-ui, -apple-system, sans-serif !important;
font-size: 1.05rem !important;
font-weight: 600 !important;
letter-spacing: -0.01em !important;
line-height: 1.4 !important;
}
/* 4 White Metric Cards */
.tech-issue-stats-grid {
margin-top: 0.5rem !important;
}
.tech-issue-stat-box {
background: #ffffff !important;
border: 1px solid #e1effc !important;
border-radius: 16px !important;
padding: 0.85rem 1rem !important;
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
height: 100% !important;
box-shadow: 0 4px 14px rgba(11, 111, 174, 0.05) !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.tech-issue-stat-box:hover {
transform: translateY(-3px) !important;
box-shadow: 0 8px 24px rgba(11, 111, 174, 0.12) !important;
border-color: #bae6fd !important;
}
.tech-issue-stat-icon {
font-size: 1.75rem !important;
line-height: 1 !important;
color: #0284c7 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.tech-issue-stat-icon.text-cyan {
color: #0ea5e9 !important;
}
.tech-issue-stat-content {
min-width: 0 !important;
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
}
.tech-issue-stat-val {
font-size: 1.4rem !important;
font-weight: 800 !important;
color: #0f172a !important;
line-height: 1.1 !important;
font-family: var(--tech-font), system-ui, -apple-system, sans-serif !important;
}
.tech-issue-stat-lbl {
font-size: 0.785rem !important;
font-weight: 600 !important;
color: #64748b !important;
margin-top: 2px !important;
}
.tech-issue-stat-title {
font-size: 0.95rem !important;
font-weight: 800 !important;
color: #0f172a !important;
line-height: 1.15 !important;
}
.tech-issue-stat-sub {
font-size: 0.725rem !important;
font-weight: 500 !important;
color: #64748b !important;
margin-top: 2px !important;
white-space: nowrap !important;
}
/* ==========================================================================
11. ARCHIVE PAGE — YEAR ACCORDIONS & ISSUE CARDS
========================================================================== */
.tech-archive-year-group {
background: #ffffff !important;
border: 1px solid #e1effc !important;
border-radius: 18px !important;
overflow: hidden !important;
box-shadow: 0 4px 16px rgba(11, 111, 174, 0.04) !important;
transition: border-color 0.25s ease, box-shadow 0.25s ease !important;
}
.tech-archive-year-group:hover {
border-color: #cae3fc !important;
box-shadow: 0 8px 24px rgba(11, 111, 174, 0.08) !important;
}
.tech-archive-year-group[open] {
border-color: #bae6fd !important;
box-shadow: 0 10px 28px rgba(11, 111, 174, 0.1) !important;
}
.tech-archive-year-summary {
list-style: none !important;
cursor: pointer !important;
padding: 1.15rem 1.4rem !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
background: linear-gradient(90deg, #ffffff 0%, #f8fbfd 100%) !important;
transition: all 0.2s ease !important;
user-select: none !important;
}
.tech-archive-year-summary::-webkit-details-marker {
display: none !important;
}
.tech-archive-year-group[open] > .tech-archive-year-summary {
background: linear-gradient(90deg, #f0f7fe 0%, #e8f4fd 100%) !important;
border-bottom: 1px solid #cae3fc !important;
}
.tech-archive-year-summary:hover {
background: #f0f7fe !important;
}
.tech-archive-year-icon-box {
width: 42px;
height: 42px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(3, 54, 146, 0.08) 0%, rgba(14, 165, 233, 0.12) 100%);
display: flex;
align-items: center;
justify-content: center;
color: #033692;
font-size: 1.15rem;
flex-shrink: 0;
}
.tech-archive-year-title {
font-family: var(--tech-font), system-ui, sans-serif !important;
font-size: 1.35rem !important;
font-weight: 800 !important;
color: #033692 !important;
letter-spacing: -0.01em !important;
}
.tech-archive-year-pill {
background: #ffffff !important;
color: #0284c7 !important;
font-size: 0.8rem !important;
font-weight: 700 !important;
padding: 0.35rem 0.85rem !important;
border-radius: 50px !important;
border: 1px solid #cae3fc !important;
box-shadow: 0 2px 6px rgba(11, 111, 174, 0.06) !important;
}
.tech-archive-chevron-circle {
width: 32px;
height: 32px;
border-radius: 50%;
background: #ffffff;
border: 1px solid #e1effc;
display: flex;
align-items: center;
justify-content: center;
color: #0b6fae;
font-size: 0.85rem;
transition: transform 0.3s ease, background 0.2s ease;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04);
}
.tech-archive-year-group[open] .tech-archive-chevron-circle {
transform: rotate(180deg);
background: #0284c7;
color: #ffffff;
border-color: #0284c7;
}
.tech-archive-year-body {
padding: 1.6rem 1.4rem !important;
background: #fbfdff !important;
}
.tech-archive-issue-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 20px !important;
box-shadow: 0 4px 18px rgba(11, 111, 174, 0.05) !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
display: flex !important;
flex-direction: column !important;
height: 100% !important;
}
.tech-archive-issue-card .card-body {
padding: 1rem 0.8rem !important;
}
.tech-archive-issue-card:hover {
transform: translateY(-5px) !important;
box-shadow: 0 16px 36px rgba(11, 111, 174, 0.12) !important;
border-color: #bae6fd !important;
}
.tech-archive-card-cover-wrap {
background: linear-gradient(135deg, #f8fafd 0%, #f0f7fe 100%) !important;
padding: 1.25rem 0.85rem !important;
text-align: center !important;
border-bottom: 1px solid #f1f5f9 !important;
}
.tech-archive-card-img {
max-height: 180px !important;
width: auto !important;
object-fit: cover !important;
border-radius: 4px 10px 10px 4px !important;
box-shadow: 4px 8px 20px rgba(2, 44, 92, 0.2) !important;
transition: transform 0.3s ease !important;
}
.tech-archive-issue-card:hover .tech-archive-card-img {
transform: scale(1.03) !important;
}
.tech-archive-issue-card .card-title a {
color: #1e293b !important;
transition: color 0.2s ease !important;
}
.tech-archive-issue-card:hover .card-title a {
color: #0052cc !important;
}
/* Card Badges & Horizontal Dual-Meta Box (Exact Mockup Match - Compact 3-Column Grid) */
.tech-card-vol-badge {
background: linear-gradient(135deg, #003882 0%, #0052cc 100%) !important;
color: #ffffff !important;
font-size: 0.75rem !important;
font-weight: 800 !important;
padding: 0.3rem 0.7rem !important;
border-radius: 50px !important;
letter-spacing: -0.01em !important;
display: inline-block !important;
white-space: nowrap !important;
box-shadow: 0 2px 8px rgba(0, 56, 130, 0.2) !important;
}
.tech-card-oa-pill {
background: #ecfdf5 !important;
color: #059669 !important;
border: 1.5px solid #a7f3d0 !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
padding: 0.26rem 0.6rem !important;
border-radius: 50px !important;
display: inline-flex !important;
align-items: center !important;
white-space: nowrap !important;
}
.tech-card-dual-meta-box {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 12px !important;
padding: 0.4rem 0.5rem !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important;
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02) !important;
transition: all 0.2s ease !important;
margin-bottom: 0.85rem !important;
gap: 0.25rem !important;
}
.tech-archive-issue-card:hover .tech-card-dual-meta-box {
border-color: #cae3fc !important;
box-shadow: 0 4px 12px rgba(11, 111, 174, 0.06) !important;
}
.tech-card-meta-left {
display: flex !important;
align-items: center !important;
gap: 0.35rem !important;
min-width: 0 !important;
}
.tech-card-cal-icon {
font-size: 1.05rem !important;
color: #0284c7 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
}
.tech-card-period-pill {
background: #e8f3fe !important;
color: #0f172a !important;
font-size: 0.78rem !important;
font-weight: 800 !important;
padding: 0.2rem 0.42rem !important;
border-radius: 6px !important;
white-space: nowrap !important;
font-family: var(--tech-font), system-ui, sans-serif !important;
letter-spacing: -0.01em !important;
}
.tech-card-meta-divider {
width: 1.5px !important;
height: 22px !important;
background-color: #38bdf8 !important;
margin: 0 0.35rem !important;
flex-shrink: 0 !important;
}
.tech-card-meta-right {
display: flex !important;
flex-direction: column !important;
justify-content: center !important;
flex-shrink: 0 !important;
text-align: left !important;
}
.tech-card-meta-label {
display: block !important;
font-size: 0.58rem !important;
font-weight: 800 !important;
letter-spacing: 0.05em !important;
color: #64748b !important;
text-transform: uppercase !important;
line-height: 1 !important;
margin-bottom: 2px !important;
}
.tech-card-meta-val {
display: block !important;
font-size: 0.78rem !important;
font-weight: 800 !important;
color: #0f172a !important;
line-height: 1.1 !important;
white-space: nowrap !important;
}
.tech-card-action-btn {
border: 1.5px solid #38bdf8 !important;
color: #0052cc !important;
font-size: 0.85rem !important;
font-weight: 700 !important;
padding: 0.45rem 1rem !important;
border-radius: 50px !important;
background: #ffffff !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
gap: 0.35rem !important;
transition: all 0.25s ease !important;
}
.tech-card-action-btn:hover {
background: linear-gradient(135deg, #0052cc 0%, #0284c7 100%) !important;
color: #ffffff !important;
border-color: transparent !important;
box-shadow: 0 4px 14px rgba(0, 82, 204, 0.25) !important;
transform: translateY(-1px) !important;
}
/* ==========================================================================
SUBMISSIONS PORTAL & JOURNAL STATUS (JACODESMATH Theme)
========================================================================== */
/* Submissions Hero Showcase Banner */
.tech-submissions-hero-card {
position: relative;
background: linear-gradient(135deg, #f0f7fe 0%, #e6f1fc 100%);
border: 1px solid #cae3fc;
border-radius: 20px;
padding: 2.2rem 2.6rem;
box-shadow: 0 8px 24px rgba(11, 111, 174, 0.05);
overflow: hidden;
}
.tech-submissions-hero-card::after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 50%;
background-image: url("data:image/svg+xml,%3Csvg width='700' height='200' viewBox='0 0 700 200' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg stroke='%230b6fae' stroke-width='0.9' opacity='0.22'%3E%3Cpath d='M80 160L170 80L280 130L360 40L460 100L550 30L650 70'/%3E%3Cpath d='M130 30L170 80L260 25L360 40L430 130L460 100'/%3E%3Cpath d='M280 130L340 180L460 100L520 170L650 70'/%3E%3Cpath d='M170 80L230 170L340 180'/%3E%3Cpath d='M360 40L420 10L550 30L600 120L650 70'/%3E%3Cpath d='M460 100L520 55L550 30'/%3E%3Cpath d='M280 130L320 65L360 40'/%3E%3Cpath d='M230 170L290 190L370 155L430 130'/%3E%3Cpath d='M520 170L575 190L650 140L680 50'/%3E%3C/g%3E%3Cg fill='%230b6fae'%3E%3Ccircle cx='170' cy='80' r='5' opacity='0.35'/%3E%3Ccircle cx='280' cy='130' r='5' opacity='0.35'/%3E%3Ccircle cx='360' cy='40' r='5.5' opacity='0.4'/%3E%3Ccircle cx='460' cy='100' r='5' opacity='0.35'/%3E%3Ccircle cx='550' cy='30' r='5.5' opacity='0.4'/%3E%3Ccircle cx='650' cy='70' r='5' opacity='0.35'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
background-size: cover;
pointer-events: none;
}
.tech-submissions-hero-inner {
position: relative;
z-index: 2;
max-width: 780px;
}
.tech-submissions-hero-title {
font-size: 2.2rem;
font-weight: 850;
color: #0f172a;
letter-spacing: -0.02em;
}
.tech-submissions-hero-desc {
font-size: 1.05rem;
line-height: 1.65;
}
/* Submissions Cards */
.tech-subm-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 2.2rem 2.4rem;
box-shadow: 0 4px 18px rgba(11, 111, 174, 0.04);
transition: all 0.3s ease;
}
.tech-subm-card:hover {
border-color: #bae6fd;
box-shadow: 0 10px 28px rgba(11, 111, 174, 0.07);
}
.tech-subm-icon-box {
width: 46px;
height: 46px;
border-radius: 14px;
background: linear-gradient(135deg, #e0f2fe 0%, #cae7fc 100%);
color: var(--tech-primary);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.35rem;
flex-shrink: 0;
box-shadow: 0 3px 10px rgba(11, 111, 174, 0.12);
}
/* Account Cards */
.tech-account-card {
background: #f8fafd;
border: 1.5px solid #dbeafe !important;
border-radius: 18px !important;
padding: 1.8rem 1.6rem !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.tech-account-card:hover {
background: #ffffff;
border-color: var(--tech-primary) !important;
box-shadow: 0 12px 28px rgba(11, 111, 174, 0.1);
transform: translateY(-3px);
}
.tech-avatar-circle {
width: 58px;
height: 58px;
border-radius: 50%;
background: #e8f4fc;
border: 2px solid #cae3fc;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 12px rgba(11, 111, 174, 0.08);
}
/* Gradient Buttons */
.tech-btn-gradient {
background: linear-gradient(135deg, #0052cc 0%, #0284c7 100%) !important;
border: none !important;
transition: all 0.25s ease !important;
}
.tech-btn-gradient:hover {
background: linear-gradient(135deg, #003e9c 0%, #0369a1 100%) !important;
box-shadow: 0 6px 18px rgba(0, 82, 204, 0.3) !important;
transform: translateY(-1px);
}
/* Journal Status Card in Sidebar */
.journal-status-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 20px !important;
padding: 1.4rem 1.4rem !important;
box-shadow: 0 4px 18px rgba(11, 111, 174, 0.04) !important;
}
.journal-status-title {
color: var(--tech-primary) !important;
font-size: 1.15rem !important;
font-weight: 800 !important;
padding-bottom: 0.85rem !important;
margin: 0 0 0.85rem 0 !important;
border-bottom: 1.5px solid #edf2f7 !important;
display: flex !important;
align-items: center !important;
}
.journal-status-list {
list-style: none !important;
margin: 0 !important;
padding: 0 !important;
}
.tech-sidebar-blocks .journal-status-list li,
.journal-status-list li {
display: grid !important;
grid-template-columns: 34px minmax(0, 1fr) !important;
column-gap: 12px !important;
row-gap: 3px !important;
align-items: start !important;
padding: 0.75rem 0 !important;
background: transparent !important;
border: none !important;
border-bottom: 1px solid #edf2f6 !important;
border-radius: 0 !important;
box-shadow: none !important;
margin: 0 !important;
text-align: left !important;
}
.tech-sidebar-blocks .journal-status-list li:last-child,
.journal-status-list li:last-child {
border-bottom: none !important;
padding-bottom: 0.2rem !important;
}
.tech-sidebar-blocks .journal-status-list li:hover {
background: transparent !important;
transform: none !important;
border-color: #edf2f6 !important;
}
.journal-status-list .status-icon {
grid-column: 1 !important;
grid-row: 1 / span 2 !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
font-size: 11px !important;
font-weight: 800 !important;
line-height: 1 !important;
margin-top: 2px !important;
}
.journal-status-list .status-open {
background: #dcfce7 !important;
color: #15803d !important;
}
.journal-status-list .status-apc {
background: #fef3c7 !important;
color: #b45309 !important;
}
.journal-status-list .status-cc {
background: #f3e8ff !important;
color: #7e22ce !important;
}
.journal-status-list .status-frequency {
background: #f1f5f9 !important;
color: #334155 !important;
}
.journal-status-list .status-indexing {
background: #e0f2fe !important;
color: #0284c7 !important;
font-size: 14px !important;
}
.journal-status-list .status-name {
grid-column: 2 !important;
grid-row: 1 !important;
font-size: 0.88rem !important;
font-weight: 750 !important;
color: #0f172a !important;
text-decoration: none !important;
line-height: 1.3 !important;
}
.journal-status-list .status-text {
grid-column: 2 !important;
grid-row: 2 !important;
font-size: 0.78rem !important;
color: #64748b !important;
line-height: 1.4 !important;
}
.tech-indexing-pill {
display: inline-block !important;
background: #f1f5f9 !important;
color: #0284c7 !important;
padding: 0.2rem 0.55rem !important;
border-radius: 6px !important;
font-size: 0.72rem !important;
font-weight: 700 !important;
text-decoration: none !important;
border: 1px solid #e2e8f0 !important;
transition: all 0.2s ease !important;
}
.tech-indexing-pill:hover {
background: #0284c7 !important;
color: #ffffff !important;
border-color: #0284c7 !important;
}
/* Sidebar Make a Submission CTA */
.tech-sidebar-cta-btn {
background: linear-gradient(135deg, #0052cc 0%, #0284c7 100%) !important;
border: none !important;
border-radius: 14px !important;
font-size: 0.95rem !important;
font-weight: 800 !important;
box-shadow: 0 6px 18px rgba(0, 82, 204, 0.22) !important;
transition: all 0.25s ease !important;
}
.tech-sidebar-cta-btn:hover {
background: linear-gradient(135deg, #003e9c 0%, #0369a1 100%) !important;
box-shadow: 0 10px 24px rgba(0, 82, 204, 0.32) !important;
transform: translateY(-2px) !important;
color: #ffffff !important;
}
/* Privacy Statement Contact Card */
.tech-privacy-contact-card {
background: linear-gradient(135deg, #f8fafd 0%, #f0f7fe 100%) !important;
border: 1.5px solid #dbeafe !important;
border-radius: 20px !important;
padding: 2.2rem 2.4rem !important;
box-shadow: 0 4px 20px rgba(11, 111, 174, 0.05) !important;
transition: all 0.3s ease !important;
}
.tech-privacy-contact-card:hover {
border-color: #93c5fd !important;
box-shadow: 0 8px 24px rgba(11, 111, 174, 0.08) !important;
}
.tech-contact-icon-box {
width: 48px !important;
height: 48px !important;
border-radius: 14px !important;
background: #ffffff !important;
border: 1.5px solid #cae3fc !important;
color: var(--tech-primary) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.4rem !important;
flex-shrink: 0 !important;
box-shadow: 0 3px 10px rgba(11, 111, 174, 0.1) !important;
}
.tech-contact-pill-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 14px !important;
padding: 1.25rem 1.4rem !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03) !important;
transition: all 0.2s ease !important;
}
.tech-contact-pill-card:hover {
border-color: #cae3fc !important;
box-shadow: 0 4px 14px rgba(11, 111, 174, 0.08) !important;
}
.letter-spacing-wide {
letter-spacing: 0.06em !important;
font-size: 0.72rem !important;
}
.tech-privacy-consent-note {
border-top-color: #e2e8f0 !important;
display: flex !important;
align-items: center !important;
gap: 0.75rem !important;
}
.tech-privacy-consent-note i {
font-size: 1.05rem !important;
color: var(--tech-primary) !important;
flex-shrink: 0 !important;
line-height: 1 !important;
display: inline-flex !important;
align-items: center !important;
}
.tech-contact-pill-card .btn {
margin-top: 0.55rem !important;
}
/* ==========================================================================
16. SUBMISSION PORTAL HERO SHOWCASE BANNER
========================================================================== */
.tech-subm-portal-pill,
.tech-issue-current-pill {
display: inline-flex !important;
align-items: center !important;
gap: 0.45rem !important;
background: linear-gradient(135deg, #023a78 0%, #0353a4 100%) !important;
color: #ffffff !important;
font-size: 0.78rem !important;
font-weight: 800 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
padding: 0.42rem 1.15rem !important;
border-radius: 50px !important;
box-shadow: 0 4px 12px rgba(2, 58, 120, 0.22) !important;
}
.tech-subm-banner-notice {
margin-top: 1rem !important;
max-width: 740px !important;
}
.tech-subm-banner-p {
font-size: 1.05rem !important;
color: #334155 !important;
line-height: 1.65 !important;
letter-spacing: -0.01em !important;
}
.tech-subm-banner-p a {
color: #0052cc !important;
font-weight: 700 !important;
transition: color 0.2s ease !important;
}
.tech-subm-banner-p a:hover {
color: #003e9c !important;
text-decoration: underline !important;
}
.tech-subm-accent-bar {
width: 52px !important;
height: 4.5px !important;
background: linear-gradient(90deg, #38bdf8, #0ea5e9) !important;
border-radius: 3px !important;
margin-top: 0.8rem !important;
margin-bottom: 1.6rem !important;
box-shadow: 0 2px 6px rgba(14, 165, 233, 0.35) !important;
}
.tech-subm-action-card {
background: #ffffff !important;
border: 1.5px solid #e2e8f0 !important;
border-radius: 16px !important;
padding: 0.75rem 1.25rem !important;
display: inline-flex !important;
align-items: center !important;
gap: 0.85rem !important;
text-decoration: none !important;
color: #0f172a !important;
box-shadow: 0 4px 14px rgba(11, 111, 174, 0.05) !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
white-space: nowrap !important;
}
.tech-subm-action-card:hover {
border-color: #93c5fd !important;
background: #ffffff !important;
box-shadow: 0 8px 24px rgba(11, 111, 174, 0.12) !important;
transform: translateY(-2px) !important;
color: #0052cc !important;
}
.tech-subm-action-icon {
font-size: 1.6rem !important;
color: #0052cc !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
flex-shrink: 0 !important;
transition: transform 0.25s ease !important;
}
.tech-subm-action-card:hover .tech-subm-action-icon {
transform: scale(1.08) !important;
}
.tech-subm-action-text {
font-size: 0.95rem !important;
font-weight: 750 !important;
color: #0f172a !important;
line-height: 1 !important;
white-space: nowrap !important;
}
.tech-subm-action-card:hover .tech-subm-action-text {
color: #0052cc !important;
}
.tech-subm-illustration-wrap {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
position: relative !important;
}
.tech-subm-portal-img {
max-height: 250px !important;
width: auto !important;
object-fit: contain !important;
filter: drop-shadow(0 14px 28px rgba(11, 111, 174, 0.16)) !important;
transition: transform 0.35s ease !important;
}
.tech-subm-illustration-wrap:hover .tech-subm-portal-img {
transform: translateY(-4px) scale(1.02) !important;
}
/* APC Diamond Open Access Orbital Seal */
.tech-apc-seal-wrap {
position: relative !important;
width: 290px !important;
height: 290px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
background: transparent !important;
}
.tech-apc-orbit-svg {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
pointer-events: none !important;
z-index: 1 !important;
background: transparent !important;
}
.tech-apc-orbit-text-top {
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
font-size: 11px !important;
font-weight: 800 !important;
fill: #033692 !important;
letter-spacing: 3.5px !important;
}
.tech-apc-orbit-text-bot {
font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
font-size: 10.5px !important;
font-weight: 800 !important;
fill: #0084c7 !important;
letter-spacing: 2.2px !important;
}
.tech-apc-crystal-core {
max-width: 195px !important;
max-height: 195px !important;
width: auto !important;
height: auto !important;
object-fit: contain !important;
position: relative !important;
z-index: 2 !important;
background: transparent !important;
filter: drop-shadow(0 14px 28px rgba(11, 111, 174, 0.18)) !important;
transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.tech-apc-seal-wrap:hover .tech-apc-crystal-core {
transform: translateY(-4px) scale(1.04) !important;
}
/* ==========================================================================
17. AIMS & SCOPE PAGE
========================================================================== */
.tech-aims-body > p:first-of-type {
display: none !important;
}
.tech-aims-body > p {
font-size: 1.05rem !important;
color: #334155 !important;
line-height: 1.75 !important;
margin-bottom: 1.35rem !important;
}
.tech-aims-body > p.p1:nth-of-type(2) {
font-size: 1.25rem !important;
font-weight: 800 !important;
color: #0f172a !important;
margin-top: 0.5rem !important;
margin-bottom: 1.25rem !important;
letter-spacing: -0.01em !important;
position: relative !important;
padding-left: 1.1rem !important;
}
.tech-aims-body > p.p1:nth-of-type(2)::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 15% !important;
height: 70% !important;
width: 4px !important;
background: linear-gradient(180deg, #0052cc 0%, #38bdf8 100%) !important;
border-radius: 4px !important;
}
.tech-aims-body ul {
display: grid !important;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)) !important;
gap: 0.95rem !important;
padding-left: 0 !important;
list-style: none !important;
margin: 1.25rem 0 2.5rem 0 !important;
}
.tech-aims-body ul li {
background: #f8fafd !important;
border: 1.5px solid #e2e8f0 !important;
border-radius: 14px !important;
padding: 1rem 1.35rem !important;
font-size: 0.98rem !important;
font-weight: 650 !important;
color: #1e293b !important;
display: flex !important;
align-items: center !important;
gap: 0.85rem !important;
box-shadow: 0 2px 8px rgba(11, 111, 174, 0.03) !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.tech-aims-body ul li::before {
content: "\F272" !important; /* Bootstrap icon bi-check-circle-fill */
font-family: "bootstrap-icons" !important;
color: #0052cc !important;
font-size: 1.2rem !important;
flex-shrink: 0 !important;
line-height: 1 !important;
}
.tech-aims-body ul li:hover {
background: #ffffff !important;
border-color: #93c5fd !important;
box-shadow: 0 8px 20px rgba(11, 111, 174, 0.1) !important;
transform: translateY(-2px) !important;
color: #0052cc !important;
}
/* ==========================================================================
18. SUBMISSION GUIDELINES PAGE
========================================================================== */
.tech-guidelines-body h2,
.tech-guidelines-body h3 {
font-size: 1.35rem !important;
font-weight: 800 !important;
color: #0f172a !important;
margin-top: 2.25rem !important;
margin-bottom: 1.15rem !important;
padding-left: 1.1rem !important;
position: relative !important;
display: flex !important;
align-items: center !important;
letter-spacing: -0.01em !important;
}
.tech-guidelines-body h2:first-of-type,
.tech-guidelines-body h3:first-of-type {
margin-top: 0 !important;
}
.tech-guidelines-body h2::before,
.tech-guidelines-body h3::before {
content: "" !important;
position: absolute !important;
left: 0 !important;
top: 15% !important;
height: 70% !important;
width: 4px !important;
background: linear-gradient(180deg, #0052cc 0%, #38bdf8 100%) !important;
border-radius: 4px !important;
}
.tech-guidelines-body h4 {
font-size: 1.08rem !important;
font-weight: 750 !important;
color: #0052cc !important;
margin-top: 1.5rem !important;
margin-bottom: 0.65rem !important;
display: flex !important;
align-items: center !important;
gap: 0.5rem !important;
}
.tech-guidelines-body h4::before {
content: "•" !important;
color: #38bdf8 !important;
font-size: 1.5rem !important;
line-height: 1 !important;
}
.tech-guidelines-body p {
font-size: 1.02rem !important;
color: #334155 !important;
line-height: 1.75 !important;
margin-bottom: 1.15rem !important;
}
.tech-guidelines-body strong {
color: #0f172a !important;
font-weight: 700 !important;
}
.tech-guidelines-body ul {
padding-left: 1.5rem !important;
margin-bottom: 1.5rem !important;
}
.tech-guidelines-body ul li {
font-size: 1rem !important;
color: #334155 !important;
line-height: 1.7 !important;
margin-bottom: 0.5rem !important;
}
/* Accordion under Item 5: Manuscript Preparation with LaTeX */
.jacodes-guideline-accordion {
display: grid !important;
gap: 12px !important;
margin: 24px 0 36px !important;
}
.jacodes-guideline-panel {
overflow: hidden !important;
border: 1.5px solid #e2e8f0 !important;
border-radius: 16px !important;
background: #ffffff !important;
box-shadow: 0 2px 8px rgba(11, 111, 174, 0.03) !important;
transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.jacodes-guideline-panel[open] {
border-color: #93c5fd !important;
box-shadow: 0 8px 24px rgba(11, 111, 174, 0.08) !important;
}
.jacodes-guideline-summary {
display: grid !important;
grid-template-columns: 42px minmax(0, 1fr) 32px !important;
gap: 14px !important;
align-items: center !important;
min-height: 62px !important;
padding: 12px 20px !important;
background: #f8fafd !important;
color: #0f172a !important;
cursor: pointer !important;
list-style: none !important;
user-select: none !important;
transition: background 0.2s ease !important;
}
.jacodes-guideline-summary::-webkit-details-marker {
display: none !important;
}
.jacodes-guideline-summary:hover {
background: #f0f7fe !important;
}
.jacodes-guideline-panel[open] .jacodes-guideline-summary {
background: #f0f7fe !important;
border-bottom: 1.5px solid #dbeafe !important;
}
.jacodes-guideline-index {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
width: 38px !important;
height: 38px !important;
border-radius: 50% !important;
background: #e0f2fe !important;
color: #0052cc !important;
font-size: 13px !important;
font-weight: 800 !important;
line-height: 1 !important;
}
.jacodes-guideline-title {
min-width: 0 !important;
color: #0f172a !important;
font-size: 1.05rem !important;
font-weight: 750 !important;
line-height: 1.35 !important;
}
.jacodes-guideline-toggle {
position: relative !important;
display: block !important;
width: 30px !important;
height: 30px !important;
border: 1.5px solid #cae3fc !important;
border-radius: 50% !important;
background: #ffffff !important;
transition: border-color 0.2s ease !important;
}
.jacodes-guideline-toggle::before,
.jacodes-guideline-toggle::after {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
width: 12px !important;
height: 2px !important;
border-radius: 2px !important;
background: #0052cc !important;
transform: translate(-50%, -50%) !important;
transition: transform 0.25s ease !important;
}
.jacodes-guideline-toggle::after {
transform: translate(-50%, -50%) rotate(90deg) !important;
}
.jacodes-guideline-panel[open] .jacodes-guideline-toggle::after {
transform: translate(-50%, -50%) rotate(0deg) !important;
}
.jacodes-guideline-panel-content {
padding: 24px 28px !important;
background: #ffffff !important;
}
.jacodes-guideline-panel-content > :first-child {
margin-top: 0 !important;
}
.jacodes-guideline-panel-content > :last-child {
margin-bottom: 0 !important;
}
.jacodes-guideline-panel-content p {
color: #334155 !important;
font-size: 1rem !important;
line-height: 1.75 !important;
margin-bottom: 1rem !important;
}
.jacodes-guideline-panel-content a {
color: #0052cc !important;
font-weight: 650 !important;
text-decoration: underline !important;
text-underline-offset: 3px !important;
}
.jacodes-guidelines-bottom-buttons .btn {
transition: all 0.25s ease !important;
}
.jacodes-guidelines-bottom-buttons .btn:hover {
transform: translateY(-2px) !important;
}
/* Complete OpenType ligature disabling globally to prevent 'fi', 'ffi', 'fl' glyph merging (ensuring clear dot on 'i' in 'official', 'Profile', 'Affiliation', etc.) */
html,
body,
*,
*::before,
*::after {
font-variant-ligatures: no-common-ligatures no-discretionary-ligatures no-historical-ligatures none !important;
font-feature-settings: "liga" 0, "calt" 0, "clig" 0, "dlig" 0, "hlig" 0 !important;
}
/* ==========================================================================
21. CONTACT PAGE STYLING
========================================================================== */
.tech-contact-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 20px !important;
padding: 1.75rem 1.5rem !important;
display: flex !important;
flex-direction: column !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
box-shadow: 0 4px 16px rgba(11, 111, 174, 0.04) !important;
}
.tech-contact-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 14px 30px rgba(11, 111, 174, 0.1) !important;
border-color: #93c5fd !important;
}
.tech-contact-header {
display: flex !important;
align-items: center !important;
gap: 1rem !important;
margin-bottom: 1.25rem !important;
padding-bottom: 1rem !important;
border-bottom: 1px solid #f1f5f9 !important;
}
.tech-contact-icon-wrap {
width: 50px !important;
height: 50px !important;
border-radius: 14px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1.4rem !important;
flex-shrink: 0 !important;
}
.tech-contact-body {
flex-grow: 1 !important;
display: flex !important;
flex-direction: column !important;
gap: 1rem !important;
margin-bottom: 1.5rem !important;
}
.tech-contact-item {
display: flex !important;
align-items: flex-start !important;
gap: 0.75rem !important;
}
.tech-contact-footer {
margin-top: auto !important;
padding-top: 0.5rem !important;
}
/* ==========================================================================
22. EDITORIAL TEAM PAGE STYLING
========================================================================== */
.tech-editor-featured-card {
background: linear-gradient(135deg, #f0f7ff 0%, #e2effe 100%) !important;
border: 1px solid #bfdbfe !important;
box-shadow: 0 10px 30px rgba(11, 111, 174, 0.08) !important;
}
.tech-editor-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 18px !important;
padding: 1.5rem !important;
display: flex !important;
flex-direction: column !important;
box-shadow: 0 4px 14px rgba(11, 111, 174, 0.04) !important;
transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.tech-editor-card:hover {
transform: translateY(-4px) !important;
box-shadow: 0 14px 28px rgba(11, 111, 174, 0.1) !important;
border-color: #93c5fd !important;
}
.tech-section-badge {
width: 32px !important;
height: 32px !important;
border-radius: 10px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 1rem !important;
flex-shrink: 0 !important;
}
.tech-member-compact-card {
background: #ffffff !important;
border: 1px solid #e2e8f0 !important;
border-radius: 14px !important;
padding: 1rem 1.15rem !important;
height: 100% !important;
display: flex !important;
flex-direction: column !important;
justify-content: space-between !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02) !important;
transition: all 0.25s ease !important;
}
.tech-member-compact-card:hover {
transform: translateY(-2px) !important;
border-color: #93c5fd !important;
box-shadow: 0 8px 20px rgba(11, 111, 174, 0.08) !important;
}
/* ==========================================================================
Article Page - Monthly Downloads (pure HTML/CSS chart)
========================================================================== */
.jacodes-mchart {
width: 100%;
font-family: 'Plus Jakarta Sans', sans-serif;
}
.jacodes-mchart-plot {
position: relative;
height: 130px;
border-bottom: 1px solid #cbd5e1;
}
.jacodes-mchart-grid {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
justify-content: space-between;
pointer-events: none;
}
.jacodes-mchart-grid span {
display: block;
border-top: 1px dashed #eef2f7;
}
.jacodes-mchart-grid span:last-child { border-top-color: transparent; }
.jacodes-mchart-bars {
position: absolute;
inset: 14px 0 0 0;
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 3px;
align-items: end;
}
.jacodes-mchart-col {
position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
cursor: default;
}
.jacodes-mchart-bar {
display: block;
width: 72%;
min-width: 6px;
border-radius: 3px 3px 0 0;
background: linear-gradient(180deg, #0369a1 0%, #38bdf8 100%);
transition: filter 0.15s ease;
}
.jacodes-mchart-col:hover .jacodes-mchart-bar { filter: brightness(0.88); }
.jacodes-mchart-val {
font-size: 9.5px;
font-weight: 700;
color: #0b3760;
line-height: 1;
margin-bottom: 3px;
white-space: nowrap;
}
.jacodes-mchart-labels {
display: grid;
grid-template-columns: repeat(12, 1fr);
gap: 3px;
margin-top: 6px;
}
.jacodes-mchart-lbl {
text-align: center;
font-size: 9px;
font-weight: 600;
color: #64748b;
line-height: 1.2;
letter-spacing: -0.01em;
white-space: nowrap;
overflow: visible;
}
/* ==========================================================================
JACODESMATH Modern Auth Pages (Login, Register, Lost Password)
========================================================================== */
.tech-auth-wrapper {
max-width: 480px;
margin: 1.5rem auto 3.5rem auto;
}
.tech-auth-wrapper-wide {
max-width: 860px;
margin: 1.5rem auto 3.5rem auto;
}
.tech-auth-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 20px;
padding: 2.5rem;
box-shadow: 0 10px 30px -5px rgba(11, 37, 69, 0.08), 0 4px 6px -2px rgba(11, 37, 69, 0.03);
transition: all 0.3s ease;
}
.tech-auth-card:hover {
border-color: #cbd5e1;
box-shadow: 0 14px 36px -5px rgba(11, 37, 69, 0.11);
}
.tech-auth-badge {
width: 58px;
height: 58px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.55rem;
margin: 0 auto 1.25rem auto;
}
.tech-auth-badge-primary {
background: linear-gradient(135deg, #0284c7 0%, #0369a1 100%);
color: #ffffff;
box-shadow: 0 6px 16px rgba(2, 132, 199, 0.35);
}
.tech-auth-badge-success {
background: linear-gradient(135deg, #10b981 0%, #059669 100%);
color: #ffffff;
box-shadow: 0 6px 16px rgba(16, 185, 129, 0.35);
}
.tech-auth-badge-warning {
background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
color: #ffffff;
box-shadow: 0 6px 16px rgba(245, 158, 11, 0.35);
}
.tech-auth-title {
font-weight: 800;
color: #0b2545;
font-size: 1.65rem;
letter-spacing: -0.02em;
margin-bottom: 0.35rem;
}
.tech-auth-subtitle {
color: #64748b;
font-size: 0.92rem;
margin-bottom: 1.75rem;
line-height: 1.5;
}
.tech-auth-group {
margin-bottom: 1.25rem;
}
.tech-auth-group label {
display: block;
font-weight: 600;
font-size: 0.85rem;
color: #334155;
margin-bottom: 0.4rem;
}
.tech-auth-input-group {
position: relative;
display: flex;
align-items: stretch;
width: 100%;
}
.tech-auth-input-group .input-icon {
position: absolute;
left: 14px;
top: 50%;
transform: translateY(-50%);
color: #94a3b8;
font-size: 1.05rem;
z-index: 4;
pointer-events: none;
}
.tech-auth-input-group .form-control,
.tech-auth-input-group select.form-control {
padding-left: 42px !important;
height: 46px;
border: 1px solid #cbd5e1;
border-radius: 10px !important;
font-size: 0.92rem;
background-color: #f8fafc;
color: #1e293b;
transition: all 0.2s ease;
}
.tech-auth-input-group .form-control:focus,
.tech-auth-input-group select.form-control:focus {
background-color: #ffffff;
border-color: #0284c7;
box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15);
outline: none;
}
.tech-auth-submit-btn {
background: linear-gradient(135deg, #0b2545 0%, #134074 100%);
border: none;
color: #ffffff !important;
font-weight: 700;
font-size: 0.95rem;
padding: 0.75rem 1.5rem;
border-radius: 10px;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
transition: all 0.2s ease;
box-shadow: 0 4px 12px rgba(11, 37, 69, 0.2);
text-decoration: none;
cursor: pointer;
}
.tech-auth-submit-btn:hover {
background: linear-gradient(135deg, #134074 0%, #0b2545 100%);
transform: translateY(-1px);
box-shadow: 0 6px 16px rgba(11, 37, 69, 0.28);
}
.tech-auth-divider {
display: flex;
align-items: center;
text-align: center;
margin: 1.5rem 0;
color: #94a3b8;
font-size: 0.8rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.tech-auth-divider::before,
.tech-auth-divider::after {
content: '';
flex: 1;
border-bottom: 1px solid #e2e8f0;
}
.tech-auth-divider:not(:empty)::before { margin-right: .75em; }
.tech-auth-divider:not(:empty)::after { margin-left: .75em; }
.tech-auth-footer {
text-align: center;
border-top: 1px solid #f1f5f9;
margin-top: 1.5rem;
padding-top: 1.25rem;
color: #64748b;
font-size: 0.88rem;
}
.tech-auth-section-title {
font-weight: 700;
color: #0b2545;
font-size: 1.08rem;
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid #e2e8f0;
display: flex;
align-items: center;
gap: 0.5rem;
}
/* ==========================================================================
JACODESMATH Modern Search Page
========================================================================== */
.tech-search-filter-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 18px;
padding: 1.5rem;
box-shadow: 0 4px 18px rgba(11, 37, 69, 0.04);
}
.tech-empty-icon-circle {
width: 72px;
height: 72px;
border-radius: 50%;
background: #f1f5f9;
color: #64748b;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
border: 1px solid #e2e8f0;
}
.tech-date-filter-grid {
display: grid;
grid-template-columns: 1.2fr 1fr 1fr;
gap: 6px;
}
.tech-date-filter-grid select {
font-size: 0.85rem !important;
padding: 0.45rem 0.5rem !important;
height: 40px !important;
border: 1px solid #cbd5e1 !important;
border-radius: 8px !important;
background-color: #f8fafc !important;
color: #1e293b !important;
}
.tech-date-filter-grid select:focus {
background-color: #ffffff !important;
border-color: #0284c7 !important;
box-shadow: 0 0 0 3px rgba(2, 132, 199, 0.15) !important;
outline: none !important;
}
.tech-search-hero {
background: linear-gradient(135deg, #f0f7ff 0%, #e0effe 100%);
border: 1px solid #bfdbfe;
}
/* Privacy Statement Contact Card */
.tech-privacy-contact-card {
background: linear-gradient(135deg, #f8fafc 0%, #f1f8fe 100%);
border: 1px solid #bfdbfe;
border-radius: 16px;
padding: 1.5rem 1.75rem;
margin-top: 2rem;
margin-bottom: 1.5rem;
box-shadow: 0 4px 14px rgba(11, 111, 174, 0.04);
}
/* ==========================================================================
Floating Slide-In Article Quick Dock (Left Edge on Scroll Down)
========================================================================== */
.tech-article-float-dock {
position: fixed;
left: 1.25rem;
top: 50%;
z-index: 1035;
width: 156px;
background: rgba(255, 255, 255, 0.97);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 2px solid var(--tech-primary);
border-radius: 0.95rem;
padding: 0.65rem 0.7rem;
box-shadow: 0 12px 30px rgba(3, 54, 146, 0.16), 0 2px 8px rgba(15, 23, 42, 0.08);
display: flex;
flex-direction: column;
gap: 0.48rem;
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translate(-130%, -50%);
transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease, visibility 0.25s ease;
}
.tech-article-float-dock.is-visible {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translate(0, -50%);
}
.tech-float-issue-pill {
display: flex;
align-items: center;
justify-content: center;
gap: 0.35rem;
background: var(--tech-subtle);
color: var(--tech-primary) !important;
border: 1px solid rgba(3, 54, 146, 0.18);
border-radius: 0.55rem;
padding: 0.38rem 0.45rem;
font-size: 0.72rem;
font-weight: 800;
white-space: nowrap;
text-decoration: none !important;
text-align: center;
line-height: 1.2;
transition: all 0.18s ease;
}
.tech-float-issue-pill:hover {
background: #dbeafe;
color: var(--tech-primary-hover) !important;
}
.tech-float-pdf-btn {
display: flex;
align-items: center;
justify-content: center;
gap: 0.4rem;
background: var(--tech-gradient);
color: #ffffff !important;
border-radius: 0.55rem;
padding: 0.5rem 0.55rem;
font-size: 0.82rem;
font-weight: 800;
letter-spacing: 0.03em;
text-decoration: none !important;
box-shadow: 0 4px 10px rgba(3, 54, 146, 0.22);
transition: all 0.2s ease;
}
.tech-float-pdf-btn:hover {
filter: brightness(1.08);
transform: translateY(-1px);
color: #ffffff !important;
}
.tech-float-stats-box {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 0.55rem;
padding: 0.42rem 0.48rem;
display: flex;
flex-direction: column;
gap: 0.3rem;
}
.tech-float-stat-item {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 0.15rem;
font-size: 0.75rem;
}
.tech-float-stat-text {
display: flex;
align-items: baseline;
gap: 0.25rem;
}
.tech-float-stat-val {
font-weight: 800;
color: var(--tech-gray-900);
font-variant-numeric: tabular-nums;
}
.tech-float-stat-lbl {
font-size: 0.66rem;
font-weight: 600;
color: var(--tech-gray-600);
}
.tech-float-stat-divider {
height: 1px;
background: #e2e8f0;
}
.tech-float-share-wrap {
position: relative;
}
.tech-float-share-btn {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: 0.38rem;
background: #ffffff;
color: var(--tech-gray-900);
border: 1px solid #cbd5e1;
border-radius: 0.55rem;
padding: 0.42rem 0.5rem;
font-size: 0.76rem;
font-weight: 700;
cursor: pointer;
transition: all 0.18s ease;
}
.tech-float-share-btn:hover,
.tech-float-share-btn[aria-expanded="true"] {
border-color: var(--tech-primary);
color: var(--tech-primary);
background: var(--tech-subtle);
}
.tech-float-share-menu {
position: absolute;
left: calc(100% + 10px);
bottom: 0;
width: 220px;
background: #ffffff;
border: 2px solid var(--tech-primary);
border-radius: 0.8rem;
padding: 0.65rem;
box-shadow: 0 12px 28px rgba(15, 23, 42, 0.2);
opacity: 0;
visibility: hidden;
pointer-events: none;
transform: translateX(-8px);
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
z-index: 1040;
}
.tech-float-share-menu.is-open {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: translateX(0);
}
.tech-float-share-header {
font-size: 0.7rem;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 0.04em;
color: var(--tech-gray-600);
margin-bottom: 0.45rem;
text-align: center;
}
.tech-float-share-icons {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.25rem;
margin-bottom: 0.45rem;
}
.tech-float-copy-doi {
width: 100%;
border: 1px solid #cbd5e1;
background: #f8fafc;
color: var(--tech-primary);
border-radius: 0.45rem;
padding: 0.32rem 0.45rem;
font-size: 0.7rem;
font-weight: 700;
display: flex;
align-items: center;
justify-content: center;
gap: 0.25rem;
cursor: pointer;
transition: all 0.15s ease;
}
.tech-float-copy-doi:hover {
background: var(--tech-subtle);
border-color: var(--tech-primary);
}
@media (max-width: 991.98px) {
.tech-article-float-dock {
display: none !important;
}
}