```css /* ========================================================= VISTARA FINAL STYLE Dark Blue Academic Theme Header + Navigation + Sidebar Buttons ========================================================= */ body { background-color: #f4f7fa !important; color: #1f2933 !important; } a { color: #005f8a !important; } a:hover, a:focus { color: #003b5c !important; } .pkp_structure_head { background-color: #003b5c !important; border-bottom: 4px solid #7ec8e3 !important; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.18) !important; overflow: visible !important; } .pkp_head_wrapper { background: linear-gradient(90deg, #003b5c 0%, #005f8a 55%, #0077b6 100%) !important; padding: 18px 24px !important; overflow: visible !important; } .pkp_site_name, .pkp_site_name a { color: #ffffff !important; font-weight: 800 !important; font-size: 30px !important; line-height: 1.25 !important; text-decoration: none !important; letter-spacing: 0.2px !important; } .pkp_site_name img, .pkp_site_name .is_img img, img[src*="pageHeaderLogoImage"] { max-height: 120px !important; width: auto !important; max-width: 100% !important; display: block !important; margin: 8px 0 !important; } .pkp_site_nav_toggle, button.pkp_site_nav_toggle { display: none !important; visibility: hidden !important; opacity: 0 !important; } .pkp_site_nav_menu, .pkp_navigation_primary_wrapper, .pkp_navigation_primary_row, .pkp_navigation_user_wrapper { display: block !important; visibility: visible !important; opacity: 1 !important; position: static !important; height: auto !important; max-height: none !important; overflow: visible !important; transform: none !important; clip: auto !important; } .pkp_navigation_primary_row { background-color: #002f49 !important; border-top: 1px solid #7ec8e3 !important; border-bottom: 1px solid #7ec8e3 !important; padding: 4px 18px !important; } #navigationPrimary, .pkp_navigation_primary { display: flex !important; flex-wrap: wrap !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; visibility: visible !important; opacity: 1 !important; list-style: none !important; margin: 0 !important; padding: 6px 0 !important; } #navigationPrimary > li, .pkp_navigation_primary > li { display: inline-block !important; visibility: visible !important; opacity: 1 !important; position: relative !important; } #navigationPrimary > li > a, #navigationPrimary > li > a:link, #navigationPrimary > li > a:visited, .pkp_navigation_primary > li > a, .pkp_navigation_primary > li > a:link, .pkp_navigation_primary > li > a:visited { display: inline-block !important; visibility: visible !important; opacity: 1 !important; color: #ffffff !important; background: transparent !important; padding: 10px 14px !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.4 !important; text-transform: uppercase !important; letter-spacing: 0.4px !important; text-decoration: none !important; border-radius: 4px !important; white-space: nowrap !important; } #navigationPrimary > li > a:hover, #navigationPrimary > li > a:focus, .pkp_navigation_primary > li > a:hover, .pkp_navigation_primary > li > a:focus { background-color: #0077b6 !important; color: #ffffff !important; text-decoration: none !important; } #navigationPrimary ul, .pkp_navigation_primary ul { display: none !important; position: absolute !important; top: 100% !important; left: 0 !important; background-color: #ffffff !important; border: 1px solid #7ec8e3 !important; border-radius: 6px !important; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18) !important; padding: 6px !important; margin: 0 !important; min-width: 230px !important; z-index: 99999 !important; } #navigationPrimary li:hover > ul, #navigationPrimary li:focus-within > ul, .pkp_navigation_primary li:hover > ul, .pkp_navigation_primary li:focus-within > ul { display: block !important; visibility: visible !important; opacity: 1 !important; } #navigationPrimary ul li, .pkp_navigation_primary ul li { display: block !important; width: 100% !important; } #navigationPrimary ul a, #navigationPrimary ul a:link, #navigationPrimary ul a:visited, .pkp_navigation_primary ul a, .pkp_navigation_primary ul a:link, .pkp_navigation_primary ul a:visited { display: block !important; color: #003b5c !important; background: #ffffff !important; padding: 10px 14px !important; font-size: 14px !important; font-weight: 600 !important; text-decoration: none !important; white-space: nowrap !important; border-radius: 4px !important; } #navigationPrimary ul a:hover, #navigationPrimary ul a:focus, .pkp_navigation_primary ul a:hover, .pkp_navigation_primary ul a:focus { background-color: #003b5c !important; color: #ffffff !important; } #navigationUserWrapper, .pkp_navigation_user_wrapper { display: block !important; visibility: visible !important; opacity: 1 !important; position: static !important; width: 100% !important; height: auto !important; max-height: none !important; overflow: visible !important; text-align: right !important; margin: 8px 0 !important; padding: 0 !important; z-index: 99999 !important; } #navigationUser, .pkp_navigation_user { display: flex !important; flex-wrap: wrap !important; justify-content: flex-end !important; align-items: center !important; gap: 8px !important; visibility: visible !important; opacity: 1 !important; list-style: none !important; margin: 0 !important; padding: 8px 0 !important; } #navigationUser li, .pkp_navigation_user li { display: inline-block !important; visibility: visible !important; opacity: 1 !important; } #navigationUser a, #navigationUser a:link, #navigationUser a:visited, .pkp_navigation_user a, .pkp_navigation_user a:link, .pkp_navigation_user a:visited { display: inline-block !important; visibility: visible !important; opacity: 1 !important; color: #ffffff !important; background-color: #0077b6 !important; border: 1px solid #7ec8e3 !important; border-radius: 5px !important; padding: 8px 14px !important; font-size: 14px !important; font-weight: 700 !important; line-height: 1.4 !important; text-decoration: none !important; white-space: nowrap !important; } #navigationUser a:hover, #navigationUser a:focus, .pkp_navigation_user a:hover, .pkp_navigation_user a:focus { color: #ffffff !important; background-color: #003b5c !important; text-decoration: none !important; } .pkp_navigation_user a[href*="register"] { font-size: 0 !important; } .pkp_navigation_user a[href*="register"]::after { content: "Register" !important; font-size: 14px !important; color: #ffffff !important; font-weight: 700 !important; } .pkp_navigation_user a[href*="login"] { font-size: 0 !important; } .pkp_navigation_user a[href*="login"]::after { content: "Login" !important; font-size: 14px !important; color: #ffffff !important; font-weight: 700 !important; } .pkp_structure_content { background-color: #ffffff !important; } .pkp_structure_main { background-color: #ffffff !important; padding-top: 20px !important; } .page, .page_index_journal, .page_about { background-color: #ffffff !important; } .page h1, .page h2, .page h3, .page h4 { color: #003b5c !important; font-weight: 700 !important; } .cmp_breadcrumbs { color: #003b5c !important; font-size: 14px !important; } .pkp_structure_sidebar { padding-top: 12px !important; } .pkp_block, .block_custom { background-color: #ffffff !important; border: 1px solid #d6e6f0 !important; border-radius: 8px !important; box-shadow: 0 3px 10px rgba(0, 59, 92, 0.10) !important; margin-bottom: 20px !important; padding: 0 !important; overflow: hidden !important; } .pkp_block .title, .block_custom .title { display: block !important; background: linear-gradient(90deg, #003b5c 0%, #005f8a 100%) !important; color: #ffffff !important; padding: 13px 15px !important; margin: 0 !important; font-size: 15px !important; font-weight: 800 !important; text-align: center !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; border-bottom: 3px solid #7ec8e3 !important; } .journal-sidebar-buttons { display: block !important; width: 100% !important; padding: 10px !important; box-sizing: border-box !important; } .journal-sidebar-buttons .sidebar-btn { display: block !important; width: 100% !important; box-sizing: border-box !important; background-color: #003b5c !important; color: #ffffff !important; padding: 15px 16px !important; margin: 9px 0 !important; border-left: 5px solid #7ec8e3 !important; border-top: 1px solid #005f8a !important; border-right: 1px solid #005f8a !important; border-bottom: 1px solid #005f8a !important; border-radius: 5px !important; font-size: 15px !important; font-weight: 700 !important; line-height: 1.35 !important; text-align: left !important; text-decoration: none !important; box-shadow: 0 2px 6px rgba(0, 59, 92, 0.18) !important; transition: all 0.2s ease-in-out !important; } .journal-sidebar-buttons .sidebar-btn:hover, .journal-sidebar-buttons .sidebar-btn:focus { background-color: #005f8a !important; color: #ffffff !important; border-left-color: #dff6ff !important; text-decoration: none !important; padding-left: 22px !important; box-shadow: 0 4px 12px rgba(0, 59, 92, 0.28) !important; } .journal-sidebar-buttons .sidebar-btn::before { content: "› "; font-weight: 800 !important; color: #dff6ff !important; } .template-download-box { background-color: #f5f9fc !important; border: 1px solid #d6e6f0 !important; border-radius: 10px !important; padding: 24px !important; margin: 20px 0 !important; box-shadow: 0 3px 10px rgba(0, 59, 92, 0.08) !important; } .template-download-box h3 { color: #003b5c !important; font-weight: 800 !important; margin-bottom: 12px !important; } .template-download-btn { display: inline-block !important; background-color: #003b5c !important; color: #ffffff !important; padding: 14px 22px !important; border-radius: 8px !important; font-weight: 700 !important; text-decoration: none !important; border: 2px solid #005f8a !important; margin-top: 10px !important; } .template-download-btn:hover, .template-download-btn:focus { background-color: #005f8a !important; color: #ffffff !important; text-decoration: none !important; } .pkp_structure_footer_wrapper { background-color: #003b5c !important; color: #ffffff !important; border-top: 4px solid #7ec8e3 !important; } .pkp_structure_footer_wrapper a { color: #dff6ff !important; } @media screen and (max-width: 768px) { .pkp_head_wrapper { padding: 14px 16px !important; } .pkp_site_name, .pkp_site_name a { font-size: 22px !important; } .pkp_site_name img, .pkp_site_name .is_img img, img[src*="pageHeaderLogoImage"] { max-height: 90px !important; } #navigationPrimary, .pkp_navigation_primary, #navigationUser, .pkp_navigation_user { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: flex-start !important; align-items: center !important; } #navigationUser, .pkp_navigation_user { justify-content: flex-start !important; } #navigationPrimary > li > a, .pkp_navigation_primary > li > a { font-size: 13px !important; padding: 8px 10px !important; } .journal-sidebar-buttons .sidebar-btn { font-size: 14px !important; padding: 13px 14px !important; } } ```
/* =========================================================
   VISTARA ABOUT PAGE ENHANCEMENT
   ========================================================= */

