@import url('https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap'); /* ========================================================================== CLRS Journal of Global Justice & Governance Child theme of the OJS 3.5 Default theme. Design language: the conventional professional OJS look. A solid colour masthead band with the journal name reversed out, a darker nav bar beneath it, a light identity strip, sans-serif throughout, grey letterspaced uppercase section headings with a trailing rule, and light card panels. CLRS navy, with red as the secondary accent. TWO THINGS THAT WILL BITE ANYONE EDITING THIS 1. OJS sets html{font-size:14px}. Layout values here are px on purpose. 2. The theme lays out with FIXED-WIDTH FLOATS (main 860 / sidebar 300) and sizes every container together at 728/952/1160px. Never constrain .pkp_structure_content, or the sidebar drops below the article. ========================================================================== */ :root{ --jg-navy: #11263f; --jg-navy-2: #1d3a5c; --jg-navy-3: #0a1729; --jg-red: #8e1414; --jg-ink: #222222; --jg-head: #ababab; --jg-mu: #5c5c5c; --jg-fnt: #8a8a8a; --jg-rule: #dddddd; --jg-strip: #f5f5f5; --jg-card: #f7f7f7; --jg-paper: #ffffff; /* Humanist sans. Public Sans (a Franklin gothic) set the masthead stiff and narrow at display size; a humanist face carries the reversed-out journal name with more warmth and reads better at 17px in running text. */ --jg-sans: "Source Sans 3", "Source Sans Pro", "Helvetica Neue", Helvetica, Arial, sans-serif; } /* ── 1. Ground ─────────────────────────────────────────────────────────── */ body, .pkp_structure_page{ background: var(--jg-paper); color: var(--jg-ink); font-family: var(--jg-sans); font-size: 17px; line-height: 1.8; } .pkp_structure_main p, .pkp_structure_main li{ font-size: 17px; line-height: 1.8; color: var(--jg-ink); /* Justified, as a printed review sets its text. is present, so auto hyphenation is live and keeps the word spacing even instead of opening rivers down the column. */ text-align: justify; -webkit-hyphens: auto; hyphens: auto; } /* Listing furniture is not prose and must not be stretched to the measure. */ .jg-row__label, .jg-row__title, .jg-row__title a, .jg-row__authors li, .jg-row__meta, .cmp_breadcrumbs li, .obj_galley_link, .pkp_structure_sidebar p, .pkp_structure_sidebar li{ text-align: left; hyphens: manual; } a{ color: var(--jg-navy-2); text-decoration: none; } a:hover, a:focus{ color: var(--jg-red); text-decoration: underline; } a:focus-visible{ outline: 2px solid var(--jg-red); outline-offset: 2px; } /* ── 2. Masthead band ──────────────────────────────────────────────────── */ .pkp_structure_head{ background: var(--jg-navy) !important; border-bottom: 0; box-shadow: none; } /* Container widths must match the theme's own so the band's contents line up with the article column below. The theme scopes these to .has_site_logo, and this journal uses a text masthead, so they never applied. */ .pkp_structure_head .pkp_head_wrapper{ box-sizing: border-box !important; position: relative; width: 100% !important; max-width: none !important; margin: 0 auto !important; /* NO bottom padding. The identity strip is the last child of this wrapper, and the wrapper sits on the navy head, so any padding-bottom here paints a stray navy band beneath the grey strip. Bottom spacing for the hero lives on .jg-hero-facts instead. */ padding: 30px 0.714rem 0 !important; text-align: left !important; } @media (min-width: 768px){ .pkp_structure_head .pkp_head_wrapper{ width: 728px !important; padding-left: 0 !important; padding-right: 0 !important; } } @media (min-width: 992px){ .pkp_structure_head .pkp_head_wrapper{ width: 952px !important; } } @media (min-width: 1200px){ .pkp_structure_head .pkp_head_wrapper{ width: 1160px !important; } } /* The theme's mobile bar treatment is absolute, nowrap, ellipsised, and puts a FIXED 40px height on the wrapper. That height is what made the title overlap everything beneath it on a phone. */ html body .pkp_structure_head .pkp_site_name_wrapper, html body .pkp_structure_head .pkp_site_name{ /* relative, not static: with no offsets it lays out exactly as static does, so it still cancels the theme's absolute mobile bar, but it also gives .jg-hero-logo a containing block that ends where the navy ends. Set this back to static and the logo drops onto the nav bar. */ position: relative !important; left: auto !important; right: auto !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 0 !important; float: none !important; overflow: visible !important; white-space: normal !important; text-overflow: clip !important; text-align: left !important; } html body .pkp_structure_head .pkp_site_name a, html body .pkp_structure_head .pkp_site_name .is_text{ display: block !important; float: none !important; margin: 0 !important; max-width: 20em; text-align: left !important; white-space: normal !important; font-family: var(--jg-sans) !important; font-size: 34px !important; font-weight: 700 !important; line-height: 1.18 !important; letter-spacing: -.005em !important; color: #ffffff !important; border-bottom: 0 !important; text-decoration: none !important; } .jg-masthead-pub{ font-family: var(--jg-sans); font-size: 11px; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: rgba(255,255,255,.72); text-align: left; margin-bottom: 16px; } .jg-masthead-sub{ font-family: var(--jg-sans); font-size: 19px; color: rgba(255,255,255,.88); text-align: left; margin-top: 10px; max-width: 34em; } /* The printed thick-thin rule has no place in this language */ .jg-masthead-rule{ display: none !important; } /* ── 3. Navigation bar ─────────────────────────────────────────────────── */ /* Full-bleed bar with its contents held to the container width. The 100vw technique includes the scrollbar, so .pkp_structure_page clips the few px of overflow it creates - without that the page scrolls sideways by ~7px. */ .pkp_structure_page{ overflow-x: hidden; } .pkp_navigation_primary_row{ width: 100vw; position: relative; left: 50%; margin: 0 0 0 -50vw !important; background: var(--jg-paper) !important; border: 0 !important; border-bottom: 1px solid var(--jg-rule) !important; box-shadow: none !important; padding: 0 !important; } .pkp_navigation_primary_row::before{ content: none !important; } .pkp_navigation_primary_wrapper{ box-sizing: border-box; width: 100%; margin: 0 auto; padding: 0 0.714rem; } @media (min-width: 768px){ .pkp_navigation_primary_wrapper{ width: 728px; padding: 0; } } @media (min-width: 992px){ .pkp_navigation_primary_wrapper{ width: 952px; } } @media (min-width: 1200px){ .pkp_navigation_primary_wrapper{ width: 1160px; } } @media (min-width: 992px){ .pkp_navigation_primary{ display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 0; float: none; padding: 0; margin: 0; } } /* Items are baseline aligned by default, which left a 5px dead strip along the top of the row. Top alignment closes it. */ .pkp_navigation_primary > li{ vertical-align: top; } .pkp_navigation_primary > li > a{ font-family: var(--jg-sans); font-size: 14px; font-weight: 600; text-transform: none; color: var(--jg-navy) !important; padding: 11px 18px !important; /* Core gives the link a 0.357rem top margin, which sat as a dead strip along the top of the row and left the item off centre in it. */ margin-top: 0 !important; display: block; border: 0 !important; border-bottom: 3px solid transparent !important; } .pkp_navigation_primary > li > a:hover, .pkp_navigation_primary > li:hover > a{ background: transparent; border-bottom-color: var(--jg-red) !important; color: var(--jg-red) !important; text-decoration: none; } /* On the horizontal row the hover underline is painted by a pseudo-element rather than a border. A border is part of the box: those 3px came off the bottom, so the label sat above the row's centre. The pseudo-element takes no layout space and the padding stays symmetric. The bordered treatment is kept in the collapsed mobile menu, where it is a list divider, not an indicator. */ @media (min-width: 992px){ .pkp_navigation_primary > li > a{ position: relative; border-bottom: 0 !important; } .pkp_navigation_primary > li > a::after{ content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: transparent; } .pkp_navigation_primary > li > a:hover::after, .pkp_navigation_primary > li:hover > a::after{ background: var(--jg-red); } } /* Dropdowns. The theme runs BOTH a click latch (.show, from main.js) and a CSS hover reveal; jgjg.js stops the click latch so hover is the only mechanism. Absolute positioning is desktop-only: on mobile the collapsed menu renders its submenus inline. */ @media (min-width: 992px){ .pkp_navigation_primary > li{ position: relative; } .pkp_navigation_primary > li > .dropdown-menu{ position: absolute !important; top: 100% !important; left: 0 !important; right: auto !important; bottom: auto !important; transform: none !important; margin: 0 !important; will-change: auto !important; min-width: 16em; background: var(--jg-paper); border: 1px solid var(--jg-rule); border-top: 3px solid var(--jg-red); border-radius: 0; box-shadow: 0 4px 14px rgba(0,0,0,.12); padding: 0; } /* invisible bridge so a diagonal move cannot close it */ .pkp_navigation_primary > li > .dropdown-menu::before{ content: ""; position: absolute; left: 0; right: 0; top: -6px; height: 6px; } } .pkp_navigation_primary ul li > a{ display: block; font-family: var(--jg-sans); font-size: 14px; font-weight: 400; color: var(--jg-ink) !important; padding: 11px 16px !important; border: 0 !important; border-bottom: 1px solid var(--jg-rule) !important; } .pkp_navigation_primary ul li:last-child > a{ border-bottom: 0 !important; } .pkp_navigation_primary ul li > a:hover{ background: var(--jg-card); color: var(--jg-red) !important; text-decoration: none; } /* Removed on request. /login still works and OJS prompts at the submission wizard. */ .pkp_navigation_user_wrapper{ display: none !important; } /* Icon-only control sized for the stock header; it rendered as an invisible box. */ .pkp_navigation_search_wrapper{ display: none !important; } /* ── 4. Identity strip ─────────────────────────────────────────────────── */ /* Now the first thing on the page, above the masthead. As a direct child of the header it is already the full width, so the -50vw full-bleed trick it needed under the nav comes out; left in, it would drag the strip sideways. */ .jg-masthead-vol{ /* A light bar at every width. It is the page's first line rather than part of the masthead, and it now carries the identifiers alone: the menu button has moved down onto the journal-name line. */ background: var(--jg-paper); border-bottom: 1px solid var(--jg-rule); display: block; width: auto; position: static; margin: 0; padding: 0; text-align: center; font-family: var(--jg-sans); font-size: 12px; text-transform: none; color: var(--jg-mu); } .jg-masthead-vol span{ display: inline-block; padding: 9px 18px; } .jg-masthead-vol{ position: relative; } .jg-masthead-vol .jg-vol-c{ font-weight: 600; color: var(--jg-ink); } /* ── 5. Section headings ───────────────────────────────────────────────── */ .pkp_structure_main > h1, .pkp_page_index .homepage_about h2, .obj_issue_toc > h1, .obj_announcement_full h1, .pkp_block .title{ font-family: var(--jg-sans) !important; font-size: 19px !important; font-weight: 600 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--jg-head) !important; border: 0 !important; padding: 0 !important; margin: 0 0 16px !important; display: flex; align-items: center; gap: 16px; line-height: 1.3 !important; } .pkp_structure_main > h1::after, .pkp_page_index .homepage_about h2::after, .obj_issue_toc > h1::after, .pkp_block .title::after{ content: ""; flex: 1; height: 1px; background: var(--jg-rule); } .pkp_block .title{ font-size: 14px !important; margin-bottom: 12px !important; } .pkp_structure_main h2{ font-size: 20px; font-weight: 600; color: var(--jg-navy); margin-top: 30px; } .pkp_structure_main h3{ font-size: 17px; font-weight: 600; color: var(--jg-navy); margin-top: 24px; } /* Breadcrumb. jgjg.js lifts it into the masthead's top-left slot, the position the publisher line holds on the home page. Both placements are styled here, so the trail still reads correctly on any page where that script never runs. */ .cmp_breadcrumbs{ background: none; font-size: 13px; color: var(--jg-mu); padding: 0; border: 0; } /* Scoped through the container: in the content column these items are
  • , and .pkp_structure_main li sets 17px, which outranks a bare .cmp_breadcrumbs rule and rendered the trail at body size on a phone. */ .pkp_structure_main .cmp_breadcrumbs, .pkp_structure_main .cmp_breadcrumbs li, .pkp_structure_main .cmp_breadcrumbs a{ font-size: 13px; line-height: 1.5; } .cmp_breadcrumbs ol{ margin: 0; padding: 0; list-style: none; } .cmp_breadcrumbs li{ display: inline; } .cmp_breadcrumbs .separator{ margin: 0 .5em; color: var(--jg-fnt); } /* In the masthead it takes the publisher line's own treatment, reversed out, so the band keeps one eyebrow rhythm whichever page you are on. */ .pkp_structure_head .cmp_breadcrumbs{ font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 16px; } .pkp_structure_head .cmp_breadcrumbs a{ color: rgba(255,255,255,.88); } .pkp_structure_head .cmp_breadcrumbs a:hover, .pkp_structure_head .cmp_breadcrumbs a:focus{ color: #ffffff; text-decoration: underline; } .pkp_structure_head .cmp_breadcrumbs .separator{ color: rgba(255,255,255,.45); } .pkp_structure_head .cmp_breadcrumbs .current span{ color: rgba(255,255,255,.62); } /* The publisher line stands down once the trail occupies its slot. CLRS is still named by the reversed-out mark at the foot of the band. */ body.jg-has-breadcrumb .jg-masthead-pub{ display: none; } /* ── 6. Sidebar ────────────────────────────────────────────────────────── */ .pkp_structure_sidebar{ padding-left: 30px !important; border-left: 0 !important; } .pkp_block{ background: var(--jg-card); border: 1px solid var(--jg-rule); padding: 18px !important; margin-bottom: 22px !important; height: auto !important; min-height: 0 !important; } .pkp_block ul{ list-style: none !important; margin: 0 !important; padding: 0 !important; } .pkp_block li{ font-size: 14px; padding: 8px 0 !important; margin: 0 !important; border-bottom: 1px solid var(--jg-rule); line-height: 1.45; } .pkp_block li:last-child{ border-bottom: 0; } .pkp_block li a{ color: var(--jg-navy-2) !important; } .pkp_block li a:hover{ color: var(--jg-red) !important; } /* Blocks holding nothing but RSS/Atom gateway links render as empty shells */ .pkp_block:has(a[href*="/gateway/plugin"]){ display: none !important; } .pkp_block img[alt*="RSS"], .pkp_block img[alt*="Atom"], .pkp_block img[alt*="ATOM"]{ display: none !important; } /* Journal facts panel */ .jg-facts{ margin: 0 0 16px !important; padding: 0 !important; font-size: 14px; } .jg-facts dt{ float: left; clear: left; color: var(--jg-mu); font-weight: 400; padding: 7px 0; } .jg-facts dd{ margin: 0 !important; padding: 7px 0; text-align: right; color: var(--jg-ink); font-weight: 600; border-bottom: 1px solid var(--jg-rule); overflow: hidden; } .jg-facts dd:last-of-type{ border-bottom: 0; } .jg-submit-cta{ display: block; width: 100%; box-sizing: border-box; text-align: center; background: var(--jg-red) !important; border: 0 !important; border-radius: 2px; color: #ffffff !important; font-family: var(--jg-sans); font-size: 15px; font-weight: 600; padding: 12px 20px; margin-top: 16px; text-decoration: none !important; transition: background .15s ease; } .jg-submit-cta:hover, .jg-submit-cta:focus{ background: var(--jg-navy) !important; color: #fff !important; text-decoration: none !important; } /* Registration marks: the official Crossref and DOI files, not redrawn */ .jg-marks{ list-style: none !important; margin: 0 !important; padding: 0 !important; } .jg-marks li{ padding: 11px 0 !important; border-bottom: 1px solid var(--jg-rule); } .jg-marks li:last-child{ border-bottom: 0; } .jg-marks a{ display: flex !important; align-items: center; gap: 10px; font-size: 13px; color: var(--jg-mu) !important; } .jg-marks a:hover{ color: var(--jg-red) !important; text-decoration: none; } .jg-logo{ display: block; height: auto; } .jg-logo--crossref{ width: 118px; } .jg-logo--doi{ width: 92px; } .jg-mark--issn{ flex-shrink: 0; background: var(--jg-navy); color: #fff; font-size: 11px; font-weight: 600; padding: 3px 7px; border-radius: 2px; } /* ── 7. Table of contents rows ─────────────────────────────────────────── */ /* Article cards. Taken from the issue cards on IJLMH's OJS archive -- hairline border, 2px corner, an uppercase tracked locator above a quiet title, and a muted meta line under it -- and rebuilt here for an article rather than an issue: the locator is the page range, the meta is the author list with ORCID iDs and affiliations, and the DOI sits on its own line. Palette and type are this journal's throughout, so it reads as a relative, not a copy. Card separation comes from the list item, not the card: OJS gives each li a 30px bottom margin, and a margin on the card as well would compound it. */ /* Core wraps each table-of-contents section in a 30px padded block with a matching negative margin, which left ~84px of empty column between the issue's publication date and the first section heading. Nothing is painted in that space, so it comes out. */ .obj_issue_toc .section{ margin: 0 !important; padding: 0 !important; } /* Core's own 4.286rem (60px) top margin here loads after the theme's, so this needs the weight to take. */ .obj_issue_toc .sections{ margin-top: 24px !important; } .obj_issue_toc .published{ margin-bottom: 0 !important; } .cmp_article_list.articles > li{ margin-bottom: 14px !important; } .cmp_article_list.articles > li:last-child{ margin-bottom: 0 !important; } .jg-row{ padding: 16px 18px; background: var(--jg-paper); border: 1px solid var(--jg-rule); border-radius: 2px; transition: border-color .15s ease; } .jg-row:hover{ border-color: var(--jg-navy-2); } /* Scoped through the container: this is a

    , and a bare .jg-row__label loses to .pkp_structure_main p, which was setting it 17px and justified. */ .pkp_structure_main .jg-row__label{ font-size: 11px; line-height: 1.4; text-align: left; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--jg-mu); font-variant-numeric: tabular-nums; margin: 0 0 6px; } .jg-row__grid{ display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: start; } /* Scoped through the container for the same reason as the label: the TOC renders this heading as an h3, and .pkp_structure_main h3 outranks a bare class, which was holding the title at 17px. */ .pkp_structure_main .jg-row__title{ font-size: 19px; font-weight: 600; line-height: 1.35; margin: 0 0 8px; } .jg-row__title a{ color: var(--jg-navy) !important; } .jg-row__title a:hover{ color: var(--jg-red) !important; } .jg-row__authors{ list-style: none; margin: 0 0 8px; padding: 0; } .jg-au{ margin-bottom: 3px; line-height: 1.5; } .jg-au__name{ font-size: 14px; color: var(--jg-ink); } .jg-au__affil{ display: block; font-size: 13px; color: var(--jg-fnt); font-style: italic; } .jg-au__orcid{ margin-left: 5px; } .jg-mark--orcid{ display: inline-block; width: 1.05em; height: 1.05em; line-height: 1.05em; border-radius: 50%; background: #a6ce39; color: #fff; font-size: 11px; text-align: center; vertical-align: text-top; } .jg-row__meta{ display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 13px; color: var(--jg-fnt); } .jg-doi{ display: inline-flex; align-items: center; gap: 6px; color: var(--jg-mu) !important; } .jg-mark--doi{ display: inline-block; background: #fab70b; color: #fff; font-size: 11px; font-weight: 600; padding: 2px 6px; border-radius: 2px; } .jg-pages{ font-variant-numeric: tabular-nums; } .jg-row__actions{ display: flex; flex-direction: column; gap: 8px; min-width: 7rem; } .jg-act, .jg-row__actions .obj_galley_link{ font-family: var(--jg-sans); font-size: 13px; font-weight: 600; text-align: center; padding: 8px 14px; cursor: pointer; background: var(--jg-paper); border: 1px solid var(--jg-navy-2); color: var(--jg-navy-2) !important; border-radius: 2px; } .jg-act:hover, .jg-row__actions .obj_galley_link:hover{ background: var(--jg-navy-2); color: #fff !important; text-decoration: none; } .jg-row__abs{ margin: 12px 0 0; padding: 14px 16px; background: var(--jg-card); border-left: 3px solid var(--jg-navy-2); } .jg-row__abs p{ font-size: 14px; margin: 0; } /* ── 8. Article page ───────────────────────────────────────────────────── */ .obj_article_details .page_title{ font-size: 26px; font-weight: 700; color: var(--jg-navy); line-height: 1.3; } .obj_article_details .authors{ font-size: 15px; color: var(--jg-ink); } .obj_article_details .author_affiliation{ display: block; font-size: 13px; color: var(--jg-fnt); font-style: italic; } .obj_article_details .abstract{ background: var(--jg-card); border-left: 3px solid var(--jg-navy-2); padding: 16px 18px; } .obj_article_details .item.doi{ background: var(--jg-card); padding: 12px 16px; font-size: 14px; } /* ── 9. Announcements ──────────────────────────────────────────────────── */ .cmp_announcements, .cmp_announcements.highlight_first{ border: 0 !important; display: block !important; margin-top: 28px; } .cmp_announcements > *, .cmp_announcements .obj_announcement_summary{ float: none !important; clear: both !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 18px 0 !important; border: 0 !important; border-bottom: 1px solid var(--jg-rule) !important; } .cmp_announcements .obj_announcement_summary:last-child{ border-bottom: 0 !important; } .obj_announcement_summary h2, .obj_announcement_summary h3, .obj_announcement_summary h4, .obj_announcement_summary .title{ font-family: var(--jg-sans) !important; font-size: 18px !important; font-weight: 600 !important; color: var(--jg-navy) !important; margin: 0 0 6px !important; border: 0 !important; letter-spacing: 0 !important; text-transform: none !important; display: block !important; } .obj_announcement_summary h2::after, .obj_announcement_summary h3::after{ content: none !important; } .obj_announcement_summary .date{ font-size: 13px; color: var(--jg-fnt); display: block; margin-bottom: 8px; } /* ── 10. Footer ────────────────────────────────────────────────────────── */ .pkp_structure_footer_wrapper{ background: var(--jg-navy-3) !important; color: rgba(255,255,255,.78); border: 0 !important; margin-top: 44px !important; padding: 0 !important; } .pkp_structure_footer{ box-sizing: border-box; position: relative; width: 100%; margin: 0 auto; padding: 26px 0.714rem !important; } @media (min-width: 768px){ .pkp_structure_footer{ width: 728px; padding-left: 0 !important; padding-right: 0 !important; } } @media (min-width: 992px){ .pkp_structure_footer{ width: 952px; } } @media (min-width: 1200px){ .pkp_structure_footer{ width: 1160px; } } .pkp_structure_footer::before{ content: none !important; } .pkp_structure_footer{ padding: 40px 0.714rem 24px !important; } /* ── Footer ──────────────────────────────────────────────────────────────── Four columns: who the journal is, then the three things a reader leaves the page for, which are reading about the journal, submitting to it, and checking how it is run. The identity column is given twice the width of a link column, so the journal's name sets the measure and the lists stay narrow enough to scan. */ .jg-foot{ display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; align-items: start; /* Core centres the footer's contents. Columns of links read as a list only when they share a left edge. */ text-align: left; } .jg-foot *{ text-align: left; } .jg-foot__mark{ display: block; width: 138px; height: auto; margin: 0 0 14px; } .jg-foot__name{ font-size: 16px; line-height: 1.4; font-weight: 600; color: #ffffff; margin: 0 0 6px; } .jg-foot__note{ font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.68); margin: 0 0 10px; max-width: 30em; } .jg-foot__ids{ font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.55); margin: 0; } .jg-foot__ids span + span::before{ content: "·"; padding: 0 8px; } .jg-foot__head{ font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.55); margin: 0 0 14px; } .jg-foot__list{ list-style: none; margin: 0; padding: 0; } /* Sized on the list item, not on the link inside it. The link is inline, so styling only the anchor left each row with the page's own 17px/1.8 line box and a 40px pitch, which is what made the columns read as loose. 14px is the site's own size for secondary type: the navigation links and every line in the sidebar panels are set at it. The footer had been sitting a step below that on every line, which is what read as small. */ .jg-foot__list li{ font-size: 14px; line-height: 1.5; margin-bottom: 9px; } .jg-foot__list a{ display: inline-block; font-size: inherit; line-height: inherit; color: rgba(255,255,255,.82) !important; text-decoration: none; } .jg-foot__list a:hover, .jg-foot__list a:focus{ color: #ffffff !important; text-decoration: underline; } /* The rule carries the statement of record and the platform credit. */ .jg-foot__rule{ margin-top: 30px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.14); } /* This line is a sibling of .jg-foot, so it does not inherit the left alignment set there and was still centred by core. */ .jg-foot__rule, .jg-foot__copy{ text-align: left; } .jg-foot__copy{ font-size: 13px; line-height: 1.5; color: rgba(255,255,255,.62); margin: 0; } /* The platform credit is not printed. Kept hidden as well as removed from the template, so it cannot reappear from a core template this theme does not override. */ .pkp_brand_footer{ display: none !important; } @media (max-width: 991px){ /* Identity across the top, the three link groups in two columns beneath it. Stacking all four in one column ran the footer to nearly 900px on a phone, which is longer than most of the pages it sits under. */ .jg-foot{ grid-template-columns: 1fr 1fr; gap: 26px 20px; } .jg-foot__col--brand{ grid-column: 1 / -1; } .jg-foot__note{ max-width: none; } } /* ── 11. Forms and buttons ─────────────────────────────────────────────── */ .cmp_button, .pkp_button, button[type="submit"], input[type="submit"]{ background: var(--jg-navy-2); color: #fff; border: 0; border-radius: 2px; font-family: var(--jg-sans); font-size: 14px; font-weight: 600; padding: 10px 18px; box-shadow: none; } .cmp_button:hover, .pkp_button:hover, button[type="submit"]:hover{ background: var(--jg-red); color: #fff; } input[type="text"], input[type="email"], input[type="password"], textarea, select{ border: 1px solid var(--jg-rule); border-radius: 2px; font-family: var(--jg-sans); font-size: 14px; padding: 8px 10px; } input:focus, textarea:focus, select:focus{ border-color: var(--jg-navy-2); outline: none; } .cmp_table th{ font-weight: 600; border-bottom: 2px solid var(--jg-rule); } .cmp_table td{ border-bottom: 1px solid var(--jg-rule); font-size: 14px; } /* ── 12. Small screens ─────────────────────────────────────────────────── */ @media (max-width: 991px){ .pkp_structure_head .pkp_head_wrapper{ padding: 18px 1rem 0 !important; } html body .pkp_structure_head .pkp_site_name a, html body .pkp_structure_head .pkp_site_name .is_text{ font-size: 24px !important; } .jg-masthead-pub{ font-size: 10px; } .jg-masthead-sub{ font-size: 13px; } /* Core leaves the menu button at the top left, where it landed under the publisher line and read as a stray glyph rather than a control. It moves to the top right corner, the place a reader reaches for it. The three bars are drawn by the button's own span, so only the box is moved here. */ /* On the journal-name line, at its right end. A fixed offset rather than a percentage: this is positioned against the whole masthead wrapper, which on the home page runs the length of the hero, so centring on it would drop the button into the middle of the band. */ .pkp_site_nav_toggle{ /* 14px puts the button's centre on the centre of the journal name's own line rather than on the top of its box, which carries leading above and below the glyphs. */ top: 14px !important; left: auto !important; right: 0 !important; margin-top: 0 !important; width: 2.6rem !important; height: 2.6rem !important; box-shadow: none !important; } /* Line ends stay clear of it. */ html body .pkp_structure_head .pkp_site_name a, html body .pkp_structure_head .pkp_site_name .is_text{ padding-right: 48px !important; } /* On a phone the strip is the top bar: the two identifiers on the left and the menu button on the right. Crossref Registered comes out, being the one of the three that will not fit beside the button. */ .jg-masthead-vol{ display: block; text-align: left; padding: 0 14px; } .jg-masthead-vol .jg-vol-l{ display: none; } .jg-masthead-vol span{ padding: 6px 0; } .jg-masthead-vol .jg-vol-c::after{ content: "|"; color: var(--jg-rule); padding: 0 9px; } /* Off-canvas menu. Core lays the navigation out in the flow beneath the hero, so opening it pushed the page down by about a thousand pixels and the reader lost their place entirely. It becomes a panel that comes in from the top right, under the button that opened it, on the journal's own navy. */ .pkp_structure_head .pkp_site_nav_menu{ position: fixed; top: 0; /* Core sets left:0 here. With both offsets and a width, left wins in LTR and the panel came in against the wrong edge. */ left: auto !important; right: 0 !important; bottom: 0; width: 86vw; max-width: 330px; padding: 62px 0 28px !important; /* Light ground. On navy the open and closed rows of an accordion sit too close in value to read as different states; on white the disclosure is legible and the submenu can step back onto the grey. */ background: var(--jg-paper); border-left: 1px solid var(--jg-rule); box-shadow: -20px 0 44px rgba(6,15,28,.28); overflow-y: auto; -webkit-overflow-scrolling: touch; transform: translateX(100%); transition: transform .22s ease; z-index: 1200; } .pkp_structure_head .pkp_site_nav_menu--isOpen{ transform: translateX(0); } /* Scrim. It hangs off the body, not the panel: the panel is transformed, and a transformed element becomes the containing block for its own fixed descendants, so a pseudo-element there covered only the panel itself. */ body.jg-nav-open{ overflow: hidden; } body.jg-nav-open::before{ content: ""; position: fixed; inset: 0; background: rgba(6,15,28,.55); z-index: 1100; } /* The button goes fixed with the panel, so the close control is reachable however far down the page the reader had already scrolled. */ .pkp_site_nav_toggle--transform{ position: fixed !important; top: 14px !important; right: 14px !important; /* The centring offset that holds the button in the top bar has to be dropped once it is fixed to the viewport, or it rides off the top. */ margin-top: 0 !important; z-index: 1300 !important; } /* The bars are the span's own border plus its two pseudo-elements; all three were white for the navy band and have to invert over the light panel. */ .pkp_site_nav_toggle--transform span{ border-bottom-color: var(--jg-navy) !important; } .pkp_site_nav_toggle--transform span::before, .pkp_site_nav_toggle--transform span::after{ background: var(--jg-navy) !important; } /* The row and wrapper carry the desktop bar's ground and rule; inside the panel they must carry nothing. */ .pkp_site_nav_menu .pkp_navigation_primary_row{ background: transparent !important; border: 0 !important; margin: 0 !important; width: auto !important; /* The desktop bar is full bleed via position:relative + left:50% + a -50vw margin. Inside the panel that offset pushed the whole list half a panel to the right, so the row goes back to being an ordinary block. */ position: static !important; left: auto !important; } .pkp_site_nav_menu .pkp_navigation_primary_wrapper{ width: auto !important; padding: 0 !important; } .pkp_navigation_primary{ display: block !important; padding: 0 !important; } .pkp_navigation_primary > li{ display: block; width: 100%; } .pkp_navigation_primary > li > a{ position: relative; color: var(--jg-navy) !important; font-size: 15px; padding: 14px 22px !important; border-bottom: 1px solid var(--jg-rule) !important; } .pkp_navigation_primary > li > a:hover, .pkp_navigation_primary > li > a:focus{ background: var(--jg-strip); } /* Disclosure chevron, on parents only. .jg-has-sub is set in script rather than matched with :has(), so the marker never appears on a leaf item. */ .pkp_navigation_primary > li.jg-has-sub > a{ padding-right: 48px !important; } .pkp_navigation_primary > li.jg-has-sub > a::after{ content: ""; position: absolute; right: 24px; top: 50%; width: 8px; height: 8px; margin-top: -7px; border-right: 2px solid var(--jg-mu); border-bottom: 2px solid var(--jg-mu); /* No transition. Tapping a parent in a panel that had just been revealed left the rotation latched at the closed angle, so the marker contradicted the open submenu underneath it. The disclosure itself is the feedback. */ transform: rotate(45deg); } /* Open state in the band's own navy. Red is the colour of the one action on the page -- Submit a Manuscript -- and spending it on a menu row would make an ordinary disclosure look like the thing to press. */ .pkp_navigation_primary > li.jg-open > a{ background: var(--jg-strip); box-shadow: inset 3px 0 0 var(--jg-navy); } .pkp_navigation_primary > li.jg-open > a::after{ border-color: var(--jg-navy); transform: rotate(-135deg); margin-top: -2px; } /* Below the breakpoint core strips the dropdown-menu class off these lists and leaves them open, so the panel is a flat expanded index rather than an accordion. They are matched as plain child lists; a .dropdown-menu selector matches nothing here. */ .pkp_navigation_primary > li > ul{ position: static !important; display: none !important; border: 0 !important; box-shadow: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 !important; list-style: none; background: var(--jg-strip) !important; } .pkp_navigation_primary > li.jg-open > ul{ display: block !important; } .pkp_navigation_primary ul li > a{ color: var(--jg-ink) !important; border-bottom: 1px solid var(--jg-rule) !important; padding: 12px 22px 12px 38px !important; font-size: 14px; } .pkp_navigation_primary ul li > a:hover{ color: var(--jg-navy-2) !important; background: #ffffff; } .pkp_structure_sidebar{ width: 100% !important; float: none !important; padding-left: 0 !important; margin-top: 30px; } .pkp_structure_main{ width: 100% !important; float: none !important; } .jg-row__grid{ grid-template-columns: 1fr; } .jg-row__actions{ flex-direction: row; flex-wrap: wrap; } } @media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } } /* ========================================================================== 13. Hero CTA and facts, in the band Follows Springer: a white pill with brand-colour text sitting inside the masthead band, with the journal's key facts as label/value pairs beside it. ========================================================================== */ .jg-hero-actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 22px; margin-top: 26px; } .jg-hero-cta{ display: inline-block; background: var(--jg-red) !important; color: #ffffff !important; border-radius: 2px; font-family: var(--jg-sans); font-size: 16px; font-weight: 700; padding: 12px 26px; text-decoration: none !important; transition: background .15s ease, color .15s ease; } .jg-hero-cta:hover, .jg-hero-cta:focus{ background: #ffffff !important; color: var(--jg-navy) !important; text-decoration: none !important; } .jg-hero-facts{ display: flex; flex-wrap: wrap; gap: 30px; margin-top: 24px; /* No bottom margin. An earlier fix moved the wrapper's padding-bottom here, which only relocated the dead space instead of removing it. The band ends with the facts. */ margin-bottom: 0; padding-bottom: 18px; } .jg-hero-fact{ line-height: 1.4; } .jg-hero-fact dt{ font-size: 13px; font-weight: 400; color: rgba(255,255,255,.68); margin: 0 0 3px; } .jg-hero-fact dd{ font-size: 16px; font-weight: 700; color: #ffffff; margin: 0; } /* The cover. It stands only on the journal's own page: the interior band is compact and has nothing for a cover to introduce. Drawn inline as SVG so its lettering is the same Source Sans 3 as the page around it. */ .jg-hero-cover{ position: absolute; top: 0; left: 0; width: 150px; line-height: 0; } .jg-hero-cover .jg-cover__art{ display: block; width: 100%; height: auto; /* No border: the cover carries its own keyline, and a second frame around a pale panel on a dark band just doubles the edge. */ } html body.pkp_page_index .pkp_structure_head .pkp_site_name_wrapper{ padding-left: 190px !important; } /* The facts are pulled back out of that indent. They describe the journal as a whole rather than belonging to the column beside the cover, and indenting them with the title left a dead pocket of navy under the cover. */ body.pkp_page_index .jg-hero-facts{ margin-left: -190px; } /* Publisher mark, reversed out, bottom right of the band. Anchored to .pkp_site_name_wrapper rather than the head wrapper: that element ends exactly where the navy ends (the foot of the facts row), so the logo sits on the facts baseline and cannot drift over the nav or collide with the title however many lines the title runs to. */ .jg-hero-logo{ position: absolute; right: 0; bottom: 18px; /* matches .jg-hero-facts padding-bottom */ display: block; line-height: 0; /* No opacity here. The mark is reversed out to pure white and must stay pure white on the navy; dimming it reads as a printing fault. */ } .jg-hero-logo img{ display: block; width: 168px; height: auto; } /* ── Compact band on interior pages ──────────────────────────────────────── The hero states the journal's case, and the case only needs stating once. Away from the home page the band keeps what a reader still needs -- the trail and the journal's name -- and drops the pitch, the call to action and the facts row. Submit a Manuscript is carried by the sidebar on every page, so no route is lost. Driven by the server-rendered body class rather than by script, so the band is never briefly tall before settling. */ /* The band's padding sits on the inner wrapper, not the outer one, so that wrapper spans the navy exactly. The mark centres on it, and therefore on the band; leave the padding outside and the mark rides half of it too low. */ html body:not(.pkp_page_index) .pkp_structure_head .pkp_head_wrapper{ padding-top: 0 !important; } body:not(.pkp_page_index) .jg-masthead-sub, body:not(.pkp_page_index) .jg-hero-actions, body:not(.pkp_page_index) .jg-hero-facts{ display: none; } html body:not(.pkp_page_index) .pkp_structure_head .pkp_site_name_wrapper{ /* 14, not 22. The title's own line box carries about 10px of leading below the glyphs, so 22px of padding read as roughly 32px of air under the name and made a band meant to be compact look slack. */ padding-top: 14px !important; padding-bottom: 14px !important; } html body:not(.pkp_page_index) .pkp_structure_head .pkp_site_name a, html body:not(.pkp_page_index) .pkp_structure_head .pkp_site_name .is_text{ font-size: 23px !important; line-height: 1.25 !important; } body:not(.pkp_page_index) .pkp_structure_head .cmp_breadcrumbs{ margin-bottom: 6px; } /* Nothing left to sit the mark on the baseline of, so it centres on the band. */ body:not(.pkp_page_index) .jg-hero-logo{ top: 50%; bottom: auto; transform: translateY(-50%); } body:not(.pkp_page_index) .jg-hero-logo img{ width: 132px; } @media (max-width: 991px){ .pkp_structure_head .pkp_head_wrapper{ text-align: left !important; } html body .pkp_structure_head .pkp_site_name a, html body .pkp_structure_head .pkp_site_name .is_text{ font-size: 24px !important; text-align: left !important; } .jg-masthead-pub, .jg-masthead-sub{ text-align: left; } /* The hero ran past 500px on a phone, putting the journal's own text below the fold. Same content, tighter setting. */ .jg-hero-actions{ margin-top: 18px; } .jg-hero-cta{ padding: 11px 22px; } /* Two even columns rather than flex wrap, which broke 3 + 1 and left the last fact stranded on its own row. */ .jg-hero-facts{ display: grid; grid-template-columns: 1fr 1fr; gap: 14px 22px; margin-top: 18px; padding-bottom: 14px; } .jg-hero-fact dt{ font-size: 12px; } .jg-hero-fact dd{ font-size: 14px; } /* Nowhere to sit beside the facts at this width, so it returns to the flow under them rather than overlapping. */ .jg-hero-logo{ position: static; margin-top: 8px; transform: none; } .jg-hero-logo img{ width: 124px; } /* Interior pages, phone: a masthead line, not a title block. At 20px the name ran to two lines and sat alone in a tall navy slab, and the page's own heading followed immediately underneath it in black, so the screen opened with two competing titles. Set as one line under the identifiers it reads as what it is: the name of the publication you are inside, above the page you asked for. */ html body:not(.pkp_page_index) .pkp_structure_head .pkp_site_name a, html body:not(.pkp_page_index) .pkp_structure_head .pkp_site_name .is_text{ /* 15px, and the 20em cap lifted: at 16px the name needed 315px of the 313 left beside the button and broke to a second line for the sake of two pixels. One line is the point of the treatment. */ font-size: 15px !important; line-height: 1.3 !important; max-width: none !important; } html body:not(.pkp_page_index) .pkp_structure_head .pkp_site_name_wrapper{ padding-top: 8px !important; padding-bottom: 8px !important; } /* Interior pages: the button centres on the wrapper, and on these pages the wrapper holds nothing but the journal name, so that is the same thing as centring on the name. A fixed offset only worked while the name stayed on one line; on a narrower phone it wraps and the button sat high of it. */ body:not(.pkp_page_index) .pkp_site_nav_toggle{ top: 50% !important; margin-top: -18px !important; } /* Once the panel is open the button is a close control fixed to the corner of the viewport, not a menu button sitting on the journal name. The centring rule above outranks the open-state rule on specificity, so it has to be undone here, at matching weight and after it. */ body:not(.pkp_page_index) .pkp_site_nav_toggle--transform{ top: 14px !important; margin-top: 0 !important; } /* The cover leads the band on a phone, in the flow rather than beside the text. These live in this block, not the earlier one: the desktop cover rules sit between the two, and at equal specificity the later rule wins. */ /* Floated rather than stacked. On its own row the cover cost 166px of a phone screen before the journal's name had even been read; beside the name it costs a fraction of that, the two being about the same height. The publisher line comes out here. Wrapped into the narrow column beside the cover it broke across two lines and left the masthead looking crowded, and it says nothing the mark at the foot of the band does not already. */ /* The publisher line comes out of the band on every page here, not just the home page: the trail no longer replaces it on the interior pages, and the top bar already carries the journal's identifiers. */ .jg-masthead-pub{ display: none; } /* The cover keeps its own row, with the mark beside it and the journal's name at full width underneath. Floating the text alongside it squeezed the title into a narrow column and the masthead read as crowded. */ .jg-hero-cover{ position: static; float: none; width: 140px; margin: 0 0 18px; } body.pkp_page_index .jg-hero-facts{ margin-left: 0; } /* The mark sits opposite the cover, below the menu button rather than beside it, so the two never contend for the same corner. */ body.pkp_page_index .jg-hero-logo{ position: absolute; top: 66px; right: 0; bottom: auto; margin: 0; width: auto; } body.pkp_page_index .jg-hero-logo img{ width: 122px; } html body.pkp_page_index .pkp_structure_head .pkp_site_name_wrapper{ padding-left: 0 !important; } /* The trail stays in the content column, so it needs its own space above the page title. */ .pkp_structure_main .cmp_breadcrumbs{ margin-bottom: 12px; } /* The mark comes off the interior band on a phone. With nothing to sit beside it fell into the flow under the title, left aligned and nearly as wide as the text, which made a band meant to be compact the tallest thing on the page. The top bar names the journal's identifiers, the home hero carries the mark, and the footer carries it again. */ body:not(.pkp_page_index) .jg-hero-logo{ display: none; } } /* ── 13. Submission form ─────────────────────────────────────────────────── The longest form on the site, so the whole job here is making length feel short: four numbered cards, whole fields paired two to a row where they are short enough to read side by side, and one action at the end. */ .jg-submit__head{ margin: 0 0 30px; } .pkp_structure_main .jg-submit__lede{ font-size: 18px; line-height: 1.6; color: var(--jg-mu); max-width: 32em; margin: 0 0 22px; text-align: left; hyphens: manual; } /* Three facts an author weighs before starting: how long, how long, how much. */ .jg-facts2{ display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0; border: 1px solid var(--jg-rule); border-radius: 2px; overflow: hidden; } .jg-facts2 li{ flex: 1 1 150px; padding: 12px 18px; border-right: 1px solid var(--jg-rule); font-size: 14px; } .jg-facts2 li:last-child{ border-right: 0; } .jg-facts2 span{ display: block; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--jg-fnt); margin-bottom: 2px; } .jg-facts2 strong{ font-size: 15px; font-weight: 600; color: var(--jg-ink); } .jg-submit__notice, .jg-submit__errors{ padding: 14px 18px; margin: 0 0 24px; border: 1px solid var(--jg-rule); border-left: 3px solid var(--jg-red); border-radius: 0 2px 2px 0; background: var(--jg-card); font-size: 15px; } .jg-submit__errors ul{ margin: 8px 0 0; padding-left: 20px; } .pkp_structure_main .jg-submit__errors p, .pkp_structure_main .jg-submit__errors li{ text-align: left; hyphens: manual; font-size: 15px; } /* Cards, numbered. The number is not decoration: this is a sequence, and an author wants to know how much of it is left. */ .jg-card{ border: 1px solid var(--jg-rule); border-radius: 2px; padding: 26px 28px 30px; margin: 0 0 18px; background: var(--jg-paper); } .jg-card__h{ display: flex; align-items: center; gap: 12px; font-size: 19px; font-weight: 600; color: var(--jg-navy); margin: 0 0 6px; line-height: 1.3; } .jg-step{ flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%; background: var(--jg-navy); color: #ffffff; font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; } .jg-field{ margin-top: 20px; } .jg-grid{ display: grid; grid-template-columns: 1fr; gap: 0 24px; } @media (min-width: 620px){ .jg-grid{ grid-template-columns: 1fr 1fr; } .jg-field--wide{ grid-column: 1 / -1; } } .jg-lbl{ display: block; font-size: 14px; font-weight: 600; color: var(--jg-ink); margin: 0 0 7px; } .jg-req{ font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--jg-red); margin-left: 6px; } .jg-in{ display: block; width: 100%; font-family: var(--jg-sans); font-size: 15px; line-height: 1.5; color: var(--jg-ink); background: var(--jg-paper); border: 1px solid var(--jg-rule); border-radius: 2px; padding: 11px 13px; transition: border-color .15s ease, box-shadow .15s ease; } .jg-in:focus{ outline: none; border-color: var(--jg-navy-2); box-shadow: 0 0 0 3px rgba(29,58,92,.12); } .jg-in--area{ min-height: 190px; resize: vertical; } .jg-in--short{ min-height: 84px; resize: vertical; } .jg-in::placeholder{ color: var(--jg-fnt); } .pkp_structure_main .jg-help{ font-size: 13px; line-height: 1.55; color: var(--jg-fnt); margin: 7px 0 0; text-align: left; hyphens: manual; } .pkp_structure_main .jg-help--lead{ font-size: 14px; margin: 0 0 6px; max-width: 46em; } /* The native file input is replaced by a label styled as a control, because the native one cannot be styled and reads differently in every browser. The input itself stays in the page, off screen, so validation and keyboard access are the browser's own. */ .jg-file{ position: absolute; opacity: 0; width: 1px; height: 1px; overflow: hidden; } .jg-drop{ display: flex; align-items: center; gap: 14px; border: 1px dashed var(--jg-rule); border-radius: 2px; background: var(--jg-strip); padding: 11px 13px; cursor: pointer; transition: border-color .15s ease, background .15s ease; } .jg-drop:hover{ border-color: var(--jg-navy-2); background: var(--jg-card); } .jg-file:focus + .jg-drop{ border-color: var(--jg-navy-2); box-shadow: 0 0 0 3px rgba(29,58,92,.12); } .jg-drop__cta{ flex: 0 0 auto; font-size: 13px; font-weight: 600; color: var(--jg-navy-2); border: 1px solid var(--jg-navy-2); border-radius: 2px; padding: 5px 12px; background: var(--jg-paper); } .jg-drop__name{ font-size: 13.5px; color: var(--jg-fnt); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jg-drop--filled{ border-style: solid; border-color: var(--jg-navy-2); background: var(--jg-paper); } .jg-drop--filled .jg-drop__name{ color: var(--jg-ink); font-weight: 600; } .jg-author + .jg-author{ margin-top: 26px; border-top: 1px solid var(--jg-rule); padding-top: 20px; } .jg-author__h{ font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--jg-mu); margin: 14px 0 0; } .jg-addauthor{ margin-top: 24px; font-family: var(--jg-sans); font-size: 14px; font-weight: 600; color: var(--jg-navy-2); background: transparent; border: 1px solid var(--jg-navy-2); border-radius: 2px; padding: 10px 18px; cursor: pointer; } .jg-addauthor:hover{ background: var(--jg-navy-2); color: #ffffff; } .jg-addauthor[hidden]{ display: none; } .jg-check{ display: flex; align-items: flex-start; gap: 13px; font-size: 15px; line-height: 1.55; color: var(--jg-ink); margin: 0; padding: 15px 0; border-bottom: 1px solid var(--jg-rule); text-align: left; cursor: pointer; } .jg-check:last-of-type{ border-bottom: 0; padding-bottom: 0; } .jg-check input{ margin: 3px 0 0; flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--jg-navy); } .jg-submitbar{ display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 6px 0 0; } .jg-submitbtn{ font-family: var(--jg-sans); font-size: 16px; font-weight: 700; color: #ffffff; background: var(--jg-red); border: 0; border-radius: 2px; padding: 15px 34px; cursor: pointer; transition: background .15s ease; } .jg-submitbtn:hover{ background: var(--jg-navy); } .jg-submitbtn[disabled]{ opacity: .55; cursor: default; } .jg-submitbar .jg-help{ margin: 0; } /* Off screen, not display:none: a field that is not rendered cannot be filled by the machines this is meant to catch. */ .jg-hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* The single call to action on the submission information page. Core put a login prompt here; this replaces it, and it is the only route advertised. */ .jg-submitcta{ display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; padding: 22px 26px; margin: 0 0 28px; border: 1px solid var(--jg-rule); border-left: 3px solid var(--jg-red); border-radius: 0 2px 2px 0; background: var(--jg-card); } .jg-submitcta__text h2{ font-size: 19px; font-weight: 600; color: var(--jg-navy); margin: 0 0 4px; } .pkp_structure_main .jg-submitcta__text p{ font-size: 14.5px; color: var(--jg-mu); margin: 0; text-align: left; hyphens: manual; } .jg-submitcta__btn{ flex: 0 0 auto; font-size: 15px; font-weight: 700; color: #ffffff !important; background: var(--jg-red); border-radius: 2px; padding: 13px 26px; text-decoration: none !important; } .jg-submitcta__btn:hover{ background: var(--jg-navy); color: #ffffff !important; } /* Acknowledgement page. */ .jg-done{ max-width: 40em; } .jg-done__tick{ width: 52px; height: 52px; border-radius: 50%; background: var(--jg-navy); color: #ffffff; font-size: 26px; line-height: 52px; text-align: center; margin: 0 0 18px; } .jg-done__ref{ display: flex; align-items: baseline; gap: 14px; border: 1px solid var(--jg-rule); border-left: 3px solid var(--jg-navy); border-radius: 0 2px 2px 0; padding: 14px 18px; margin: 0 0 22px; } .jg-done__ref span{ font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--jg-mu); } .jg-done__ref strong{ font-size: 20px; font-weight: 700; color: var(--jg-navy); font-variant-numeric: tabular-nums; } .jg-done__next{ margin: 0 0 26px; padding-left: 20px; } .pkp_structure_main .jg-done__next li{ margin-bottom: 10px; text-align: left; hyphens: manual; } /* ── 14. The author tracker ──────────────────────────────────────────────── Seven steps, and one panel saying whose move it is. The stepper is a list with a rule running behind the dots, drawn with a pseudo-element on each item rather than a background on the list, so the line stops correctly at both ends and the whole thing stacks on a phone without leaving a stray rule. Rules that set type on p, li or h2 are scoped through .pkp_structure_main, because core's element selectors carry (0,1,1) and a bare class loses. */ .pkp_structure_main .jg-track__ref{ font-family: var(--jg-sans); font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--jg-fnt); margin: 0 0 8px; text-align: left; font-variant-numeric: tabular-nums; } .pkp_structure_main .jg-track__authors{ font-size: 14.5px; color: var(--jg-mu); margin: 10px 0 0; text-align: left; hyphens: manual; } .jg-track__notice{ padding: 14px 18px; margin: 0 0 24px; border: 1px solid var(--jg-rule); border-left: 3px solid var(--jg-navy); border-radius: 0 2px 2px 0; background: var(--jg-strip); } .pkp_structure_main .jg-track__notice p{ font-size: 15px; margin: 0; text-align: left; hyphens: manual; } /* The stepper. */ .jg-steps{ display: flex; list-style: none; margin: 0 0 26px; padding: 0; counter-reset: none; } .pkp_structure_main .jg-steps__i{ position: relative; flex: 1 1 0; text-align: center; margin: 0; padding: 0 4px; min-width: 0; } /* The connecting rule, drawn to the left of every dot but the first. */ .jg-steps__i::before{ content: ""; position: absolute; top: 15px; right: 50%; left: -50%; height: 1px; background: var(--jg-rule); } .jg-steps__i:first-child::before{ display: none; } .jg-steps__i--done::before, .jg-steps__i--active::before{ background: var(--jg-navy); } .jg-steps__dot{ position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 50%; border: 1px solid var(--jg-rule); background: var(--jg-paper); color: var(--jg-fnt); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; } .jg-steps__i--done .jg-steps__dot{ background: var(--jg-navy); border-color: var(--jg-navy); color: #ffffff; } .jg-steps__i--active .jg-steps__dot{ background: var(--jg-paper); border-color: var(--jg-navy); color: var(--jg-navy); box-shadow: 0 0 0 3px rgba(29,58,92,.14); } .jg-steps__label{ display: block; margin-top: 8px; font-size: 12px; line-height: 1.35; color: var(--jg-fnt); hyphens: manual; } .jg-steps__i--done .jg-steps__label{ color: var(--jg-mu); } .jg-steps__i--active .jg-steps__label{ color: var(--jg-navy); font-weight: 600; } .jg-track__now{ border-left: 3px solid var(--jg-navy); } .pkp_structure_main .jg-track__state{ font-size: 20px; font-weight: 600; color: var(--jg-navy); margin: 4px 0 10px; text-align: left; } .jg-track__round{ font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jg-mu); border: 1px solid var(--jg-rule); border-radius: 2px; padding: 2px 7px; margin-left: 8px; vertical-align: middle; white-space: nowrap; } .jg-track__owed{ border-left: 3px solid #8a5a00; } @media (max-width: 700px){ /* Stacked, with the rule running down the left instead of across. */ .jg-steps{ display: block; margin-bottom: 22px; } .pkp_structure_main .jg-steps__i{ display: flex; align-items: center; gap: 14px; text-align: left; padding: 0 0 16px 0; } .jg-steps__i::before{ top: 31px; bottom: 0; left: 15px; right: auto; width: 1px; height: auto; } .jg-steps__i:last-child::before{ display: none; } .jg-steps__i:first-child::before{ display: block; } .jg-steps__dot{ flex: 0 0 auto; } .jg-steps__label{ margin-top: 0; font-size: 14px; } } /* ── 15. The manuscript page ─────────────────────────────────────────────── Everything known about one paper, in the order it gets read, with the move at the foot. Laid out as labelled rows rather than cards because this is a record being consulted, not a page being browsed: the eye runs down the left column looking for one field. Every rule that sets type on p, li, h2, h3, th or td is scoped through .pkp_structure_main, because core's element selectors carry (0,1,1) and a bare class at (0,1,0) loses to them silently. */ .pkp_structure_main .jg-ms__back{ font-size: 13px; margin: 0 0 14px; text-align: left; } .jg-ms__back a{ color: var(--jg-mu) !important; text-decoration: none; } .jg-ms__back a:hover{ color: var(--jg-red) !important; } .jg-ms__head{ border-bottom: 2px solid var(--jg-navy); padding-bottom: 16px; margin-bottom: 26px; } .pkp_structure_main .jg-ms__line{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; text-align: left; } .jg-ms__ref{ font-size: 13px; font-weight: 600; color: var(--jg-mu); font-variant-numeric: tabular-nums; } .jg-ms__sec{ font-size: 12.5px; color: var(--jg-fnt); } .pkp_structure_main .jg-ms__title{ font-family: var(--jg-sans); font-size: 25px; font-weight: 600; line-height: 1.3; color: var(--jg-navy); margin: 0; text-wrap: balance; } .pkp_structure_main .jg-ms__action{ font-size: 13.5px; color: var(--jg-mu); margin: 10px 0 0; text-align: left; hyphens: manual; } /* Whose move it is, as colour. Amber is not a warning here, it means the ball is not in our court. */ .jg-pill{ font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-radius: 2px; padding: 3px 9px; background: var(--jg-strip); color: var(--jg-mu); white-space: nowrap; } .jg-pill--us{ background: var(--jg-navy); color: #ffffff; } .jg-pill--author{ background: #8a5a00; color: #ffffff; } .jg-pill--reviewers{ background: var(--jg-navy-2); color: #ffffff; } .jg-pill--nobody{ background: var(--jg-strip); color: var(--jg-mu); } .jg-ms__block{ margin: 0 0 30px; } .pkp_structure_main .jg-ms__block > h2{ font-family: var(--jg-sans); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--jg-fnt); border-bottom: 1px solid var(--jg-rule); padding-bottom: 7px; margin: 0 0 14px; } .jg-ms__table{ width: 100%; border-collapse: collapse; margin: 0; } .pkp_structure_main .jg-ms__table th, .pkp_structure_main .jg-ms__table td{ font-size: 14px; line-height: 1.6; text-align: left; vertical-align: top; border-bottom: 1px solid var(--jg-rule); padding: 9px 0; hyphens: manual; } .pkp_structure_main .jg-ms__table th{ width: 190px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--jg-fnt); padding-right: 20px; padding-top: 12px; } .jg-ms__table td em{ color: var(--jg-fnt); } /* Where the table is a table of records rather than a list of fields, the header row goes back to being a header row. */ .pkp_structure_main .jg-ms__table--rows th{ width: auto; padding: 9px 16px 9px 0; border-bottom: 2px solid var(--jg-navy); } .pkp_structure_main .jg-ms__table--rows td{ padding-right: 16px; } .jg-ms__tag{ font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--jg-navy-2); border: 1px solid var(--jg-navy-2); border-radius: 2px; padding: 1px 5px; margin-left: 6px; white-space: nowrap; } .jg-ms__abstract{ margin-top: 20px; } .pkp_structure_main .jg-ms__abstract h3{ font-family: var(--jg-sans); font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--jg-fnt); margin: 0 0 8px; } .pkp_structure_main .jg-ms__abstract p{ font-size: 14.5px; line-height: 1.7; margin: 0 0 10px; text-align: justify; } .jg-ms__files{ list-style: none; margin: 0; padding: 0; } .pkp_structure_main .jg-ms__files li{ display: flex; align-items: baseline; gap: 16px; font-size: 14px; border-bottom: 1px solid var(--jg-rule); padding: 10px 0; margin: 0; text-align: left; } .jg-ms__filelabel{ flex: 0 0 190px; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--jg-fnt); } .pkp_structure_main .jg-ms__none{ font-size: 14px; color: var(--jg-mu); margin: 0; text-align: left; hyphens: manual; } /* The move. One box, because there is one thing to do. */ .jg-ms__decide{ border: 1px solid var(--jg-rule); border-top: 3px solid var(--jg-navy); background: var(--jg-strip); padding: 22px 24px 24px; } .pkp_structure_main .jg-ms__decide > h2{ margin-top: 0; } .jg-ms__choices{ display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 18px; } .jg-ms__choice{ display: inline-flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 600; color: var(--jg-ink); background: var(--jg-paper); border: 1px solid var(--jg-rule); border-radius: 2px; padding: 10px 16px; cursor: pointer; } .jg-ms__choice input{ margin: 0; } .jg-ms__choice:hover{ border-color: var(--jg-navy-2); } .jg-ms__choice:has(input:checked){ border-color: var(--jg-navy); background: var(--jg-navy); color: #ffffff; } /* A move the author will hear about, marked before it is made. */ .jg-ms__choice--tells{ border-style: dashed; } .jg-ms__choice--tells:has(input:checked){ border-color: #8a5a00; background: #8a5a00; border-style: solid; } .jg-ms__decide .jg-field{ margin-top: 0; } .jg-ms__decide .jg-in{ background: var(--jg-paper); } .pkp_structure_main .jg-ms__submit{ display: flex; align-items: center; flex-wrap: wrap; gap: 18px; margin: 18px 0 0; text-align: left; } .jg-ms__record{ font-family: var(--jg-sans); font-size: 14px; font-weight: 600; color: #ffffff; background: var(--jg-navy); border: 1px solid var(--jg-navy); border-radius: 2px; padding: 11px 24px; cursor: pointer; } .jg-ms__record:hover{ background: var(--jg-navy-2); border-color: var(--jg-navy-2); } .jg-ms__full{ font-size: 13px; color: var(--jg-mu) !important; } @media (max-width: 767px){ .pkp_structure_main .jg-ms__title{ font-size: 21px; } .pkp_structure_main .jg-ms__table th{ width: auto; display: block; padding: 10px 0 0; border-bottom: 0; } .pkp_structure_main .jg-ms__table td{ display: block; padding: 2px 0 10px; } .pkp_structure_main .jg-ms__table--rows th{ display: none; } .pkp_structure_main .jg-ms__table--rows tr{ display: block; border-bottom: 1px solid var(--jg-rule); padding: 6px 0; } .pkp_structure_main .jg-ms__files li{ display: block; } .jg-ms__filelabel{ display: block; margin-bottom: 3px; } .jg-ms__decide{ padding: 18px 16px 20px; } .jg-ms__choices{ flex-direction: column; align-items: stretch; } } /* ── 16. The reviewer's two pages ────────────────────────────────────────── Almost entirely the submission form's furniture: cards, fields, the submit bar. Only what is particular to reviewing is set here. */ .jg-rev__abstract{ font-size: 15px; line-height: 1.7; } .pkp_structure_main .jg-rev__abstract p{ text-align: justify; margin: 0 0 10px; } .jg-rev__download{ display: inline-block; font-size: 15px; font-weight: 600; color: #ffffff !important; background: var(--jg-navy); border: 1px solid var(--jg-navy); border-radius: 2px; padding: 11px 22px; text-decoration: none !important; } .jg-rev__download:hover{ background: var(--jg-navy-2); border-color: var(--jg-navy-2); } .pkp_structure_main .jg-rev__file{ margin: 0 0 10px; text-align: left; } /* The second action on a bar, kept quiet: declining and saving a draft are both real choices but neither is the one the page is for. */ .jg-rev__decline{ font-family: var(--jg-sans); font-size: 14px; font-weight: 600; color: var(--jg-mu); background: transparent; border: 1px solid var(--jg-rule); border-radius: 2px; padding: 11px 20px; cursor: pointer; } .jg-rev__decline:hover{ border-color: var(--jg-navy-2); color: var(--jg-navy-2); } .jg-rev__guidelines{ font-size: 14.5px; line-height: 1.7; color: var(--jg-mu); } .pkp_structure_main .jg-rev__guidelines p, .pkp_structure_main .jg-rev__guidelines li{ text-align: left; hyphens: manual; font-size: 14.5px; } /* Reused by the reviewer page for the guidelines it tucks away. */ .jg-optional{ border-top: 1px solid var(--jg-rule); margin: 18px 0 0; padding: 14px 0 0; } .jg-optional > summary{ cursor: pointer; font-weight: 600; font-size: 14.5px; color: var(--jg-navy-2); } /* ── 17. Reviewers, on the manuscript page ───────────────────────────────── One block per reviewer, and the report tucked behind a disclosure because an editor scanning a paper wants to know who is reading it and what they said in one line, not eleven answers unrolled twice over. */ .jg-rvw{ border: 1px solid var(--jg-rule); border-left: 3px solid var(--jg-rule); border-radius: 0 2px 2px 0; padding: 14px 18px; margin: 0 0 12px; background: var(--jg-paper); } .jg-rvw--done{ border-left-color: var(--jg-navy); } .jg-rvw--reading, .jg-rvw--invited{ border-left-color: var(--jg-navy-2); } .jg-rvw--declined{ border-left-color: var(--jg-rule); opacity: .72; } .pkp_structure_main .jg-rvw__head{ display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 6px; font-size: 15px; text-align: left; } .jg-rvw__mail{ font-size: 13px; } .jg-rvw__mail a{ color: var(--jg-mu) !important; } .pkp_structure_main .jg-rvw__dates{ font-size: 13.5px; color: var(--jg-mu); margin: 0; text-align: left; hyphens: manual; } .pkp_structure_main .jg-rvw__ci{ font-size: 13.5px; color: var(--jg-ink); margin: 8px 0 0; text-align: left; hyphens: manual; } .jg-rvw__ci span{ display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--jg-red); } .jg-rvw__who{ display: block; margin-top: 4px; font-size: 10.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--jg-fnt); } .jg-rvw__add{ border: 1px solid var(--jg-rule); border-top: 3px solid var(--jg-navy-2); background: var(--jg-strip); padding: 20px 22px 22px; margin: 20px 0 0; } .pkp_structure_main .jg-rvw__addh{ font-family: var(--jg-sans); font-size: 11.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--jg-fnt); margin: 0 0 4px; } .jg-rvw__add .jg-in{ background: var(--jg-paper); } /* ── 18. The certificate ─────────────────────────────────────────────────── A page that is printed as often as it is read, so it is laid out for paper first: centred, generous, and with the navigation gone when it prints. */ .jg-cert__paper{ border: 1px solid var(--jg-rule); border-top: 4px solid var(--jg-navy); background: var(--jg-paper); padding: 48px 44px 40px; text-align: center; max-width: 720px; margin: 0 auto; } .pkp_structure_main .jg-cert__eyebrow{ font-size: 11px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; color: var(--jg-fnt); margin: 0 0 28px; text-align: center; } .pkp_structure_main .jg-cert__intro{ font-size: 14.5px; color: var(--jg-mu); margin: 0 0 10px; text-align: center; } .pkp_structure_main .jg-cert__title{ font-size: 26px; font-weight: 600; line-height: 1.3; color: var(--jg-navy); margin: 0 0 14px; text-align: center; text-wrap: balance; } .pkp_structure_main .jg-cert__by{ font-size: 16px; color: var(--jg-ink); margin: 0 0 24px; text-align: center; } .pkp_structure_main .jg-cert__journal{ font-size: 19px; font-weight: 600; color: var(--jg-ink); margin: 0 0 2px; text-align: center; } .pkp_structure_main .jg-cert__issue{ font-size: 14.5px; color: var(--jg-mu); margin: 0 0 30px; text-align: center; } .jg-cert__facts{ width: 100%; border-collapse: collapse; margin: 0 0 28px; text-align: left; border-top: 1px solid var(--jg-rule); } .pkp_structure_main .jg-cert__facts th, .pkp_structure_main .jg-cert__facts td{ font-size: 13.5px; padding: 9px 0; border-bottom: 1px solid var(--jg-rule); text-align: left; vertical-align: top; hyphens: manual; } .pkp_structure_main .jg-cert__facts th{ width: 160px; font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--jg-fnt); padding-right: 16px; padding-top: 12px; } .pkp_structure_main .jg-cert__verify{ font-size: 12.5px; color: var(--jg-mu); margin: 0; text-align: center; line-height: 1.7; } .jg-cert__url{ font-size: 12px; color: var(--jg-navy-2); word-break: break-all; } .pkp_structure_main .jg-cert__print{ text-align: center; margin: 24px 0 0; } @media print{ /* Everything that is not the certificate. */ .pkp_structure_head, .pkp_structure_sidebar, .pkp_structure_footer_wrapper, .jg-noprint{ display: none !important; } .jg-cert__paper{ border: 0; padding: 0; max-width: none; } .pkp_structure_content{ display: block !important; } } /* ── 19. Seven items on one line ─────────────────────────────────────────── Adding "For Authors" took the primary navigation to seven entries and it wrapped, leaving Contact stranded on a line of its own. The row is tightened rather than the labels shortened: horizontal padding comes down, the labels are told not to break mid-word, and below the desktop breakpoint the theme's own off-canvas menu takes over anyway. */ @media (min-width: 768px){ .pkp_navigation_primary{ flex-wrap: nowrap !important; } .pkp_navigation_primary > li > a{ padding: 11px 13px !important; white-space: nowrap; } } /* A little tighter again where seven items and a search link are close to the edge, before the off-canvas menu takes over. */ @media (min-width: 768px) and (max-width: 1100px){ .pkp_navigation_primary > li > a{ padding: 11px 9px !important; font-size: 13.5px; } } .jg-ms__when{ font-size: 12px; color: var(--jg-fnt); }