/*
* jop-instructions.css
* Journal of Oncology Pharmacy - Instructions for Authors page
*
* INSTALLATION (Kotahi FLAX admin):
* 1. Published at: /assets/css/jop-instructions.css
* 2. Linked in the FLAX base template inside :
*
* ...
*/
/* FONTS */
@import url("https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,400;0,700;1,400&family=Source+Sans+3:wght@300;400;500;600&display=swap");
/* DESIGN TOKENS */
.jop-page {
--jop-navy: #1b3a5c;
--jop-navy-dark: #12273e;
--jop-teal: #1b4f8a;
--jop-teal-light: #e8eef6;
--jop-text: #222222;
--jop-muted: #666666;
--jop-border: #dce3e8;
--jop-bg: #f7f9fa;
--jop-white: #ffffff;
--jop-accent: #2a5fa5;
--jop-gold: #1b4f8a;
--jop-gold-bg: #edf2fa;
--jop-gold-text: #12273e;
--jop-radius: 6px;
box-sizing: border-box;
color: var(--jop-text);
font-family: "Source Sans 3", sans-serif;
font-size: 16px;
line-height: 1.7;
}
.jop-page *,
.jop-page *::before,
.jop-page *::after {
box-sizing: inherit;
}
/* PAGE LAYOUT */
.jop-page .jop-layout {
align-items: flex-start;
display: flex;
flex-direction: row;
gap: 2rem;
margin: 2rem auto;
max-width: 1080px;
padding: 0 2rem;
}
.jop-page .jop-content {
background: var(--jop-white);
border: 1px solid var(--jop-border);
border-radius: var(--jop-radius);
flex: 1 1 0;
min-width: 0;
padding: 2rem 2.25rem;
}
/* CONTENT TYPOGRAPHY */
.jop-page .jop-content h2 {
border-bottom: 2px solid var(--jop-border);
color: var(--jop-navy-dark);
font-family: "Merriweather", serif;
font-size: 1.25rem;
font-weight: 700;
margin: 2.2rem 0 0.75rem;
padding-bottom: 0.4rem;
}
.jop-page .jop-content h2:first-of-type {
margin-top: 0;
}
.jop-page .jop-content h3 {
color: var(--jop-navy);
font-size: 1rem;
font-weight: 700;
margin: 1.5rem 0 0.4rem;
}
.jop-page .jop-content h4 {
color: var(--jop-text);
font-size: 0.92rem;
font-style: italic;
font-weight: 700;
margin: 1.1rem 0 0.3rem;
}
.jop-page .jop-content p {
color: #333333;
font-size: 0.95rem;
margin-bottom: 0.85rem;
}
.jop-page .jop-content ul,
.jop-page .jop-content ol {
color: #333333;
font-size: 0.95rem;
margin: 0.5rem 0 1rem 1.4rem;
}
.jop-page .jop-content li {
margin-bottom: 0.35rem;
}
.jop-page .jop-content a {
color: var(--jop-accent);
text-decoration: none;
}
.jop-page .jop-content a:hover {
text-decoration: underline;
}
.jop-page .jop-content strong {
font-weight: 600;
}
.jop-page .jop-content em {
font-style: italic;
}
.jop-page .jop-content blockquote {
background: var(--jop-gold-bg);
border-left: 4px solid var(--jop-gold);
border-radius: 0 var(--jop-radius) var(--jop-radius) 0;
color: var(--jop-gold-text);
font-size: 0.88rem;
line-height: 1.6;
margin: 0 0 1rem;
padding: 0.9rem 1.1rem;
}
.jop-page .jop-content blockquote p {
color: var(--jop-gold-text);
font-size: 0.88rem;
margin-bottom: 0.5rem;
}
.jop-page .jop-content blockquote p:last-child {
margin-bottom: 0;
}
.jop-page .jop-content hr {
border: none;
border-top: 1px solid var(--jop-border);
margin: 2rem 0;
}
/* TABLES */
.jop-page .jop-content table {
border-collapse: collapse;
font-size: 0.87rem;
margin: 0.75rem 0 1.25rem;
width: 100%;
}
.jop-page .jop-content table th {
background: var(--jop-navy);
color: var(--jop-white);
font-size: 0.82rem;
font-weight: 600;
letter-spacing: 0.03em;
padding: 0.55rem 0.85rem;
text-align: left;
}
.jop-page .jop-content table td {
border-bottom: 1px solid var(--jop-border);
color: #333333;
padding: 0.5rem 0.85rem;
vertical-align: top;
}
.jop-page .jop-content table tr:nth-child(even) td {
background: var(--jop-bg);
}
.jop-page .jop-content table td strong {
color: var(--jop-navy);
}
/* ARTICLE TYPE CARDS */
.jop-page .jop-article-types {
display: grid;
gap: 0.85rem;
grid-template-columns: 1fr 1fr;
margin: 1rem 0 1.5rem;
}
.jop-page .jop-art-card {
background: var(--jop-bg);
border: 1px solid var(--jop-border);
border-radius: var(--jop-radius);
padding: 0.9rem 1rem;
}
.jop-page .jop-art-card h4 {
color: var(--jop-navy);
font-size: 0.88rem;
font-style: normal;
font-weight: 700;
margin: 0 0 0.35rem;
}
.jop-page .jop-art-card p {
color: var(--jop-muted);
font-size: 0.82rem;
line-height: 1.5;
margin: 0;
}
.jop-page .jop-word-count {
background: var(--jop-teal-light);
border-radius: 3px;
color: var(--jop-teal);
display: inline-block;
font-size: 0.75rem;
font-weight: 600;
margin-top: 0.4rem;
padding: 0.1rem 0.45rem;
}
/* CREATIVE COMMONS GRID */
.jop-page .jop-cc-grid {
display: grid;
gap: 0.75rem;
grid-template-columns: 1fr 1fr;
margin: 0.75rem 0 1.25rem;
}
.jop-page .jop-cc-item {
background: var(--jop-bg);
border: 1px solid var(--jop-border);
border-radius: var(--jop-radius);
padding: 0.75rem 0.9rem;
}
.jop-page .jop-cc-badge {
background: var(--jop-navy);
border-radius: 3px;
color: var(--jop-white);
display: inline-block;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.04em;
margin-bottom: 0.4rem;
padding: 0.15rem 0.5rem;
}
.jop-page .jop-cc-item p {
color: var(--jop-muted);
font-size: 0.82rem;
line-height: 1.5;
margin: 0;
}
/* SIDEBAR */
.jop-page .jop-sidebar {
display: flex;
flex: 0 0 280px;
flex-direction: column;
gap: 1.1rem;
width: 280px;
}
.jop-page .jop-side-card {
background: var(--jop-white);
border: 1px solid var(--jop-border);
border-radius: var(--jop-radius);
overflow: hidden;
}
.jop-page .jop-side-card-header {
background: var(--jop-navy);
color: var(--jop-white);
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.07em;
padding: 0.65rem 1.1rem;
text-transform: uppercase;
}
.jop-page .jop-side-card-body {
color: var(--jop-muted);
font-size: 0.875rem;
line-height: 1.6;
padding: 1rem 1.1rem;
}
.jop-page .jop-side-card-body strong {
color: var(--jop-text);
}
.jop-page .jop-side-card-body a {
color: var(--jop-accent);
text-decoration: none;
}
.jop-page .jop-side-card-body a:hover {
text-decoration: underline;
}
.jop-page .jop-side-card-body ul {
list-style: none;
padding-left: 0;
}
.jop-page .jop-side-card-body li {
align-items: flex-start;
border-bottom: 1px solid var(--jop-border);
display: flex;
gap: 0.4rem;
padding: 0.35rem 0;
}
.jop-page .jop-side-card-body li:last-child {
border-bottom: none;
}
.jop-page .jop-side-card-body li::before {
color: var(--jop-accent);
content: "\203A";
flex-shrink: 0;
font-weight: 700;
}
.jop-page .jop-side-card-body hr {
border: none;
border-top: 1px solid var(--jop-border);
margin: 0.75rem 0;
}
/* JUMP-TO NAVIGATION */
.jop-page .jop-jump-nav-body {
padding: 0.65rem 0.85rem !important;
}
.jop-page .jop-jump-btn {
background: var(--jop-white) !important;
border: 1px solid var(--jop-border) !important;
border-radius: 4px !important;
box-sizing: border-box !important;
color: var(--jop-navy) !important;
display: block !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
margin-bottom: 0.4rem !important;
padding: 0.38rem 0.75rem !important;
text-decoration: none !important;
transition: background 0.15s, border-color 0.15s, color 0.15s;
width: 100% !important;
}
.jop-page .jop-jump-btn:last-child {
margin-bottom: 0 !important;
}
.jop-page .jop-jump-btn:hover {
background: var(--jop-teal-light) !important;
border-color: var(--jop-teal) !important;
color: var(--jop-teal) !important;
text-decoration: none !important;
}
/* SUBMIT BUTTON */
.jop-page .jop-submit-btn {
background: var(--jop-navy);
border-radius: var(--jop-radius);
color: var(--jop-white);
display: block;
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.02em;
margin-top: 0.75rem;
padding: 0.75rem 1rem;
text-align: center;
text-decoration: none;
transition: background 0.2s;
width: 100%;
}
.jop-page .jop-submit-btn:hover {
background: var(--jop-navy-dark);
}
/* RESPONSIVE */
@media (max-width: 800px) {
.jop-page .jop-layout {
flex-direction: column;
padding: 0 1rem;
}
.jop-page .jop-sidebar {
flex: none;
width: 100%;
}
.jop-page .jop-article-types,
.jop-page .jop-cc-grid {
grid-template-columns: 1fr;
}
.jop-page .jop-content {
padding: 1.25rem 1rem;
}
}
/* CONGRESS ABSTRACTS */
.jop-page .jop-abstracts-page {
color: var(--jop-text);
column-count: 2;
column-fill: balance;
column-gap: 2.5rem;
font-family: "Source Sans 3", sans-serif;
font-size: 0.88rem;
line-height: 1.55;
margin: 2rem auto;
max-width: 1080px;
padding: 0 2rem;
}
.jop-page .jop-abstract {
background: var(--jop-white);
border: 1px solid var(--jop-border);
border-radius: var(--jop-radius);
break-inside: avoid;
margin-bottom: 1.75rem;
overflow: hidden;
page-break-inside: avoid;
}
.jop-page .jop-abstract-header {
align-items: flex-start;
border-bottom: 1px solid var(--jop-border);
display: flex;
gap: 0;
}
.jop-page .jop-abstract-number {
background: var(--jop-white);
border-right: 1px solid var(--jop-border);
color: var(--jop-navy);
flex-shrink: 0;
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1.3;
min-width: 4rem;
padding: 0.5rem 0.6rem;
text-align: center;
white-space: nowrap;
}
.jop-page .jop-abstract-title {
color: var(--jop-navy-dark);
flex: 1;
font-size: 0.82rem;
font-weight: 700;
letter-spacing: 0.03em;
line-height: 1.35;
padding: 0.5rem 0.75rem;
text-transform: uppercase;
}
.jop-page .jop-abstract-body {
padding: 0.65rem 0.85rem;
}
.jop-page .jop-abstract-authors {
color: var(--jop-muted);
font-size: 0.8rem;
font-style: italic;
line-height: 1.4;
margin-bottom: 0.3rem;
}
.jop-page .jop-abstract-authors sup {
font-size: 0.65rem;
line-height: 0;
vertical-align: super;
}
.jop-page .jop-abstract-institution {
color: var(--jop-muted);
font-size: 0.78rem;
font-style: italic;
line-height: 1.4;
margin-bottom: 0.45rem;
}
.jop-page .jop-abstract-text {
color: var(--jop-text);
font-size: 0.86rem;
hyphens: auto;
line-height: 1.6;
margin-bottom: 0.5rem;
text-align: justify;
}
.jop-page .jop-abstract-text p {
margin-bottom: 0.4rem;
}
.jop-page .jop-abstract-text strong {
color: var(--jop-navy-dark);
font-weight: 700;
}
.jop-page .jop-abstract-refs {
border-top: 1px solid var(--jop-border);
color: var(--jop-muted);
font-size: 0.75rem;
line-height: 1.5;
margin-top: 0.65rem;
padding-top: 0.5rem;
}
.jop-page .jop-abstract-refs-title {
color: var(--jop-navy);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.07em;
margin-bottom: 0.3rem;
text-transform: uppercase;
}
.jop-page .jop-abstract-refs ol {
margin: 0;
padding-left: 1.1rem;
}
.jop-page .jop-abstract-refs li {
margin-bottom: 0.2rem;
}
.jop-page .jop-abstracts-section-bar {
background: var(--jop-teal);
color: var(--jop-white);
font-size: 0.9rem;
font-weight: 600;
letter-spacing: 0.08em;
margin-bottom: 1.5rem;
padding: 0.45rem 2rem;
text-align: right;
}
.jop-page .jop-abstracts-footer {
border-top: 1px solid var(--jop-border);
color: var(--jop-muted);
display: flex;
font-size: 0.75rem;
justify-content: space-between;
margin: 0.5rem auto 2rem;
max-width: 1080px;
padding: 0.4rem 2rem;
}
@media (max-width: 700px) {
.jop-page .jop-abstracts-page {
column-count: 1;
padding: 0 1rem;
}
}