/* Main about page container */
.page_about {
    background: #ffffff !important;
}

/* Page title: About the Journal */
.page_about h1 {
    background: linear-gradient(90deg, #003b5c 0%, #005f8a 100%) !important;
    color: #ffffff !important;
    padding: 18px 24px !important;
    border-radius: 10px !important;
    font-size: 30px !important;
    font-weight: 800 !important;
    margin-bottom: 24px !important;
    box-shadow: 0 4px 12px rgba(0, 59, 92, 0.20) !important;
}

/* Section headings inside About page */
.page_about h2,
.page_about h3 {
    color: #003b5c !important;
    font-weight: 800 !important;
    border-left: 6px solid #7ec8e3 !important;
    padding: 10px 14px !important;
    background-color: #f1f8fc !important;
    border-radius: 6px !important;
    margin-top: 28px !important;
    margin-bottom: 14px !important;
}

/* Paragraph style */
.page_about p {
    font-size: 16px !important;
    line-height: 1.75 !important;
    color: #243447 !important;
    text-align: justify !important;
}

/* Lists */
.page_about ul,
.page_about ol {
    background-color: #f8fbfd !important;
    border: 1px solid #d6e6f0 !important;
    border-radius: 8px !important;
    padding: 18px 24px 18px 38px !important;
    margin: 16px 0 22px 0 !important;
}

.page_about li {
    margin-bottom: 8px !important;
    line-height: 1.65 !important;
    color: #243447 !important;
}

/* Make About sections appear like cards */
.page_about .description,
.page_about .about_section,
.page_about section,
.page_about .item {
    background-color: #ffffff !important;
    border: 1px solid #d6e6f0 !important;
    border-radius: 10px !important;
    padding: 22px 24px !important;
    margin-bottom: 22px !important;
    box-shadow: 0 3px 12px rgba(0, 59, 92, 0.08) !important;
}

/* Links inside about page */
.page_about a {
    color: #005f8a !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 1px solid #7ec8e3 !important;
}

.page_about a:hover,
.page_about a:focus {
    color: #003b5c !important;
    border-bottom-color: #003b5c !important;
}

/* Highlight important journal identity text */
.page_about strong {
    color: #003b5c !important;
    font-weight: 800 !important;
}

/* Optional callout box if used in About text */
.vistara-about-highlight {
    background: linear-gradient(90deg, #f1f8fc 0%, #ffffff 100%) !important;
    border-left: 6px solid #0077b6 !important;
    border-radius: 8px !important;
    padding: 18px 22px !important;
    margin: 20px 0 !important;
    box-shadow: 0 3px 10px rgba(0, 59, 92, 0.10) !important;
}

.vistara-about-highlight p {
    margin: 0 !important;
    color: #003b5c !important;
    font-weight: 600 !important;
}

/* Optional information grid */
.vistara-info-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 14px !important;
    margin: 22px 0 !important;
}

.vistara-info-card {
    background-color: #f5f9fc !important;
    border: 1px solid #d6e6f0 !important;
    border-radius: 10px !important;
    padding: 18px !important;
    box-shadow: 0 2px 8px rgba(0, 59, 92, 0.08) !important;
}

.vistara-info-card h4 {
    color: #003b5c !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    margin-bottom: 8px !important;
}

.vistara-info-card p {
    font-size: 15px !important;
    line-height: 1.55 !important;
    margin: 0 !important;
    text-align: left !important;
}

/* Mobile */
@media screen and (max-width: 768px) {
    .page_about h1 {
        font-size: 24px !important;
        padding: 15px 18px !important;
    }

    .page_about p {
        font-size: 15px !important;
        text-align: left !important;
    }

    .page_about ul,
    .page_about ol {
        padding-left: 28px !important;
    }
}