/**
* AXIS Theme - Main Stylesheet
* OJS 3.3 Compatible
* Version: 1.0.0
*/
/* ============================================================================
BASE & VARIABLES
========================================================================== */
/* Fonts loaded in header.tpl */
/* CSS Custom Properties (Dynamic from theme options) */
:root {
/* Colors - will be overridden by theme options */
--axis-primary: #4F46E5;
--axis-secondary: #10B981;
/* Light mode colors */
--axis-text: #1E293B;
--axis-text-secondary: #64748B;
--axis-background: #FFFFFF;
--axis-surface: #F8FAFC;
--axis-border: #E2E8F0;
/* Spacing */
--axis-spacing-unit: 24px;
--axis-container-width: 1200px;
/* Typography */
--axis-font-heading: 'Inter', sans-serif;
--axis-font-body: 'Source Serif 4', serif;
--axis-font-mono: 'Courier New', monospace;
/* Transitions */
--axis-transition: all 0.3s ease;
--axis-transition-fast: all 0.15s ease;
/* Shadows */
--axis-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
--axis-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
--axis-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
--axis-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
/* Border radius */
--axis-radius-sm: 4px;
--axis-radius-md: 8px;
--axis-radius-lg: 12px;
--axis-radius-xl: 16px;
}
/* ============================================================================
RESET & BASE STYLES
========================================================================== */
*,
*::before,
*::after {
box-sizing: border-box;
}
/* CRITICAL: Ensure scrolling works */
html {
overflow-y: scroll;
overflow-x: hidden;
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: var(--axis-font-body);
font-size: 16px;
line-height: 1.6;
color: var(--axis-text);
background-color: var(--axis-background);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
min-height: 100%;
overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--axis-font-heading);
font-weight: 700;
line-height: 1.2;
margin: 0 0 1rem 0;
color: var(--axis-text);
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 1.875rem;
}
h3 {
font-size: 1.5rem;
}
h4 {
font-size: 1.25rem;
}
h5 {
font-size: 1.125rem;
}
h6 {
font-size: 1rem;
}
p {
margin: 0 0 1rem 0;
}
a {
color: var(--axis-primary);
text-decoration: none;
transition: var(--axis-transition-fast);
}
a:hover {
color: #291fd9;
text-decoration: underline;
}
img {
max-width: 100%;
height: auto;
display: block;
}
/* ============================================================================
LAYOUT
========================================================================== */
.axis-container {
max-width: var(--axis-container-width);
margin: 0 auto;
padding: 0 var(--axis-spacing-unit);
}
.axis-main {
min-height: calc(100vh - 400px);
}
.axis-content-wrapper {
display: grid;
grid-template-columns: 1fr 320px;
gap: calc(var(--axis-spacing-unit) * 2);
}
@media (max-width: 1024px) {
.axis-content-wrapper {
grid-template-columns: 1fr;
}
.axis-content-wrapper .axis-sidebar-wrapper {
order: -1;
}
}
.axis-main-content {
flex: 1;
}
/* ============================================================================
HEADER
========================================================================== */
.axis-header {
background: var(--axis-background);
border-bottom: 1px solid var(--axis-border);
position: sticky;
top: 0;
z-index: 1000;
box-shadow: var(--axis-shadow-sm);
transition: box-shadow 0.3s ease, backdrop-filter 0.3s ease;
backdrop-filter: blur(8px);
background: rgba(255, 255, 255, 0.95);
}
/* Enhanced shadow when scrolling */
.axis-header.scrolled {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border-bottom-color: transparent;
}
/* Header container needs position relative for mobile search */
.axis-header > .axis-container {
position: relative;
}
.axis-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: calc(var(--axis-spacing-unit) / 2) 0;
gap: var(--axis-spacing-unit);
}
.axis-header__brand {
flex-shrink: 1; /* Allow shrinking if needed */
max-width: 45%; /* Limit to ~40-50% of header width */
min-width: 200px; /* Minimum readable width */
}
.axis-logo {
max-height: 100px; /* Maximum logo height (works for both site and journal) */
width: auto;
}
.axis-brand-text {
display: flex;
flex-direction: column;
min-width: 0; /* Allow text to shrink */
}
.axis-brand-text__name {
font-family: var(--axis-font-heading);
font-size: var(--axis-font-xl);
font-weight: 700;
color: var(--axis-text);
line-height: 1.2;
/* Allow wrapping to second line if needed */
}
.axis-header__actions {
display: flex;
align-items: center;
gap: 1rem;
flex: 1; /* Take remaining space */
justify-content: flex-end; /* Align items to right */
min-width: 0; /* Allow shrinking */
}
.axis-header__search form {
display: flex;
gap: 0.5rem;
align-items: center; /* Ensure vertical alignment */
}
.axis-search-input {
padding: 0.5rem 1rem;
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-md);
font-size: var(--axis-font-sm);
width: 180px; /* Narrower, more compact */
height: 45px; /* User tested and specified 45px */
display: flex;
align-items: center;
box-sizing: border-box; /* Include border in height */
}
/* Header search input - more specific to override page search CSS */
.axis-header__search .axis-search-input {
height: 45px !important; /* User specified - override page search 56px */
}
.axis-search-input:focus {
outline: none;
border-color: var(--axis-primary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
@media (max-width: 768px) {
.axis-search-input {
width: 120px; /* Even more compact on mobile */
}
}
.axis-search-button {
padding: 0.75rem 1.5rem;
background: var(--axis-primary);
color: white;
border: none;
border-radius: var(--axis-radius-md);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem; /* Space between icon and text */
transition: var(--axis-transition-fast);
font-weight: 500;
font-size: var(--axis-font-base);
white-space: nowrap;
}
.axis-search-button svg {
width: 20px;
height: 20px;
flex-shrink: 0;
}
.axis-search-button:hover {
background: var(--axis-primary-dark);
}
/* Header search button: Icon-only, square, matches other icons */
.axis-header__actions .axis-search-button {
width: 40px;
height: 40px;
padding: 0;
min-width: 40px;
border-radius: 6px;
}
.axis-header__actions .axis-search-button span {
display: none; /* Hide "Search" text in header */
}
.axis-header__actions .axis-search-button svg {
width: 20px;
height: 20px;
}
/* Dark mode toggle */
.axis-icon-button {
width: 40px; /* Match ALL header elements - 40px! */
height: 40px; /* Match ALL header elements - 40px! */
padding: 0; /* Remove padding, use fixed size */
background: transparent;
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-md);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--axis-transition-fast);
box-sizing: border-box; /* Include border in dimensions */
}
.axis-icon-button:hover {
background: var(--axis-surface);
}
.axis-icon-button svg {
width: 20px;
height: 20px;
}
.axis-icon-sun {
display: block;
}
.axis-icon-moon {
display: none;
}
.dark-mode .axis-icon-sun {
display: none;
}
.dark-mode .axis-icon-moon {
display: block;
}
/* Mobile menu toggle */
.axis-mobile-menu-toggle {
display: none;
flex-direction: column;
gap: 4px;
padding: 0.5rem;
background: transparent;
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-md);
cursor: pointer;
}
@media (max-width: 768px) {
.axis-mobile-menu-toggle {
display: flex;
}
}
.axis-hamburger-line {
width: 24px;
height: 2px;
background: var(--axis-text);
transition: var(--axis-transition-fast);
}
.axis-mobile-menu-toggle.is-active .axis-hamburger-line:nth-child(1) {
transform: rotate(45deg) translate(5px, 5px);
}
.axis-mobile-menu-toggle.is-active .axis-hamburger-line:nth-child(2) {
opacity: 0;
}
.axis-mobile-menu-toggle.is-active .axis-hamburger-line:nth-child(3) {
transform: rotate(-45deg) translate(5px, -5px);
}
/* Primary Navigation */
.axis-primary-nav {
padding: 1rem 0;
}
@media (max-width: 768px) {
.axis-primary-nav {
display: none;
}
.axis-primary-nav.is-open {
display: block;
}
}
.axis-nav-list {
display: flex;
flex-wrap: wrap; /* Sığmazsa alt satıra geç */
justify-content: center; /* Her satır ortadan hizalanır */
list-style: none;
margin: 0;
padding: 0;
gap: 0.5rem;
row-gap: 0.75rem; /* Alt satırlar için biraz daha fazla boşluk */
}
/* Tablet: Compact mode - daha fazla sığar */
@media (max-width: 1200px) and (min-width: 769px) {
.axis-nav-list {
gap: 0.35rem;
row-gap: 0.65rem;
}
.axis-nav-list a {
padding: 0.65rem 1rem; /* Daha kompakt */
font-size: 0.9rem;
}
}
@media (max-width: 768px) {
.axis-nav-list {
flex-direction: column;
gap: 0.5rem;
}
}
.axis-nav-list li {
margin: 0;
position: relative;
}
/* Modern navigation link styling - ALWAYS button-shaped */
.axis-nav-list a {
font-family: var(--axis-font-heading);
font-weight: 500;
font-size: 0.95rem;
color: var(--axis-text);
text-decoration: none;
transition: var(--axis-transition-fast);
padding: 0.75rem 1.25rem;
border-radius: var(--axis-radius-md);
display: inline-block;
position: relative;
overflow: hidden;
/* DEFAULT: Button shape visible */
border: 1.5px solid var(--axis-border);
background: transparent;
}
/* Hover effects - color change + underline */
.axis-nav-list a:hover {
color: var(--axis-primary);
border-color: var(--axis-primary);
background: rgba(79, 70, 229, 0.03);
text-decoration: none;
}
/* Active page indicator - filled button */
.axis-nav-list li.current-menu-item > a,
.axis-nav-list a[aria-current="page"] {
color: var(--axis-primary);
font-weight: 600;
background: rgba(79, 70, 229, 0.08);
border-color: var(--axis-primary);
box-shadow: inset 0 -3px 0 0 var(--axis-primary);
}
/* Animated underline effect on hover */
.axis-nav-list a::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: var(--axis-primary);
transition: width 0.3s ease, left 0.3s ease;
}
.axis-nav-list a:hover::before {
width: 80%;
left: 10%;
}
/* ============================================================================
FOOTER
========================================================================== */
.axis-footer {
background: var(--axis-surface);
border-top: 1px solid var(--axis-border);
margin-top: calc(var(--axis-spacing-unit) * 4);
padding: calc(var(--axis-spacing-unit) * 2) 0;
}
.axis-footer__content {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: calc(var(--axis-spacing-unit) * 2);
margin-bottom: calc(var(--axis-spacing-unit) * 2);
}
@media (max-width: 768px) {
.axis-footer__content {
grid-template-columns: 1fr;
}
}
.axis-footer__title {
font-size: var(--axis-font-base);
font-weight: 600;
margin-bottom: 1rem;
color: var(--axis-text);
}
.axis-footer__links {
list-style: none;
padding: 0;
margin: 0;
}
.axis-footer__links li {
margin-bottom: 0.5rem;
}
.axis-footer__links a {
color: var(--axis-text-secondary);
font-size: 0.875rem;
}
.axis-footer__links a:hover {
color: var(--axis-primary);
}
.axis-footer__bottom {
border-top: 1px solid var(--axis-border);
padding-top: calc(var(--axis-spacing-unit));
}
.axis-footer__bottom-content {
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--axis-font-sm);
color: var(--axis-text-secondary);
}
@media (max-width: 768px) {
.axis-footer__bottom-content {
flex-direction: column;
gap: 1rem;
}
}
.axis-footer__legal-links {
display: flex;
list-style: none;
padding: 0;
margin: 0;
gap: 1.5rem;
}
.axis-footer__legal-links a {
color: var(--axis-text-secondary);
}
.axis-footer__legal-links a:hover {
color: var(--axis-primary);
}
/* Back to top button */
.axis-back-to-top {
position: fixed;
bottom: 2rem;
right: 2rem;
width: 48px;
height: 48px;
background: var(--axis-primary);
color: white;
border: none;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
box-shadow: var(--axis-shadow-lg);
opacity: 0;
visibility: hidden;
transition: var(--axis-transition);
z-index: 999;
}
.axis-back-to-top.is-visible {
opacity: 1;
visibility: visible;
}
.axis-back-to-top:hover {
background: #291fd9;
transform: translateY(-4px);
}
/* ============================================================================
SITE FOOTER (Site-Level Only)
============================================================================ */
.axis-site-footer__columns {
display: grid;
gap: calc(var(--axis-spacing-unit) * 3);
padding: 20px 0 calc(var(--axis-spacing-unit) * 3) 0;
border-bottom: 1px solid var(--axis-border);
}
/* Dynamic column widths based on count */
.axis-site-footer__columns--1 {
grid-template-columns: 1fr;
}
.axis-site-footer__columns--2 {
grid-template-columns: repeat(2, 1fr);
}
.axis-site-footer__columns--3 {
grid-template-columns: repeat(3, 1fr);
}
.axis-site-footer__columns--4 {
grid-template-columns: repeat(4, 1fr);
}
/* Vertical dividers between columns */
.axis-site-footer__column {
position: relative;
padding-left: calc(var(--axis-spacing-unit) * 2);
}
.axis-site-footer__column:first-child {
padding-left: 0;
}
.axis-site-footer__column:not(:first-child)::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 1px;
background: var(--axis-border);
}
/* Column title */
.axis-site-footer__title {
font-size: var(--axis-font-lg);
font-weight: 600;
color: var(--axis-text-primary);
margin: 0 0 calc(var(--axis-spacing-unit)) 0;
}
/* Title divider (reuse existing style) */
.axis-site-footer__title + .axis-footer__divider {
margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
}
/* Column content */
.axis-site-footer__content {
color: var(--axis-text-secondary);
font-size: var(--axis-font-sm);
line-height: 1.6;
}
.axis-site-footer__content a {
color: var(--axis-text-secondary);
text-decoration: none;
transition: color 0.2s ease;
}
.axis-site-footer__content a:hover {
color: var(--axis-primary);
}
.axis-site-footer__content ul {
list-style: none;
padding: 0;
margin: 0;
}
.axis-site-footer__content li {
margin-bottom: calc(var(--axis-spacing-unit) * 0.5);
}
.axis-site-footer__content p {
margin: 0 0 calc(var(--axis-spacing-unit)) 0;
}
.axis-site-footer__content p:last-child {
margin-bottom: 0;
}
/* Footer bottom */
/* Footer bottom section - centered by default for plain text,
but HTML elements with their own alignment styles will override this */
.axis-site-footer__bottom {
padding: calc(var(--axis-spacing-unit) * 2) 0;
border-top: 1px solid var(--axis-border);
text-align: center;
color: var(--axis-text-tertiary);
font-size: var(--axis-font-sm);
}
.axis-site-footer__bottom p {
margin: 0;
}
.axis-site-footer__bottom a {
color: var(--axis-text-tertiary);
text-decoration: none;
transition: color 0.2s ease;
}
.axis-site-footer__bottom a:hover {
color: var(--axis-primary);
}
/* Dark mode */
body.dark-mode .axis-site-footer__column:not(:first-child)::before {
background: rgba(255, 255, 255, 0.1);
}
/* Responsive */
@media (max-width: 768px) {
.axis-site-footer__columns--2,
.axis-site-footer__columns--3,
.axis-site-footer__columns--4 {
grid-template-columns: 1fr;
gap: calc(var(--axis-spacing-unit) * 2);
}
.axis-site-footer__column {
padding-left: 0;
}
.axis-site-footer__column:not(:first-child)::before {
display: none;
}
.axis-site-footer__column:not(:last-child) {
padding-bottom: calc(var(--axis-spacing-unit) * 2);
border-bottom: 1px solid var(--axis-border);
}
}
/* ============================================================================
BUTTONS
========================================================================== */
.axis-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-family: var(--axis-font-heading);
font-weight: 500;
font-size: var(--axis-font-base);
border-radius: var(--axis-radius-md);
border: none;
cursor: pointer;
text-decoration: none;
transition: var(--axis-transition-fast);
}
.axis-btn--primary {
background: var(--axis-primary);
color: white;
border: 2px solid var(--axis-primary);
}
.axis-btn--primary:hover {
background: transparent;
color: var(--axis-primary);
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.2);
}
.axis-btn--secondary {
background: transparent;
color: white;
border: 2px solid rgba(255, 255, 255, 0.5);
}
.axis-btn--secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--axis-primary);
color: white;
text-decoration: none;
transform: translateY(-2px);
}
.axis-btn--small {
padding: 0.5rem 1rem;
font-size: var(--axis-font-sm);
}
.axis-btn--large {
padding: 1rem 2rem;
font-size: var(--axis-font-lg);
}
/* ============================================================================
HERO SECTION
========================================================================== */
.axis-hero {
position: relative;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
margin-top: calc(var(--axis-spacing-unit) * 2);
margin-bottom: calc(var(--axis-spacing-unit) * 2);
border-radius: var(--axis-radius-lg);
overflow: hidden;
}
.axis-hero__image-wrapper {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.axis-hero__image {
width: 100%;
height: 100%;
object-fit: cover;
}
.axis-hero__overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
}
.axis-hero__content {
position: relative;
z-index: 1;
text-align: center;
color: white;
padding: 2rem;
}
/* Hero wrapper - contains cover + content */
.axis-hero__wrapper {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 3rem;
padding: 2rem;
max-width: 1200px;
margin: 0 auto;
}
/* Hero with cover: content on right */
.axis-hero--with-cover .axis-hero__wrapper {
justify-content: center;
}
/* Journal cover image (left side) */
.axis-hero__cover {
flex-shrink: 0;
width: 280px;
height: auto;
}
.axis-hero__cover-image {
width: 100%;
height: auto;
border-radius: 12px;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.4),
0 10px 30px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1);
transition: transform 0.3s ease;
}
.axis-hero__cover-image:hover {
transform: translateY(-5px);
}
/* Content when cover exists */
.axis-hero--with-cover .axis-hero__content {
flex: 1;
display: flex;
flex-direction: column;
justify-content: center; /* Vertically center in right area */
text-align: center; /* Center text, not left-aligned */
padding: 0 2rem; /* Horizontal padding */
}
/* Content without cover (centered) */
.axis-hero:not(.axis-hero--with-cover) .axis-hero__content {
text-align: center;
padding: 2rem;
}
/* Mobile: stack cover + content */
@media (max-width: 768px) {
.axis-hero__wrapper {
flex-direction: column;
gap: 2rem;
}
.axis-hero__cover {
width: 200px;
}
.axis-hero--with-cover .axis-hero__content {
text-align: center;
padding: 0 1rem; /* Less padding on mobile */
}
}
.axis-hero__title {
font-size: var(--axis-font-3xl);
margin-bottom: 1rem;
text-shadow: 0 2px 10px rgba(255, 255, 255, 0.6); /* Light mode: white glow */
}
/* Dark mode: black shadow for contrast */
body.dark-mode .axis-hero__title {
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
@media (max-width: 768px) {
.axis-hero__title {
font-size: var(--axis-font-2xl);
}
}
/* Hero description wrapper - Glassmorphism container */
.axis-hero__description-wrapper {
max-width: 60%; /* Limit to 60% width (20% padding each side) */
margin: 0 auto 2rem auto; /* Center and spacing */
/* Glassmorphism effect */
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: 16px;
padding: 2rem;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
}
/* Description wrapper when cover exists (centered in right area) */
.axis-hero--with-cover .axis-hero__description-wrapper {
max-width: 100%;
margin: 0 auto 2rem auto; /* Center horizontally */
}
/* Mobile: always centered */
@media (max-width: 768px) {
.axis-hero__description-wrapper {
max-width: 90%;
}
.axis-hero--with-cover .axis-hero__description-wrapper {
margin: 0 auto 2rem auto;
}
}
/* Hero description text - Just text styles */
.axis-hero__description {
font-size: var(--axis-font-lg);
margin: 0;
line-height: 1.6;
text-shadow: 0 2px 10px rgba(255, 255, 255, 0.6); /* Light mode: white glow */
color: inherit;
}
/* Dark mode: black shadow for contrast */
body.dark-mode .axis-hero__description {
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
/* Read more link in hero section - minimal style */
.axis-hero__read-more {
display: inline; /* Inline, not block */
margin-left: 0.25rem; /* Less margin */
color: rgba(255, 255, 255, 0.9);
text-decoration: none;
font-size: var(--axis-font-base);
font-weight: 400; /* Normal weight, not bold */
transition: var(--axis-transition-fast);
position: relative;
border-bottom: 1px solid rgba(255, 255, 255, 0.4); /* Subtle underline */
padding-bottom: 2px;
text-shadow: 0 2px 10px rgba(255, 255, 255, 0.6); /* Light mode: white glow */
}
/* Dark mode: black shadow */
body.dark-mode .axis-hero__read-more {
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
/* No dot before link anymore - minimal style */
.axis-hero__read-more:hover {
color: rgba(255, 255, 255, 1);
border-bottom-color: rgba(255, 255, 255, 0.8); /* Brighter underline */
}
.axis-hero__actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
/* Actions centered when cover exists (same as default) */
.axis-hero--with-cover .axis-hero__actions {
justify-content: center; /* Keep centered */
}
/* Mobile: always centered */
@media (max-width: 768px) {
.axis-hero__actions {
justify-content: center;
}
}
/* Continue in next part... */
/* ============================================================================
SECTIONS & PAGE HEADERS
========================================================================== */
.axis-page-header {
text-align: center;
padding: calc(var(--axis-spacing-unit) * 2) 0;
margin-bottom: calc(var(--axis-spacing-unit) * 2);
}
.axis-page-title {
font-size: var(--axis-font-3xl);
margin-bottom: 1rem;
}
.axis-page-description {
font-size: var(--axis-font-lg);
color: var(--axis-text-secondary);
margin: 0; /* Remove auto margins, wrapper handles centering */
line-height: 1.6;
}
/* Glassmorphism wrapper for page description */
.axis-page-description-wrapper {
max-width: 60%; /* Limit to 60% width (20% padding each side) */
margin: 0 auto 2rem auto;
/* Glassmorphism effect - Light mode */
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: 16px;
padding: 2rem;
box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.05);
}
/* Page header actions (buttons) */
.axis-page-header__actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
margin-top: 2rem;
}
.axis-section {
margin-bottom: calc(var(--axis-spacing-unit) * 3);
}
.axis-section__header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: calc(var(--axis-spacing-unit));
}
@media (max-width: 768px) {
.axis-section__header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
}
.axis-section__title {
font-size: var(--axis-font-2xl);
margin: 0;
}
/* Issue articles - Table of Contents styling */
.axis-issue-articles .axis-section__title {
text-align: center;
display: inline-block;
position: relative;
padding: 0.75rem 2rem;
background: transparent;
border: 2px solid var(--axis-border);
border-radius: var(--axis-radius-md);
font-size: var(--axis-font-xl);
font-weight: 600;
margin: 0 auto 3rem;
left: 50%;
transform: translateX(-50%);
}
/* Decorative line under ToC title */
.axis-issue-articles .axis-section__title::after {
content: '';
position: absolute;
bottom: -12px;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 3px;
background: linear-gradient(90deg,
transparent 0%,
var(--axis-primary) 50%,
transparent 100%);
opacity: 0.6;
}
.axis-section__link {
display: flex;
align-items: center;
gap: 0.5rem;
font-family: var(--axis-font-heading);
font-weight: 500;
color: var(--axis-primary);
}
.axis-section__link:hover {
text-decoration: none;
color: #291fd9;
}
.axis-section__link svg {
width: 16px;
height: 16px;
}
/* ============================================================================
STATISTICS BAR
========================================================================== */
.axis-stats-bar {
background: var(--axis-surface);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
padding: calc(var(--axis-spacing-unit));
margin-top: 40px; /* Space from header when hero is disabled */
margin-bottom: calc(var(--axis-spacing-unit) * 2);
}
.axis-stats-bar__inner {
display: flex;
justify-content: space-between; /* Equal spacing */
gap: 1.5rem;
flex-wrap: wrap; /* Wrap on small screens */
}
@media (max-width: 768px) {
.axis-stats-bar__inner {
display: grid;
grid-template-columns: repeat(2, 1fr); /* 2 columns on mobile */
gap: 1rem;
}
}
.axis-stat {
display: flex;
flex-direction: column; /* Stack value and label */
text-align: center;
flex: 1; /* Equal width */
min-width: 120px;
}
.axis-stat__value {
height: 3rem; /* FIXED height - not min! */
display: flex;
align-items: center;
justify-content: center;
font-size: var(--axis-font-2xl);
font-weight: 700;
color: var(--axis-primary);
font-family: var(--axis-font-heading);
}
.axis-stat__license-icon {
height: 40px;
max-height: 40px; /* Strict limit */
width: auto;
max-width: 100%;
object-fit: contain;
}
.axis-stat__label {
height: 2.5rem; /* FIXED height for 1-2 lines */
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap; /* Allow wrapping for long labels */
font-size: var(--axis-font-sm);
color: var(--axis-text-secondary);
margin-top: 0.5rem;
line-height: 1.2;
padding: 0 0.25rem; /* Small padding */
}
/* ============================================================================
ARTICLE CARDS & GRID
========================================================================== */
.axis-article-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); /* Default 3-4 columns */
gap: calc(var(--axis-spacing-unit));
}
.axis-article-grid--grid {
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
/* List layout - horizontal cards */
.axis-article-grid--list {
grid-template-columns: 1fr;
gap: 1.5rem;
}
.axis-article-grid--list .axis-article-card {
flex-direction: row;
align-items: flex-start;
}
.axis-article-grid--list .axis-article-card__image {
flex-shrink: 0;
width: 280px;
aspect-ratio: 16 / 10;
overflow: hidden; /* Ensure cropping */
}
/* List layout - cover image should contain (not crop) */
.axis-article-grid--list .axis-article-card__cover {
width: 100%;
height: 100%;
object-fit: contain; /* Don't crop! */
object-position: center; /* Center both axes */
}
.axis-article-grid--list .axis-article-card__content {
flex: 1;
padding: 1.5rem 2rem;
display: flex !important;
flex-direction: column !important;
visibility: visible !important;
opacity: 1 !important;
}
.axis-article-grid--list .axis-article-card__title {
font-size: var(--axis-font-xl);
margin-bottom: 0.75rem;
}
.axis-article-grid--list .axis-article-card__abstract {
font-size: var(--axis-font-md);
line-height: var(--axis-leading-normal);
margin-bottom: 1rem;
}
.axis-article-grid--list .axis-article-card__meta {
margin-top: 1rem;
}
@media (max-width: 968px) {
.axis-article-grid--list .axis-article-card {
flex-direction: column;
}
.axis-article-grid--list .axis-article-card__image {
width: 100%;
}
.axis-article-grid--list .axis-article-card__content {
padding: 1.5rem;
}
}
/* Magazine layout - masonry style */
.axis-article-grid--magazine {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2rem;
grid-auto-rows: auto; /* Not masonry - better browser support */
}
.axis-article-grid--magazine .axis-article-card {
display: flex;
flex-direction: column;
height: 100%;
}
.axis-article-grid--magazine .axis-article-card__image {
aspect-ratio: 4 / 3; /* Taller image for magazine feel */
position: relative;
overflow: hidden;
}
.axis-article-grid--magazine .axis-article-card__cover {
transition: transform 0.5s ease;
}
.axis-article-grid--magazine .axis-article-card:hover .axis-article-card__cover {
transform: scale(1.08);
}
.axis-article-grid--magazine .axis-article-card__content {
flex: 1;
display: flex;
flex-direction: column;
}
.axis-article-grid--magazine .axis-article-card__title {
font-size: var(--axis-font-lg);
line-height: var(--axis-leading-tight);
margin-bottom: 0.75rem;
}
.axis-article-grid--magazine .axis-article-card__abstract {
font-size: var(--axis-font-sm);
line-height: var(--axis-leading-normal);
color: var(--axis-text-secondary);
margin-top: auto;
}
@media (max-width: 768px) {
.axis-article-grid--magazine {
grid-template-columns: 1fr;
gap: 1.5rem;
}
}
@media (max-width: 768px) {
.axis-article-grid {
grid-template-columns: 1fr;
}
}
.axis-article-card {
background: var(--axis-background);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
overflow: hidden;
transition: var(--axis-transition);
display: flex;
flex-direction: column;
}
.axis-article-card:hover {
box-shadow: var(--axis-shadow-md);
transform: translateY(-4px);
}
.axis-article-card__image {
aspect-ratio: 16 / 9;
overflow: hidden;
background: var(--axis-surface);
position: relative; /* For preview button positioning */
}
.axis-article-card__image a {
display: block;
height: 100%;
}
/* Placeholder for articles without cover image */
.axis-article-card__image--placeholder {
background: linear-gradient(135deg,
var(--axis-primary) 0%,
rgba(44, 95, 141, 0.75) 100%);
position: relative;
}
.axis-article-placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
opacity: 0.9;
transition: all var(--axis-transition-normal);
}
.axis-article-card:hover .axis-article-placeholder {
opacity: 1;
transform: scale(1.05);
}
.axis-article-placeholder__icon {
color: rgba(255, 255, 255, 0.95);
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
}
/* Dark mode adjustments for placeholder */
html.dark-mode .axis-article-card__image--placeholder {
background: linear-gradient(135deg,
rgba(44, 95, 141, 0.3) 0%,
rgba(44, 95, 141, 0.15) 100%);
}
html.dark-mode .axis-article-placeholder__icon {
color: rgba(255, 255, 255, 0.7);
}
.axis-article-card__cover {
width: 100%;
height: 100%;
object-fit: contain; /* Changed from cover - shows full image without cropping */
background: var(--axis-surface); /* Background for letterbox/pillarbox */
transition: var(--axis-transition);
}
.axis-article-card:hover .axis-article-card__cover {
transform: scale(1.05);
}
.axis-article-card__content {
padding: 1.5rem;
flex: 1;
display: flex;
flex-direction: column;
}
.axis-article-card__section {
font-size: var(--axis-font-xs);
font-weight: 600;
text-transform: uppercase;
color: var(--axis-secondary);
margin-bottom: 0.5rem;
letter-spacing: 0.05em;
}
.axis-article-card__title {
font-size: var(--axis-font-lg);
font-weight: 600;
line-height: var(--axis-leading-tight);
margin-bottom: 0.75rem;
}
.axis-article-card__title a {
color: var(--axis-text);
text-decoration: none;
}
.axis-article-card__title a:hover {
color: var(--axis-primary);
}
.axis-article-card__authors {
font-size: var(--axis-font-base);
font-weight: 500;
color: var(--axis-text);
margin-bottom: 0.75rem;
}
.axis-article-card__abstract {
font-size: var(--axis-font-sm);
line-height: var(--axis-leading-normal);
color: var(--axis-text-secondary);
margin-bottom: 1rem;
flex: 1;
}
.axis-article-card__meta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
font-size: var(--axis-font-xs);
color: var(--axis-text-secondary);
margin-bottom: 1rem;
}
.axis-article-card__meta svg {
width: 14px;
height: 14px;
vertical-align: middle;
margin-right: 4px;
}
.axis-article-card__galleys {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-top: auto;
}
.axis-article-card__galley-link {
padding: 0.5rem 1rem;
background: var(--axis-surface);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-md);
font-size: var(--axis-font-sm);
font-weight: 500;
color: var(--axis-text);
transition: var(--axis-transition-fast);
}
.axis-article-card__galley-link:hover {
background: var(--axis-primary);
color: white;
border-color: var(--axis-primary);
text-decoration: none;
}
/* ============================================================================
ISSUE SPOTLIGHT
========================================================================== */
.axis-issue-spotlight {
display: grid;
grid-template-columns: 300px 1fr;
gap: calc(var(--axis-spacing-unit) * 2);
padding: calc(var(--axis-spacing-unit) * 2);
background: var(--axis-surface);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
}
@media (max-width: 768px) {
.axis-issue-spotlight {
grid-template-columns: 1fr;
}
}
.axis-issue-spotlight__cover-image {
width: 100%;
border-radius: var(--axis-radius-md);
box-shadow: var(--axis-shadow-md);
}
.axis-issue-spotlight__title {
font-size: var(--axis-font-xl);
margin-bottom: 0.5rem;
}
.axis-issue-spotlight__title a {
color: var(--axis-text);
text-decoration: none;
}
.axis-issue-spotlight__title a:hover {
color: var(--axis-primary);
}
.axis-issue-spotlight__date {
font-size: var(--axis-font-sm);
color: var(--axis-text-secondary);
margin-bottom: 1rem;
}
.axis-issue-spotlight__description {
margin-bottom: 1.5rem;
line-height: 1.7;
}
/* ============================================================================
ARTICLE DETAIL
========================================================================== */
.axis-article-detail {
max-width: 800px;
margin: 0 auto;
}
.axis-article-detail__header {
margin-bottom: calc(var(--axis-spacing-unit) * 2);
}
.axis-article-detail__section {
font-size: var(--axis-font-sm);
font-weight: 600;
text-transform: uppercase;
color: var(--axis-secondary);
margin-bottom: 1rem;
letter-spacing: 0.05em;
}
.axis-article-detail__title {
font-size: var(--axis-font-3xl);
line-height: 1.2;
margin-bottom: 1rem;
}
@media (max-width: 768px) {
.axis-article-detail__title {
font-size: var(--axis-font-2xl);
}
}
.axis-article-detail__subtitle {
font-size: var(--axis-font-xl);
font-weight: 400;
color: var(--axis-text-secondary);
margin-bottom: 2rem;
}
.axis-article-detail__authors {
margin-bottom: calc(var(--axis-spacing-unit) * 2);
padding: calc(var(--axis-spacing-unit));
background: var(--axis-surface);
border-radius: var(--axis-radius-lg);
}
.axis-author-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 1rem;
}
.axis-author {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
.axis-author__name {
font-weight: 600;
font-size: var(--axis-font-lg);
color: var(--axis-text);
}
.axis-author__affiliation {
font-size: var(--axis-font-sm);
color: var(--axis-text-secondary);
}
.axis-author__orcid {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: var(--axis-font-sm);
color: var(--axis-text-secondary);
text-decoration: none;
}
.axis-author__orcid:hover {
color: #A6CE39;
}
.axis-author__orcid svg {
width: 16px;
height: 16px;
}
.axis-article-detail__meta {
margin-bottom: calc(var(--axis-spacing-unit) * 2);
padding: calc(var(--axis-spacing-unit));
background: var(--axis-surface);
border-radius: var(--axis-radius-lg);
}
.axis-meta-list {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.axis-meta-item {
display: flex;
gap: 0.5rem;
font-size: var(--axis-font-sm);
}
.axis-meta-item--doi {
font-weight: 500;
}
.axis-meta-item__label {
font-weight: 600;
color: var(--axis-text-secondary);
min-width: 120px;
}
.axis-meta-item__value {
color: var(--axis-text);
}
.axis-article-detail__abstract,
.axis-article-detail__keywords,
.axis-article-detail__galleys,
.axis-article-detail__share,
.axis-article-detail__references,
.axis-article-detail__citation {
margin-bottom: calc(var(--axis-spacing-unit) * 2);
}
.axis-article-detail__section-title {
font-size: var(--axis-font-xl);
margin-bottom: 1rem;
padding-bottom: 0.5rem;
border-bottom: 2px solid var(--axis-border);
}
.axis-article-detail__abstract-content {
font-size: var(--axis-font-md);
line-height: var(--axis-leading-relaxed);
}
.axis-keyword-list {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 0;
}
.axis-keyword {
padding: 0.5rem 1rem;
background: var(--axis-surface);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-md);
font-size: var(--axis-font-sm);
color: var(--axis-text);
}
.axis-galley-list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.axis-galley-button {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: var(--axis-primary);
color: white;
border-radius: var(--axis-radius-md);
font-weight: 500;
transition: var(--axis-transition-fast);
}
.axis-galley-button:hover {
background: #291fd9;
text-decoration: none;
transform: translateY(-2px);
box-shadow: var(--axis-shadow-md);
}
.axis-galley-button svg {
width: 20px;
height: 20px;
}
/* Social sharing */
.axis-share-buttons {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.axis-share-button {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: 50%;
transition: var(--axis-transition-fast);
}
.axis-share-button--twitter {
background: #1DA1F2;
color: white;
}
.axis-share-button--twitter:hover {
background: #0c85d0;
}
.axis-share-button--facebook {
background: #1877F2;
color: white;
}
.axis-share-button--facebook:hover {
background: #0b5fcc;
}
.axis-share-button--linkedin {
background: #0A66C2;
color: white;
}
.axis-share-button--linkedin:hover {
background: #084c91;
}
.axis-share-button--email {
background: var(--axis-surface);
color: var(--axis-text);
border: 1px solid var(--axis-border);
}
.axis-share-button--email:hover {
background: var(--axis-text);
color: white;
}
.axis-reference-list {
list-style: decimal;
padding-left: 1.5rem;
}
.axis-reference-list li {
margin-bottom: 0.75rem;
line-height: 1.6;
}
.axis-citation-box {
padding: calc(var(--axis-spacing-unit));
background: var(--axis-surface);
border-left: 4px solid var(--axis-primary);
border-radius: var(--axis-radius-md);
}
.axis-citation-text {
font-family: var(--axis-font-mono);
font-size: 0.9375rem;
line-height: 1.6;
color: var(--axis-text);
}
/* Continue... */
/* ============================================================================
SIDEBAR
========================================================================== */
.axis-sidebar {
display: flex;
flex-direction: column;
gap: calc(var(--axis-spacing-unit));
}
.axis-sidebar__block {
padding: calc(var(--axis-spacing-unit));
background: var(--axis-surface);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
}
.axis-sidebar__title {
font-size: 1.125rem;
font-weight: 600;
margin: 0 0 1rem 0;
color: var(--axis-text);
}
.axis-sidebar__search-input {
width: 100%;
padding: 0.75rem;
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-md);
font-size: 0.9375rem;
}
.axis-sidebar__search-input:focus {
outline: none;
border-color: var(--axis-primary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
.axis-search-group {
display: flex;
gap: 0.5rem;
}
.axis-sidebar__search-button {
padding: 0.75rem;
background: var(--axis-primary);
color: white;
border: none;
border-radius: var(--axis-radius-md);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--axis-transition-fast);
}
.axis-sidebar__search-button:hover {
background: #291fd9;
}
.axis-sidebar__issue-link {
display: block;
text-decoration: none;
transition: var(--axis-transition);
}
.axis-sidebar__issue-link:hover {
opacity: 0.8;
}
.axis-sidebar__issue-cover {
width: 100%;
border-radius: var(--axis-radius-md);
margin-bottom: 1rem;
box-shadow: var(--axis-shadow-sm);
}
.axis-sidebar__issue-info {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.axis-sidebar__issue-title {
font-weight: 600;
color: var(--axis-text);
}
.axis-sidebar__issue-date {
font-size: var(--axis-font-sm);
color: var(--axis-text-secondary);
}
.axis-sidebar__list {
list-style: none;
padding: 0;
margin: 0;
}
.axis-sidebar__list-item {
margin-bottom: 0.75rem;
}
.axis-sidebar__list-item:last-child {
margin-bottom: 0;
}
.axis-sidebar__announcement-link,
.axis-sidebar__section-link {
display: block;
color: var(--axis-text);
text-decoration: none;
transition: var(--axis-transition-fast);
}
.axis-sidebar__announcement-link:hover,
.axis-sidebar__section-link:hover {
color: var(--axis-primary);
}
.axis-sidebar__announcement-title {
font-weight: 500;
display: block;
margin-bottom: 0.25rem;
}
.axis-sidebar__announcement-date {
font-size: var(--axis-font-xs);
color: var(--axis-text-secondary);
}
.axis-sidebar__view-all {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 1rem;
font-weight: 500;
color: var(--axis-primary);
}
.axis-sidebar__view-all svg {
width: 16px;
height: 16px;
}
.axis-sidebar__view-all:hover {
text-decoration: none;
}
.axis-sidebar__stat-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0.5rem 0;
border-bottom: 1px solid var(--axis-border);
}
.axis-sidebar__stat-item:last-child {
border-bottom: none;
}
.axis-sidebar__stat-label {
font-size: 0.875rem;
color: var(--axis-text-secondary);
}
.axis-sidebar__stat-value {
font-weight: 600;
font-size: 1.125rem;
color: var(--axis-primary);
}
/* ============================================================================
ISSUE PAGE
========================================================================== */
.axis-issue-header {
margin-bottom: calc(var(--axis-spacing-unit) * 2);
}
.axis-issue-header__wrapper {
display: grid;
grid-template-columns: 300px 1fr;
gap: calc(var(--axis-spacing-unit) * 2);
}
/* No cover - single column */
.axis-issue-header__wrapper--no-cover {
grid-template-columns: 1fr;
max-width: 800px;
margin: 0 auto; /* Center the wrapper */
}
/* No cover - centered title and date */
.axis-issue-header__wrapper--no-cover .axis-issue-header__title {
text-align: center;
}
.axis-issue-header__wrapper--no-cover .axis-issue-header__date {
justify-content: center;
}
/* No cover - justified description */
.axis-issue-header__wrapper--no-cover .axis-issue-header__description {
text-align: justify;
}
/* Galleys - always centered below description */
.axis-issue-header__galleys {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.75rem;
margin-top: 1.5rem;
}
/* With cover - galleys centered in right column */
.axis-issue-header__wrapper:not(.axis-issue-header__wrapper--no-cover) .axis-issue-header__galleys {
justify-content: center;
}
/* Issue Files section */
.axis-issue-files {
margin-top: 2rem;
text-align: center;
}
.axis-issue-files__title {
display: inline-block;
position: relative;
padding: 0.5rem 1.5rem;
background: transparent;
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-md);
font-size: var(--axis-font-base);
font-weight: 600;
margin-bottom: 2rem;
}
/* Decorative line under Issue Files title */
.axis-issue-files__title::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--axis-primary) 50%,
transparent 100%);
opacity: 0.6;
}
.axis-issue-files__list {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.75rem;
}
/* Dark mode */
html.dark-mode .axis-issue-files__title {
border-color: rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.02);
}
@media (max-width: 768px) {
.axis-issue-header__wrapper {
grid-template-columns: 1fr;
}
}
.axis-issue-header__cover-image {
width: 100%;
border-radius: var(--axis-radius-lg);
box-shadow: var(--axis-shadow-md);
}
.axis-issue-header__title {
font-size: var(--axis-font-3xl);
margin-bottom: 1rem;
}
.axis-issue-header__date {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: var(--axis-font-base);
color: var(--axis-text-secondary);
margin-bottom: 1.5rem;
}
.axis-issue-header__date svg {
width: 18px;
height: 18px;
}
.axis-issue-header__description {
line-height: 1.7;
}
/* Inline galleys (when no cover) */
.axis-issue-header__galleys {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1.5rem;
}
.axis-issue-galleys__list {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.axis-article-list {
display: flex;
flex-direction: column;
gap: calc(var(--axis-spacing-unit));
}
.axis-article-item {
display: grid;
grid-template-columns: 1fr auto;
gap: calc(var(--axis-spacing-unit));
padding: calc(var(--axis-spacing-unit));
background: var(--axis-surface);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
transition: var(--axis-transition);
}
.axis-article-item:hover {
box-shadow: var(--axis-shadow-md);
}
@media (max-width: 768px) {
.axis-article-item {
grid-template-columns: 1fr;
}
}
.axis-article-item__title {
font-size: 1.25rem;
margin-bottom: 0.75rem;
}
.axis-article-item__title a {
color: var(--axis-text);
text-decoration: none;
}
.axis-article-item__title a:hover {
color: var(--axis-primary);
}
.axis-article-item__authors {
font-size: 0.9375rem;
color: var(--axis-text-secondary);
margin-bottom: 0.75rem;
}
.axis-article-item__abstract {
font-size: 0.9375rem;
line-height: 1.6;
margin-bottom: 1rem;
}
.axis-article-item__meta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
font-size: 0.875rem;
color: var(--axis-text-secondary);
}
.axis-article-item__galleys {
display: flex;
flex-direction: column;
gap: 0.5rem;
justify-content: center;
}
.axis-galley-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--axis-primary);
color: white;
border-radius: var(--axis-radius-md);
font-size: 0.875rem;
font-weight: 500;
text-decoration: none;
transition: var(--axis-transition-fast);
white-space: nowrap;
}
.axis-galley-link:hover {
background: #291fd9;
transform: translateY(-2px);
}
.axis-galley-link--small {
padding: 0.375rem 0.75rem;
font-size: 0.8125rem;
}
.axis-galley-link svg {
width: 16px;
height: 16px;
}
/* ============================================================================
ARCHIVE PAGE
========================================================================== */
.axis-archive-year {
margin-bottom: calc(var(--axis-spacing-unit) * 2);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
overflow: hidden;
}
.axis-archive-year__toggle {
display: none;
}
.axis-archive-year__toggle:checked ~ .axis-archive-year__content {
max-height: none;
padding: calc(var(--axis-spacing-unit));
}
.axis-archive-year__toggle:checked ~ .axis-archive-year__header .axis-archive-year__icon {
transform: rotate(180deg);
}
.axis-archive-year__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: calc(var(--axis-spacing-unit));
background: var(--axis-surface);
cursor: pointer;
user-select: none;
transition: var(--axis-transition-fast);
}
.axis-archive-year__header:hover {
background: #f1f5f9;
}
.axis-archive-year__title {
font-size: var(--axis-font-xl);
margin: 0;
}
.axis-archive-year__count {
font-size: var(--axis-font-sm);
color: var(--axis-text-secondary);
}
.axis-archive-year__icon {
width: 20px;
height: 20px;
transition: var(--axis-transition);
}
.axis-archive-year__content {
max-height: 0;
overflow: hidden;
padding: 0;
transition: padding 0.3s ease;
}
.axis-issue-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: calc(var(--axis-spacing-unit));
}
@media (max-width: 768px) {
.axis-issue-grid {
grid-template-columns: 1fr;
}
}
.axis-issue-card {
background: var(--axis-background);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
overflow: hidden;
transition: var(--axis-transition);
}
.axis-issue-card:hover {
box-shadow: var(--axis-shadow-md);
transform: translateY(-4px);
}
.axis-issue-card__cover {
aspect-ratio: 3 / 4;
overflow: hidden;
}
.axis-issue-card__cover a {
display: block;
height: 100%;
}
.axis-issue-card__cover-image {
width: 100%;
height: 100%;
object-fit: cover;
transition: var(--axis-transition);
}
.axis-issue-card:hover .axis-issue-card__cover-image {
transform: scale(1.05);
}
.axis-issue-card__content {
padding: 1.5rem;
}
.axis-issue-card__title {
font-size: var(--axis-font-lg);
margin-bottom: 0.5rem;
}
.axis-issue-card__title a {
color: var(--axis-text);
text-decoration: none;
}
.axis-issue-card__title a:hover {
color: var(--axis-primary);
}
.axis-issue-card__date {
font-size: var(--axis-font-sm);
color: var(--axis-text-secondary);
margin-bottom: 1rem;
}
.axis-issue-card__description {
font-size: var(--axis-font-sm);
line-height: 1.6;
margin-bottom: 1rem;
}
/* ============================================================================
MOST VIEWED PAGE
========================================================================== */
.axis-most-viewed-list {
display: flex;
flex-direction: column;
gap: calc(var(--axis-spacing-unit));
}
.axis-most-viewed-item {
display: grid;
grid-template-columns: 60px 1fr auto;
gap: calc(var(--axis-spacing-unit));
padding: calc(var(--axis-spacing-unit));
background: var(--axis-surface);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
transition: var(--axis-transition);
}
.axis-most-viewed-item:hover {
box-shadow: var(--axis-shadow-md);
}
@media (max-width: 768px) {
.axis-most-viewed-item {
grid-template-columns: 1fr;
}
}
.axis-most-viewed-item__rank {
display: flex;
align-items: center;
justify-content: center;
}
.axis-rank-number {
font-size: 2rem;
font-weight: 700;
color: var(--axis-primary);
font-family: var(--axis-font-heading);
}
.axis-most-viewed-item__title {
font-size: var(--axis-font-lg);
margin-bottom: 0.5rem;
}
.axis-most-viewed-item__title a {
color: var(--axis-text);
text-decoration: none;
}
.axis-most-viewed-item__title a:hover {
color: var(--axis-primary);
}
.axis-most-viewed-item__authors {
font-size: var(--axis-font-sm);
color: var(--axis-text-secondary);
margin-bottom: 0.5rem;
}
.axis-most-viewed-item__abstract {
font-size: var(--axis-font-sm);
line-height: 1.6;
margin-bottom: 0.75rem;
}
.axis-most-viewed-item__meta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
font-size: var(--axis-font-sm);
color: var(--axis-text-secondary);
margin-bottom: 0.75rem;
}
.axis-most-viewed-item__stats {
display: flex;
align-items: center;
justify-content: center;
}
.axis-view-count {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
padding: 1rem;
background: var(--axis-background);
border: 2px solid var(--axis-primary);
border-radius: var(--axis-radius-md);
}
.axis-view-count svg {
width: 24px;
height: 24px;
color: var(--axis-primary);
}
.axis-view-count__number {
font-size: 1.5rem;
font-weight: 700;
color: var(--axis-primary);
font-family: var(--axis-font-heading);
}
.axis-view-count__label {
font-size: 0.75rem;
text-transform: uppercase;
color: var(--axis-text-secondary);
letter-spacing: 0.05em;
}
/* ============================================================================
EMPTY STATES
========================================================================== */
.axis-empty-state {
text-align: center;
padding: calc(var(--axis-spacing-unit) * 4) calc(var(--axis-spacing-unit) * 2);
}
.axis-empty-state__content {
max-width: 400px;
margin: 0 auto;
}
.axis-empty-state__icon {
color: var(--axis-text-secondary);
opacity: 0.5;
margin-bottom: 1.5rem;
}
.axis-empty-state__title {
font-size: 1.5rem;
margin-bottom: 0.75rem;
color: var(--axis-text);
}
.axis-empty-state__description {
color: var(--axis-text-secondary);
}
/* ============================================================================
RICH CONTENT (for admin-edited content)
========================================================================== */
.axis-rich-content,
.axis-content-block {
line-height: 1.7;
}
.axis-rich-content h1,
.axis-content-block h1,
.axis-rich-content h2,
.axis-content-block h2,
.axis-rich-content h3,
.axis-content-block h3,
.axis-rich-content h4,
.axis-content-block h4,
.axis-rich-content h5,
.axis-content-block h5,
.axis-rich-content h6,
.axis-content-block h6 {
margin-top: 2rem;
margin-bottom: 1rem;
}
.axis-rich-content p,
.axis-content-block p {
margin-bottom: 1rem;
}
.axis-rich-content ul,
.axis-content-block ul,
.axis-rich-content ol,
.axis-content-block ol {
margin-bottom: 1rem;
padding-left: 2rem;
}
.axis-rich-content ul li,
.axis-content-block ul li,
.axis-rich-content ol li,
.axis-content-block ol li {
margin-bottom: 0.5rem;
}
.axis-rich-content table,
.axis-content-block table {
width: 100%;
border-collapse: collapse;
margin-bottom: 1.5rem;
border: 1px solid var(--axis-border);
}
.axis-rich-content table th,
.axis-content-block table th,
.axis-rich-content table td,
.axis-content-block table td {
padding: 0.75rem;
border: 1px solid var(--axis-border);
text-align: left;
}
.axis-rich-content table th,
.axis-content-block table th {
background: var(--axis-surface);
font-weight: 600;
}
.axis-rich-content iframe,
.axis-content-block iframe {
max-width: 100%;
margin-bottom: 1.5rem;
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-md);
}
.axis-rich-content img,
.axis-content-block img {
max-width: 100%;
height: auto;
margin-bottom: 1.5rem;
border-radius: var(--axis-radius-md);
}
.axis-rich-content blockquote,
.axis-content-block blockquote {
border-left: 4px solid var(--axis-primary);
padding-left: 1.5rem;
margin: 1.5rem 0;
color: var(--axis-text-secondary);
font-style: italic;
}
/* ============================================================================
UTILITIES
========================================================================== */
.axis-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.axis-skip-link:focus {
top: 0;
}
/* ============================================================================
RESPONSIVE HELPERS
========================================================================== */
@media print {
.axis-header,
.axis-footer,
.axis-sidebar,
.axis-share-buttons,
.axis-back-to-top {
display: none;
}
.axis-main-content {
width: 100%;
max-width: none;
}
}
/* ============================================================================
DROPDOWN MENU FIX
========================================================================== */
/* Hide dropdown menus by default */
.axis-nav-list ul {
display: none;
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
background: var(--axis-background);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-md);
box-shadow: var(--axis-shadow-xl);
min-width: 220px;
padding: 0.5rem;
z-index: 1000;
opacity: 0;
transform: translateY(-10px);
transition: opacity 0.3s ease, transform 0.3s ease;
pointer-events: none;
}
/* Show dropdown on hover with animation */
.axis-nav-list li:hover > ul {
display: block;
opacity: 1;
transform: translateY(0);
pointer-events: all;
}
/* Style dropdown items */
.axis-nav-list ul li {
padding: 0;
margin: 0.25rem 0;
}
.axis-nav-list ul a {
display: block;
padding: 0.75rem 1.25rem;
color: var(--axis-text);
white-space: nowrap;
border-radius: var(--axis-radius-sm);
font-size: 0.9rem;
}
.axis-nav-list ul a:hover {
background: var(--axis-surface);
color: var(--axis-primary);
text-decoration: none;
transform: translateX(4px);
box-shadow: var(--axis-shadow-sm);
}
/* Parent item indicator - modern rotating arrow */
.axis-nav-list > li > a {
position: relative;
}
.axis-nav-list > li:has(ul) > a::after {
content: '▼';
font-size: 0.65em;
margin-left: 0.5rem;
opacity: 0.6;
display: inline-block;
transition: transform 0.3s ease, opacity 0.3s ease;
}
/* Rotate arrow on hover */
.axis-nav-list > li:has(ul):hover > a::after {
transform: rotate(-180deg);
opacity: 1;
}
/* Mobile menu dropdowns */
@media (max-width: 768px) {
.axis-nav-list ul {
position: static;
display: none;
box-shadow: none;
border: none;
padding-left: 1rem;
background: transparent;
}
.axis-nav-list li:hover > ul {
display: none;
}
/* Click to toggle on mobile - requires checkbox hack or JS */
.axis-nav-list li.has-children > a {
pointer-events: none;
}
.axis-nav-list li.has-children ul {
display: block;
opacity: 0.8;
}
}
/* ============================================================================
DROPDOWN MENU FIX - Hide submenus by default
========================================================================== */
.axis-nav-list ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background: var(--axis-background);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-md);
box-shadow: var(--axis-shadow-lg);
min-width: 200px;
padding: 0.5rem 0;
z-index: 1000;
list-style: none;
margin: 0;
}
.axis-nav-list > li {
position: relative;
}
.axis-nav-list li:hover > ul {
display: block;
}
.axis-nav-list ul li {
padding: 0;
margin: 0;
}
.axis-nav-list ul a {
display: block;
padding: 0.75rem 1.5rem;
color: var(--axis-text);
white-space: nowrap;
font-size: 0.9375rem;
}
.axis-nav-list ul a:hover {
background: var(--axis-surface);
color: var(--axis-primary);
text-decoration: none;
}
/* Dropdown indicator */
.axis-nav-list > li:has(ul) > a::after {
content: '▾';
font-size: 0.8em;
margin-left: 0.5rem;
opacity: 0.6;
}
@media (max-width: 768px) {
.axis-nav-list ul {
position: static;
box-shadow: none;
border: none;
padding-left: 1.5rem;
background: transparent;
}
}
/* ============================================================================
USER MENU STYLING
========================================================================== */
.axis-user-menu {
display: flex;
align-items: center;
gap: 0.75rem;
}
/* User buttons (not logged in) */
.axis-user-buttons {
display: flex;
align-items: center;
gap: 0.75rem;
}
.axis-btn--text {
background: transparent;
border: none;
color: var(--axis-text);
padding: 0.5rem 1rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.axis-btn--text:hover {
color: var(--axis-primary);
background: transparent;
}
/* User dropdown (logged in) */
.axis-user-dropdown {
position: relative;
}
.axis-user-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1rem;
background: var(--axis-surface);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-md);
color: var(--axis-text);
cursor: pointer;
transition: all var(--axis-transition-normal);
font-size: 0.9375rem;
}
.axis-user-button:hover {
border-color: var(--axis-primary);
background: var(--axis-background);
}
.axis-user-name {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.axis-user-dropdown-icon {
transition: transform var(--axis-transition-normal);
}
.axis-user-button[aria-expanded="true"] .axis-user-dropdown-icon {
transform: rotate(180deg);
}
/* User menu dropdown */
.axis-user-menu-dropdown {
position: absolute;
top: calc(100% + 0.5rem);
right: 0;
min-width: 200px;
background: var(--axis-background);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-md);
box-shadow: var(--axis-shadow-lg);
padding: 0.5rem 0;
z-index: 1000;
opacity: 0;
visibility: hidden;
transform: translateY(-10px);
transition: all var(--axis-transition-normal);
}
.axis-user-menu-dropdown.is-open {
opacity: 1;
visibility: visible;
transform: translateY(0);
}
.axis-user-menu-list {
list-style: none;
margin: 0;
padding: 0;
}
.axis-user-menu-list li {
margin: 0;
padding: 0;
}
.axis-user-menu-list a {
display: block;
padding: 0.75rem 1.25rem;
color: var(--axis-text);
text-decoration: none;
transition: all var(--axis-transition-normal);
font-size: 0.9375rem;
}
.axis-user-menu-list a:hover {
background: var(--axis-surface);
color: var(--axis-primary);
}
/* Mobile adjustments */
@media (max-width: 768px) {
.axis-user-name {
display: none;
}
.axis-user-button {
padding: 0.5rem;
}
.axis-user-buttons {
gap: 0.5rem;
}
.axis-btn--text span {
display: none;
}
.axis-user-menu-dropdown {
right: auto;
left: 0;
}
}
/* ============================================================================
NAVIGATION WITH USER MENU - Redesigned
========================================================================== */
/* Navigation wrapper - flexbox for left/right split */
.axis-nav-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.axis-nav-primary {
flex: 1;
}
.axis-nav-user {
flex-shrink: 0;
}
/* User menu in navigation (not logged in) */
.axis-nav-user-list {
display: flex;
align-items: center;
gap: 0.75rem;
list-style: none;
margin: 0;
padding: 0;
}
.axis-nav-user-list li {
margin: 0;
padding: 0;
}
/* Equal-sized buttons for login/register */
.axis-nav-user-list .axis-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-width: 100px; /* Equal minimum width */
white-space: nowrap;
}
/* Icon inside button */
.axis-nav-user-list .axis-btn svg {
flex-shrink: 0;
width: 16px;
height: 16px;
}
.axis-nav-user-list .axis-nav-link {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
color: var(--axis-text);
text-decoration: none;
transition: color var(--axis-transition-normal);
}
.axis-nav-user-list .axis-nav-link:hover {
color: var(--axis-primary);
}
/* User dropdown in navigation (logged in) */
.axis-user-nav-dropdown {
position: relative;
}
.axis-user-nav-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1.25rem;
background: transparent;
border: 2px solid var(--axis-border);
border-radius: var(--axis-radius-md);
color: var(--axis-text);
cursor: pointer;
transition: all var(--axis-transition-normal);
font-size: 0.9375rem;
font-weight: 500;
}
.axis-user-nav-button:hover {
border-color: var(--axis-primary);
color: var(--axis-primary);
background: var(--axis-surface);
}
.axis-user-nav-name {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.axis-user-nav-arrow {
transition: transform var(--axis-transition-normal);
}
.axis-user-nav-button[aria-expanded="true"] .axis-user-nav-arrow {
transform: rotate(180deg);
}
/* User dropdown menu */
.axis-user-nav-dropdown-menu {
position: absolute;
top: calc(100% + 0.75rem);
right: 0;
min-width: 220px;
background: var(--axis-background);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-md);
box-shadow: var(--axis-shadow-lg);
padding: 0.5rem 0;
z-index: 9999;
opacity: 0;
visibility: hidden;
display: none;
transform: translateY(-10px);
transition: all var(--axis-transition-normal);
}
.axis-user-nav-dropdown-menu.is-open {
opacity: 1;
visibility: visible;
display: block;
transform: translateY(0);
}
.axis-user-nav-list {
list-style: none;
margin: 0;
padding: 0;
}
.axis-user-nav-list li {
margin: 0;
padding: 0;
}
.axis-user-nav-list a {
display: block;
padding: 0.75rem 1.25rem;
color: var(--axis-text);
text-decoration: none;
transition: all var(--axis-transition-normal);
font-size: 0.9375rem;
}
.axis-user-nav-list a:hover {
background: var(--axis-surface);
color: var(--axis-primary);
}
/* Mobile adjustments */
@media (max-width: 768px) {
.axis-nav-wrapper {
flex-direction: column;
align-items: stretch;
gap: 1rem;
}
.axis-nav-user {
border-top: 1px solid var(--axis-border);
padding-top: 1rem;
}
.axis-nav-user-list {
flex-direction: column;
align-items: stretch;
gap: 0.5rem;
}
.axis-nav-user-list li {
width: 100%;
}
.axis-nav-user-list .axis-btn {
width: 100%;
text-align: center;
}
.axis-user-nav-dropdown-menu {
position: static;
box-shadow: none;
border: none;
background: transparent;
padding-left: 1rem;
}
}
/* ============================================================================
LANGUAGE SELECTOR - Improved Design
========================================================================== */
.axis-language-toggle {
position: relative;
}
.axis-language-select {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
padding: 0 2.5rem 0 1rem; /* Remove vertical padding */
height: 40px; /* Match ALL header elements - 40px! */
background: var(--axis-surface);
border: 2px solid var(--axis-border);
border-radius: var(--axis-radius-md);
color: var(--axis-text);
font-size: 0.9375rem;
font-weight: 500;
cursor: pointer;
transition: all var(--axis-transition-normal);
min-width: 120px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right 0.75rem center;
background-size: 14px;
display: flex;
align-items: center;
box-sizing: border-box; /* Include border in height */
}
.axis-language-select:hover {
border-color: var(--axis-primary);
background-color: var(--axis-background);
}
.axis-language-select:focus {
outline: none;
border-color: var(--axis-primary);
box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.1);
}
/* Dark mode adjustments for language selector */
.dark-mode .axis-language-select {
background-image: url('data:image/svg+xml,');
}
/* Remove default select styles */
.axis-language-select option {
background: var(--axis-background);
color: var(--axis-text);
padding: 0.5rem;
}
/* Mobile */
@media (max-width: 768px) {
.axis-language-select {
min-width: 100px;
font-size: 0.875rem;
padding: 0.5rem 2rem 0.5rem 0.75rem;
}
}
/* ============================================================================
HEADER ACTIONS - Updated (user menu moved to navigation)
========================================================================== */
.axis-header__actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
/* Ensure dark mode toggle is visible */
.axis-icon-button {
display: flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
background: var(--axis-surface);
border: 2px solid var(--axis-border);
border-radius: var(--axis-radius-md);
color: var(--axis-text);
cursor: pointer;
transition: all var(--axis-transition-normal);
}
.axis-icon-button:hover {
border-color: var(--axis-primary);
background: var(--axis-background);
color: var(--axis-primary);
}
.axis-icon-sun,
.axis-icon-moon {
width: 20px;
height: 20px;
}
.axis-icon-sun {
display: block;
}
.axis-icon-moon {
display: none;
}
.dark-mode .axis-icon-sun {
display: none;
}
.dark-mode .axis-icon-moon {
display: block;
}
@media (max-width: 768px) {
.axis-header__actions {
gap: 0.5rem;
}
.axis-icon-button {
width: 36px;
height: 36px;
}
}
/* ========================================================================
Social Media Icons (Rich Header Style)
======================================================================== */
.axis-social-media {
display: flex;
align-items: center;
gap: 0.5rem; /* Reduced from 0.75rem to save space */
}
/* Hide social media in minimal and standard header styles */
.axis-header--minimal .axis-social-media,
.axis-header--standard .axis-social-media {
display: none !important;
}
/* Show social media only in rich header style */
.axis-header--rich .axis-social-media {
display: flex;
}
.axis-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px; /* Match ALL header elements - 40px! */
height: 40px; /* Match ALL header elements - 40px! */
border-radius: var(--axis-radius-md);
background-color: transparent;
color: var(--axis-text-secondary);
transition: all var(--axis-transition);
text-decoration: none;
box-sizing: border-box;
}
.axis-social-link:hover {
background-color: var(--axis-surface);
color: var(--axis-primary);
transform: translateY(-2px);
}
.axis-social-link:focus {
outline: 2px solid var(--axis-primary);
outline-offset: 2px;
}
.axis-social-link svg {
width: 18px;
height: 18px;
display: block;
}
/* Mobile: Hide social media on small screens for minimal header */
@media (max-width: 767px) {
.axis-social-media {
display: none;
}
}
/* Tablet and up: Show social media */
@media (min-width: 768px) {
.axis-social-media {
display: flex;
}
}
/* Dark mode adjustments */
html.dark-mode .axis-social-link {
color: var(--axis-text-secondary);
}
html.dark-mode .axis-social-link:hover {
background-color: rgba(255, 255, 255, 0.1);
color: var(--axis-primary);
}
/* Disabled social media links (when URL is just #) */
.axis-social-link--disabled {
opacity: 0.4;
cursor: not-allowed;
pointer-events: none;
}
.axis-social-link--disabled:hover {
background-color: transparent;
transform: none;
color: var(--axis-text-secondary);
}
html.dark-mode .axis-social-link--disabled:hover {
background-color: transparent;
}
/* Header responsive adjustments */
@media (max-width: 1024px) {
.axis-header__brand {
max-width: 40%; /* Slightly narrower on tablets */
min-width: 180px;
}
.axis-brand-text__name {
font-size: 1.25rem; /* Smaller font */
}
.axis-header__actions {
gap: 0.75rem; /* Reduce gap between actions */
}
}
@media (max-width: 768px) {
/* MOBILE: Two-row stacked header */
.axis-header__inner {
flex-direction: column;
align-items: stretch;
gap: calc(var(--axis-spacing-unit) / 2);
padding: calc(var(--axis-spacing-unit) / 2) 0;
}
/* Row 1: Logo/Journal Name - Full Width */
.axis-header__brand {
max-width: 100%;
min-width: 0;
width: 100%;
display: flex;
justify-content: center;
padding-bottom: calc(var(--axis-spacing-unit) / 2);
border-bottom: 1px solid var(--axis-border);
}
.axis-brand-text__name {
font-size: 1.25rem;
text-align: center;
}
/* Row 2: Actions toolbar - centered with hamburger on right */
.axis-header__actions {
gap: 0.75rem;
flex: 0;
justify-content: center; /* Center the actions */
position: relative;
padding-right: 56px; /* Reserve space for hamburger (40px + gap) */
padding-left: 0; /* Will be set if social media exists */
}
/* If social media exists, add left padding for balance */
.axis-header__actions:has(.axis-social-media) {
padding-left: 0; /* Social media provides its own space */
}
/* Hamburger stays on right */
.axis-mobile-menu-toggle {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
z-index: 10; /* Above other elements */
}
/* Social media group on left */
.axis-social-media {
display: flex;
gap: 0.5rem;
margin-right: auto; /* Push to left */
}
/* Tools group in center */
.axis-mobile-search-link,
#axis-dark-mode-toggle,
.axis-language-toggle {
/* Centered by default */
}
/* Hide desktop search box on mobile */
.axis-header__search {
display: none !important;
}
}
/* ========================================================================
Glassmorphism Responsive Adjustments
======================================================================== */
@media (max-width: 1024px) {
.axis-hero__description-wrapper,
.axis-page-description-wrapper {
max-width: 70%; /* Slightly wider on tablets */
padding: 1.5rem;
}
.axis-hero__description {
font-size: var(--axis-font-lg);
}
}
@media (max-width: 768px) {
.axis-hero__description-wrapper,
.axis-page-description-wrapper {
max-width: 85%; /* Wider on mobile */
padding: 1.25rem;
}
.axis-hero__description {
font-size: var(--axis-font-base);
}
}
@media (max-width: 480px) {
.axis-hero__description-wrapper,
.axis-page-description-wrapper {
max-width: 95%; /* Almost full width on small mobile */
padding: 1rem;
}
}
/* ========================================================================
Statistics Bar - Enhanced
======================================================================== */
/* CC License icon styling */
.axis-cc-icon {
height: 31px;
width: auto;
display: block;
margin: 0 auto;
}
/* Stats bar responsive - allow wrapping with more items */
@media (max-width: 1200px) {
.axis-stats-bar__inner {
gap: 1.5rem;
}
.axis-stat {
min-width: 120px;
}
}
@media (max-width: 768px) {
.axis-stats-bar__inner {
gap: 1rem;
justify-content: center;
}
.axis-stat {
min-width: 100px;
}
.axis-cc-icon {
height: 24px;
}
}
/* License stat special styling */
.axis-stat--license .axis-stat__value {
display: flex;
align-items: center;
justify-content: center;
min-height: 40px;
}
/* SVG icons in stats */
.axis-stat svg {
display: block;
margin: 0 auto;
width: 30px; /* Increased from 20px */
height: 30px; /* Increased from 20px */
color: var(--axis-primary);
flex-shrink: 0; /* Don't shrink in flex container */
}
html.dark-mode .axis-stat svg {
color: var(--axis-primary);
}
/* Title wrapper with issue badge */
.axis-section__title-wrapper {
display: flex;
align-items: center;
gap: 1rem;
flex-wrap: wrap;
}
/* Issue badge - minimal button style */
.axis-issue-badge {
display: inline-flex;
align-items: center;
padding: 0.375rem 0.875rem;
font-size: var(--axis-font-xs);
font-weight: 500;
font-family: var(--axis-font-heading);
color: var(--axis-primary);
background: rgba(44, 95, 141, 0.08);
border: 1px solid rgba(44, 95, 141, 0.2);
border-radius: var(--axis-radius-md);
white-space: nowrap;
transition: all var(--axis-transition-normal);
}
.axis-issue-badge:hover {
background: rgba(44, 95, 141, 0.12);
border-color: rgba(44, 95, 141, 0.3);
transform: translateY(-1px);
}
/* Dark mode adjustments */
html.dark-mode .axis-issue-badge {
background: rgba(44, 95, 141, 0.15);
border-color: rgba(44, 95, 141, 0.25);
}
html.dark-mode .axis-issue-badge:hover {
background: rgba(44, 95, 141, 0.22);
border-color: rgba(44, 95, 141, 0.35);
}
/* ============================================================================
IMAGE PREVIEW BUTTON & LIGHTBOX
========================================================================== */
/* Preview button on article card images */
.axis-image-preview-btn {
position: absolute;
top: 0.75rem;
right: 0.75rem;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.95);
border: 1px solid rgba(0, 0, 0, 0.1);
border-radius: var(--axis-radius-md);
cursor: pointer;
opacity: 0;
transition: all var(--axis-transition-normal);
z-index: 10;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.axis-article-card__image:hover .axis-image-preview-btn {
opacity: 1;
}
.axis-image-preview-btn:hover {
background: rgba(255, 255, 255, 1);
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.axis-image-preview-btn svg {
color: var(--axis-primary);
}
html.dark-mode .axis-image-preview-btn {
background: rgba(30, 30, 30, 0.95);
border-color: rgba(255, 255, 255, 0.2);
}
html.dark-mode .axis-image-preview-btn:hover {
background: rgba(40, 40, 40, 1);
}
/* Lightbox Modal */
.axis-lightbox {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.92);
z-index: 10000;
align-items: center;
justify-content: center;
padding: 2rem;
backdrop-filter: blur(8px);
}
.axis-lightbox.is-open {
display: flex;
}
.axis-lightbox__content {
max-width: 90vw;
max-height: 90vh;
position: relative;
animation: lightboxZoomIn 0.3s ease;
}
@keyframes lightboxZoomIn {
from {
opacity: 0;
transform: scale(0.9);
}
to {
opacity: 1;
transform: scale(1);
}
}
.axis-lightbox__image {
max-width: 100%;
max-height: 90vh;
width: auto;
height: auto;
border-radius: var(--axis-radius-lg);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
}
.axis-lightbox__close {
position: absolute;
top: -3rem;
right: 0;
width: 2.5rem;
height: 2.5rem;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--axis-radius-md);
cursor: pointer;
transition: all var(--axis-transition-normal);
color: white;
}
.axis-lightbox__close:hover {
background: rgba(255, 255, 255, 0.2);
transform: scale(1.1);
}
.axis-lightbox__caption {
position: absolute;
bottom: -3rem;
left: 0;
right: 0;
color: rgba(255, 255, 255, 0.9);
text-align: center;
font-size: 0.875rem;
padding: 0 1rem;
}
@media (max-width: 768px) {
.axis-lightbox {
padding: 1rem;
}
.axis-lightbox__close {
top: -2.5rem;
}
.axis-lightbox__caption {
bottom: -2.5rem;
font-size: 0.8125rem;
}
}
/* Clickable image for preview */
.axis-image-clickable {
cursor: pointer;
position: relative;
transition: all var(--axis-transition-normal);
}
.axis-image-clickable:hover {
opacity: 1;
transform: scale(1.02);
}
/* Dark overlay on hover */
.axis-image-clickable::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0);
transition: all var(--axis-transition-normal);
pointer-events: none;
display: flex;
align-items: center;
justify-content: center;
}
.axis-image-clickable:hover::after {
background: rgba(0, 0, 0, 0.3);
content: '🔍'; /* Zoom icon */
font-size: 3rem;
color: white;
}
html.dark-mode .axis-image-clickable:hover::after {
background: rgba(0, 0, 0, 0.5);
}
/* Article card footer with galleys and view button */
.axis-article-card__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin-top: auto;
padding-top: 1rem;
border-top: 1px solid var(--axis-border);
}
/* Galleys container */
.axis-article-card__galleys {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
/* View button - minimal style */
.axis-article-card__view-btn {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.5rem 0.875rem;
font-size: var(--axis-font-sm);
font-weight: 500;
color: var(--axis-primary);
background: transparent;
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-md);
text-decoration: none;
transition: all var(--axis-transition-normal);
white-space: nowrap;
flex-shrink: 0;
}
.axis-article-card__view-btn:hover {
color: var(--axis-primary);
background: var(--axis-surface);
border-color: var(--axis-primary);
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.axis-article-card__view-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Dark mode adjustments */
html.dark-mode .axis-article-card__view-btn:hover {
background: rgba(var(--axis-primary-rgb), 0.1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Mobile: Stack footer elements */
@media (max-width: 576px) {
.axis-article-card__footer {
flex-direction: column;
align-items: stretch;
}
.axis-article-card__view-btn {
justify-content: center;
width: 100%;
}
}
/* ========================================
TABBED HOMEPAGE - NO SIDEBAR
======================================== */
/* Homepage without sidebar - full width */
.axis-homepage--no-sidebar {
max-width: 1400px;
margin: 0 auto;
padding: 0 2rem;
}
/* Tabs Container */
.axis-tabs-container {
margin-top: 3rem;
margin-bottom: 4rem;
}
/* Slanted Tab Navigation - Inspired by uploaded design */
.axis-tabs-nav {
display: flex;
gap: 0.5rem;
margin-bottom: -1px;
position: relative;
z-index: 2;
}
.axis-tab-btn {
display: inline-flex;
align-items: center;
gap: 0.625rem;
padding: 1rem 2rem;
padding-right: 2.5rem;
font-size: 1rem;
font-weight: 500;
color: var(--axis-text-secondary);
background: var(--axis-surface);
border: 1px solid var(--axis-border);
border-bottom: none;
cursor: pointer;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
transform: skewX(-10deg);
transform-origin: bottom left;
margin-right: -0.5rem;
}
.axis-tab-btn > * {
transform: skewX(10deg);
display: inline-flex;
align-items: center;
}
.axis-tab-btn svg {
flex-shrink: 0;
}
.axis-tab-btn:hover {
color: var(--axis-primary);
background: var(--axis-surface-hover);
transform: skewX(-10deg) translateY(-2px);
}
.axis-tab-btn--active {
color: #fff;
background: var(--axis-primary);
border-color: var(--axis-primary);
transform: skewX(-10deg) translateY(0);
z-index: 3;
}
.axis-tab-btn--active:hover {
transform: skewX(-10deg) translateY(0);
}
/* Tab Content */
.axis-tabs-content {
background: var(--axis-surface);
border: 1px solid var(--axis-border);
border-radius: 0 var(--axis-radius-lg) var(--axis-radius-lg) var(--axis-radius-lg);
padding: 2.5rem;
position: relative;
z-index: 1;
}
.axis-tab-panel {
display: none;
}
.axis-tab-panel--active {
display: block;
animation: axis-fade-in 0.3s ease-out;
}
@keyframes axis-fade-in {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Grid - 4 columns for no-sidebar layout */
.axis-homepage--no-sidebar .axis-article-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
/* List view always 1 column - IMPORTANT! */
.axis-homepage--no-sidebar .axis-article-grid--list {
grid-template-columns: 1fr !important;
}
@media (min-width: 1200px) {
.axis-homepage--no-sidebar .axis-article-grid {
grid-template-columns: repeat(4, 1fr);
}
/* List view always 1 column even on large screens */
.axis-homepage--no-sidebar .axis-article-grid--list {
grid-template-columns: 1fr !important;
}
.axis-homepage--no-sidebar .axis-article-grid--magazine {
grid-template-columns: repeat(3, 1fr);
}
}
/* Announcements Grid */
.axis-announcements-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 1.5rem;
}
@media (min-width: 1024px) {
.axis-announcements-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Announcement Card */
.axis-announcement-card {
background: var(--axis-background);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
padding: 1.75rem;
transition: all var(--axis-transition-normal);
}
.axis-announcement-card:hover {
border-color: var(--axis-primary);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
transform: translateY(-2px);
}
.axis-announcement-card__header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
margin-bottom: 1rem;
}
.axis-announcement-card__title {
font-size: var(--axis-font-lg);
font-weight: 600;
line-height: 1.4;
margin: 0;
flex: 1;
}
.axis-announcement-card__title a {
color: var(--axis-text);
text-decoration: none;
transition: color var(--axis-transition-normal);
}
.axis-announcement-card__title a:hover {
color: var(--axis-primary);
}
.axis-announcement-card__date {
font-size: var(--axis-font-sm);
color: var(--axis-text-secondary);
white-space: nowrap;
flex-shrink: 0;
}
.axis-announcement-card__excerpt {
font-size: var(--axis-font-sm);
line-height: 1.6;
color: var(--axis-text-secondary);
margin-bottom: 1.25rem;
}
.axis-announcement-card__link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: var(--axis-font-sm);
font-weight: 500;
color: var(--axis-primary);
text-decoration: none;
transition: all var(--axis-transition-normal);
}
.axis-announcement-card__link:hover {
gap: 0.75rem;
}
.axis-announcement-card__link svg {
width: 16px;
height: 16px;
transition: transform var(--axis-transition-normal);
}
.axis-announcement-card__link:hover svg {
transform: translateX(4px);
}
/* Empty State */
.axis-empty-state {
text-align: center;
padding: 4rem 2rem;
color: var(--axis-text-secondary);
}
.axis-empty-state svg {
margin: 0 auto 1.5rem;
opacity: 0.5;
}
.axis-empty-state p {
font-size: 1.125rem;
margin: 0;
}
/* Dark Mode Adjustments */
html.dark-mode .axis-tab-btn {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
}
html.dark-mode .axis-tab-btn:hover {
background: rgba(255, 255, 255, 0.08);
}
html.dark-mode .axis-tab-btn--active {
background: var(--axis-primary);
border-color: var(--axis-primary);
}
html.dark-mode .axis-tabs-content {
background: rgba(255, 255, 255, 0.02);
border-color: rgba(255, 255, 255, 0.1);
}
html.dark-mode .axis-announcement-card {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.1);
}
html.dark-mode .axis-announcement-card:hover {
background: rgba(255, 255, 255, 0.05);
border-color: var(--axis-primary);
}
/* Responsive */
@media (max-width: 768px) {
.axis-tabs-nav {
flex-direction: column;
gap: 0.75rem;
}
.axis-tab-btn {
transform: skewX(0);
border-bottom: 1px solid var(--axis-border);
border-radius: var(--axis-radius-md);
margin-right: 0;
}
.axis-tab-btn > * {
transform: skewX(0);
}
.axis-tab-btn--active {
transform: skewX(0);
}
.axis-tabs-content {
border-radius: var(--axis-radius-lg);
padding: 1.5rem;
}
.axis-homepage--no-sidebar {
padding: 0 1rem;
}
.axis-announcements-grid {
grid-template-columns: 1fr;
}
}
/* View Count Badge (Most Viewed tab) */
.axis-view-badge {
position: absolute;
top: 0.75rem;
right: 0.75rem;
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
background: rgba(0, 0, 0, 0.75);
backdrop-filter: blur(8px);
color: #fff;
border-radius: var(--axis-radius-full);
font-size: 0.875rem;
font-weight: 500;
z-index: 10;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.axis-view-badge svg {
width: 14px;
height: 14px;
flex-shrink: 0;
}
/* Dark mode: lighter background */
html.dark-mode .axis-view-badge {
background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(10px);
color: #fff;
}
/* Hover effect */
.axis-article-card:hover .axis-view-badge {
background: var(--axis-primary);
transform: scale(1.05);
transition: all var(--axis-transition-normal);
}
html.dark-mode .axis-article-card:hover .axis-view-badge {
background: var(--axis-primary);
}
/* View count in article meta */
.axis-article-card__views {
display: inline-flex;
align-items: center;
gap: 0.25rem;
color: var(--axis-primary);
font-weight: 500;
}
.axis-article-card__views svg {
flex-shrink: 0;
}
/* Make view count more prominent in Most Viewed tab */
.axis-tab-panel[data-panel="popular"] .axis-article-card__views {
color: var(--axis-primary);
font-weight: 600;
font-size: var(--axis-font-sm);
}
/* Dark mode */
html.dark-mode .axis-article-card__views {
color: var(--axis-primary);
}
/* DOI link styling */
.axis-article-card__doi a {
color: inherit;
text-decoration: none;
transition: color var(--axis-transition-normal);
}
.axis-article-card__doi a:hover {
color: var(--axis-primary);
text-decoration: underline;
}
/* Section badge improvements */
.axis-article-card__section {
display: inline-block;
font-size: var(--axis-font-xs);
font-weight: 600;
text-transform: uppercase;
color: var(--axis-primary);
background: var(--axis-surface);
border: 1px solid var(--axis-border);
padding: 0.25rem 0.75rem;
border-radius: var(--axis-radius-full);
margin-bottom: 0.75rem;
letter-spacing: 0.05em;
}
html.dark-mode .axis-article-card__section {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
color: var(--axis-primary);
}
/* Hide sidebar on homepage - no sidebar layout */
.axis-homepage--no-sidebar .axis-sidebar,
.axis-homepage--no-sidebar .axis-sidebar-wrapper {
display: none !important;
}
/* Load More Announcements */
.axis-announcement-card--hidden {
display: none;
}
.axis-load-more-container {
display: flex;
flex-direction: column;
align-items: center;
gap: 1rem;
margin-top: 3rem;
padding-top: 2rem;
border-top: 1px solid var(--axis-border);
}
.axis-load-more-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 2rem;
background: var(--axis-primary);
color: white;
border: none;
border-radius: var(--axis-radius-lg);
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all var(--axis-transition-normal);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.axis-load-more-btn:hover {
background: var(--axis-primary-dark);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.axis-load-more-btn:active {
transform: translateY(0);
}
.axis-load-more-btn svg {
transition: transform var(--axis-transition-normal);
}
.axis-load-more-btn:hover svg {
transform: translateY(2px);
}
.axis-load-more-info {
font-size: 0.875rem;
color: var(--axis-text-secondary);
font-weight: 500;
}
.axis-load-more-info #announcementsShowing {
color: var(--axis-primary);
font-weight: 700;
}
/* Dark mode */
html.dark-mode .axis-load-more-btn {
background: var(--axis-primary);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
html.dark-mode .axis-load-more-btn:hover {
background: var(--axis-primary-dark);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
/* Footer Redesign - 3 Columns with Dividers */
/* Footer title divider - elegant shadow line */
.axis-footer__divider {
width: 120px;
height: 2px;
background: linear-gradient(90deg, var(--axis-primary), transparent);
margin: 0.75rem 0 1.5rem 0;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
html.dark-mode .axis-footer__divider {
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
/* Footer social media */
.axis-footer__social {
display: flex;
gap: 0.75rem;
margin-top: 1.5rem;
}
.axis-footer__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--axis-surface);
color: var(--axis-text-secondary);
border-radius: var(--axis-radius-md);
border: 1px solid var(--axis-border);
transition: all var(--axis-transition-normal);
}
.axis-footer__social-link:hover {
background: var(--axis-primary);
color: white;
border-color: var(--axis-primary);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
html.dark-mode .axis-footer__social-link {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
}
html.dark-mode .axis-footer__social-link:hover {
background: var(--axis-primary);
border-color: var(--axis-primary);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}
/* Footer contact */
.axis-footer__contact {
display: flex;
flex-direction: column;
gap: 1rem;
}
.axis-footer__contact-item {
display: flex;
align-items: flex-start;
gap: 0.75rem;
font-size: var(--axis-font-sm);
line-height: 1.6;
color: var(--axis-text-secondary);
}
.axis-footer__contact-item svg {
flex-shrink: 0;
margin-top: 0.125rem;
color: var(--axis-primary);
}
.axis-footer__contact-item a {
color: var(--axis-text-secondary);
text-decoration: none;
transition: color var(--axis-transition-normal);
}
.axis-footer__contact-item a:hover {
color: var(--axis-primary);
text-decoration: underline;
}
/* Footer bottom - custom content */
.axis-footer__custom {
text-align: center;
font-size: var(--axis-font-sm);
color: var(--axis-text-secondary);
line-height: 1.6;
}
.axis-footer__custom p {
margin: 0.5rem 0;
}
.axis-footer__custom a {
color: var(--axis-primary);
text-decoration: none;
}
.axis-footer__custom a:hover {
text-decoration: underline;
}
/* Read more link in footer description */
.axis-footer__read-more {
display: inline-block;
margin-left: 0.35rem;
color: var(--axis-primary);
text-decoration: none;
font-size: var(--axis-font-sm);
font-weight: 500;
transition: var(--axis-transition-fast);
position: relative;
}
.axis-footer__read-more::before {
content: '';
display: inline-block;
width: 4px;
height: 4px;
background: var(--axis-primary);
border-radius: 50%;
margin-right: 0.35rem;
vertical-align: middle;
opacity: 0.5;
}
.axis-footer__read-more:hover {
color: var(--axis-secondary);
text-decoration: none;
}
.axis-footer__read-more:hover::before {
background: var(--axis-secondary);
opacity: 1;
}
/* Improve column spacing */
.axis-footer__column {
position: relative;
}
/* Add subtle separator between columns on desktop */
@media (min-width: 768px) {
.axis-footer__column:not(:last-child)::after {
content: '';
position: absolute;
right: 0;
top: 0;
bottom: 0;
width: 1px;
background: linear-gradient(to bottom,
transparent,
var(--axis-border) 20%,
var(--axis-border) 80%,
transparent
);
opacity: 0.5;
}
html.dark-mode .axis-footer__column:not(:last-child)::after {
background: linear-gradient(to bottom,
transparent,
rgba(255, 255, 255, 0.1) 20%,
rgba(255, 255, 255, 0.1) 80%,
transparent
);
}
}
/* ========================================
PRE-FOOTER SECTIONS
======================================== */
/* Indexing Section */
.axis-indexing-section {
background: var(--axis-surface);
padding: 4rem 0;
margin-top: 4rem;
border-top: 1px solid var(--axis-border);
}
.axis-indexing-section__title {
font-size: 2rem;
font-weight: 700;
text-align: center;
color: var(--axis-text-primary);
margin: 0 0 0.75rem 0;
}
.axis-indexing-section__divider {
width: 80px;
height: 4px;
background: linear-gradient(90deg, transparent, var(--axis-primary), transparent);
margin: 0 auto 3rem auto;
border-radius: 2px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
html.dark-mode .axis-indexing-section__divider {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
/* Indexing Badges */
.axis-indexing-badges {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
align-items: center;
max-width: 1000px;
margin: 0 auto;
}
.axis-indexing-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: white;
border: 2px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
color: var(--axis-text-primary);
transition: all var(--axis-transition-normal);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}
.axis-indexing-badge:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
.axis-indexing-badge__check {
flex-shrink: 0;
color: currentColor;
}
/* Auto colors for popular databases */
.axis-indexing-badge[data-indexing*="Scopus"] {
border-color: #FF6B00;
color: #FF6B00;
background: rgba(255, 107, 0, 0.05);
}
.axis-indexing-badge[data-indexing*="Scopus"]:hover {
background: #FF6B00;
color: white;
box-shadow: 0 8px 20px rgba(255, 107, 0, 0.25);
}
.axis-indexing-badge[data-indexing*="Web of Science"],
.axis-indexing-badge[data-indexing*="WoS"] {
border-color: #0066CC;
color: #0066CC;
background: rgba(0, 102, 204, 0.05);
}
.axis-indexing-badge[data-indexing*="Web of Science"]:hover,
.axis-indexing-badge[data-indexing*="WoS"]:hover {
background: #0066CC;
color: white;
box-shadow: 0 8px 20px rgba(0, 102, 204, 0.25);
}
.axis-indexing-badge[data-indexing*="DOAJ"] {
border-color: #28A745;
color: #28A745;
background: rgba(40, 167, 69, 0.05);
}
.axis-indexing-badge[data-indexing*="DOAJ"]:hover {
background: #28A745;
color: white;
box-shadow: 0 8px 20px rgba(40, 167, 69, 0.25);
}
.axis-indexing-badge[data-indexing*="Crossref"] {
border-color: #ED1C24;
color: #ED1C24;
background: rgba(237, 28, 36, 0.05);
}
.axis-indexing-badge[data-indexing*="Crossref"]:hover {
background: #ED1C24;
color: white;
box-shadow: 0 8px 20px rgba(237, 28, 36, 0.25);
}
.axis-indexing-badge[data-indexing*="PubMed"] {
border-color: #326295;
color: #326295;
background: rgba(50, 98, 149, 0.05);
}
.axis-indexing-badge[data-indexing*="PubMed"]:hover {
background: #326295;
color: white;
box-shadow: 0 8px 20px rgba(50, 98, 149, 0.25);
}
.axis-indexing-badge[data-indexing*="Google Scholar"] {
border-color: #4285F4;
color: #4285F4;
background: rgba(66, 133, 244, 0.05);
}
.axis-indexing-badge[data-indexing*="Google Scholar"]:hover {
background: #4285F4;
color: white;
box-shadow: 0 8px 20px rgba(66, 133, 244, 0.25);
}
.axis-indexing-badge[data-indexing*="ProQuest"] {
border-color: #8B4513;
color: #8B4513;
background: rgba(139, 69, 19, 0.05);
}
.axis-indexing-badge[data-indexing*="ProQuest"]:hover {
background: #8B4513;
color: white;
box-shadow: 0 8px 20px rgba(139, 69, 19, 0.25);
}
.axis-indexing-badge[data-indexing*="EBSCO"] {
border-color: #00A99D;
color: #00A99D;
background: rgba(0, 169, 157, 0.05);
}
.axis-indexing-badge[data-indexing*="EBSCO"]:hover {
background: #00A99D;
color: white;
box-shadow: 0 8px 20px rgba(0, 169, 157, 0.25);
}
/* Dark mode for indexing */
html.dark-mode .axis-indexing-section {
background: rgba(255, 255, 255, 0.02);
border-top-color: rgba(255, 255, 255, 0.1);
}
html.dark-mode .axis-indexing-badge {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.2);
}
html.dark-mode .axis-indexing-badge:hover {
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
/* CTA Section */
.axis-cta-section {
padding: 4rem 0;
background: var(--axis-background);
}
.axis-cta-grid {
display: grid;
gap: 2rem;
grid-template-columns: repeat(2, 1fr);
}
/* Adaptive grid - 6 columns on wide screens */
@media (min-width: 1440px) {
.axis-cta-grid {
grid-template-columns: repeat(6, 1fr);
gap: 1.5rem;
}
}
@media (min-width: 1024px) and (max-width: 1439px) {
.axis-cta-grid {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 768px) and (max-width: 1023px) {
.axis-cta-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.axis-cta-grid {
grid-template-columns: 1fr;
}
}
/* CTA Card */
.axis-cta-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 2rem 1.5rem;
background: var(--axis-surface);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
text-decoration: none;
color: var(--axis-text-primary);
transition: all var(--axis-transition-normal);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.axis-cta-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
border-color: var(--axis-primary);
}
.axis-cta-card__icon {
display: flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border-radius: var(--axis-radius-md);
margin-bottom: 1rem;
transition: all var(--axis-transition-normal);
}
.axis-cta-card:hover .axis-cta-card__icon {
transform: scale(1.1);
}
.axis-cta-card__icon svg {
color: var(--axis-primary);
}
/* Icon backgrounds */
.axis-cta-card__icon--submit {
background: rgba(79, 70, 229, 0.1);
}
.axis-cta-card__icon--review {
background: rgba(16, 185, 129, 0.1);
}
.axis-cta-card__icon--guidelines {
background: rgba(245, 158, 11, 0.1);
}
.axis-cta-card__icon--archives {
background: rgba(59, 130, 246, 0.1);
}
.axis-cta-card__icon--search {
background: rgba(139, 92, 246, 0.1);
}
.axis-cta-card__icon--privacy {
background: rgba(236, 72, 153, 0.1);
}
.axis-cta-card__title {
font-size: 1.125rem;
font-weight: 700;
margin: 0 0 0.5rem 0;
color: var(--axis-text-primary);
line-height: 1.4;
}
.axis-cta-card__description {
font-size: 0.875rem;
color: var(--axis-text-secondary);
margin: 0 0 1rem 0;
line-height: 1.6;
flex: 1;
}
.axis-cta-card__link {
font-size: 0.875rem;
font-weight: 600;
color: var(--axis-primary);
transition: all var(--axis-transition-normal);
}
.axis-cta-card:hover .axis-cta-card__link {
gap: 0.5rem;
}
/* Dark mode for CTA */
html.dark-mode .axis-cta-card {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
html.dark-mode .axis-cta-card:hover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
border-color: var(--axis-primary);
}
/* Responsive adjustments for narrow cards (6-column) */
@media (min-width: 1440px) {
.axis-cta-card {
padding: 1.5rem 1rem;
}
.axis-cta-card__icon {
width: 48px;
height: 48px;
}
.axis-cta-card__title {
font-size: 1rem;
}
.axis-cta-card__description {
font-size: 0.8125rem;
}
}
/* ================================================================
PRE-FOOTER SECTIONS
================================================================ */
/* SECTION 1: Indexed & Abstracted In */
.axis-indexing-section {
background: var(--axis-surface);
padding: 4rem 0;
margin-top: 4rem;
border-top: 1px solid var(--axis-border);
}
.axis-indexing-section__title {
font-size: 1.75rem;
font-weight: 700;
color: var(--axis-text-primary);
text-align: center;
margin: 0 0 0.75rem 0;
}
.axis-indexing-section__divider {
width: 80px;
height: 3px;
background: linear-gradient(90deg, var(--axis-primary), transparent);
margin: 0 auto 3rem auto;
border-radius: 2px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.axis-indexing-badges {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
align-items: center;
}
.axis-indexing-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.875rem 1.5rem;
background: white;
border: 2px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
font-size: 0.9375rem;
font-weight: 600;
color: var(--axis-text-primary);
text-decoration: none;
transition: all var(--axis-transition-normal);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.axis-indexing-badge:hover {
transform: translateY(-3px);
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}
.axis-indexing-badge__name {
font-weight: 600;
}
.axis-indexing-badge__check {
flex-shrink: 0;
opacity: 0.7;
}
/* Auto-color matching for famous indexing databases */
.axis-indexing-badge[data-indexing*="Scopus"] {
border-color: #FF6B00;
color: #FF6B00;
}
.axis-indexing-badge[data-indexing*="Scopus"]:hover {
background: #FF6B00;
color: white;
border-color: #FF6B00;
}
.axis-indexing-badge[data-indexing*="Scopus"]:hover .axis-indexing-badge__check {
stroke: white;
}
.axis-indexing-badge[data-indexing*="Web of Science"],
.axis-indexing-badge[data-indexing*="WoS"] {
border-color: #0066CC;
color: #0066CC;
}
.axis-indexing-badge[data-indexing*="Web of Science"]:hover,
.axis-indexing-badge[data-indexing*="WoS"]:hover {
background: #0066CC;
color: white;
border-color: #0066CC;
}
.axis-indexing-badge[data-indexing*="DOAJ"] {
border-color: #28A745;
color: #28A745;
}
.axis-indexing-badge[data-indexing*="DOAJ"]:hover {
background: #28A745;
color: white;
border-color: #28A745;
}
.axis-indexing-badge[data-indexing*="Crossref"] {
border-color: #ED1C24;
color: #ED1C24;
}
.axis-indexing-badge[data-indexing*="Crossref"]:hover {
background: #ED1C24;
color: white;
border-color: #ED1C24;
}
.axis-indexing-badge[data-indexing*="PubMed"] {
border-color: #326295;
color: #326295;
}
.axis-indexing-badge[data-indexing*="PubMed"]:hover {
background: #326295;
color: white;
border-color: #326295;
}
.axis-indexing-badge[data-indexing*="Google Scholar"],
.axis-indexing-badge[data-indexing*="Scholar"] {
border-color: #4285F4;
color: #4285F4;
}
.axis-indexing-badge[data-indexing*="Google Scholar"]:hover,
.axis-indexing-badge[data-indexing*="Scholar"]:hover {
background: #4285F4;
color: white;
border-color: #4285F4;
}
.axis-indexing-badge[data-indexing*="ProQuest"] {
border-color: #8B4513;
color: #8B4513;
}
.axis-indexing-badge[data-indexing*="ProQuest"]:hover {
background: #8B4513;
color: white;
border-color: #8B4513;
}
.axis-indexing-badge[data-indexing*="EBSCO"] {
border-color: #00A99D;
color: #00A99D;
}
.axis-indexing-badge[data-indexing*="EBSCO"]:hover {
background: #00A99D;
color: white;
border-color: #00A99D;
}
/* Dark mode for indexing badges */
html.dark-mode .axis-indexing-badge {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
}
html.dark-mode .axis-indexing-badge:hover {
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}
/* ================================================================
SECTION 2: Call to Action Cards
================================================================ */
.axis-cta-section {
background: var(--axis-background);
padding: 4rem 0;
}
.axis-cta-grid {
display: grid;
gap: 1.5rem;
grid-template-columns: repeat(2, 1fr); /* Mobile: 2 columns */
}
/* Adaptive Grid - RESPONSIVE BREAKPOINTS */
/* Tablet: 2x3 grid */
@media (min-width: 768px) and (max-width: 1023px) {
.axis-cta-grid {
grid-template-columns: repeat(2, 1fr);
}
}
/* Small Desktop: 3x2 grid */
@media (min-width: 1024px) and (max-width: 1439px) {
.axis-cta-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* Large Desktop: 6 columns! */
@media (min-width: 1440px) {
.axis-cta-grid {
grid-template-columns: repeat(6, 1fr);
}
}
/* CTA Card Design */
.axis-cta-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
padding: 2rem 1.5rem;
background: var(--axis-surface);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
text-decoration: none;
transition: all var(--axis-transition-normal);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.axis-cta-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
border-color: var(--axis-primary);
}
.axis-cta-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
background: rgba(var(--axis-primary-rgb), 0.1);
border-radius: var(--axis-radius-md);
margin-bottom: 1.25rem;
transition: all var(--axis-transition-normal);
}
.axis-cta-card__icon svg {
color: var(--axis-primary);
transition: all var(--axis-transition-normal);
}
.axis-cta-card:hover .axis-cta-card__icon {
background: var(--axis-primary);
transform: scale(1.05);
}
.axis-cta-card:hover .axis-cta-card__icon svg {
color: white;
}
.axis-cta-card__title {
font-size: 1.125rem;
font-weight: 700;
color: var(--axis-text-primary);
margin: 0 0 0.75rem 0;
line-height: 1.4;
}
.axis-cta-card__description {
font-size: 0.875rem;
line-height: 1.6;
color: var(--axis-text-secondary);
margin: 0 0 1.25rem 0;
flex-grow: 1;
}
.axis-cta-card__link {
font-size: 0.875rem;
font-weight: 600;
color: var(--axis-primary);
transition: all var(--axis-transition-normal);
}
.axis-cta-card:hover .axis-cta-card__link {
transform: translateX(4px);
}
/* Dark mode for CTA cards */
html.dark-mode .axis-cta-card {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.1);
}
html.dark-mode .axis-cta-card:hover {
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
/* Mobile: Stack all cards */
@media (max-width: 767px) {
.axis-cta-grid {
grid-template-columns: 1fr;
}
.axis-cta-card {
padding: 1.5rem;
}
.axis-cta-card__icon {
width: 48px;
height: 48px;
}
}
/* Narrow desktop (1440px): Optimize card padding for 6-column */
@media (min-width: 1440px) {
.axis-cta-card {
padding: 1.75rem 1.25rem;
}
.axis-cta-card__icon {
width: 52px;
height: 52px;
}
.axis-cta-card__title {
font-size: 1rem;
}
.axis-cta-card__description {
font-size: 0.8125rem;
}
}
/* CTA Card Hover - Fix text colors (no change on hover) */
.axis-cta-card:hover .axis-cta-card__title {
color: var(--axis-text-primary); /* Stay same */
}
.axis-cta-card:hover .axis-cta-card__description {
color: var(--axis-text-secondary); /* Stay same */
}
/* CTA Card - Prevent text color/underline changes on hover */
.axis-cta-card,
.axis-cta-card:hover,
.axis-cta-card:focus,
.axis-cta-card:active {
text-decoration: none !important;
}
.axis-cta-card .axis-cta-card__title {
color: var(--axis-text-primary);
text-decoration: none;
}
.axis-cta-card .axis-cta-card__description {
color: var(--axis-text-secondary);
text-decoration: none;
}
.axis-cta-card:hover .axis-cta-card__title,
.axis-cta-card:focus .axis-cta-card__title {
color: var(--axis-text-primary);
text-decoration: none;
}
.axis-cta-card:hover .axis-cta-card__description,
.axis-cta-card:focus .axis-cta-card__description {
color: var(--axis-text-secondary);
text-decoration: none;
}
/* ================================================================
/* ================================================================
ARCHIVE PAGE - 4 LAYOUTS
================================================================ */
/* Common Archive Page Styles */
.axis-archive-page {
padding: 2rem 0 4rem 0;
}
.axis-page-header {
text-align: center;
margin-bottom: 3rem;
}
.axis-page-title {
font-size: var(--axis-font-3xl);
font-weight: 700;
color: var(--axis-text-primary);
margin: 0 0 0.75rem 0;
}
.axis-page-description {
font-size: var(--axis-font-lg);
color: var(--axis-text-secondary);
margin: 0;
}
/* Year Section Common Styles */
.axis-archive-year__title {
font-size: var(--axis-font-2xl);
font-weight: 700;
color: var(--axis-primary);
margin: 0;
}
.axis-archive-year__stats {
font-size: var(--axis-font-sm);
color: var(--axis-text-secondary);
font-weight: 500;
}
.axis-archive-year__stats-separator {
margin: 0 0.5rem;
opacity: 0.5;
}
/* Issue Card Common Styles */
.axis-issue-card {
background: var(--axis-surface);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
overflow: hidden;
transition: all var(--axis-transition-normal);
}
.axis-issue-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
border-color: rgba(var(--axis-primary-rgb), 0.3);
}
.axis-issue-card__cover {
position: relative;
overflow: hidden;
background: var(--axis-background);
}
.axis-issue-card__cover img {
width: 100%;
height: auto;
display: block;
transition: transform var(--axis-transition-normal);
}
.axis-issue-card:hover .axis-issue-card__cover img {
transform: scale(1.05);
}
.axis-issue-card__badge {
background: var(--axis-primary);
color: white;
padding: 0.375rem 0.75rem;
border-radius: var(--axis-radius-md);
font-size: var(--axis-font-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
}
.axis-issue-card__content {
padding: 1.5rem;
}
.axis-issue-card__header-row {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
margin-bottom: 0.75rem;
}
.axis-issue-card__title {
font-size: var(--axis-font-lg);
font-weight: 700;
margin: 0;
flex: 1;
}
.axis-issue-card__title a {
color: var(--axis-text-primary);
text-decoration: none;
transition: color var(--axis-transition-normal);
}
.axis-issue-card__title a:hover {
color: var(--axis-primary);
}
.axis-issue-card__date {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: var(--axis-font-sm);
color: var(--axis-text-secondary);
margin-bottom: 0.75rem;
}
.axis-issue-card__date svg {
color: var(--axis-primary);
flex-shrink: 0;
}
.axis-issue-card__stats {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.axis-issue-card__stat {
display: flex;
align-items: center;
gap: 0.375rem;
font-size: var(--axis-font-sm);
color: var(--axis-text-secondary);
}
.axis-issue-card__stat svg {
color: var(--axis-primary);
flex-shrink: 0;
}
.axis-issue-card__description {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--axis-text-secondary);
margin-bottom: 1.25rem;
}
.axis-issue-card__actions {
display: flex;
gap: 0.75rem;
flex-wrap: wrap;
}
.axis-issue-card--current {
border-color: var(--axis-primary);
box-shadow: 0 0 0 1px rgba(var(--axis-primary-rgb), 0.1);
}
/* Current issue in cover layout - same as other cards */
html:not(.dark-mode) .axis-issue-card--current.axis-issue-card--cover {
border: none !important;
background: #FAFAFA !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
overflow: hidden !important;
}
html:not(.dark-mode) .axis-issue-card--current.axis-issue-card--cover:hover {
background: #F5F5F5 !important;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}
html.dark-mode .axis-issue-card--current.axis-issue-card--cover {
border: none !important;
box-shadow: none !important;
}
/* ================================================================
LAYOUT 1: ACCORDION
================================================================ */
.axis-archive-accordion {
/* Remove max-width restriction - use full container width like other layouts */
margin: 0 auto;
}
.axis-archive-year-section {
margin-bottom: 2rem;
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
overflow: hidden;
background: var(--axis-surface);
}
.axis-archive-year__toggle {
display: none;
}
.axis-archive-year__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.5rem 2rem;
background: var(--axis-surface);
cursor: pointer;
transition: all var(--axis-transition-normal);
border-bottom: 1px solid transparent;
}
.axis-archive-year__header:hover {
background: rgba(var(--axis-primary-rgb), 0.03);
}
.axis-archive-year__header-content {
display: flex;
align-items: center;
gap: 1.5rem;
flex: 1;
}
.axis-archive-year__icon {
color: var(--axis-primary);
transition: transform var(--axis-transition-normal);
flex-shrink: 0;
}
.axis-archive-year__toggle:checked + .axis-archive-year__header .axis-archive-year__icon {
transform: rotate(180deg);
}
.axis-archive-year__toggle:checked + .axis-archive-year__header {
border-bottom-color: var(--axis-border);
}
.axis-archive-year__content {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease-out;
}
.axis-archive-year__toggle:checked + .axis-archive-year__header + .axis-archive-year__content {
max-height: 10000px;
transition: max-height 0.6s ease-in;
}
.axis-issue-list {
padding: 1rem;
}
.axis-issue-card--accordion {
display: grid;
grid-template-columns: 180px minmax(220px, 1fr) 2fr;
gap: 1.5rem;
margin-bottom: 1rem;
align-items: start;
}
.axis-issue-card--accordion:last-child {
margin-bottom: 0;
}
.axis-issue-card--accordion .axis-issue-card__cover {
width: 100%;
border-radius: var(--axis-radius-md);
overflow: hidden;
}
/* Cover image - height-based, no cropping */
.axis-issue-card--accordion .axis-issue-card__cover img {
width: 100%;
height: auto;
display: block;
object-fit: contain;
max-height: 280px;
}
.axis-issue-card--accordion .axis-issue-card__content {
/* Meta column - flexible */
}
/* Description Column (3rd column) */
.axis-issue-card__description-column {
font-size: 0.9375rem;
line-height: 1.65;
color: var(--axis-text-secondary);
padding-left: 1.5rem;
border-left: 2px solid var(--axis-border);
}
/* Accordion: Badge on right side, not on cover */
.axis-issue-card--accordion .axis-issue-card__badge {
flex-shrink: 0;
}
/* ================================================================
LAYOUT 2: GRID BY YEAR (improved spacing)
================================================================ */
.axis-archive-grid-by-year {
max-width: 1200px;
margin: 0 auto;
}
.axis-archive-grid-by-year .axis-archive-year-section {
margin-bottom: 4rem;
padding: 2rem;
background: var(--axis-surface);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
}
.axis-archive-year__header-grid {
display: flex;
align-items: center;
justify-content: space-between;
padding-bottom: 1.5rem;
margin-bottom: 2rem;
border-bottom: 2px solid var(--axis-border);
}
.axis-issue-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
gap: 2rem;
}
.axis-issue-card--grid {
display: flex;
flex-direction: column;
}
.axis-issue-card--grid .axis-issue-card__cover {
aspect-ratio: 3 / 4;
}
.axis-issue-card--grid .axis-issue-card__cover img {
width: 100%;
height: 100%;
object-fit: cover;
}
.axis-issue-card--grid .axis-issue-card__badge {
position: absolute;
top: 0.75rem;
right: 0.75rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}
.axis-issue-card--grid .axis-issue-card__content {
flex: 1;
display: flex;
flex-direction: column;
}
.axis-issue-card--grid .axis-issue-card__actions {
margin-top: auto;
}
/* ================================================================
LAYOUT 3: GRID WITH COVERS (4 columns - NIVO style)
================================================================ */
.axis-archive-grid-covers {
max-width: 1400px;
margin: 0 auto;
}
.axis-issue-grid-covers {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 2rem;
}
/* Light mode - no padding, mockup at edges */
html:not(.dark-mode) .axis-issue-card--cover {
text-align: center;
background: #FAFAFA;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
border-radius: var(--axis-radius-lg);
overflow: hidden;
}
html:not(.dark-mode) .axis-issue-card--cover .axis-cover-mockup {
border-radius: 0 !important; /* Remove border-radius to align with card edges */
}
html:not(.dark-mode) .axis-issue-card--cover:hover {
background: #F5F5F5;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
transform: translateY(-4px);
}
/* Dark mode - keep transparent */
html.dark-mode .axis-issue-card--cover {
text-align: center;
border: none !important;
background: transparent;
box-shadow: none !important;
}
html.dark-mode .axis-issue-card--cover .axis-cover-mockup {
border-radius: 0 !important; /* Remove border-radius to align with card edges */
}
html.dark-mode .axis-issue-card--cover:hover {
transform: translateY(-4px);
box-shadow: none;
}
.axis-issue-card--cover .axis-issue-card__cover {
margin-bottom: 1rem;
border-radius: var(--axis-radius-lg);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
transition: all var(--axis-transition-normal);
position: relative;
}
.axis-issue-card--cover:hover .axis-issue-card__cover {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.axis-issue-card--cover .axis-issue-card__cover img {
aspect-ratio: 3 / 4;
object-fit: cover;
border-radius: var(--axis-radius-lg);
}
.axis-issue-card--cover .axis-issue-card__badge--cover {
position: absolute;
top: 0.5rem;
right: 0.5rem;
font-size: 0.625rem;
padding: 0.25rem 0.5rem;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
/* Light mode - info area with background */
html:not(.dark-mode) .axis-issue-card--cover .axis-issue-card__info {
padding: 1rem 1.25rem;
background: #FFFFFF;
margin-top: 0;
}
/* Dark mode - transparent info area */
html.dark-mode .axis-issue-card--cover .axis-issue-card__info {
padding: 0;
background: transparent;
}
.axis-issue-card--cover .axis-issue-card__title {
font-size: 1rem;
margin-bottom: 0.5rem;
}
.axis-issue-card--cover .axis-issue-card__date {
justify-content: center;
font-size: 0.8125rem;
margin: 0;
}
.axis-issue-card--cover .axis-issue-card__date svg {
width: 12px;
height: 12px;
}
/* ================================================================
LAYOUT 4: COMPACT LIST BY YEAR (NIVO style)
================================================================ */
.axis-archive-compact-list {
max-width: 1200px;
margin: 0 auto;
}
.axis-compact-year-section {
margin-bottom: 3rem;
}
.axis-compact-year__header {
background: var(--axis-surface);
padding: 1rem 1.5rem;
border-radius: var(--axis-radius-lg);
margin-bottom: 1rem;
border: 1px solid var(--axis-border);
}
.axis-compact-year__title {
font-size: 1.75rem;
font-weight: 700;
color: var(--axis-primary);
margin: 0;
}
.axis-compact-issue-list {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 0;
background: var(--axis-surface);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
overflow: hidden;
}
.axis-compact-issue {
border-right: 1px solid var(--axis-border);
border-bottom: 1px solid var(--axis-border);
}
.axis-compact-issue:nth-child(4n) {
border-right: none;
}
.axis-compact-issue__link {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 1rem 1.25rem;
text-decoration: none;
color: var(--axis-text-primary);
transition: all var(--axis-transition-normal);
}
.axis-compact-issue__link:hover {
background: rgba(var(--axis-primary-rgb), 0.05);
color: var(--axis-primary);
}
.axis-compact-issue__title {
font-weight: 600;
font-size: 0.9375rem;
}
.axis-compact-issue__badge {
background: var(--axis-primary);
color: white;
padding: 0.25rem 0.5rem;
border-radius: var(--axis-radius-sm);
font-size: 0.625rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
}
/* ================================================================
RESPONSIVE
================================================================ */
/* Grid with Covers: Responsive */
@media (max-width: 1280px) {
.axis-issue-grid-covers {
grid-template-columns: repeat(3, 1fr);
}
.axis-compact-issue-list {
grid-template-columns: repeat(3, 1fr);
}
.axis-compact-issue:nth-child(4n) {
border-right: 1px solid var(--axis-border);
}
.axis-compact-issue:nth-child(3n) {
border-right: none;
}
}
@media (max-width: 1024px) {
.axis-issue-grid-covers {
grid-template-columns: repeat(2, 1fr);
}
.axis-compact-issue-list {
grid-template-columns: repeat(2, 1fr);
}
.axis-compact-issue:nth-child(3n) {
border-right: 1px solid var(--axis-border);
}
.axis-compact-issue:nth-child(2n) {
border-right: none;
}
}
@media (max-width: 767px) {
.axis-page-title {
font-size: 2rem;
}
.axis-page-description {
font-size: 1rem;
}
.axis-archive-year__title {
font-size: var(--axis-font-xl);
}
.axis-archive-year__header {
padding: 1rem 1.5rem;
}
.axis-archive-year__header-content {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.axis-issue-card--accordion {
flex-direction: column;
}
.axis-issue-card--accordion .axis-issue-card__cover {
width: 100%;
}
.axis-issue-grid {
grid-template-columns: 1fr;
}
.axis-issue-grid-covers {
grid-template-columns: 1fr;
}
.axis-compact-issue-list {
grid-template-columns: 1fr;
}
.axis-compact-issue {
border-right: none;
}
.axis-archive-grid-by-year .axis-archive-year-section {
padding: 1.5rem;
}
}
/* ================================================================
DARK MODE
================================================================ */
html.dark-mode .axis-issue-card {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.1);
}
html.dark-mode .axis-issue-card:hover {
background: rgba(255, 255, 255, 0.05);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
html.dark-mode .axis-archive-year__header:hover {
background: rgba(255, 255, 255, 0.03);
}
html.dark-mode .axis-compact-year__header {
background: rgba(255, 255, 255, 0.03);
}
html.dark-mode .axis-compact-issue-list {
background: rgba(255, 255, 255, 0.03);
}
html.dark-mode .axis-compact-issue__link:hover {
background: rgba(var(--axis-primary-rgb), 0.1);
}
html.dark-mode .axis-archive-grid-by-year .axis-archive-year-section {
background: rgba(255, 255, 255, 0.03);
}
/* ================================================================
MOCKUP COVER (Grid with Covers layout - when no image)
================================================================ */
/* ================================================
MOCKUP COVER - CLEAN VERSION (v2.5.6)
================================================ */
/* ===== BASE STYLES ===== */
.axis-cover-mockup {
aspect-ratio: 3 / 4;
display: flex;
align-items: center;
justify-content: center;
position: relative;
overflow: hidden;
border-radius: var(--axis-radius-lg);
transition: all var(--axis-transition-normal);
}
/* ===== LIGHT MODE ===== */
html:not(.dark-mode) .axis-cover-mockup {
/* Background: Neutral elegant */
background: linear-gradient(
135deg,
rgba(0, 0, 0, 0.08) 0%,
rgba(0, 0, 0, 0.04) 50%,
rgba(0, 0, 0, 0.08) 100%
);
background-color: #F8F9FA;
/* Border: Admin color accent */
border: 4px solid rgba(var(--axis-primary-rgb), 0.7);
/* Text: Dark for contrast */
color: #1F2937;
/* Shadows */
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.15),
inset 0 0 0 1px rgba(255, 255, 255, 0.1),
inset 0 0 60px rgba(0, 0, 0, 0.05);
}
/* Texture overlay (light mode) */
html:not(.dark-mode) .axis-cover-mockup::before {
content: '';
position: absolute;
inset: 0;
background-image:
repeating-linear-gradient(
0deg,
rgba(255, 255, 255, 0.03) 0px,
transparent 1px,
transparent 2px,
rgba(255, 255, 255, 0.03) 3px
),
repeating-linear-gradient(
90deg,
rgba(255, 255, 255, 0.03) 0px,
transparent 1px,
transparent 2px,
rgba(255, 255, 255, 0.03) 3px
);
pointer-events: none;
}
/* Hover (light mode) */
html:not(.dark-mode) .axis-issue-card:hover .axis-cover-mockup {
border-color: rgba(var(--axis-primary-rgb), 0.9);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.2),
inset 0 0 0 1px rgba(255, 255, 255, 0.15),
inset 0 0 60px rgba(0, 0, 0, 0.08);
}
/* ===== DARK MODE ===== */
html.dark-mode .axis-cover-mockup {
/* Background: Sophisticated dark */
background: linear-gradient(
135deg,
rgba(255, 255, 255, 0.08) 0%,
rgba(255, 255, 255, 0.04) 50%,
rgba(255, 255, 255, 0.08) 100%
) !important;
background-color: #1F2937 !important;
/* Border: Admin color accent (softer) */
border: 4px solid rgba(var(--axis-primary-rgb), 0.6) !important;
/* Text: Light for contrast */
color: #F3F4F6 !important;
/* Shadows (subtle in dark) */
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.3),
inset 0 0 0 1px rgba(255, 255, 255, 0.05),
inset 0 0 60px rgba(0, 0, 0, 0.1) !important;
}
/* CRITICAL: Override link styles inside mockup */
/* Remove underline from link itself */
a:has(.axis-cover-mockup),
a:hover:has(.axis-cover-mockup),
a:focus:has(.axis-cover-mockup) {
text-decoration: none !important;
}
/* Remove underline from mockup container */
a .axis-cover-mockup,
a:hover .axis-cover-mockup,
a:focus .axis-cover-mockup {
text-decoration: none !important;
}
/* Remove underline from all children */
a .axis-cover-mockup *,
a:hover .axis-cover-mockup *,
a:focus .axis-cover-mockup * {
text-decoration: none !important;
}
/* Hover (dark mode) */
html.dark-mode .axis-issue-card:hover .axis-cover-mockup {
border-color: rgba(var(--axis-primary-rgb), 0.8);
box-shadow:
0 8px 24px rgba(0, 0, 0, 0.4),
inset 0 0 0 1px rgba(255, 255, 255, 0.1),
inset 0 0 60px rgba(0, 0, 0, 0.15);
}
/* ===== CONTENT WRAPPER ===== */
.axis-cover-mockup__content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 0.75rem;
padding: 2rem 1.5rem;
width: 100%;
text-align: center;
position: relative;
z-index: 1;
}
/* ===== ISSUE LABEL BOX ===== */
/* Light mode */
html:not(.dark-mode) .axis-cover-mockup__label,
a html:not(.dark-mode) .axis-cover-mockup__label {
display: inline-block;
padding: 0.5rem 1rem;
font-size: 1rem;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
background: rgba(31, 41, 55, 0.15);
border: 2px solid rgba(31, 41, 55, 0.3);
border-radius: var(--axis-radius-md);
color: #1F2937;
margin-bottom: 0.5rem;
}
/* Dark mode */
html.dark-mode .axis-cover-mockup__label,
a html.dark-mode .axis-cover-mockup__label {
display: inline-block !important;
padding: 0.5rem 1rem !important;
font-size: 1rem !important;
font-weight: 700 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
margin-bottom: 0.5rem !important;
border-radius: var(--axis-radius-md) !important;
background: rgba(255, 255, 255, 0.15) !important;
border: 2px solid rgba(255, 255, 255, 0.3) !important;
color: #F9FAFB !important;
}
/* ===== LINE (LABEL:VALUE PAIRS) ===== */
.axis-cover-mockup__line {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.25rem;
margin-bottom: 0.5rem;
}
/* Labels (VOLUME:, ISSUE:, YEAR:) */
/* Light mode */
html:not(.dark-mode) .axis-cover-mockup__line-label,
a html:not(.dark-mode) .axis-cover-mockup__line-label {
font-size: 1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: rgba(31, 41, 55, 0.7);
}
/* Dark mode */
html.dark-mode .axis-cover-mockup__line-label,
a html.dark-mode .axis-cover-mockup__line-label {
font-size: 1rem !important;
font-weight: 600 !important;
text-transform: uppercase !important;
letter-spacing: 0.1em !important;
color: rgba(243, 244, 246, 0.7) !important;
}
/* Values (3, 4, 2021) - LARGE & BOLD */
/* Light mode */
html:not(.dark-mode) .axis-cover-mockup__line-value,
a html:not(.dark-mode) .axis-cover-mockup__line-value {
font-size: 2rem;
font-weight: 800;
line-height: 1.2;
color: #111827;
}
/* Dark mode */
html.dark-mode .axis-cover-mockup__line-value,
a html.dark-mode .axis-cover-mockup__line-value {
font-size: 2rem !important;
font-weight: 800 !important;
line-height: 1.2 !important;
color: #FFFFFF !important;
}
/* ===== TITLE (Special Issue) ===== */
/* Light mode */
html:not(.dark-mode) .axis-cover-mockup__title,
a html:not(.dark-mode) .axis-cover-mockup__title {
font-size: 1.25rem;
font-weight: 600;
font-style: italic;
padding-top: 0.75rem;
border-top: 1px solid rgba(31, 41, 55, 0.2);
margin-top: 0.5rem;
color: rgba(31, 41, 55, 0.85);
}
/* Dark mode */
html.dark-mode .axis-cover-mockup__title,
a html.dark-mode .axis-cover-mockup__title {
font-size: 1.25rem !important;
font-weight: 600 !important;
font-style: italic !important;
padding-top: 0.75rem !important;
margin-top: 0.5rem !important;
border-top: 1px solid rgba(255, 255, 255, 0.2) !important;
color: rgba(249, 250, 251, 0.9) !important;
}
/* ===== DEPRECATED (Hide old styles) ===== */
.axis-cover-mockup__identification,
.axis-cover-mockup__year {
display: none;
}
/* ================================================================
COVER PLACEHOLDER (Grid with Real Covers - No Cover Fallback)
================================================================ */
.axis-cover-placeholder {
width: 100%;
aspect-ratio: 3 / 4;
display: flex;
align-items: center;
justify-content: center;
background: var(--axis-surface);
border: 2px dashed var(--axis-border);
border-radius: var(--axis-radius-lg);
transition: all var(--axis-transition-normal);
}
.axis-cover-placeholder__content {
text-align: center;
padding: 2rem;
opacity: 0.5;
}
.axis-cover-placeholder__icon {
display: block;
margin: 0 auto 1rem;
color: var(--axis-text-secondary);
}
.axis-cover-placeholder__text {
font-size: 0.875rem;
font-weight: 500;
color: var(--axis-text-secondary);
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Hover effect */
.axis-issue-card--cover:hover .axis-cover-placeholder {
border-color: var(--axis-primary);
background: rgba(var(--axis-primary-rgb), 0.03);
}
.axis-issue-card--cover:hover .axis-cover-placeholder__content {
opacity: 0.7;
}
/* Dark mode */
html.dark-mode .axis-cover-placeholder {
background: rgba(255, 255, 255, 0.02);
border-color: rgba(255, 255, 255, 0.1);
}
html.dark-mode .axis-issue-card--cover:hover .axis-cover-placeholder {
border-color: rgba(var(--axis-primary-rgb), 0.6);
background: rgba(var(--axis-primary-rgb), 0.05);
}
/* ================================================================
ACCORDION RESPONSIVE
================================================================ */
@media (max-width: 992px) {
.axis-issue-card--accordion {
grid-template-columns: 140px minmax(180px, 1fr) 1.5fr;
gap: 1rem;
}
/* Cover image - smaller max-height on tablet */
.axis-issue-card--accordion .axis-issue-card__cover img {
max-height: 220px;
}
.axis-cover-placeholder-accordion {
height: 200px;
}
.axis-issue-card__description-column {
padding-left: 1rem;
font-size: 0.875rem;
}
}
@media (max-width: 768px) {
.axis-issue-card--accordion {
grid-template-columns: 1fr;
}
/* Cover image - full width on mobile */
.axis-issue-card--accordion .axis-issue-card__cover img {
max-height: none;
max-width: 400px;
margin: 0 auto;
}
.axis-cover-placeholder-accordion {
height: 300px;
max-width: 400px;
margin: 0 auto;
}
.axis-issue-card__description-column {
padding-left: 0;
padding-top: 1rem;
border-left: none;
border-top: 1px solid var(--axis-border);
}
}
/* Dark mode - description column */
html.dark-mode .axis-issue-card__description-column {
color: rgba(255, 255, 255, 0.65);
border-left-color: rgba(255, 255, 255, 0.1);
}
@media (max-width: 768px) {
html.dark-mode .axis-issue-card__description-column {
border-top-color: rgba(255, 255, 255, 0.1);
}
}
/* ================================================================
ACCORDION PLACEHOLDER (when no cover image)
================================================================ */
.axis-cover-placeholder-accordion {
width: 100%;
height: 240px;
display: flex;
align-items: center;
justify-content: center;
background: var(--axis-surface);
border: 2px dashed var(--axis-border);
border-radius: var(--axis-radius-md);
}
.axis-cover-placeholder-accordion svg {
opacity: 0.3;
color: var(--axis-text-secondary);
}
/* Dark mode */
html.dark-mode .axis-cover-placeholder-accordion {
background: rgba(255, 255, 255, 0.02);
border-color: rgba(255, 255, 255, 0.1);
}
/* ================================================================
ACCORDION - NO COVER (2 column layout)
================================================================ */
.axis-issue-card--no-cover {
grid-template-columns: minmax(250px, 1fr) 2fr !important;
}
@media (max-width: 992px) {
.axis-issue-card--no-cover {
grid-template-columns: minmax(200px, 1fr) 1.5fr !important;
}
}
@media (max-width: 768px) {
.axis-issue-card--no-cover {
grid-template-columns: 1fr !important;
}
}
/* Issue header - no cover (single column) */
.axis-issue-header__wrapper:has(.axis-issue-header__info:first-child) {
grid-template-columns: 1fr;
}
/* Dark mode - Table of Contents title */
html.dark-mode .axis-issue-articles .axis-section__title {
border-color: rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.02);
}
html.dark-mode .axis-issue-articles .axis-section__title::after {
background: linear-gradient(90deg,
transparent 0%,
var(--axis-primary) 50%,
transparent 100%);
}
/* ============================================================================
ARTICLE DETAIL PAGE - 2-COLUMN LAYOUT
========================================================================== */
/* Article page container - 2 columns */
.axis-article-page {
display: grid;
grid-template-columns: 300px 1fr;
gap: calc(var(--axis-spacing-unit) * 3);
max-width: var(--axis-container-width);
margin: 0 auto;
padding: calc(var(--axis-spacing-unit) * 3) var(--axis-spacing-unit);
}
@media (max-width: 1024px) {
.axis-article-page {
grid-template-columns: 1fr;
gap: calc(var(--axis-spacing-unit) * 2);
}
.axis-article-sidebar {
order: 2; /* Move sidebar below content on mobile */
}
}
/* ============================================================================
ARTICLE SIDEBAR (Left column - Metadata)
========================================================================== */
.axis-article-sidebar {
/* Sticky removed - let content flow naturally */
}
.axis-sidebar-block {
margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
padding-bottom: calc(var(--axis-spacing-unit) * 1.5);
border-bottom: 1px solid var(--axis-border);
}
.axis-sidebar-block:last-child {
border-bottom: none;
}
.axis-sidebar-block__title {
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--axis-text-secondary);
margin: 0 0 0.75rem 0;
}
.axis-sidebar-block__content {
font-size: 0.9375rem;
line-height: 1.6;
color: var(--axis-text);
}
.axis-sidebar-block__content--small {
font-size: 0.8125rem;
line-height: 1.7;
}
.axis-sidebar-link {
color: var(--axis-primary);
text-decoration: none;
transition: color var(--axis-transition-normal);
}
.axis-sidebar-link:hover {
color: #291fd9;
text-decoration: underline;
}
/* Keywords list */
.axis-keyword-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.axis-keyword-item {
background: var(--axis-background-secondary);
padding: 0.375rem 0.75rem;
border-radius: var(--axis-radius-sm);
font-size: 0.8125rem;
color: var(--axis-text-secondary);
border: 1px solid var(--axis-border);
}
/* Galley buttons (Downloads) */
.axis-galley-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.axis-galley-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
background: var(--axis-primary);
color: white;
text-decoration: none;
border-radius: var(--axis-radius-md);
font-weight: 500;
font-size: 0.9375rem;
transition: all var(--axis-transition-normal);
}
.axis-galley-button:hover {
background: #291fd9;
transform: translateY(-2px);
box-shadow: var(--axis-shadow-md);
}
.axis-galley-button svg {
flex-shrink: 0;
}
/* Dark mode sidebar */
html.dark-mode .axis-keyword-item {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
}
/* ============================================================================
ARTICLE MAIN (Right column - Content)
========================================================================== */
.axis-article-main {
min-width: 0; /* Prevent grid overflow */
}
/* Article header */
.axis-article-header {
margin-bottom: calc(var(--axis-spacing-unit) * 2);
}
.axis-article-header__title {
font-size: var(--axis-font-2xl);
font-weight: 700;
line-height: 1.3;
margin: 0 0 1rem 0;
color: var(--axis-text);
}
.axis-article-header__subtitle {
font-size: var(--axis-font-xl);
font-weight: 400;
line-height: 1.4;
margin: 0;
color: var(--axis-text-secondary);
}
/* ============================================================================
AUTHORS & AFFILIATIONS
========================================================================== */
.axis-article-authors {
margin-bottom: calc(var(--axis-spacing-unit) * 3);
padding-bottom: calc(var(--axis-spacing-unit) * 2);
border-bottom: 1px solid var(--axis-border);
}
/* Author list */
.axis-author-list {
list-style: none;
padding: 0;
margin: 0 0 1.5rem 0;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.axis-author-item {
display: inline;
white-space: nowrap; /* Prevent wrapping within author name */
}
.axis-author-item::after {
content: ', '; /* Comma + space together */
color: var(--axis-text-secondary);
}
.axis-author-item:last-child::after {
content: '';
}
.axis-author-name {
font-size: var(--axis-font-base);
font-weight: 500;
color: var(--axis-text);
}
.axis-author-affiliation-number {
font-size: var(--axis-font-xs);
color: var(--axis-primary);
font-weight: 600;
margin-left: 0.15rem; /* Small space between name and number */
}
.axis-author-orcid {
display: inline-flex;
align-items: center;
margin-left: 0.25rem;
}
.axis-author-orcid svg {
width: 16px;
height: 16px;
}
.axis-author-corresponding {
color: var(--axis-primary);
font-size: var(--axis-font-sm);
}
/* Affiliations list (numbered) */
.axis-affiliation-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.axis-affiliation-item {
display: flex;
gap: 0.5rem;
font-size: var(--axis-font-sm);
line-height: var(--axis-leading-normal);
color: var(--axis-text-secondary);
}
.axis-affiliation-number {
color: var(--axis-primary);
font-weight: 600;
flex-shrink: 0;
}
.axis-affiliation-text {
flex: 1;
}
/* ============================================================================
ARTICLE SECTIONS
========================================================================== */
.axis-article-abstract,
.axis-article-citation,
.axis-article-references {
margin-bottom: calc(var(--axis-spacing-unit) * 3);
}
.axis-article-section-title {
font-size: var(--axis-font-xl);
font-weight: 600;
margin: 0 0 1.5rem 0;
color: var(--axis-text);
position: relative;
padding-bottom: 0.75rem;
}
.axis-article-section-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background: var(--axis-primary);
border-radius: 2px;
}
/* Abstract */
.axis-article-abstract__content {
font-size: var(--axis-font-md);
line-height: var(--axis-leading-relaxed);
color: var(--axis-text);
}
/* ============================================================================
HOW TO CITE - Tab-based with CSL Plugin
========================================================================== */
.axis-article-citation {
margin: calc(var(--axis-spacing-unit) * 3) 0;
}
/* Tab Buttons */
.axis-citation-tab-buttons {
display: flex;
flex-wrap: wrap;
gap: 0.25rem !important;
margin-bottom: 1.5rem;
border-bottom: 2px solid var(--axis-border);
padding-bottom: 1rem;
}
.axis-citation-tab-button {
padding: 0.375rem 0.625rem !important;
background: transparent;
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-sm);
font-size: 0.75rem !important;
font-weight: 500;
color: var(--axis-text-secondary);
cursor: pointer;
transition: all var(--axis-transition-normal);
white-space: nowrap;
}
.axis-citation-tab-button:hover {
background: var(--axis-background-secondary);
border-color: var(--axis-primary);
color: var(--axis-text);
}
.axis-citation-tab-button--active {
background: var(--axis-primary);
border-color: var(--axis-primary);
color: white;
}
.axis-citation-tab-button--active:hover {
background: var(--axis-primary);
color: white;
}
/* Citation Output */
.axis-citation-output {
padding: 1.5rem;
background: var(--axis-background-secondary);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-md);
font-size: 0.9375rem;
line-height: 1.8;
color: var(--axis-text);
min-height: 80px;
}
.axis-citation-output em {
font-style: italic;
}
/* Download Buttons */
.axis-citation-downloads {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
margin-top: 1rem;
}
.axis-citation-download-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
background: transparent;
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-sm);
font-size: 0.875rem;
font-weight: 500;
color: var(--axis-text);
text-decoration: none;
transition: all var(--axis-transition-normal);
}
.axis-citation-download-btn:hover {
background: var(--axis-background-secondary);
border-color: var(--axis-primary);
color: var(--axis-primary);
}
.axis-citation-download-btn svg {
width: 16px;
height: 16px;
flex-shrink: 0;
}
/* Dark mode citation */
html.dark-mode .axis-citation-output {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.1);
}
html.dark-mode .axis-citation-tab-button {
border-color: rgba(255, 255, 255, 0.1);
}
html.dark-mode .axis-citation-tab-button:hover {
background: rgba(255, 255, 255, 0.05);
border-color: var(--axis-primary);
}
html.dark-mode .axis-citation-download-btn {
border-color: rgba(255, 255, 255, 0.1);
}
html.dark-mode .axis-citation-download-btn:hover {
background: rgba(255, 255, 255, 0.05);
}
/* Mobile responsive */
@media (max-width: 768px) {
.axis-citation-tab-buttons {
gap: 0.375rem;
}
.axis-citation-tab-button {
padding: 0.5rem 1rem;
font-size: 0.875rem;
}
.axis-citation-output {
padding: 1rem;
font-size: 0.875rem;
}
.axis-citation-downloads {
flex-direction: column;
}
.axis-citation-download-btn {
justify-content: center;
}
}
html.dark-mode .axis-citation-summary:hover {
background: rgba(255, 255, 255, 0.05);
}
/* ============================================================================
REFERENCES
========================================================================== */
.axis-reference-list {
list-style: none;
counter-reset: reference-counter;
padding: 0;
margin: 0;
}
.axis-reference-item {
counter-increment: reference-counter;
display: flex;
gap: 1rem;
margin-bottom: 1.25rem;
font-size: 0.9375rem;
line-height: 1.7;
color: var(--axis-text);
}
.axis-reference-item::before {
content: counter(reference-counter);
flex-shrink: 0;
width: 28px;
height: 28px;
display: flex;
align-items: center;
justify-content: center;
background: var(--axis-background-secondary);
border: 1px solid var(--axis-border);
border-radius: 50%;
font-weight: 600;
font-size: 0.8125rem;
color: var(--axis-primary);
}
.axis-references-raw {
font-size: 0.9375rem;
line-height: 1.7;
color: var(--axis-text);
}
/* Dark mode references */
html.dark-mode .axis-reference-item::before {
background: rgba(255, 255, 255, 0.05);
}
/* ============================================================================
RESPONSIVE - Mobile
========================================================================== */
@media (max-width: 768px) {
.axis-article-header__title {
font-size: var(--axis-font-xl);
}
.axis-article-header__subtitle {
font-size: var(--axis-font-lg);
}
.axis-article-section-title {
font-size: var(--axis-font-lg);
}
.axis-article-abstract__content {
font-size: var(--axis-font-base);
}
}
/* ============================================================================
ARTICLE PAGE - v2.9.1 FIXES
========================================================================== */
/* Sidebar divider - subtle border on right */
.axis-article-sidebar {
border-right: 1px solid var(--axis-border);
padding-right: calc(var(--axis-spacing-unit) * 3);
}
html.dark-mode .axis-article-sidebar {
border-right-color: rgba(255, 255, 255, 0.1);
}
/* Issue cover image */
.axis-issue-cover {
display: block;
margin-bottom: 1rem;
}
.axis-issue-cover__image {
width: 100%;
height: auto;
border-radius: var(--axis-radius-md);
border: 1px solid var(--axis-border);
}
/* Authors - inline display */
.axis-author-list {
display: inline;
margin: 0 0 1.5rem 0;
line-height: 1.8;
}
.axis-author-item {
display: inline;
font-size: var(--axis-font-base);
font-weight: 500;
color: var(--axis-text);
white-space: nowrap; /* Prevent wrapping within author name */
}
.axis-author-item::after {
content: none; /* Remove old comma */
}
/* ============================================================================
CITATION TABS
========================================================================== */
.axis-citation-tabs {
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-md);
overflow: hidden;
}
.axis-citation-tab-buttons {
display: flex;
border-bottom: 1px solid var(--axis-border);
background: var(--axis-background-secondary);
}
.axis-citation-tab-button {
flex: 1;
padding: 0.875rem 1rem;
background: transparent;
border: none;
border-right: 1px solid var(--axis-border);
font-size: 0.9375rem;
font-weight: 500;
color: var(--axis-text-secondary);
cursor: pointer;
transition: all var(--axis-transition-normal);
}
.axis-citation-tab-button:last-child {
border-right: none;
}
.axis-citation-tab-button:hover {
background: var(--axis-background);
color: var(--axis-text);
}
.axis-citation-tab-button--active {
background: var(--axis-background);
color: var(--axis-primary);
font-weight: 600;
position: relative;
}
.axis-citation-tab-button--active::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: var(--axis-primary);
}
.axis-citation-tab-contents {
position: relative;
}
.axis-citation-tab-content {
display: none;
padding: 1.5rem;
}
.axis-citation-tab-content--active {
display: block;
}
.axis-citation-text {
font-size: 0.9375rem;
line-height: 1.8;
color: var(--axis-text);
}
.axis-citation-bibtex {
background: var(--axis-background-secondary);
padding: 1rem;
border-radius: var(--axis-radius-sm);
border: 1px solid var(--axis-border);
font-family: 'Courier New', Courier, monospace;
font-size: 0.875rem;
line-height: 1.6;
color: var(--axis-text);
overflow-x: auto;
}
/* Dark mode */
html.dark-mode .axis-citation-tab-buttons {
background: rgba(255, 255, 255, 0.03);
}
html.dark-mode .axis-citation-tab-button--active {
background: rgba(255, 255, 255, 0.05);
}
html.dark-mode .axis-citation-bibtex {
background: rgba(255, 255, 255, 0.05);
}
/* ============================================================================
REFERENCES - SHOW MORE/LESS
========================================================================== */
.axis-reference-item--hidden {
display: none;
}
.axis-reference-toggle {
text-align: center;
margin-top: 2rem;
padding-top: 1.5rem;
border-top: 1px solid var(--axis-border);
}
.axis-reference-toggle-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
background: var(--axis-background-secondary);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-md);
font-size: 0.9375rem;
font-weight: 500;
color: var(--axis-text);
cursor: pointer;
transition: all var(--axis-transition-normal);
}
.axis-reference-toggle-btn:hover {
background: var(--axis-background);
border-color: var(--axis-primary);
color: var(--axis-primary);
}
.axis-reference-toggle-icon {
transition: transform var(--axis-transition-normal);
}
/* Dark mode */
html.dark-mode .axis-reference-toggle-btn {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
}
html.dark-mode .axis-reference-toggle-btn:hover {
background: rgba(255, 255, 255, 0.08);
}
/* ============================================================================
GALLEY BUTTON HOVER FIX
========================================================================== */
.axis-galley-button {
color: white !important; /* Force white text */
}
.axis-galley-button:hover {
background: #291fd9;
color: white !important; /* Force white text on hover */
}
html.dark-mode .axis-galley-button {
color: white !important;
}
html.dark-mode .axis-galley-button:hover {
background: #291fd9;
color: white !important;
}
/* ============================================================================
ARTICLE SIDEBAR - ISSUE BLOCK (v2.9.3)
========================================================================== */
/* Issue block - no border on top for cover image */
.axis-sidebar-block--issue {
padding-bottom: calc(var(--axis-spacing-unit) * 2);
border-bottom: 1px solid var(--axis-border);
}
/* Issue cover in sidebar */
.axis-issue-cover {
display: block;
margin-bottom: 1rem;
}
.axis-issue-cover__image {
width: 100%;
height: auto;
border-radius: var(--axis-radius-md);
border: 1px solid var(--axis-border);
}
/* Issue identification link */
.axis-sidebar-link--issue {
display: block;
font-weight: 600;
font-size: 0.9375rem;
margin-bottom: 1.5rem;
}
/* Subtitle for galley section */
.axis-sidebar-block__subtitle {
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--axis-text-secondary);
margin: 0 0 0.75rem 0;
}
/* Galley list in sidebar - compact */
.axis-sidebar-block--issue .axis-galley-list {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
/* Galley buttons in sidebar - smaller, cleaner */
.axis-sidebar-block--issue .axis-galley-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.625rem 1rem;
background: var(--axis-primary);
color: white !important;
text-decoration: none;
border-radius: var(--axis-radius-md);
font-weight: 500;
font-size: 0.875rem;
transition: all var(--axis-transition-normal);
}
.axis-sidebar-block--issue .axis-galley-button:hover {
background: #291fd9;
transform: translateY(-1px);
box-shadow: var(--axis-shadow-sm);
color: white !important;
}
.axis-sidebar-block--issue .axis-galley-button svg {
flex-shrink: 0;
}
/* Dark mode */
html.dark-mode .axis-sidebar-block--issue .axis-galley-button {
color: white !important;
}
html.dark-mode .axis-sidebar-block--issue .axis-galley-button:hover {
background: #291fd9;
color: white !important;
}
/* ============================================================================
ABOUT & INFO PAGES - UNIFIED STYLES
========================================================================== */
/* Page wrapper */
.axis-page {
min-height: 60vh;
}
.axis-page-container {
max-width: var(--axis-container-width);
margin: 0 auto;
padding: calc(var(--axis-spacing-unit) * 2) var(--axis-spacing-unit);
}
/* Page header */
.axis-page-header {
margin-bottom: calc(var(--axis-spacing-unit) * 3);
padding-bottom: calc(var(--axis-spacing-unit) * 2);
border-bottom: 2px solid var(--axis-border);
}
.axis-page-title {
font-size: var(--axis-font-3xl);
font-weight: 700;
line-height: 1.2;
margin: 0;
color: var(--axis-text);
}
@media (max-width: 768px) {
.axis-page-title {
font-size: 2rem;
}
}
/* Page content */
.axis-page-content {
/* Full width - no restriction */
}
/* Content sections */
.axis-content-section {
margin-bottom: calc(var(--axis-spacing-unit) * 4);
}
.axis-content-section__title {
font-size: 1.75rem;
font-weight: 600;
margin: 0 0 1.5rem 0;
color: var(--axis-text);
position: relative;
padding-bottom: 0.75rem;
}
.axis-content-section__title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 3px;
background: var(--axis-primary);
border-radius: 2px;
}
.axis-content-section__body {
font-size: 1.0625rem;
line-height: 1.8;
color: var(--axis-text);
}
/* Rich content support (tables, lists, etc) */
.axis-content-section__body table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
}
.axis-content-section__body table th,
.axis-content-section__body table td {
padding: 0.75rem;
border: 1px solid var(--axis-border);
text-align: left;
}
.axis-content-section__body table th {
background: var(--axis-background-secondary);
font-weight: 600;
}
.axis-content-section__body ul,
.axis-content-section__body ol {
margin: 1rem 0;
padding-left: 1.5rem;
}
.axis-content-section__body li {
margin-bottom: 0.5rem;
line-height: 1.7;
}
.axis-content-section__body p {
margin-bottom: 1rem;
}
.axis-content-section__body h3 {
font-size: 1.25rem;
font-weight: 600;
margin: 2rem 0 1rem 0;
color: var(--axis-text);
}
/* Empty state */
.axis-empty-state {
text-align: center;
padding: calc(var(--axis-spacing-unit) * 6) var(--axis-spacing-unit);
}
.axis-empty-state__icon {
color: var(--axis-text-secondary);
margin-bottom: 1.5rem;
opacity: 0.5;
}
.axis-empty-state__text {
font-size: 1.125rem;
color: var(--axis-text-secondary);
margin: 0;
}
/* ============================================================================
CONTACT PAGE SPECIFIC
========================================================================== */
.axis-contact-layout {
display: grid;
grid-template-columns: 2fr 1fr;
gap: calc(var(--axis-spacing-unit) * 4);
}
@media (max-width: 1024px) {
.axis-contact-layout {
grid-template-columns: 1fr;
}
}
/* Contact cards */
.axis-contact-card {
background: var(--axis-background-secondary);
padding: calc(var(--axis-spacing-unit) * 2);
border-radius: var(--axis-radius-lg);
border: 1px solid var(--axis-border);
}
.axis-contact-card__name {
font-size: 1.25rem;
font-weight: 600;
color: var(--axis-text);
margin-bottom: 0.5rem;
}
.axis-contact-card__title {
font-size: 1rem;
color: var(--axis-text-secondary);
margin-bottom: 0.25rem;
}
.axis-contact-card__affiliation {
font-size: 0.9375rem;
color: var(--axis-text-secondary);
margin-bottom: 1.5rem;
}
.axis-contact-card__item {
display: flex;
align-items: center;
gap: 0.75rem;
margin-top: 1rem;
font-size: 0.9375rem;
}
.axis-contact-card__item svg {
flex-shrink: 0;
color: var(--axis-primary);
}
.axis-contact-card__item a {
color: var(--axis-primary);
text-decoration: none;
transition: color var(--axis-transition-normal);
}
.axis-contact-card__item a:hover {
color: #291fd9;
text-decoration: underline;
}
/* Contact sidebar */
.axis-contact-sidebar {
position: sticky;
top: calc(var(--axis-spacing-unit) * 2);
align-self: start;
}
.axis-sidebar-section {
background: var(--axis-background-secondary);
padding: calc(var(--axis-spacing-unit) * 1.5);
border-radius: var(--axis-radius-md);
border: 1px solid var(--axis-border);
margin-bottom: calc(var(--axis-spacing-unit) * 2);
}
.axis-sidebar-section__title {
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--axis-text-secondary);
margin: 0 0 1rem 0;
}
.axis-sidebar-section__body {
font-size: 0.9375rem;
line-height: 1.7;
color: var(--axis-text);
}
/* ============================================================================
SUBMISSIONS PAGE - SECTION POLICIES
========================================================================== */
.axis-section-policy {
background: var(--axis-background-secondary);
padding: calc(var(--axis-spacing-unit) * 2);
border-radius: var(--axis-radius-md);
border-left: 4px solid var(--axis-primary);
margin-bottom: calc(var(--axis-spacing-unit) * 2);
}
.axis-section-policy__title {
font-size: 1.125rem;
font-weight: 600;
color: var(--axis-text);
margin: 0 0 1rem 0;
}
.axis-section-policy__content {
font-size: 0.9375rem;
line-height: 1.7;
color: var(--axis-text);
}
/* Dark mode */
html.dark-mode .axis-page-header {
border-bottom-color: rgba(255, 255, 255, 0.1);
}
html.dark-mode .axis-contact-card,
html.dark-mode .axis-sidebar-section,
html.dark-mode .axis-section-policy {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
}
/* ============================================================================
CONTENT BOX - Subtle border and shadow
========================================================================== */
.axis-content-box {
background: var(--axis-background);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
padding: calc(var(--axis-spacing-unit) * 3);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
@media (max-width: 768px) {
.axis-content-box {
padding: calc(var(--axis-spacing-unit) * 2);
}
}
/* Content box typography */
.axis-content-box p {
margin-bottom: 1rem;
line-height: 1.8;
}
.axis-content-box h2 {
font-size: 1.5rem;
font-weight: 600;
margin: 2rem 0 1rem 0;
color: var(--axis-text);
}
.axis-content-box h2:first-child {
margin-top: 0;
}
.axis-content-box h3 {
font-size: 1.25rem;
font-weight: 600;
margin: 1.5rem 0 1rem 0;
color: var(--axis-text);
}
.axis-content-box ul,
.axis-content-box ol {
margin: 1rem 0;
padding-left: 1.5rem;
}
.axis-content-box li {
margin-bottom: 0.5rem;
line-height: 1.7;
}
.axis-content-box table {
width: 100%;
border-collapse: collapse;
margin: 1.5rem 0;
}
.axis-content-box table th,
.axis-content-box table td {
padding: 0.75rem;
border: 1px solid var(--axis-border);
text-align: left;
}
.axis-content-box table th {
background: var(--axis-background-secondary);
font-weight: 600;
}
.axis-content-box a {
color: var(--axis-primary);
text-decoration: none;
}
.axis-content-box a:hover {
text-decoration: underline;
}
/* Dark mode */
html.dark-mode .axis-content-box {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* ============================================================================
SKIP TO CONTENT LINK - Accessibility (hide but accessible)
========================================================================== */
.axis-skip-link:focus {
top: 0;
}
/* Remove any red border that might be showing */
/* ============================================================================
ARTICLE COVER IMAGE (v2.11.1)
========================================================================== */
.axis-article-cover {
display: block;
margin-bottom: 1rem;
}
.axis-article-cover__image {
width: 100%;
height: auto;
display: block;
border-radius: var(--axis-radius-md);
border: 1px solid var(--axis-border);
}
/* ============================================================================
SKIP TO CONTENT LINK - Properly Hidden
========================================================================== */
.axis-skip-link {
position: absolute !important;
top: -999px !important;
left: -999px !important;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
white-space: nowrap;
border: 0;
padding: 0;
margin: 0;
}
.axis-skip-link:focus {
position: fixed !important;
top: 10px !important;
left: 10px !important;
width: auto;
height: auto;
overflow: visible;
clip: auto;
background: var(--axis-primary);
color: white !important;
padding: 12px 24px;
border-radius: 4px;
font-weight: 600;
z-index: 99999;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
/* ============================================================================
ARTICLE COVER - Clickable with Overlay
========================================================================== */
.axis-article-cover--clickable {
position: relative;
cursor: pointer;
overflow: hidden;
}
.axis-article-cover__overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: all 0.3s ease;
pointer-events: none;
border-radius: var(--axis-radius-md);
}
.axis-article-cover--clickable:hover .axis-article-cover__overlay {
background: rgba(0, 0, 0, 0.6);
opacity: 1;
}
.axis-article-cover__overlay svg {
color: white;
filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}
.axis-article-cover--clickable:hover .axis-article-cover__image {
transform: scale(1.03);
}
.axis-article-cover__image {
transition: all 0.3s ease;
pointer-events: none;
}
/* ============================================================================
IMAGE MODAL
========================================================================== */
.axis-image-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99999;
align-items: center;
justify-content: center;
padding: 20px;
}
.axis-image-modal--active {
display: flex !important;
align-items: center !important;
justify-content: center !important;
}
.axis-image-modal__backdrop {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.92);
cursor: pointer;
}
.axis-image-modal__content {
position: relative;
max-width: 90vw;
max-height: 90vh;
z-index: 1;
}
.axis-image-modal__img {
max-width: 100%;
max-height: 90vh;
width: auto;
height: auto;
display: block;
border-radius: 4px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}
.axis-image-modal__close {
position: absolute;
top: -50px;
right: 0;
background: rgba(255, 255, 255, 0.15);
border: none;
color: white;
width: 40px;
height: 40px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
}
.axis-image-modal__close:hover {
background: rgba(255, 255, 255, 0.25);
transform: rotate(90deg);
}
@media (max-width: 768px) {
.axis-image-modal__close {
top: 10px;
right: 10px;
width: 36px;
height: 36px;
}
.axis-image-modal__content {
max-width: 95vw;
max-height: 95vh;
}
}
/* ============================================================================
SUBMISSION CHECKLIST STYLING
========================================================================== */
.axis-checklist {
list-style: none;
padding: 0;
margin: 0;
}
.axis-checklist li {
position: relative;
padding-left: 2rem;
margin-bottom: 1rem;
line-height: 1.6;
}
.axis-checklist li:before {
content: '✓';
position: absolute;
left: 0;
top: 0;
width: 1.5rem;
height: 1.5rem;
background: var(--axis-primary);
color: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
font-size: 0.875rem;
}
.axis-checklist li:last-child {
margin-bottom: 0;
}
/* Dark mode */
html.dark-mode .axis-checklist li:before {
background: var(--axis-primary);
color: white;
}
/* ============================================================================
SECTION ITEMS (Submissions Page)
========================================================================== */
.axis-section-item {
margin-bottom: calc(var(--axis-spacing-unit) * 3);
padding-bottom: calc(var(--axis-spacing-unit) * 3);
border-bottom: 1px solid var(--axis-border);
}
.axis-section-item:last-child {
margin-bottom: 0;
padding-bottom: 0;
border-bottom: none;
}
.axis-section-item__title {
font-size: 1.5rem;
font-weight: 600;
margin: 0 0 1rem 0;
color: var(--axis-text);
}
.axis-section-item__policy {
margin-bottom: 1.5rem;
line-height: 1.7;
color: var(--axis-text-secondary);
}
.axis-section-item__policy p {
margin-bottom: 1rem;
}
.axis-section-item__policy p:last-child {
margin-bottom: 0;
}
.axis-section-item__actions {
margin-top: 1.5rem;
}
/* Button Styles - Submissions Page Specific */
.axis-btn-primary {
background: transparent;
color: var(--axis-primary);
border: 2px solid var(--axis-primary);
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
font-size: 1rem;
font-weight: 500;
text-decoration: none;
border-radius: var(--axis-radius-md);
transition: all var(--axis-transition-normal);
cursor: pointer;
}
.axis-btn-primary:hover {
background: var(--axis-primary);
color: #ffffff !important;
border-color: var(--axis-primary);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.axis-btn svg {
flex-shrink: 0;
}
/* Dark mode */
html.dark-mode .axis-section-item {
border-bottom-color: rgba(255, 255, 255, 0.1);
}
html.dark-mode .axis-section-item__title {
color: var(--axis-text);
}
html.dark-mode .axis-section-item__policy {
color: var(--axis-text-secondary);
}
html.dark-mode .axis-btn-primary {
background: transparent;
color: #ffffff;
border-color: var(--axis-primary);
}
html.dark-mode .axis-btn-primary:hover {
background: var(--axis-primary);
color: #ffffff !important;
border-color: var(--axis-primary);
}
/* Mobile responsive */
@media (max-width: 768px) {
.axis-section-item {
margin-bottom: calc(var(--axis-spacing-unit) * 2);
padding-bottom: calc(var(--axis-spacing-unit) * 2);
}
.axis-section-item__title {
font-size: 1.25rem;
}
.axis-btn {
width: 100%;
justify-content: center;
padding: 0.875rem 1rem;
}
}
/* ============================================================================
CONTACT PAGE - PUBLISHER & SOCIAL MEDIA
========================================================================== */
/* Publisher Link */
.axis-publisher-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--axis-primary);
text-decoration: none;
font-weight: 500;
transition: all var(--axis-transition-normal);
}
.axis-publisher-link:hover {
color: var(--axis-primary-dark);
text-decoration: underline;
}
.axis-publisher-link svg {
flex-shrink: 0;
opacity: 0.7;
}
/* Social Media Links */
.axis-social-links {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
}
.axis-social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: var(--axis-background-secondary);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-md);
color: var(--axis-text-secondary);
text-decoration: none;
transition: all var(--axis-transition-normal);
}
.axis-social-link:hover {
background: var(--axis-primary);
border-color: var(--axis-primary);
color: white;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.axis-social-link svg {
flex-shrink: 0;
}
/* Dark mode */
html.dark-mode .axis-publisher-link {
color: var(--axis-primary-light);
}
html.dark-mode .axis-publisher-link:hover {
color: var(--axis-primary);
}
html.dark-mode .axis-social-link {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
color: var(--axis-text-secondary);
}
html.dark-mode .axis-social-link:hover {
background: var(--axis-primary);
border-color: var(--axis-primary);
color: white;
}
/* Mobile responsive */
@media (max-width: 768px) {
.axis-social-links {
gap: 0.4rem;
}
.axis-social-link {
width: 36px;
height: 36px;
}
.axis-social-link svg {
width: 18px;
height: 18px;
}
}
/* ============================================================================
ANNOUNCEMENTS - Simple & Clean
========================================================================== */
/* Announcements List */
.axis-announcements-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.axis-announcement-item {
background: var(--axis-surface);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
padding: 1.5rem;
transition: all var(--axis-transition-normal);
}
.axis-announcement-item:hover {
border-color: var(--axis-primary);
transform: translateY(-2px);
box-shadow: var(--axis-shadow-md);
}
.axis-announcement-item__title {
margin: 0 0 0.75rem 0;
font-size: var(--axis-font-lg);
font-weight: 600;
line-height: 1.4;
}
.axis-announcement-item__title a {
color: var(--axis-heading);
text-decoration: none;
transition: color var(--axis-transition-fast);
}
.axis-announcement-item__title a:hover {
color: var(--axis-primary);
}
.axis-announcement-item__meta {
font-size: var(--axis-font-sm);
color: var(--axis-text-secondary);
margin-bottom: 0.75rem;
}
.axis-announcement-item__description {
color: var(--axis-text);
line-height: 1.6;
margin-bottom: 1rem;
}
.axis-announcement-item__actions {
display: flex;
}
}
.axis-link-more {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--axis-primary);
font-weight: 500;
text-decoration: none;
font-size: 0.9375rem;
transition: all var(--axis-transition-fast);
}
.axis-link-more:hover {
gap: 0.75rem;
text-decoration: none;
}
.axis-link-more svg {
transition: transform var(--axis-transition-fast);
}
.axis-link-more:hover svg {
transform: translateX(2px);
}
/* Page Meta (for dates, etc) */
/* Page Meta (for dates, etc) */
.axis-page-meta {
display: flex;
align-items: center;
gap: 0.5rem;
font-size: 0.875rem;
color: var(--axis-text-secondary);
margin-top: 0.75rem;
}
.axis-page-meta svg {
flex-shrink: 0;
}
/* Page Actions (for back buttons, etc) */
.axis-page-actions {
margin-top: 2rem;
}
/* Link Back */
.axis-link-back {
display: inline-flex;
align-items: center;
gap: 0.5rem;
color: var(--axis-text-secondary);
font-weight: 500;
text-decoration: none;
font-size: 0.9375rem;
transition: all var(--axis-transition-fast);
}
.axis-link-back:hover {
color: var(--axis-primary);
gap: 0.75rem;
text-decoration: none;
}
.axis-link-back svg {
transition: transform var(--axis-transition-fast);
}
.axis-link-back:hover svg {
transform: translateX(-2px);
}
/* ============================================================================
MESSAGE & ERROR PAGES
========================================================================== */
/* Message Box (System Messages) */
.axis-message-box {
max-width: 600px;
margin: calc(var(--axis-spacing-unit) * 4) auto;
padding: calc(var(--axis-spacing-unit) * 2);
border-radius: var(--axis-radius-lg);
text-align: center;
}
.axis-message-box--info {
background: rgba(79, 70, 229, 0.05);
border: 2px solid rgba(79, 70, 229, 0.2);
}
.axis-message-box--error {
background: rgba(239, 68, 68, 0.05);
border: 2px solid rgba(239, 68, 68, 0.2);
}
.axis-message-box--success {
background: rgba(16, 185, 129, 0.05);
border: 2px solid rgba(16, 185, 129, 0.2);
}
.axis-message-box--warning {
background: rgba(245, 158, 11, 0.05);
border: 2px solid rgba(245, 158, 11, 0.2);
}
.axis-message-box__icon {
margin-bottom: 1.5rem;
}
.axis-message-box--info .axis-message-box__icon svg {
color: var(--axis-primary);
}
.axis-message-box--error .axis-message-box__icon svg {
color: #EF4444;
}
.axis-message-box--success .axis-message-box__icon svg {
color: #10B981;
}
.axis-message-box--warning .axis-message-box__icon svg {
color: #F59E0B;
}
.axis-message-box__content {
font-size: 1.125rem;
line-height: 1.7;
color: var(--axis-text);
}
.axis-message-actions {
text-align: center;
margin-top: calc(var(--axis-spacing-unit) * 2);
}
.axis-message-actions .axis-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
/* Error Box */
.axis-error-box {
max-width: 700px;
margin: calc(var(--axis-spacing-unit) * 4) auto;
padding: calc(var(--axis-spacing-unit) * 3);
text-align: center;
}
.axis-error-box__icon {
margin-bottom: 2rem;
}
.axis-error-box__icon svg {
color: #EF4444;
margin: 0 auto;
}
.axis-error-box__title {
font-size: 2rem;
font-weight: 700;
color: var(--axis-heading);
margin-bottom: 1rem;
}
.axis-error-box__message {
font-size: 1.125rem;
line-height: 1.7;
color: var(--axis-text-secondary);
margin-bottom: 2rem;
}
.axis-error-box__actions {
display: flex;
gap: 1rem;
justify-content: center;
flex-wrap: wrap;
}
.axis-error-box__actions .axis-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
/* Button Styles for Messages/Errors */
.axis-btn {
padding: 0.75rem 1.5rem;
border-radius: var(--axis-radius-md);
font-weight: 600;
text-decoration: none;
transition: all var(--axis-transition-fast);
border: 2px solid transparent;
cursor: pointer;
font-size: 0.9375rem;
}
.axis-btn--primary {
background: var(--axis-primary);
color: white;
border-color: var(--axis-primary);
}
.axis-btn--primary:hover {
background: #3730A3;
border-color: #3730A3;
transform: translateY(-1px);
box-shadow: var(--axis-shadow-md);
}
.axis-btn--secondary {
background: transparent;
color: var(--axis-primary);
border-color: var(--axis-primary);
}
.axis-btn--secondary:hover {
background: var(--axis-primary);
color: white;
transform: translateY(-1px);
}
/* Dark Mode */
html.dark-mode .axis-message-box--info {
background: rgba(79, 70, 229, 0.1);
border-color: rgba(79, 70, 229, 0.3);
}
html.dark-mode .axis-message-box--error {
background: rgba(239, 68, 68, 0.1);
border-color: rgba(239, 68, 68, 0.3);
}
html.dark-mode .axis-message-box--success {
background: rgba(16, 185, 129, 0.1);
border-color: rgba(16, 185, 129, 0.3);
}
html.dark-mode .axis-message-box--warning {
background: rgba(245, 158, 11, 0.1);
border-color: rgba(245, 158, 11, 0.3);
}
/* Responsive */
@media (max-width: 768px) {
.axis-error-box__title {
font-size: 1.5rem;
}
.axis-error-box__actions {
flex-direction: column;
}
.axis-error-box__actions .axis-btn {
width: 100%;
justify-content: center;
}
}
/* ============================================================================
HERO FALLBACK - No Image Styling (Same as with image)
========================================================================== */
/* When no image, use SECONDARY color + overlay (customizable from admin!) */
.axis-hero--no-image {
background: var(--axis-secondary);
position: relative;
}
/* Dark overlay (same as with image) */
.axis-hero--no-image::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.7));
pointer-events: none;
z-index: 1;
}
/* Content on top of overlay */
.axis-hero--no-image .axis-hero__content {
position: relative;
z-index: 2;
}
/* Light mode - use secondary with lighter overlay */
html:not(.dark-mode) .axis-hero--no-image {
/* Keep secondary color in light mode too */
background: var(--axis-secondary);
/* But add subtle lightening filter */
filter: brightness(1.1) saturate(0.9);
}
/* Light mode - lighter overlay */
html:not(.dark-mode) .axis-hero--no-image::before {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.4));
}
/* ============================================================================
AUTH PAGES - Login, Register, Lost Password
========================================================================== */
/* Auth page wrapper - centered card */
.axis-auth-page {
min-height: calc(100vh - 400px);
display: flex;
align-items: center;
justify-content: center;
padding: calc(var(--axis-spacing-unit) * 3) calc(var(--axis-spacing-unit) * 2);
}
.axis-auth-card {
background: var(--axis-card-bg);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
padding: calc(var(--axis-spacing-unit) * 3);
max-width: 480px;
width: 100%;
box-shadow: var(--axis-shadow-md);
}
.axis-auth-card__header {
text-align: center;
margin-bottom: calc(var(--axis-spacing-unit) * 2);
}
.axis-auth-card__title {
font-size: 2rem;
font-weight: 700;
margin-bottom: calc(var(--axis-spacing-unit));
color: var(--axis-heading-color);
}
.axis-auth-card__subtitle {
font-size: 1rem;
color: var(--axis-text-secondary);
margin: 0;
}
/* Login message / notices */
.axis-auth-notice {
background: rgba(var(--axis-primary-rgb), 0.1);
border: 1px solid rgba(var(--axis-primary-rgb), 0.3);
border-radius: var(--axis-radius-md);
padding: calc(var(--axis-spacing-unit));
margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
color: var(--axis-primary);
font-size: 0.9375rem;
}
/* Error messages */
.axis-form-error {
background: rgba(239, 68, 68, 0.1);
border: 1px solid rgba(239, 68, 68, 0.3);
border-radius: var(--axis-radius-md);
padding: calc(var(--axis-spacing-unit));
margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
color: #EF4444;
font-size: 0.9375rem;
}
html:not(.dark-mode) .axis-form-error {
background: rgba(239, 68, 68, 0.15);
}
/* Success messages */
.axis-form-success {
background: rgba(16, 185, 129, 0.1);
border: 1px solid rgba(16, 185, 129, 0.3);
border-radius: var(--axis-radius-md);
padding: calc(var(--axis-spacing-unit));
margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
color: #10B981;
font-size: 0.9375rem;
}
/* Form fields */
.axis-form-group {
margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
}
.axis-form-label {
display: block;
font-weight: 500;
margin-bottom: calc(var(--axis-spacing-unit) * 0.5);
color: var(--axis-text-primary);
font-size: 0.9375rem;
}
.axis-form-label .required {
color: #EF4444;
margin-left: 2px;
}
.axis-form-input {
width: 100%;
padding: 12px 16px;
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-md);
background: var(--axis-bg);
color: var(--axis-text-primary);
font-size: 1rem;
transition: all var(--axis-transition-normal);
font-family: inherit;
}
.axis-form-input:focus {
outline: none;
border-color: var(--axis-primary);
box-shadow: 0 0 0 3px rgba(var(--axis-primary-rgb), 0.1);
}
.axis-form-input::placeholder {
color: var(--axis-text-tertiary);
}
/* Textarea */
textarea.axis-form-input {
resize: vertical;
min-height: 120px;
}
/* Checkbox */
.axis-form-checkbox {
display: flex;
align-items: center;
gap: calc(var(--axis-spacing-unit) * 0.5);
}
.axis-form-checkbox input[type="checkbox"] {
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--axis-primary);
}
.axis-form-checkbox label {
cursor: pointer;
font-size: 0.9375rem;
color: var(--axis-text-primary);
margin: 0;
}
/* Form helper text */
.axis-form-helper {
font-size: 0.875rem;
color: var(--axis-text-secondary);
margin-top: calc(var(--axis-spacing-unit) * 0.5);
}
/* Form link (forgot password, etc) */
.axis-form-link {
display: inline-block;
margin-top: calc(var(--axis-spacing-unit) * 0.5);
font-size: 0.9375rem;
color: var(--axis-primary);
text-decoration: none;
transition: color var(--axis-transition-fast);
}
.axis-form-link:hover {
color: var(--axis-link-hover);
text-decoration: underline;
}
/* Form footer / actions */
.axis-form-actions {
margin-top: calc(var(--axis-spacing-unit) * 2);
display: flex;
flex-direction: column;
gap: calc(var(--axis-spacing-unit));
}
.axis-form-actions .axis-btn {
width: 100%;
justify-content: center;
}
/* Divider */
.axis-auth-divider {
text-align: center;
margin: calc(var(--axis-spacing-unit) * 2) 0;
position: relative;
}
.axis-auth-divider::before {
content: '';
position: absolute;
top: 50%;
left: 0;
right: 0;
height: 1px;
background: var(--axis-border);
}
.axis-auth-divider span {
background: var(--axis-card-bg);
padding: 0 calc(var(--axis-spacing-unit));
position: relative;
z-index: 1;
color: var(--axis-text-secondary);
font-size: 0.875rem;
}
/* Additional links (register, back to login) */
.axis-auth-footer {
text-align: center;
margin-top: calc(var(--axis-spacing-unit) * 2);
padding-top: calc(var(--axis-spacing-unit) * 2);
border-top: 1px solid var(--axis-border);
}
.axis-auth-footer p {
margin: 0;
color: var(--axis-text-secondary);
font-size: 0.9375rem;
}
.axis-auth-footer a {
color: var(--axis-primary);
text-decoration: none;
font-weight: 500;
transition: color var(--axis-transition-fast);
}
.axis-auth-footer a:hover {
color: var(--axis-link-hover);
text-decoration: underline;
}
/* Responsive */
@media (max-width: 640px) {
.axis-auth-page {
padding: calc(var(--axis-spacing-unit) * 2) calc(var(--axis-spacing-unit));
}
.axis-auth-card {
padding: calc(var(--axis-spacing-unit) * 2);
}
.axis-auth-card__title {
font-size: 1.75rem;
}
}
/* Select (dropdown) styling */
select.axis-form-input {
appearance: none;
background-image: url('data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="6 9 12 15 18 9"%3e%3c/polyline%3e%3c/svg%3e');
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 16px;
padding-right: 40px;
cursor: pointer;
}
select.axis-form-input::-ms-expand {
display: none;
}
/* Fieldset reset */
fieldset {
border: none;
padding: 0;
margin: 0;
}
legend {
padding: 0;
margin-bottom: 16px;
font-size: 1.125rem;
font-weight: 600;
color: var(--axis-heading-color);
}
/* ============================================
RANKING BADGE (Most Viewed)
============================================ */
.axis-rank-badge {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 12px;
background: var(--axis-primary);
color: #ffffff;
border-radius: 4px;
font-size: 0.875rem;
font-weight: 700;
margin-bottom: 12px;
}
.axis-rank-badge__number {
line-height: 1;
}
/* Dark mode */
body.dark-mode .axis-rank-badge {
background: var(--axis-primary);
border: 1px solid rgba(255, 255, 255, 0.2);
}
/* ============================================
/* ============================================
ARTICLE BADGES (Type & DOI) - UPDATED
============================================ */
/* Badge Container */
.axis-article-badges {
display: flex;
justify-content: space-between;
align-items: center;
gap: 12px;
margin-bottom: 16px;
flex-wrap: wrap;
}
/* Badge Base Style */
.axis-badge {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 600;
line-height: 1.4;
transition: all 0.2s ease;
text-decoration: none;
cursor: default;
white-space: nowrap; /* Keep badge content on single line */
}
.axis-badge__icon {
flex-shrink: 0;
}
/* DOI Icon (IMG) */
.axis-badge__icon--doi {
display: block;
}
.axis-badge__text {
display: inline;
}
/* Article Type Badge (Left) - Primary color lighter tone */
.axis-badge--type {
background: rgba(44, 95, 141, 0.1); /* Primary color 10% opacity */
color: var(--axis-primary);
border: 2px solid rgba(44, 95, 141, 0.25);
}
.axis-badge--type .axis-badge__icon {
/* Icon uses currentColor from parent */
color: var(--axis-primary);
}
/* DOI Badge (Right) - Link, Blue theme */
.axis-badge--doi {
background: rgba(59, 130, 246, 0.1);
color: #3b82f6;
border: 2px solid rgba(59, 130, 246, 0.3);
cursor: pointer;
}
/* NO text decoration on DOI link */
.axis-badge--doi,
.axis-badge--doi:hover,
.axis-badge--doi:focus,
.axis-badge--doi:active {
text-decoration: none !important;
}
.axis-badge--doi:hover {
background: rgba(59, 130, 246, 0.2);
border-color: rgba(59, 130, 246, 0.5);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
.axis-badge--doi:active {
transform: translateY(0);
}
/* Dark Mode Adjustments */
body.dark-mode .axis-badge--type {
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
border-color: rgba(255, 255, 255, 0.2);
}
body.dark-mode .axis-badge--type .axis-badge__icon {
/* Icon inherits white from parent color */
color: #ffffff;
}
body.dark-mode .axis-badge--doi {
background: rgba(59, 130, 246, 0.15);
color: #60a5fa;
border-color: rgba(96, 165, 250, 0.4);
}
body.dark-mode .axis-badge--doi:hover {
background: rgba(59, 130, 246, 0.25);
border-color: rgba(96, 165, 250, 0.6);
box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}
/* Responsive */
@media (max-width: 640px) {
.axis-article-badges {
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.axis-badge {
font-size: 0.75rem; /* Smaller for long DOIs */
padding: 6px 12px;
}
.axis-badge__icon,
.axis-badge__icon--doi {
width: 14px;
height: 14px;
}
}
/* ============================================
COMPACT METADATA ITEMS (Sidebar)
============================================ */
/* Compact block - reduced spacing */
.axis-sidebar-block--compact {
padding-bottom: calc(var(--axis-spacing-unit) * 1.5);
margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
}
/* Metadata item - inline label:value */
.axis-metadata-item {
display: flex;
align-items: baseline;
gap: 6px;
margin-bottom: 8px;
font-size: 0.875rem;
line-height: 1.5;
}
.axis-metadata-item:last-child {
margin-bottom: 0;
}
/* Label - semi-bold, muted */
.axis-metadata-label {
font-weight: 600;
color: var(--axis-text-muted);
white-space: nowrap;
}
/* Value - regular weight */
.axis-metadata-value {
color: var(--axis-text);
font-weight: 400;
}
/* Dark mode */
body.dark-mode .axis-metadata-label {
color: rgba(255, 255, 255, 0.6);
}
body.dark-mode .axis-metadata-value {
color: rgba(255, 255, 255, 0.9);
}
/* ============================================
SOCIAL SHARING BUTTONS
============================================ */
.axis-article-share {
margin-top: calc(var(--axis-spacing-unit) * 4);
padding-top: calc(var(--axis-spacing-unit) * 3);
border-top: 1px solid var(--axis-border);
}
.axis-share-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: calc(var(--axis-spacing-unit) * 2);
}
.axis-share-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
border-radius: 6px;
font-size: 0.875rem;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
border: 2px solid transparent;
}
.axis-share-btn svg {
flex-shrink: 0;
}
.axis-share-btn span {
white-space: nowrap;
}
/* Twitter */
.axis-share-btn--twitter {
background: #1DA1F2;
color: #ffffff;
}
.axis-share-btn--twitter:hover {
background: #0d8bd9;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(29, 161, 242, 0.3);
}
/* Facebook */
.axis-share-btn--facebook {
background: #1877F2;
color: #ffffff;
}
.axis-share-btn--facebook:hover {
background: #0e63d4;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);
}
/* LinkedIn */
.axis-share-btn--linkedin {
background: #0A66C2;
color: #ffffff;
}
.axis-share-btn--linkedin:hover {
background: #084f96;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(10, 102, 194, 0.3);
}
/* Email */
.axis-share-btn--email {
background: var(--axis-bg-secondary);
color: var(--axis-text);
border-color: var(--axis-border);
}
.axis-share-btn--email:hover {
background: var(--axis-bg);
border-color: var(--axis-primary);
color: var(--axis-primary);
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* Dark mode */
body.dark-mode .axis-share-btn--email {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.2);
}
body.dark-mode .axis-share-btn--email:hover {
background: rgba(255, 255, 255, 0.1);
border-color: var(--axis-primary);
}
/* Responsive */
@media (max-width: 640px) {
.axis-share-buttons {
flex-direction: column;
}
.axis-share-btn {
width: 100%;
justify-content: center;
}
}
/* ============================================
MINIMAL SOCIAL SHARE ICONS (Sidebar)
============================================ */
.axis-sidebar-block--share {
padding-bottom: calc(var(--axis-spacing-unit) * 1.5);
margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
}
/* Inline: "Paylaş: [icons]" */
.axis-share-inline {
display: flex;
align-items: center;
gap: 12px;
}
.axis-share-label {
font-size: 0.875rem;
font-weight: 600;
color: var(--axis-text-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
}
.axis-share-icons {
display: flex;
gap: 8px;
}
.axis-share-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
border-radius: 4px;
background: var(--axis-bg-secondary);
color: var(--axis-text-muted);
transition: all 0.2s ease;
text-decoration: none;
}
.axis-share-icon svg {
flex-shrink: 0;
}
.axis-share-icon:hover {
color: var(--axis-primary);
background: rgba(44, 95, 141, 0.1);
transform: translateY(-2px);
}
/* Dark mode */
body.dark-mode .axis-share-label {
color: rgba(255, 255, 255, 0.6);
}
body.dark-mode .axis-share-icon {
background: rgba(255, 255, 255, 0.05);
color: rgba(255, 255, 255, 0.6);
}
body.dark-mode .axis-share-icon:hover {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
/* ============================================
KEYWORDS - COMMA SEPARATED TEXT
============================================ */
.axis-keywords-text {
line-height: 1.7;
color: var(--axis-text);
}
/* Dark mode */
body.dark-mode .axis-keywords-text {
color: rgba(255, 255, 255, 0.85);
}
/* ============================================
MOBILE EXPANDABLE SEARCH
============================================ */
/* Mobile search container - hidden by default */
.axis-mobile-search {
display: none; /* Completely hidden */
position: absolute;
top: 100%;
left: 0;
right: 0;
background: var(--axis-bg);
border-top: 1px solid var(--axis-border);
padding: 1rem;
z-index: 100; /* Lower than header actions */
}
/* Show on mobile only when active */
@media (max-width: 768px) {
.axis-mobile-search.is-active {
display: block; /* Show when active */
animation: slideDown 0.2s ease;
}
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Mobile search form */
.axis-mobile-search form {
display: flex;
gap: 0.5rem;
align-items: center;
}
/* Close button */
.axis-mobile-search-close {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--axis-bg-secondary);
border: 1px solid var(--axis-border);
border-radius: 6px;
color: var(--axis-text);
cursor: pointer;
transition: all 0.2s ease;
}
.axis-mobile-search-close:hover {
background: var(--axis-bg-tertiary);
color: var(--axis-primary);
}
/* Search input - full width */
.axis-mobile-search-input {
flex: 1;
height: 40px;
padding: 0 1rem;
border: 1px solid var(--axis-border);
border-radius: 6px;
font-size: 1rem;
background: var(--axis-bg);
color: var(--axis-text);
}
.axis-mobile-search-input:focus {
outline: none;
border-color: var(--axis-primary);
box-shadow: 0 0 0 3px rgba(var(--axis-primary-rgb), 0.1);
}
/* Submit button */
.axis-mobile-search-submit {
flex-shrink: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: var(--axis-primary);
border: none;
border-radius: 6px;
color: #ffffff;
cursor: pointer;
transition: all 0.2s ease;
}
.axis-mobile-search-submit:hover {
opacity: 0.9;
transform: scale(1.05);
}
/* Hide other actions when search is active */
@media (max-width: 1023px) {
.axis-header__actions.search-active > *:not(.axis-mobile-menu-toggle) {
opacity: 0;
pointer-events: none;
}
}
/* Dark mode */
body.dark-mode .axis-mobile-search {
background: var(--axis-bg);
border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .axis-mobile-search-close {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
}
body.dark-mode .axis-mobile-search-close:hover {
background: rgba(255, 255, 255, 0.1);
}
body.dark-mode .axis-mobile-search-input {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
}
/* ============================================
MOBILE HEADER - SEARCH BUTTON
============================================ */
@media (max-width: 768px) {
/* Mobile search trigger button */
.axis-header__actions .axis-search-button {
display: flex;
width: 40px;
height: 40px;
padding: 0;
align-items: center;
justify-content: center;
background: var(--axis-primary);
color: #ffffff;
border: none;
border-radius: 6px;
cursor: pointer;
}
/* Hide text in header search button */
.axis-header__actions .axis-search-button span {
display: none;
}
}
/* ============================================
MOBILE SEARCH TRIGGER BUTTON
============================================ */
/* Hide mobile search trigger on desktop */
.axis-mobile-search-trigger {
display: none;
}
@media (max-width: 768px) {
/* Show mobile search trigger */
.axis-mobile-search-trigger {
display: flex;
width: 40px;
height: 40px;
padding: 0;
align-items: center;
justify-content: center;
background: var(--axis-primary);
color: #ffffff;
border: none;
border-radius: 6px;
cursor: pointer;
transition: all 0.2s ease;
}
.axis-mobile-search-trigger:hover {
opacity: 0.9;
transform: scale(1.05);
}
}
/* ============================================
MOBILE HEADER - DARK MODE
============================================ */
@media (max-width: 768px) {
body.dark-mode .axis-header__brand {
border-bottom-color: rgba(255, 255, 255, 0.1);
}
}
/* ============================================
MOBILE SEARCH LINK (Simple)
============================================ */
/* Hide mobile search link on desktop */
.axis-mobile-search-link {
display: none;
}
@media (max-width: 768px) {
/* Show mobile search link */
.axis-mobile-search-link {
display: flex;
width: 40px;
height: 40px;
padding: 0;
align-items: center;
justify-content: center;
background: var(--axis-bg-secondary);
color: var(--axis-text);
border: 1px solid var(--axis-border);
border-radius: 6px;
text-decoration: none;
transition: all 0.2s ease;
}
.axis-mobile-search-link:hover {
background: var(--axis-bg-tertiary);
color: var(--axis-primary);
transform: scale(1.05);
}
.axis-mobile-search-link svg {
flex-shrink: 0;
}
}
/* Dark mode */
body.dark-mode .axis-mobile-search-link {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.9);
}
body.dark-mode .axis-mobile-search-link:hover {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
/* ============================================
MOBILE HEADER - SOCIAL MEDIA
============================================ */
@media (max-width: 768px) {
/* Always show social media on mobile if available */
.axis-social-media {
display: flex !important;
gap: 0.5rem;
}
.axis-social-link {
width: 36px;
height: 36px;
display: flex;
align-items: center;
justify-content: center;
background: var(--axis-bg-secondary);
border: 1px solid var(--axis-border);
border-radius: 6px;
color: var(--axis-text-muted);
transition: all 0.2s ease;
}
.axis-social-link:hover {
color: var(--axis-primary);
background: var(--axis-bg-tertiary);
}
.axis-social-link svg {
width: 18px;
height: 18px;
}
}
/* Dark mode for social icons */
body.dark-mode .axis-social-link {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
color: rgba(255, 255, 255, 0.6);
}
body.dark-mode .axis-social-link:hover {
background: rgba(255, 255, 255, 0.1);
color: #ffffff;
}
/* ============================================
SEARCH PAGE
============================================ */
.axis-page--search {
padding: calc(var(--axis-spacing-unit) * 3) 0;
}
.axis-search-form {
background: var(--axis-bg);
border: 1px solid var(--axis-border);
border-radius: 12px;
padding: calc(var(--axis-spacing-unit) * 2);
margin-bottom: calc(var(--axis-spacing-unit) * 3);
}
/* Main Search Input */
.axis-search-main {
margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
}
.axis-search-input-group {
display: flex;
gap: 0.5rem;
}
.axis-search-input {
flex: 1;
padding: 1rem 1.5rem;
border: 2px solid var(--axis-border);
border-radius: 8px;
font-size: 1rem;
transition: all 0.2s ease;
height: 56px; /* Explicit height to match button */
box-sizing: border-box;
}
.axis-search-input:focus {
outline: none;
border-color: var(--axis-primary);
box-shadow: 0 0 0 3px rgba(var(--axis-primary-rgb), 0.1);
}
/* Search page button - more specific selector to override global */
.axis-search-input-group .axis-search-button {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
background: var(--axis-primary);
color: #ffffff;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
height: 56px; /* Match input height */
box-sizing: border-box;
}
.axis-search-input-group .axis-search-button:hover {
opacity: 0.9;
transform: translateY(-1px);
}
/* Advanced Filters */
.axis-search-advanced {
border-top: 1px solid var(--axis-border);
padding-top: calc(var(--axis-spacing-unit) * 1.5);
margin-top: calc(var(--axis-spacing-unit) * 1.5);
}
.axis-search-advanced-toggle {
display: flex;
align-items: center;
gap: 0.5rem;
font-weight: 600;
color: var(--axis-primary);
cursor: pointer;
list-style: none;
}
.axis-search-advanced-toggle::-webkit-details-marker {
display: none;
}
.axis-search-filters {
margin-top: calc(var(--axis-spacing-unit) * 1.5);
display: grid;
gap: calc(var(--axis-spacing-unit) * 1.5);
}
.axis-filter-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.axis-filter-label {
font-weight: 600;
color: var(--axis-text);
}
.axis-label-sm {
font-size: 0.875rem;
color: var(--axis-text-secondary);
margin-bottom: 0.25rem;
display: block;
}
.axis-date-range {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 1rem;
align-items: center;
}
.axis-date-separator {
color: var(--axis-text-muted);
}
.axis-date-input {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.axis-select,
.axis-input {
padding: 0.75rem 1rem;
border: 1px solid var(--axis-border);
border-radius: 6px;
background: var(--axis-bg);
color: var(--axis-text);
font-size: 1rem;
}
.axis-select:focus,
.axis-input:focus {
outline: none;
border-color: var(--axis-primary);
}
/* Results */
.axis-results-header {
margin-bottom: calc(var(--axis-spacing-unit) * 2);
}
.axis-results-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--axis-text);
}
.axis-results-list {
display: grid;
gap: calc(var(--axis-spacing-unit) * 2);
}
.axis-result-item {
background: var(--axis-bg);
border: 1px solid var(--axis-border);
border-radius: 8px;
padding: calc(var(--axis-spacing-unit) * 1.5);
transition: all 0.2s ease;
}
.axis-result-item:hover {
border-color: var(--axis-primary);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
/* No Results */
.axis-no-results {
text-align: center;
padding: calc(var(--axis-spacing-unit) * 4);
}
.axis-no-results-icon {
color: var(--axis-text-muted);
margin-bottom: calc(var(--axis-spacing-unit) * 2);
}
.axis-no-results-title {
font-size: 1.5rem;
font-weight: 600;
color: var(--axis-text);
margin-bottom: 0.5rem;
}
.axis-no-results-message {
font-size: 1.125rem;
color: var(--axis-text-secondary);
margin-bottom: calc(var(--axis-spacing-unit) * 2);
}
.axis-no-results-tips {
max-width: 500px;
margin: 0 auto;
text-align: left;
background: var(--axis-bg-secondary);
padding: calc(var(--axis-spacing-unit) * 1.5);
border-radius: 8px;
}
.axis-no-results-tips h3 {
font-size: 1rem;
font-weight: 600;
margin-bottom: 1rem;
}
.axis-no-results-tips ul {
list-style: none;
padding: 0;
margin: 0;
}
.axis-no-results-tips li {
padding: 0.5rem 0;
padding-left: 1.5rem;
position: relative;
}
.axis-no-results-tips li::before {
content: '•';
position: absolute;
left: 0;
color: var(--axis-primary);
}
/* Responsive */
@media (max-width: 768px) {
.axis-search-input-group {
flex-direction: column;
}
.axis-date-range {
grid-template-columns: 1fr;
}
.axis-date-separator {
display: none;
}
}
/* Dark mode */
body.dark-mode .axis-search-form,
body.dark-mode .axis-result-item {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .axis-no-results-tips {
background: rgba(255, 255, 255, 0.05);
}
/* ============================================
SITE INDEX (Multiple Journals)
============================================ */
.axis-page--site-index {
padding: calc(var(--axis-spacing-unit) * 1.5) 0 calc(var(--axis-spacing-unit) * 2) 0;
min-height: auto;
}
.axis-site-about {
max-width: 1200px;
margin: 0 auto calc(var(--axis-spacing-unit) * 1.5);
padding: calc(var(--axis-spacing-unit) * 1.5);
background: var(--axis-bg-secondary);
border-radius: 12px;
border: 1px solid var(--axis-border);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
line-height: 1.5;
color: var(--axis-text-secondary);
font-size: 0.9375rem;
}
.axis-journals {
margin-top: 0;
}
.axis-page-title--centered {
text-align: center;
margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
font-size: 2rem;
font-weight: 700;
}
/* Journal Grid - STRICT 2 Columns - Higher specificity */
.axis-journals-grid--horizontal {
display: grid !important;
grid-template-columns: repeat(2, 1fr) !important;
gap: calc(var(--axis-spacing-unit) * 1.25);
max-width: 1200px;
margin: 0 auto;
}
/* Journal Card - Horizontal Layout - NIVO STYLE: 2 rows */
.axis-journal-card--horizontal {
background: var(--axis-bg-secondary);
border-radius: 12px;
overflow: hidden;
border: 1px solid var(--axis-border);
transition: all 0.3s ease;
display: grid;
grid-template-columns: 180px 1fr;
grid-template-rows: auto auto;
gap: 0;
padding: 0;
height: fit-content;
}
.axis-journal-card--horizontal:hover {
transform: translateY(-2px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
border-color: var(--axis-primary);
}
/* Image Wrapper - Top left */
.axis-journal-card--horizontal .axis-journal-card__image-wrapper {
width: 180px;
height: 240px;
flex-shrink: 0;
grid-row: 1;
grid-column: 1;
padding: calc(var(--axis-spacing-unit) * 1.5);
}
.axis-journal-card--horizontal .axis-journal-card__image {
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
background: #f8f9fa;
border-radius: 8px;
border: 1px solid var(--axis-border);
}
.axis-journal-card--horizontal .axis-journal-card__image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.axis-journal-card--horizontal .axis-journal-card__image--placeholder {
background: var(--axis-bg-secondary);
border: 2px dashed var(--axis-border);
}
.axis-journal-card--horizontal .axis-journal-card__image--placeholder svg {
color: var(--axis-text-tertiary);
opacity: 0.3;
width: 48px;
height: 48px;
}
/* Content - Top right */
.axis-journal-card--horizontal .axis-journal-card__content {
display: flex;
flex-direction: column;
gap: calc(var(--axis-spacing-unit) * 0.75);
min-width: 0;
grid-row: 1;
grid-column: 2;
padding: calc(var(--axis-spacing-unit) * 1.5);
padding-left: 0;
}
.axis-journal-card--horizontal .axis-journal-card__title {
font-size: 1.375rem;
font-weight: 600;
line-height: 1.3;
margin: 0;
}
.axis-journal-card--horizontal .axis-journal-card__title a {
color: var(--axis-text-primary);
text-decoration: none;
transition: color 0.2s ease;
}
.axis-journal-card--horizontal .axis-journal-card__title a:hover {
color: var(--axis-primary);
}
/* ISSN - Under title */
.axis-journal-card--horizontal .axis-journal-card__issn {
display: flex;
gap: calc(var(--axis-spacing-unit) * 0.75);
font-size: 0.875rem;
color: var(--axis-text-secondary);
flex-wrap: wrap;
}
.axis-journal-card--horizontal .axis-issn-item {
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
background: var(--axis-bg-primary);
border: 1px solid var(--axis-border);
border-radius: 6px;
font-size: 0.875rem;
}
.axis-journal-card--horizontal .axis-issn-item strong {
color: var(--axis-text-primary);
font-weight: 600;
}
/* Actions - Bottom row, FULL WIDTH */
.axis-journal-card--horizontal .axis-journal-card__actions {
display: flex;
gap: calc(var(--axis-spacing-unit) * 0.75);
flex-wrap: wrap;
grid-row: 2;
grid-column: 1 / -1;
padding: calc(var(--axis-spacing-unit) * 1.25);
border-top: 1px solid var(--axis-border);
background: var(--axis-bg-primary);
align-items: center;
}
.axis-journal-card--horizontal .axis-btn--small {
padding: 0.5rem 1.25rem;
font-size: var(--axis-font-sm);
white-space: nowrap;
font-weight: 500;
}
/* Dark mode */
body.dark-mode .axis-journal-card--horizontal {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .axis-journal-card--horizontal:hover {
background: rgba(255, 255, 255, 0.05);
border-color: var(--axis-primary);
}
body.dark-mode .axis-journal-card--horizontal .axis-journal-card__image {
background: rgba(255, 255, 255, 0.05);
}
body.dark-mode .axis-journal-card--horizontal .axis-issn-item {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .axis-journal-card--horizontal .axis-journal-card__actions {
background: rgba(255, 255, 255, 0.02);
border-top-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .axis-journal-card--horizontal .axis-journal-card__image {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
}
/* Responsive */
@media (max-width: 768px) {
.axis-journals-grid--horizontal {
grid-template-columns: 1fr !important;
gap: calc(var(--axis-spacing-unit) * 1.5);
}
.axis-journal-card--horizontal {
grid-template-columns: 1fr;
grid-template-rows: auto auto auto;
gap: 0;
padding: 0;
}
.axis-journal-card--horizontal .axis-journal-card__image-wrapper {
width: 100%;
height: auto;
aspect-ratio: 3 / 4;
max-width: 200px;
margin: 0 auto;
grid-row: 1;
grid-column: 1;
padding: calc(var(--axis-spacing-unit) * 1.5);
}
.axis-journal-card--horizontal .axis-journal-card__content {
grid-row: 2;
grid-column: 1;
padding: 0 calc(var(--axis-spacing-unit) * 1.5) calc(var(--axis-spacing-unit) * 1.5);
text-align: center;
}
.axis-journal-card--horizontal .axis-journal-card__title {
font-size: 1.25rem;
}
.axis-journal-card--horizontal .axis-journal-card__issn {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
}
.axis-journal-card--horizontal .axis-journal-card__actions {
grid-row: 3;
grid-column: 1;
flex-direction: column;
gap: calc(var(--axis-spacing-unit) * 0.75);
padding: calc(var(--axis-spacing-unit) * 1.5);
}
.axis-journal-card--horizontal .axis-btn--small {
width: 100%;
text-align: center;
justify-content: center;
}
/* Page-level mobile adjustments */
.axis-page--site-index {
padding: calc(var(--axis-spacing-unit)) 0;
}
.axis-site-about {
margin: 0 calc(var(--axis-spacing-unit)) calc(var(--axis-spacing-unit) * 1.5);
padding: calc(var(--axis-spacing-unit));
font-size: var(--axis-font-sm);
}
.axis-page-title--centered {
font-size: 1.5rem;
margin-bottom: calc(var(--axis-spacing-unit));
}
}
/* ============================================
SUBSCRIPTIONS
============================================ */
.axis-page--subscriptions,
.axis-page--user-subscriptions {
padding: calc(var(--axis-spacing-unit) * 3) 0;
}
.axis-subscription-section {
margin-bottom: calc(var(--axis-spacing-unit) * 4);
}
.axis-section-title {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: 1rem;
}
.axis-section-description {
color: var(--axis-text-secondary);
margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
}
.axis-subscription-table {
overflow-x: auto;
margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
}
.axis-subscription-table table {
width: 100%;
border-collapse: collapse;
background: var(--axis-bg);
border: 1px solid var(--axis-border);
border-radius: 8px;
}
.axis-subscription-table thead {
background: var(--axis-bg-secondary);
}
.axis-subscription-table th,
.axis-subscription-table td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid var(--axis-border);
}
.axis-subscription-table th {
font-weight: 600;
color: var(--axis-text);
}
.axis-subscription-table tr:last-child td {
border-bottom: none;
}
.axis-sub-name {
font-weight: 600;
margin-bottom: 0.25rem;
}
.axis-sub-desc {
font-size: 0.875rem;
color: var(--axis-text-secondary);
}
.axis-sub-cost {
font-weight: 600;
color: var(--axis-primary);
}
.axis-subscription-action {
margin-top: calc(var(--axis-spacing-unit) * 1.5);
}
.axis-subscription-card {
padding: calc(var(--axis-spacing-unit) * 1.5);
background: var(--axis-bg);
border: 1px solid var(--axis-border);
border-radius: 8px;
margin-bottom: 1rem;
}
.axis-info-box {
padding: calc(var(--axis-spacing-unit) * 1.5);
background: var(--axis-bg-secondary);
border-radius: 8px;
margin-bottom: calc(var(--axis-spacing-unit) * 2);
}
/* ============================================
CATALOG CATEGORY
============================================ */
.axis-page--catalog-category {
padding: calc(var(--axis-spacing-unit) * 3) 0;
}
.axis-category-info {
display: grid;
grid-template-columns: 200px 1fr;
gap: calc(var(--axis-spacing-unit) * 2);
margin-bottom: calc(var(--axis-spacing-unit) * 3);
padding: calc(var(--axis-spacing-unit) * 2);
background: var(--axis-bg-secondary);
border-radius: 12px;
}
.axis-category-image img {
width: 100%;
border-radius: 8px;
}
.axis-category-description {
color: var(--axis-text-secondary);
line-height: 1.6;
}
.axis-subcategories {
margin-bottom: calc(var(--axis-spacing-unit) * 3);
}
.axis-subcategories h2 {
font-size: 1.25rem;
font-weight: 600;
margin-bottom: 1rem;
}
.axis-subcategories ul {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
list-style: none;
padding: 0;
margin: 0;
}
.axis-subcategories li a {
display: inline-block;
padding: 0.5rem 1rem;
background: var(--axis-bg-secondary);
border: 1px solid var(--axis-border);
border-radius: 6px;
text-decoration: none;
color: var(--axis-text);
transition: all 0.2s ease;
}
.axis-subcategories li a:hover {
background: var(--axis-primary);
border-color: var(--axis-primary);
color: #ffffff;
}
.axis-category-articles h2 {
font-size: 1.5rem;
font-weight: 600;
margin-bottom: calc(var(--axis-spacing-unit) * 2);
}
/* ============================================
BUTTONS
============================================ */
.axis-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1.5rem;
border-radius: 6px;
font-weight: 600;
text-decoration: none;
transition: all 0.2s ease;
cursor: pointer;
}
/* ============================================
FORM WRAPPER
============================================ */
.axis-form-wrapper {
max-width: 600px;
margin: calc(var(--axis-spacing-unit) * 2) 0;
padding: calc(var(--axis-spacing-unit) * 2);
background: var(--axis-bg);
border: 1px solid var(--axis-border);
border-radius: 12px;
}
/* ============================================
RESPONSIVE
============================================ */
@media (max-width: 768px) {
.axis-category-info {
grid-template-columns: 1fr;
}
.axis-subscription-table {
font-size: 0.875rem;
}
.axis-subscription-table th,
.axis-subscription-table td {
padding: 0.75rem 0.5rem;
}
}
/* ============================================
DARK MODE
============================================ */
body.dark-mode .axis-journal-card,
body.dark-mode .axis-subscription-card,
body.dark-mode .axis-form-wrapper {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .axis-site-about,
body.dark-mode .axis-info-box,
body.dark-mode .axis-category-info {
background: rgba(255, 255, 255, 0.05);
border-color: rgba(255, 255, 255, 0.1);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
body.dark-mode .axis-subscription-table thead {
background: rgba(255, 255, 255, 0.05);
}
/* ============================================
SEARCH RESULTS - COMPACT LAYOUT
============================================ */
/* Compact article card without image */
.axis-results-list .axis-article-card {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 0;
border-radius: 8px;
overflow: visible;
}
.axis-results-list .axis-article-card__content {
padding: calc(var(--axis-spacing-unit) * 1.5);
flex: 1;
}
/* Make metadata more compact */
.axis-results-list .axis-article-meta {
margin-top: 0.75rem;
}
/* Smaller title in search results */
.axis-results-list .axis-article-title {
font-size: 1.125rem;
line-height: 1.5;
margin-bottom: 0.75rem;
}
/* Compact authors */
.axis-results-list .axis-article-authors {
font-size: 0.875rem;
margin-bottom: 0.5rem;
}
/* Compact abstract */
.axis-results-list .axis-article-abstract {
font-size: 0.9375rem;
line-height: 1.5;
margin-top: 0.75rem;
}
/* Remove excessive spacing */
.axis-results-list .axis-article-section {
font-size: 0.8125rem;
}
/* More compact meta info */
.axis-results-list .axis-article-meta-item {
font-size: 0.8125rem;
}
/* Responsive */
@media (max-width: 768px) {
.axis-results-list .axis-article-card {
flex-direction: column;
}
}
/* ============================================
SEARCH - CUSTOM DATE SELECTS
============================================ */
.axis-date-selects {
display: flex;
gap: 0.5rem;
}
.axis-date-selects select {
flex: 1;
min-width: 0;
}
/* Year select wider */
.axis-date-selects select[name*="Year"] {
flex: 0 0 90px;
}
/* Month select wider */
.axis-date-selects select[name*="Month"] {
flex: 1 1 auto;
min-width: 120px;
}
/* Day select narrow */
.axis-date-selects select[name*="Day"] {
flex: 0 0 70px;
}
@media (max-width: 768px) {
.axis-date-selects {
flex-direction: column;
}
.axis-date-selects select {
width: 100%;
}
}
/* ============================================
ARTICLE - CATEGORIES SIDEBAR
============================================ */
.axis-sidebar-block--categories {
margin-bottom: calc(var(--axis-spacing-unit) * 2);
}
.axis-category-inline {
line-height: 1.6;
}
.axis-category-link-inline {
color: var(--axis-primary);
font-size: 0.9375rem;
font-weight: 500;
text-decoration: none;
transition: color 0.2s ease;
display: inline;
}
.axis-category-link-inline:hover {
color: var(--axis-text-primary);
text-decoration: underline;
}
/* Dark mode */
body.dark-mode .axis-category-link-inline {
color: var(--axis-primary);
}
body.dark-mode .axis-category-link-inline:hover {
color: rgba(255, 255, 255, 0.9);
text-decoration: underline;
}
/* ============================================
SITE FOOTER (indexSite.tpl)
============================================ */
.axis-site-footer {
background: var(--axis-bg-secondary);
border-top: 1px solid var(--axis-border);
padding: calc(var(--axis-spacing-unit) * 4) 0 calc(var(--axis-spacing-unit) * 2);
margin-top: calc(var(--axis-spacing-unit) * 6);
}
.axis-site-footer__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: calc(var(--axis-spacing-unit) * 3);
margin-bottom: calc(var(--axis-spacing-unit) * 3);
}
.axis-site-footer__column {
min-width: 0;
}
.axis-site-footer__title {
font-size: var(--axis-font-lg);
font-weight: 600;
color: var(--axis-text-primary);
margin: 0 0 calc(var(--axis-spacing-unit));
}
.axis-site-footer__content {
font-size: var(--axis-font-sm);
line-height: 1.6;
color: var(--axis-text-secondary);
}
.axis-site-footer__content p {
margin: 0 0 calc(var(--axis-spacing-unit));
}
.axis-site-footer__content a {
color: var(--axis-primary);
text-decoration: none;
transition: color 0.2s ease;
}
.axis-site-footer__content a:hover {
color: var(--axis-text-primary);
text-decoration: underline;
}
.axis-site-footer__nav ul {
list-style: none;
padding: 0;
margin: 0;
}
.axis-site-footer__nav li {
margin-bottom: calc(var(--axis-spacing-unit) * 0.75);
}
.axis-site-footer__nav a {
color: var(--axis-text-secondary);
text-decoration: none;
font-size: 0.9375rem;
transition: color 0.2s ease;
display: inline-block;
}
.axis-site-footer__nav a:hover {
color: var(--axis-primary);
transform: translateX(4px);
}
/* Dark mode */
body.dark-mode .axis-site-footer {
background: rgba(255, 255, 255, 0.03);
border-top-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .axis-site-footer__bottom {
border-top-color: rgba(255, 255, 255, 0.1);
}
/* Responsive */
@media (max-width: 1024px) {
.axis-site-footer__grid {
grid-template-columns: repeat(2, 1fr);
gap: calc(var(--axis-spacing-unit) * 2);
}
}
@media (max-width: 768px) {
.axis-site-footer__grid {
grid-template-columns: 1fr;
}
.axis-site-footer__bottom {
flex-direction: column;
gap: calc(var(--axis-spacing-unit));
text-align: center;
}
}
/* ============================================
SITE INDEX - JOURNAL CARDS ENHANCEMENTS
============================================ */
.axis-journal-card__image--placeholder {
background: var(--axis-bg-secondary);
border: 1px solid var(--axis-border);
display: flex;
align-items: center;
justify-content: center;
aspect-ratio: 16 / 9;
}
.axis-journal-card__image--placeholder svg {
color: var(--axis-text-tertiary);
opacity: 0.5;
}
.axis-journal-card__issn {
display: flex;
gap: calc(var(--axis-spacing-unit) * 1.5);
margin-bottom: calc(var(--axis-spacing-unit) * 1.5);
font-size: 0.875rem;
color: var(--axis-text-secondary);
}
.axis-issn-item {
display: flex;
align-items: center;
gap: 0.25rem;
}
.axis-issn-item strong {
color: var(--axis-text-primary);
font-weight: 600;
}
.axis-journal-card__actions {
display: flex;
gap: calc(var(--axis-spacing-unit));
flex-wrap: wrap;
}
.axis-btn--small {
padding: 0.5rem 1rem;
font-size: var(--axis-font-sm);
}
.axis-btn--outline {
background: transparent;
border: 1px solid var(--axis-border);
color: var(--axis-text-primary);
}
.axis-btn--outline:hover {
background: var(--axis-bg-secondary);
border-color: var(--axis-primary);
color: var(--axis-primary);
}
/* Dark mode */
body.dark-mode .axis-journal-card__image--placeholder {
background: rgba(255, 255, 255, 0.03);
border-color: rgba(255, 255, 255, 0.1);
}
body.dark-mode .axis-btn--outline {
border-color: rgba(255, 255, 255, 0.2);
}
body.dark-mode .axis-btn--outline:hover {
background: rgba(255, 255, 255, 0.05);
border-color: var(--axis-primary);
}
/* Responsive */
@media (max-width: 768px) {
.axis-journal-card__issn {
flex-direction: column;
gap: 0.5rem;
}
.axis-journal-card__actions {
flex-direction: column;
}
.axis-btn--small {
width: 100%;
text-align: center;
}
}
/* ============================================================================
AUTH PAGES FIX - Login, Register, Forgot Password Submit Buttons
============================================================================ */
/* Login page submit button */
.page_login button[type="submit"],
.page_login input[type="submit"] {
background-color: var(--axis-primary) !important;
color: #ffffff !important;
border: 2px solid var(--axis-primary) !important;
padding: 12px 24px !important;
font-weight: 600 !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
font-size: 1rem !important;
min-width: 120px !important;
}
.page_login button[type="submit"]:hover,
.page_login input[type="submit"]:hover {
background-color: transparent !important;
color: var(--axis-primary) !important;
border-color: var(--axis-primary) !important;
}
/* Register page submit button */
.page_user.op_register button[type="submit"],
.page_user.op_register input[type="submit"] {
background-color: var(--axis-primary) !important;
color: #ffffff !important;
border: 2px solid var(--axis-primary) !important;
padding: 12px 24px !important;
font-weight: 600 !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
font-size: 1rem !important;
min-width: 120px !important;
}
.page_user.op_register button[type="submit"]:hover,
.page_user.op_register input[type="submit"]:hover {
background-color: transparent !important;
color: var(--axis-primary) !important;
border-color: var(--axis-primary) !important;
}
/* Forgot password page submit button */
.page_login.op_lostPassword button[type="submit"],
.page_login.op_lostPassword input[type="submit"] {
background-color: var(--axis-primary) !important;
color: #ffffff !important;
border: 2px solid var(--axis-primary) !important;
padding: 12px 24px !important;
font-weight: 600 !important;
border-radius: 6px !important;
cursor: pointer !important;
transition: all 0.2s ease !important;
font-size: 1rem !important;
min-width: 120px !important;
}
.page_login.op_lostPassword button[type="submit"]:hover,
.page_login.op_lostPassword input[type="submit"]:hover {
background-color: transparent !important;
color: var(--axis-primary) !important;
border-color: var(--axis-primary) !important;
}
/* Dark mode adjustments */
html.dark-mode .page_login button[type="submit"],
html.dark-mode .page_login input[type="submit"],
html.dark-mode .page_user.op_register button[type="submit"],
html.dark-mode .page_user.op_register input[type="submit"],
html.dark-mode .page_login.op_lostPassword button[type="submit"],
html.dark-mode .page_login.op_lostPassword input[type="submit"] {
background-color: var(--axis-primary) !important;
color: #ffffff !important;
border-color: var(--axis-primary) !important;
}
html.dark-mode .page_login button[type="submit"]:hover,
html.dark-mode .page_login input[type="submit"]:hover,
html.dark-mode .page_user.op_register button[type="submit"]:hover,
html.dark-mode .page_user.op_register input[type="submit"]:hover,
html.dark-mode .page_login.op_lostPassword button[type="submit"]:hover,
html.dark-mode .page_login.op_lostPassword input[type="submit"]:hover {
background-color: transparent !important;
color: var(--axis-primary) !important;
border-color: var(--axis-primary) !important;
}
/* ============================================================================
/* ============================================================================
CUSTOM BLOCKS SECTION (Before Footer) - TITLE OUTSIDE CARD
========================================================================== */
.axis-custom-blocks-section {
background: var(--axis-surface);
padding: 3rem 0;
margin-top: 3rem;
border-top: 1px solid var(--axis-border);
border-bottom: 1px solid var(--axis-border);
}
.axis-custom-blocks-container-full {
width: 100%;
max-width: 100% !important; /* Override any container limits */
padding: 0 3rem; /* More breathing room */
}
/* Full-width mode: Show more blocks, slightly smaller for better fit */
.axis-custom-blocks-container-full .axis-custom-block-wrapper {
flex: 0 0 300px; /* Slightly wider than boxed (280px) */
min-width: 300px;
max-width: 300px;
}
/* Visual distinction: Darker background for full-width */
.axis-custom-blocks-container-full ~ .axis-custom-blocks-section {
background: var(--axis-background);
}
.axis-custom-blocks-scroll {
display: flex;
gap: 1.5rem;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
padding-bottom: 1rem;
/* Styled scrollbar */
scrollbar-width: thin;
scrollbar-color: var(--axis-primary) transparent;
}
.axis-custom-blocks-scroll::-webkit-scrollbar {
height: 8px;
}
.axis-custom-blocks-scroll::-webkit-scrollbar-track {
background: var(--axis-surface);
border-radius: 4px;
}
.axis-custom-blocks-scroll::-webkit-scrollbar-thumb {
background: var(--axis-primary);
border-radius: 4px;
transition: background var(--axis-transition-fast);
}
.axis-custom-blocks-scroll::-webkit-scrollbar-thumb:hover {
background: var(--axis-secondary);
}
/* Block Wrapper (title + card container) */
.axis-custom-block-wrapper {
flex: 0 0 280px;
min-width: 280px;
max-width: 280px;
display: flex;
flex-direction: column;
}
/* Block Title (outside card, on top) */
.axis-custom-block__title {
font-size: 1rem;
font-weight: 600;
margin: 0 0 0.75rem 0;
color: var(--axis-primary);
line-height: 1.4;
padding: 0 0.25rem;
}
/* Block Card (content only) */
.axis-custom-block {
position: relative; /* For absolute positioned indicator and gradient */
flex: 1;
background: var(--axis-background);
border: 1px solid var(--axis-border);
border-radius: var(--axis-radius-lg);
padding: 1.5rem;
overflow-y: auto;
overflow-x: hidden;
transition: all var(--axis-transition);
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
max-height: 350px;
}
.axis-custom-block-wrapper:hover .axis-custom-block {
transform: translateY(-4px);
box-shadow: var(--axis-shadow-lg);
border-color: var(--axis-primary);
}
.axis-custom-block-wrapper:hover .axis-custom-block__title {
color: var(--axis-secondary);
}
/* Block Content */
.axis-custom-block__content {
position: relative; /* For absolute positioned gradient */
font-size: 0.875rem;
line-height: 1.6;
color: var(--axis-text-secondary);
}
/* Content inside blocks */
.axis-custom-block__content p {
margin: 0 0 0.75rem 0;
}
.axis-custom-block__content p:last-child {
margin-bottom: 0;
}
.axis-custom-block__content img {
max-width: 100%;
height: auto;
display: block;
margin: 0.5rem 0;
border-radius: var(--axis-radius-md);
}
.axis-custom-block__content a {
color: var(--axis-primary);
text-decoration: none;
transition: color var(--axis-transition-fast);
}
.axis-custom-block__content a:hover {
color: var(--axis-secondary);
text-decoration: underline;
}
/* Custom scrollbar - ALWAYS VISIBLE */
.axis-custom-block::-webkit-scrollbar {
width: 8px; /* Always visible, no hover needed */
}
.axis-custom-block::-webkit-scrollbar-track {
background: var(--axis-surface);
border-radius: 4px;
}
.axis-custom-block::-webkit-scrollbar-thumb {
background: var(--axis-primary);
border-radius: 4px;
transition: background 0.2s ease;
}
.axis-custom-block::-webkit-scrollbar-thumb:hover {
background: var(--axis-secondary);
}
/* Firefox scrollbar - ALWAYS VISIBLE */
.axis-custom-block {
scrollbar-width: thin; /* Always visible */
scrollbar-color: var(--axis-primary) var(--axis-surface);
}
/* Responsive */
@media (max-width: 1024px) {
.axis-custom-block-wrapper {
flex: 0 0 260px;
min-width: 260px;
max-width: 260px;
}
}
@media (max-width: 768px) {
.axis-custom-blocks-section {
padding: 2rem 0;
margin-top: 2rem;
}
.axis-custom-blocks-container-full {
padding: 0 1rem;
}
.axis-custom-block-wrapper {
flex: 0 0 240px;
min-width: 240px;
max-width: 240px;
}
.axis-custom-block {
max-height: 320px;
padding: 1.25rem;
}
.axis-custom-blocks-scroll {
gap: 1rem;
}
}
@media (max-width: 480px) {
.axis-custom-block-wrapper {
flex: 0 0 220px;
min-width: 220px;
max-width: 220px;
}
}
/* ============================================================================
FULL-WIDTH MODE ENHANCEMENTS
========================================================================== */
/* Full-width section: Edge-to-edge appearance */
.axis-custom-blocks-section--full {
background: var(--axis-background); /* Different from boxed */
padding: 3rem 0;
}
/* Full-width container styling */
.axis-custom-blocks-container-full {
width: 100%;
max-width: 100% !important; /* Override any container limits */
padding: 0 3rem; /* More breathing room on edges */
}
/* Full-width: Slightly wider blocks for better use of space */
.axis-custom-blocks-section--full .axis-custom-block-wrapper {
flex: 0 0 300px; /* 300px vs 280px in boxed */
min-width: 300px;
max-width: 300px;
}
/* Full-width: Remove some borders for cleaner edge-to-edge look */
.axis-custom-blocks-section--full {
border-top: none;
border-bottom: 1px solid var(--axis-border);
box-shadow: 0 1px 0 var(--axis-border); /* Subtle top shadow instead */
}
/* Responsive: Full-width adjustments */
@media (max-width: 1024px) {
.axis-custom-blocks-container-full {
padding: 0 2rem;
}
.axis-custom-blocks-section--full .axis-custom-block-wrapper {
flex: 0 0 280px; /* Same as boxed on smaller screens */
min-width: 280px;
max-width: 280px;
}
}
@media (max-width: 768px) {
.axis-custom-blocks-container-full {
padding: 0 1.5rem;
}
}
@media (max-width: 480px) {
.axis-custom-blocks-container-full {
padding: 0 1rem;
}
}
/* ============================================================================
SCROLL INDICATORS FOR CUSTOM BLOCKS
========================================================================== */
/* 1. FADE GRADIENT at bottom (always visible) */
.axis-custom-block__content::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(to bottom,
transparent 0%,
var(--axis-background) 100%);
pointer-events: none;
opacity: 0;
transition: opacity var(--axis-transition);
}
/* Show gradient when content is scrollable */
.axis-custom-block.has-scroll .axis-custom-block__content::after {
opacity: 1;
}
/* Hide indicator when at bottom - NOT NEEDED ANYMORE, REMOVED */
opacity: 0 !important;
}
.axis-custom-block.scroll-at-bottom .axis-custom-block__content::after {
opacity: 0;
}
/* Dark mode adjustments */
body.dark-mode .axis-custom-block__content::after {
background: linear-gradient(to bottom,
transparent 0%,
rgba(255, 255, 255, 0.03) 100%);
}
body.dark-mode .axis-custom-block__scroll-indicator {
background: #818CF8;
box-shadow: 0 2px 8px rgba(129, 140, 248, 0.4);
}
body.dark-mode .axis-custom-block__scroll-indicator:hover {
background: #34D399;
box-shadow: 0 2px 12px rgba(52, 211, 153, 0.5);
}
/* ============================================================================
ABOUT JOURNAL TAB CONTENT
============================================================================ */
.axis-about-journal-content {
max-width: 900px;
margin: 0 auto;
padding: 2rem 1rem;
}
.axis-about-section {
margin-bottom: 3rem;
padding-bottom: 2rem;
border-bottom: 1px solid var(--axis-border);
}
.axis-about-section:last-child {
border-bottom: none;
margin-bottom: 0;
padding-bottom: 0;
}
.axis-about-section__title {
font-size: var(--axis-font-2xl);
font-weight: 700;
color: var(--axis-heading);
margin-bottom: 1.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.axis-about-section__title::before {
content: '';
width: 4px;
height: 1.5rem;
background: var(--axis-primary);
border-radius: var(--axis-radius-sm);
}
.axis-about-section__content {
font-size: var(--axis-font-base);
line-height: 1.7;
color: var(--axis-text);
}
.axis-about-section__content p {
margin-bottom: 1rem;
}
.axis-about-section__content p:last-child {
margin-bottom: 0;
}
.axis-about-section__content a.axis-btn {
margin-top: 1.5rem;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.axis-about-section__content strong {
color: var(--axis-heading);
font-weight: 600;
}
/* Responsive */
@media (max-width: 768px) {
.axis-about-journal-content {
padding: 1.5rem 1rem;
}
.axis-about-section {
margin-bottom: 2rem;
padding-bottom: 1.5rem;
}
.axis-about-section__title {
font-size: var(--axis-font-xl);
}
}