Download Journal

display: flex; flex-direction: column; box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.03); border-radius: 8px; overflow: hidden; } .journal-banner-root { --bg-light-green: #9cbd29; --bg-dark-green: #064e26; --text-main: #23330c; width: 100%; background-color: var(--bg-light-green); position: relative; overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box; } .banner-main-row { display: flex; justify-content: space-between; align-items: center; padding: 2.5rem 3rem; position: relative; flex-grow: 1; min-height: 180px; } .banner-title-area { display: flex; flex-direction: column; justify-content: center; flex-grow: 1; padding-right: 340px; } .banner-journal-prefix { font-family: 'Roboto Condensed', sans-serif !important; font-size: clamp(1.8rem, 4vw, 3.2rem) !important; font-weight: 400 !important; color: var(--text-main) !important; line-height: 1.1 !important; margin: 0; letter-spacing: -0.01em; } .banner-journal-title { font-family: 'Roboto Condensed', sans-serif !important; font-size: 2rem !important; font-weight: 700; color: var(--text-main) !important; line-height: 0.95; margin: 0; letter-spacing: -0.03em; margin-top: 0.2rem; } .banner-meta-area { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: flex-end; gap: 0.85rem; z-index: 10; } .banner-logo-card { background-color: #ffffff; padding: 0 !important; display: flex; align-items: center; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); border-radius: 6px 0 0 6px; } .banner-issn { font-family: 'Inter', sans-serif; font-size: clamp(0.75rem, 1.5vw, 0.875rem); font-weight: 600; color: var(--text-main); letter-spacing: 0.02em; margin-right: 1.75rem; } .banner-footer-strip { background-color: var(--bg-dark-green); color: #ffffff; padding: 0.75rem 3rem; display: flex; justify-content: space-between; align-items: center; font-family: 'Inter', sans-serif; font-size: clamp(0.85rem, 1.8vw, 1.15rem); font-weight: 600; letter-spacing: 0.01em; } .journal-content-card { background-color: #ffffff; padding: 0rem 2rem; display: flex; flex-direction: column; } .bottom-footer-banner { width: 100%; border: 1.8px solid #ef4444; border-radius: 12px; padding: 1.25rem 2rem; text-align: center; background-color: #ffffff; box-sizing: border-box; display: flex; flex-direction: column; gap: 0.25rem; margin-top: 2rem; margin-bottom: 20px; } .bottom-footer-title, .bottom-footer-subtitle { font-family: 'Inter', sans-serif; font-size: 21px !important; font-weight: 700; color: #000000; margin: 0; } #archive { margin-top: 0px; padding: 0 20px; } #archive .text-custom-green { color: #007836; } #archive .border-custom-green { border-color: #007836; } #archive .bg-custom-green-light { background-color: #f0fdf4; } #archive .rounded-custom { border-radius: 1px; border: 1px solid #c1c1c1 !important; text-align: center; } #archive .font-semibold-custom { font-weight: 600; } #archive .text-custom-size { font-size: 15px; font-weight: 500; } #archive .border-2-custom { border-width: 2px; } /* ========================= MOBILE RESPONSIVE FIX ========================== */ @media (max-width: 900px) { #archive { display: grid !important; grid-template-columns: 1fr !important; gap: 20px !important; } @media (max-width: 900px) { .banner-main-row { flex-direction: column; align-items: flex-start; padding: 2.5rem 2rem; min-height: auto; } .banner-title-area { padding-right: 0; margin-bottom: 2rem; } .banner-meta-area { position: static; transform: none; width: 100%; align-items: flex-start; gap: 1rem; } .banner-logo-card { padding: 0.75rem 1.25rem; border-radius: 4px; } .banner-issn { margin-right: 0; align-self: flex-end; } .banner-footer-strip { padding: 0.75rem 2rem; } .journal-content-card { padding: 2rem; } } @media (max-width: 600px) { .banner-main-row { padding: 1.5rem 1.25rem; } .banner-title-area { margin-bottom: 1.5rem; } .banner-logo-card { padding: 0.5rem 1rem; } .banner-footer-strip { padding: 0.75rem 1.25rem; flex-direction: column; gap: 0.35rem; align-items: flex-start; } .banner-issn { align-self: flex-start; } .journal-content-card { padding: 1.5rem 1rem; } .bottom-footer-banner { padding: 1rem; } }