/* ============================================================= CDER - Journal of Renewable Energies A professional design system for OJS 3.5. Child theme of Bootstrap 3 (bootstrap3/flatly). Overrides no templates; adds styling only. Load order in the served page: 1. bootstrapTheme-flatly (parent, via page/page/css) 2. cderTheme/styles/fonts.css <- this theme 3. cderTheme/styles/cder.css <- this theme 4. shariff / webOfScience / wcag-themes plugin CSS 5. public/journals/1/styleSheet.css (journal, wins on ties) TWO RULES THAT MATTER WHEN EDITING THIS FILE -------------------------------------------- 1. THE ROOT FONT SIZE IS 10px, NOT 16px. Bootswatch (which flatly is) sets `html { font-size: 10px }` and expresses everything in rem against that. A `rem` value here is therefore 10px, not 16px - writing `2rem` expecting 32px actually yields 20px. Every type size below is written in px so it means what it says and cannot drift. 2. FLATLY'S NAV IS DARK; OURS IS LIGHT. flatly emits `.navbar-default .nav>li>a { color:#fff }` because its own navbar is dark. We recolour the navbar to a light background, so those links must be reset or they render white-on-white. The rules in section 04 deliberately reuse flatly's own selector shape so specificity ties and our later load order decides. THREE HARD CONSTRAINTS INHERITED FROM THE LIVE JOURNAL ----------------------------------------------------- * The logo source is 107x80. Since Oct 2026 the journal reduced it (see section 04): 64px high on desktop, 40px below 768px. The brand row keeps its 80px min-height either way, so the header rhythm is unchanged. The journal stylesheet owns the logo box with `max-height:80px !important` and loads after this file, so the reduction here uses a more specific selector + !important. * The header rhythm is 99px of content (19px user-nav row + 80px brand/nav row) plus the 4px top and 1px bottom border. Anything that adds layout height to those rows breaks the rhythm. * No header_view, pdfjs_view or galley_view rules belong in this theme. The PDF galley page keeps the full menu header and its title/galley styling is owned by the journal stylesheet. Contents 01 Design tokens 02 Base elements & typography 03 Accessibility 04 Site header & navigation 05 Layout scaffolding 06 Page header 07 Media objects 08 Article summaries (issue TOC + homepage) 09 Homepage cards & quick links 10 Issue headings & cover 11 Article details page 12 Galleys & downloads 13 Buttons & links 14 Forms 15 Sidebar blocks 16 Panels, alerts, pagination, list groups 17 Breadcrumbs 18 Tables 19 Footer 20 Motion & print 21 Responsive behaviour 22 Premium refinements ============================================================= */ /* ============================================================= 01 Design tokens ============================================================= */ :root { /* --- Brand: deep teal ------------------------------------------ */ --cder-teal-950: #04211E; --cder-teal-900: #06312D; --cder-teal-800: #0A4741; --cder-teal-700: #0F6E64; /* primary */ --cder-teal-600: #12897C; --cder-teal-500: #1FA595; --cder-teal-300: #7FC9C0; --cder-teal-100: #D9EEEB; --cder-teal-050: #F0F8F7; /* --- Accent: amber --------------------------------------------- */ --cder-amber-700: #8F5410; /* text-safe on white, ~6:1 */ --cder-amber-600: #C8781E; /* fills, borders, large text */ --cder-amber-500: #E8963C; --cder-amber-300: #F5C88A; --cder-amber-100: #FCEEDF; /* --- Neutrals --------------------------------------------------- */ --cder-ink-900: #12171A; --cder-ink-800: #1F262B; --cder-ink-700: #2E383E; --cder-ink-600: #47535A; --cder-ink-500: #66737B; --cder-ink-400: #93A0A8; --cder-line: #DDE4E3; --cder-line-soft:#EDF2F1; --cder-bg: #FFFFFF; --cder-bg-soft: #F7FAFA; /* Surfaces used by the two-tone header and the issue band. Kept close to --cder-bg-soft so the greys read as one family. */ --cder-strip-bg: #D9EEEB; --cder-band-bg: #F4F8F7; /* --- Semantic --------------------------------------------------- */ --cder-text: var(--cder-ink-700); --cder-text-strong: var(--cder-ink-900); --cder-link: var(--cder-teal-700); --cder-link-hover: var(--cder-teal-800); /* --- Type ------------------------------------------------------- */ --cder-font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Noto Serif leads the stack so it is picked up automatically if the server ever gains it; Charter/Cambria/Georgia cover every desktop and mobile platform without shipping a single extra byte. */ --cder-font-serif: "Noto Serif", Charter, "Bitstream Charter", Cambria, Georgia, "Times New Roman", serif; --cder-font-mono: "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; --cder-lh-body: 1.7; --cder-lh-tight: 1.25; /* --- Shape ------------------------------------------------------ */ --cder-radius-sm: 4px; --cder-radius: 7px; --cder-radius-lg: 12px; --cder-shadow-1: 0 1px 2px rgba(6, 49, 45, .07); --cder-shadow-2: 0 2px 10px rgba(6, 49, 45, .09); /* Used only by .dropdown-menu; darkness raised for a crisper edge (Oct 2026). Geometry kept at 0 10px 30px - only the alpha moves. */ --cder-shadow-3: 0 10px 30px rgba(6, 49, 45, .30); --cder-shadow-header: -1px 6px 24px -4px rgba(6, 49, 45, .12); --cder-ring: 0 0 0 3px rgba(232, 150, 60, .45); /* --- Rhythm ----------------------------------------------------- */ --cder-gap-xs: 4px; --cder-gap-sm: 8px; --cder-gap: 16px; --cder-gap-lg: 28px; --cder-gap-xl: 44px; } /* ============================================================= 02 Base elements & typography ============================================================= */ body { font-family: var(--cder-font-serif); /* Kept at the parent theme's 14px so no existing layout metric moves. Raise to 16px here for a roomier reading size. */ font-size: 14px; line-height: var(--cder-lh-body); color: var(--cder-text); background-color: var(--cder-bg); text-align: left; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; -webkit-text-size-adjust: 100%; } /* The customHeaderPlugin emits its banner as an unclosed
that the parser ends up wrapping around the whole , so every block on every page silently inherits text-align:center. Reset the wrapper to normal flow; the components that are meant to be centred (the banner itself, the footer logo strip and the copyright bar) set it on their own elements, so they are unaffected. */ body > center { text-align: left; } h1, h2, h3, h4, h5, h6, h1.page-header, h2.page-header, .title, .lead, .panel-title, .navbar-brand, .site-name { font-family: var(--cder-font-sans); color: var(--cder-text-strong); font-weight: 700; letter-spacing: -.01em; line-height: var(--cder-lh-tight); } h1, .h1 { font-size: 32px; letter-spacing: -.02em; } h2, .h2 { font-size: 24px; } h3, .h3 { font-size: 20px; } h4, .h4 { font-size: 18px; } h5, .h5 { font-size: 16px; } h6, .h6 { font-size: 14px; letter-spacing: .04em; text-transform: uppercase; color: var(--cder-ink-500); } p { margin-bottom: 1.1em; } p:last-child { margin-bottom: 0; } a { color: var(--cder-link); text-decoration: none; transition: color .16s ease, border-color .16s ease, background-color .16s ease; } a:hover, a:focus { color: var(--cder-link-hover); text-decoration: underline; } strong, b { font-weight: 700; color: var(--cder-text-strong); } code, pre, kbd, samp { font-family: var(--cder-font-mono); font-size: 13px; } code { padding: 2px 5px; background: var(--cder-teal-050); border: 1px solid var(--cder-teal-100); border-radius: var(--cder-radius-sm); color: var(--cder-teal-800); } pre { padding: var(--cder-gap); background: var(--cder-teal-900); color: #E7F1EF; border-radius: var(--cder-radius); overflow-x: auto; line-height: 1.55; } pre code { background: none; border: 0; padding: 0; color: inherit; } hr { border: 0; border-top: 1px solid var(--cder-line); margin: var(--cder-gap-lg) 0; } blockquote { margin: var(--cder-gap) 0; padding: var(--cder-gap) var(--cder-gap-lg); border-left: 4px solid var(--cder-teal-500); background: var(--cder-teal-050); border-radius: 0 var(--cder-radius) var(--cder-radius) 0; font-style: normal; color: var(--cder-ink-600); } /* `height:auto` preserves the logo's aspect ratio while `#headerNavigationContainer .navbar-brand-logo img` in section 04 clamps it to the reduced size decided in Oct 2026. */ img, svg, video { max-width: 100%; height: auto; } .text-muted, .help-block, .helpBlock { color: var(--cder-ink-500); } .small, small { color: var(--cder-ink-500); } ::selection { background: var(--cder-amber-300); color: var(--cder-ink-900); } /* ============================================================= 03 Accessibility ============================================================= */ :focus-visible { outline: 2px solid var(--cder-amber-600); outline-offset: 2px; border-radius: 2px; } a.skip-link, .pkp_screen_reader:focus { position: static !important; width: auto !important; height: auto !important; padding: 8px 16px !important; margin: 0 !important; overflow: visible !important; clip: auto !important; white-space: normal !important; border-radius: var(--cder-radius-sm); background: var(--cder-teal-800); color: #fff !important; font-family: var(--cder-font-sans); z-index: 10000; } /* ============================================================= 04 Site header & navigation ------------------------------------------------------------- Two-tone header, after the Academic Pro Extended reference: a grey user strip on top, a white brand/nav band below it, and a soft lift under the whole bar. Refined, not rebuilt. The vertical rhythm of the menu is left entirely to the journal stylesheet, which scopes those rules with an id selector and loads after this file. The logo is reduced from its natural 107x80 to 64px (40px on mobile) per the Oct 2026 journal decision; the brand row keeps its 80px min-height, so the two-row rhythm is unchanged. The grey strip is painted with a background and an INSET shadow rather than a border. A border would add 1px and change the measured header rhythm; an inset shadow is decoration only and cannot affect layout height. The strip now carries 5px top/bottom padding so the Register/Login zone is 10px taller (Oct 2026 request). ============================================================= */ #headerNavigationContainer.navbar { background: var(--cder-bg); border: 0; border-top: 4px solid var(--cder-teal-700); border-bottom: 1px solid var(--cder-line); border-radius: 0; margin-bottom: 0; box-shadow: var(--cder-shadow-header); min-height: 0; } #headerNavigationContainer .navbar-header { margin: 0; } /* Sticky header: the journal header stays pinned to the top while the page scrolls. position:sticky keeps the element in flow, so the page does not jump up under the header on load (unlike position:fixed), and pins it to the viewport top only once it would scroll away. The header's containing block is .pkp_structure_page, which spans the whole document, and no ancestor has overflow set, so the stickiness holds for the entire scroll. z-index keeps it above page content and its own dropdowns. */ #headerNavigationContainer { position: sticky; top: 0; z-index: 1030; } /* User strip: the first .container-fluid child of the header holds #navigationUser. `:first-of-type` selects the first
, so any additional container-fluid added later stays white. */ #headerNavigationContainer > .container-fluid:first-of-type { background: var(--cder-strip-bg); box-shadow: inset 0 -1px 0 var(--cder-line-soft); padding-top: 5px; padding-bottom: 5px; } .site-name, .navbar-brand.navbar-brand-logo .site-name { font-family: var(--cder-font-sans); font-weight: 700; letter-spacing: -.01em; color: var(--cder-teal-800); } .navbar-brand-logo { padding: var(--cder-gap-sm) var(--cder-gap); } .navbar-brand-logo img { vertical-align: middle; } /* Logo reduction, journal decision Oct 2026: the 107x80 source logo is served 64px high on desktop and 40px below 768px, keeping its aspect via width:auto. The journal stylesheet owns the logo box with `.navbar-brand-logo img { max-height:80px !important }` and loads after this file, so the tie is decided by the more specific selector here. Scoped to the site header (#headerNavigationContainer) so the slim PDF-viewer header and footer logos are untouched. */ #headerNavigationContainer .navbar-brand-logo img { max-height: 64px !important; width: auto !important; } @media (max-width: 767px) { #headerNavigationContainer .navbar-brand-logo img { max-height: 40px !important; } } /* Selector shape deliberately mirrors flatly's `.navbar-default .nav>li>a` so the two tie on specificity and load order decides. Without this the inherited white link colour would be invisible on our light navbar. */ .navbar-default .nav > li > a, .navbar-default .nav > li > .dropdown-toggle, #main-navigation > li > a, #main-navigation > li > .dropdown-toggle { font-family: var(--cder-font-sans); font-size: 14px; font-weight: 600; color: var(--cder-ink-700); background: transparent; border-bottom: 3px solid transparent; transition: color .16s ease, border-color .16s ease, background-color .16s ease; } .navbar-default .nav > li > a:hover, .navbar-default .nav > li > a:focus, .navbar-default .nav > li > .dropdown-toggle:hover, .navbar-default .nav > li > .dropdown-toggle:focus, #main-navigation > li > a:hover, #main-navigation > li > a:focus { color: var(--cder-teal-800); background: var(--cder-teal-050); text-decoration: none; } .navbar-default .nav > .active > a, .navbar-default .nav > .active > a:hover, .navbar-default .nav > .active > a:focus, #main-navigation > .current > a, #main-navigation > .active > a { color: var(--cder-teal-800); background: transparent; border-bottom-color: var(--cder-amber-600); } /* Between 768px and 999px the journal stylesheet does not pin the nav link height to 80px, so the band is shorter than the 80px logo row and the links sit top-aligned against it. min-height raises the band to the logo height and flatly's `align-items:center` then centres the links. It cannot grow the header: above 1000px the links are already 80px, and the logo row is 80px either way. */ @media (min-width: 768px) { #nav-menu { min-height: 80px; } } .caret { border-top-color: currentColor; opacity: .55; } .dropdown-menu { font-family: var(--cder-font-sans); border: 1px solid var(--cder-line); border-top: 3px solid var(--cder-amber-600); border-radius: var(--cder-radius); box-shadow: var(--cder-shadow-3); padding: 6px 0; } .dropdown-menu > li > a { font-size: 14px; color: var(--cder-ink-700); padding: 7px 18px; } .dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus { color: var(--cder-teal-800); background: var(--cder-teal-050); } /* Open dropdown sub-items on phones: below 768px the collapsed menu restyles the open dropdown's links white (flatly) over the light header, making the children invisible. Pin them back to the parent link colour and not bold; keep the theme's teal hover. The #headerNavigationContainer prefix beats flatly's .navbar-default selectors at every breakpoint. */ @media (max-width: 767px) { #headerNavigationContainer .navbar-nav .open .dropdown-menu > li > a { color: var(--cder-ink-700); font-weight: 400; } #headerNavigationContainer .navbar-nav .open .dropdown-menu > li > a:hover, #headerNavigationContainer .navbar-nav .open .dropdown-menu > li > a:focus { color: var(--cder-teal-800); background: var(--cder-teal-050); text-decoration: none; } } /* User nav (Register / Login) as pill chips in the top-right row. */ #navigationUser.nav-pills > li > a { font-family: var(--cder-font-sans); font-weight: 600; color: var(--cder-teal-700); border: 1px solid var(--cder-teal-100); border-radius: 999px; background: var(--cder-teal-050); transition: background-color .16s ease, color .16s ease, border-color .16s ease; } #navigationUser.nav-pills > li > a:hover, #navigationUser.nav-pills > li > a:focus { background: var(--cder-teal-700); border-color: var(--cder-teal-700); color: #fff; text-decoration: none; } /* Hamburger: dark by default, light once the menu is open. Bootstrap3 adds a `collapsed` class to the button while the menu is closed and removes it on click, so the two states are targetable directly. Closed -> solid dark teal pill with white bars (the Register chip's filled hover state); open -> the chip itself, light teal with dark bars. Prefixing with #headerNavigationContainer beats flatly's .navbar-default rules that would force a white icon-bar and a dark ink border. */ #headerNavigationContainer .navbar-toggle { background: var(--cder-teal-700); border: 1px solid var(--cder-teal-700); border-radius: 999px; margin-top: 12px; margin-bottom: 12px; } #headerNavigationContainer .navbar-toggle .icon-bar { background-color: #fff; } #headerNavigationContainer .navbar-toggle:hover, #headerNavigationContainer .navbar-toggle:focus { background: var(--cder-teal-800); border-color: var(--cder-teal-800); } #headerNavigationContainer .navbar-toggle:hover .icon-bar, #headerNavigationContainer .navbar-toggle:focus .icon-bar { background-color: #fff; } /* menu open: button goes light, like the Register/Login chips */ #headerNavigationContainer .navbar-toggle:not(.collapsed), #headerNavigationContainer .navbar-toggle:not(.collapsed):hover, #headerNavigationContainer .navbar-toggle:not(.collapsed):focus { background: var(--cder-teal-050); border-color: var(--cder-teal-100); } #headerNavigationContainer .navbar-toggle:not(.collapsed) .icon-bar { background-color: var(--cder-teal-700); } /* ============================================================= 05 Layout scaffolding ============================================================= */ .pkp_structure_page { background: var(--cder-bg); } .pkp_structure_content, .pkp_structure_main, .pkp_structure_sidebar { padding-top: var(--cder-gap-lg); padding-bottom: var(--cder-gap-xl); } /* The sidebar is a Bootstrap grid column, so its padding is the gutter that separates it from the main content. Only widen that gutter - zeroing it would let sidebar cards run flush against the article text. */ @media (min-width: 992px) { .pkp_structure_sidebar { padding-left: var(--cder-gap-lg); } } /* ============================================================= 06 Page header ------------------------------------------------------------- The amber rule under every page header is the one accent the reference theme carries over. position:relative is required by the absolutely positioned ::after; it has no other effect here because nothing in these headers is offset. ============================================================= */ .page-header { position: relative; margin: 0 0 var(--cder-gap-lg); padding: 0 0 var(--cder-gap); border-bottom: 2px solid var(--cder-teal-100); } .page-header::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 56px; height: 3px; border-radius: 2px; background: var(--cder-amber-600); } .page-header .btn-group { margin-top: var(--cder-gap-sm); } .intro { color: var(--cder-ink-600); } /* ============================================================= 07 Media objects ============================================================= */ .media { margin-bottom: var(--cder-gap); } .media:last-child { margin-bottom: 0; } .media-heading { font-family: var(--cder-font-sans); font-size: 20px; font-weight: 700; color: var(--cder-text-strong); line-height: var(--cder-lh-tight); } .media-left { padding-right: var(--cder-gap); } .media-body { min-width: 0; } .media-object { border-radius: var(--cder-radius); box-shadow: var(--cder-shadow-1); border: 1px solid var(--cder-line); } /* ============================================================= 08 Article summaries (issue TOC, current issue, search results) ------------------------------------------------------------- Verified against the rendered markup of /issue/view/117, / and /search/search?query=energy. All three share ONE structure: div.article-summary.media > div.media-body h3.media-heading > a <- the article title div.meta > div.authors p.pages div.btn-group > a.galley-link <- the buttons, INSIDE .media-body Two facts this section depends on: * The title is a .media-heading, NOT .title. The only .title elements on these pages are the sidebar block headings (h2.title inside div.pkp_block). * The container is deliberately NOT scoped to .issue-toc. Search results use the identical markup inside div.search-results, so scoping to the TOC would have left search results unstyled. Instead the padding is keyed to .article-summary.media - which the TOC uses - leaving the article page's .article-summary (there that class wraps the ABSTRACT) untouched. THE CARD -------- Each row becomes a card with a hairline border and a lift on hover, matching the reference theme's article list. THE GRID -------- flatly compiles the classic Bootstrap media pattern: .media-left,.media-right,.media-body { display:table-cell } .media-body { width: 10000px } The 10000px width is what makes the old pattern work - it forces the table to fill the row - and it must be neutralised before a grid can be laid out, or the track resolves against a 10000px item and overflows the page. Hence the explicit width:auto below. The grid is scoped to .media-body rather than the outer row because the .btn-group is a CHILD of .media-body. Placing it from the outer row would require restructuring markup this theme does not own. Named areas are used instead of raw row numbers so that a missing element (no authors, or no page numbers) collapses its row rather than leaving a gap. ============================================================= */ .article-summary.media { display: block; padding: var(--cder-gap-lg); margin: 0 0 var(--cder-gap); background: var(--cder-bg); border: 1px solid var(--cder-line); border-radius: var(--cder-radius); box-shadow: var(--cder-shadow-1); transition: box-shadow .18s ease, border-color .18s ease, transform .18s ease; } .article-summary.media:first-child { padding-top: var(--cder-gap-lg); } .article-summary.media:last-child { margin-bottom: 0; border-bottom: 1px solid var(--cder-line); } .article-summary.media:hover { box-shadow: var(--cder-shadow-2); border-color: var(--cder-teal-300); transform: translateY(-1px); } /* Neutralise the table-cell layout, then lay the body out as a grid: title across the full width, authors/pages on the left and the galley buttons pinned right. */ .article-summary.media > .media-left, .article-summary.media > .media-right { display: block; float: none; width: auto; padding: 0; } .article-summary.media > .media-left { margin: 0 var(--cder-gap) var(--cder-gap-sm) 0; } .article-summary.media > .media-body { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "heading heading" "meta actions" "pages actions"; column-gap: var(--cder-gap); row-gap: 2px; align-items: start; width: auto; min-width: 0; /* flatly sets overflow:hidden on .media-body; that would clip the button shadow and the hover lift, so it is reopened here. */ overflow: visible; } .article-summary.media > .media-body > .media-heading { grid-area: heading; } .article-summary.media > .media-body > .meta { grid-area: meta; } .article-summary.media > .media-body > .pages { grid-area: pages; } .article-summary.media > .media-body > .btn-group { grid-area: actions; justify-self: end; align-self: center; } .article-summary.media .media-heading { font-family: var(--cder-font-sans); font-size: 20px; font-weight: 700; line-height: 1.35; margin: 0 0 6px; color: var(--cder-teal-800); } .article-summary.media .media-heading a { color: inherit; } .article-summary.media .media-heading a:hover, .article-summary.media .media-heading a:focus { color: var(--cder-amber-700); text-decoration: none; } .article-summary.media .authors, .article-summary.media .authors a { font-family: var(--cder-font-sans); font-size: 14px; font-weight: 600; color: var(--cder-ink-600); } .article-summary.media .authors a { color: var(--cder-teal-700); } .article-summary.media .authors a:hover { color: var(--cder-amber-700); } /* DOI / issue / pages line */ .article-summary.media .meta, .article-summary.media .pages, .article-summary.media .published, .article-summary.media .doi { font-family: var(--cder-font-sans); font-size: 13px; color: var(--cder-ink-500); margin-bottom: var(--cder-gap-sm); } .article-summary.media .pages { margin-bottom: 0; } .article-summary.media .meta a { color: var(--cder-ink-600); } /* Keywords appear in the sidebar list-group, labelled by a */ .list-group-item.keywords, .article-details .keywords { font-family: var(--cder-font-sans); font-size: 13px; color: var(--cder-ink-500); } .list-group-item.keywords strong { display: block; margin-bottom: 2px; color: var(--cder-teal-800); text-transform: uppercase; letter-spacing: .04em; font-size: 12px; } /* ============================================================= 09 Homepage cards & quick links ------------------------------------------------------------- Markup, from the theme's indexJournal.tpl override: div#main-content.page_index_journal section.journal-description.cder-card nav.cder-quicklinks > ul.cder-quicklinks-list > li > a.cder-quicklink section.cmp_announcements.cder-card (only if announcements) section.current_issue.cder-card section.additional_content.cder-card The .cder-card class is added by that template; without it these blocks fall back to flatly's bare layout. float:left is used for the logo inside .journal-description (set by the journal description's own HTML, not by us). overflow:hidden on the card contains that float so it cannot spill over the quick links below, and clips the card content to its rounded corners. ============================================================= */ .cder-card, .pkp_page_index .cder-card { background: var(--cder-bg); border: 1px solid var(--cder-line); border-radius: var(--cder-radius-lg); box-shadow: var(--cder-shadow-1); padding: var(--cder-gap-lg); overflow: hidden; margin: 0 0 var(--cder-gap-lg); } /* flatly scopes .journal-description and .additional_content margins to .pkp_page_index at (0,2,0), which beats a bare .cder-card. The paired selector restores ours. */ .pkp_page_index .journal-description.cder-card, .pkp_page_index .additional_content.cder-card { margin: 0 0 var(--cder-gap-lg); } /* The journal description's own HTML (edited in OJS, not by this theme) is desktop-first: a float:left logo, then paragraphs with an inline padding-left:250px. Below 768px the card content is ~245px wide, so that padding leaves the paragraphs a near-zero content box: the text wraps into a column thousands of pixels tall that the card's overflow:hidden then clips away - the description looks blank on phones. Reset those two inline choices so the logo stacks on top and the text reflows normally. Inline styles need !important to lose. */ @media (max-width: 767px) { .journal-description p { padding-left: 0 !important; padding-right: 0 !important; } .journal-description div[style*="float"] { float: none !important; margin: 0 0 var(--cder-gap); } } /* --- Quick links ------------------------------------------------- A single-column-at-a-time button row that reflows by itself. auto-fit with a minmax floor means no media query is needed and the row can never exceed the container width. */ .cder-quicklinks { margin: 0 0 var(--cder-gap-lg); padding: 0; } .cder-quicklinks-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: var(--cder-gap-sm); } .cder-quicklinks-list > li { display: flex; margin: 0; } .cder-quicklink { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px 14px; font-family: var(--cder-font-sans); font-size: 14px; font-weight: 600; letter-spacing: .01em; color: var(--cder-teal-800); background: linear-gradient(#fff, #F7FAFA); border: 1px solid var(--cder-line); border-radius: var(--cder-radius); box-shadow: var(--cder-shadow-1); text-decoration: none; transition: background .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease; } .cder-quicklink:hover, .cder-quicklink:focus { background: linear-gradient(var(--cder-teal-050), #E4F2F0); border-color: var(--cder-teal-300); color: var(--cder-teal-900); box-shadow: var(--cder-shadow-2); transform: translateY(-1px); text-decoration: none; } /* --- View All Issues CTA ------------------------------------ The button is the last child of section.current_issue, right after .issue-toc, so it lands flush (0 gap) against the hairline under the final article row. margin-top restores the breathing room, on the same 28px scale as the card padding and the gap under .issue-details. Scoped with the child combinator: on issue pages the same button lives inside .heading.row and keeps its own spacing. */ .current_issue > .read-more { margin-top: var(--cder-gap-lg); } /* ============================================================= 10 Issue headings & cover ------------------------------------------------------------- Markup verified on / (homepage): section.current_issue.cder-card header.page-header > h2 "Current Issue" p.current_issue_title.lead "ICAEEE'2026 (Special Issue)" div.issue-toc and on /issue/view/117: div.issue-toc > div.heading.row (cover image + "View All Issues") div.issue-details > p.published No .issue-summary exists in OJS 3.5, so none is styled here. ============================================================= */ .page-header > h2 { font-family: var(--cder-font-sans); font-size: 24px; font-weight: 700; color: var(--cder-text-strong); margin: 0; } .current_issue_title.lead { font-family: var(--cder-font-sans); font-size: 20px; font-weight: 700; color: var(--cder-teal-800); margin: 0 0 var(--cder-gap); padding-bottom: var(--cder-gap); border-bottom: 2px solid var(--cder-teal-100); } /* Issue metadata band. Mirrors the reference theme's grey issue identification panel: soft ground, teal spine on the left. The padding replaces the Bootstrap column's default 15px gutter, which is the intent - the band should read as one solid block. */ .issue-toc .issue-details { background: var(--cder-band-bg); border: 1px solid var(--cder-line); border-left: 3px solid var(--cder-teal-600); border-radius: var(--cder-radius); padding: var(--cder-gap-lg); margin-bottom: var(--cder-gap-lg); } .issue-toc .issue-details .description { margin-bottom: var(--cder-gap-sm); } .issue-details .published { font-family: var(--cder-font-sans); font-size: 14px; color: var(--cder-ink-500); margin-bottom: var(--cder-gap); } .issue-toc .heading { margin-bottom: var(--cder-gap); } /* Section labels inside the TOC ("Regular Article", "Review", ...). issue_toc.tpl renders them as .page-header > h2 > small, and bootstrap3 already forces that to display:block. The type rule is what makes them read as labels rather than as headings. */ .issue-toc .sections section > .page-header > h2 { line-height: var(--cder-lh-tight); margin: 0; } .issue-toc .sections section > .page-header > h2 > small { display: block; margin: 0; font-family: var(--cder-font-sans); font-size: 15px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cder-teal-700); } /* The cover art sits in a bordered plate. overflow:hidden is load-bearing: the JPEG inside has square corners and would otherwise poke out past the container's radius. */ .cover, .article-sidebar .cover-image { border: 1px solid var(--cder-line); border-radius: var(--cder-radius); box-shadow: var(--cder-shadow-1); background: #fff; overflow: hidden; } .article-sidebar .cover-image { margin-bottom: var(--cder-gap); } /* ============================================================= 11 Article details page ============================================================= */ /* The article title is the page's h1.page-header - OJS 3.5 does not use .title here. Scoped to the article-details so the smaller page headers on archive/search/about pages keep their own size. */ .article-details h1.page-header { font-family: var(--cder-font-sans); font-size: 34px; font-weight: 700; line-height: 1.2; letter-spacing: -.02em; color: var(--cder-text-strong); margin: 0 0 var(--cder-gap); padding-bottom: var(--cder-gap); border-bottom: 2px solid var(--cder-teal-100); } @media (max-width: 767px) { .article-details h1.page-header { font-size: 26px; } } /* On this page the author name is a inside div.author, and the affiliation is a sibling div.article-author-affiliation. */ .article-details .authors { font-family: var(--cder-font-sans); font-size: 15px; line-height: 1.6; color: var(--cder-ink-700); margin-bottom: var(--cder-gap); } .article-details .authors .author { margin-bottom: var(--cder-gap-xs); } .article-details .authors .author > strong { font-weight: 700; color: var(--cder-text-strong); } .article-details .authors a { color: var(--cder-teal-700); font-weight: 600; } .article-author-affiliation { font-family: var(--cder-font-sans); font-size: 13px; line-height: 1.5; color: var(--cder-ink-500); margin: 0 0 var(--cder-gap-sm); padding-left: var(--cder-gap); border-left: 2px solid var(--cder-teal-100); } .article-author-affiliation:last-child { margin-bottom: 0; } /* Publication metadata is a sidebar list-group: date-published, doi, keywords. Those carry Bootstrap's own .list-group-item styling, so nothing here may assume a bare .meta wrapper exists. */ .article-sidebar .list-group-item { font-family: var(--cder-font-sans); font-size: 13px; color: var(--cder-ink-600); padding: 11px var(--cder-gap); } .article-sidebar .list-group-item > strong:first-child { display: block; margin-bottom: 2px; color: var(--cder-teal-800); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; } .article-sidebar .list-group-item .value { color: var(--cder-ink-600); } /* The abstract is div.article-summary > h2 + div.article-abstract. Section 08 keys its card padding to .article-summary.media; this box carries no .media class, so it needs no neutralising - the rule below is belt-and-braces against the class being added upstream. */ .article-details .article-summary { padding: 0; border-bottom: 0; } .article-abstract { font-family: var(--cder-font-serif); font-size: 15px; line-height: var(--cder-lh-body); color: var(--cder-ink-600); background: var(--cder-teal-050); border: 1px solid var(--cder-teal-100); border-left: 4px solid var(--cder-teal-500); border-radius: var(--cder-radius); padding: var(--cder-gap-lg); margin-bottom: var(--cder-gap-lg); } .article-details .article-summary > h2 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--cder-teal-800); margin: 0 0 var(--cder-gap-sm); } .article-abstract p:last-child { margin-bottom: 0; } .how-to-cite, .license, .article-details .license { font-family: var(--cder-font-sans); font-size: 14px; color: var(--cder-ink-600); background: var(--cder-bg-soft); border: 1px solid var(--cder-line); border-radius: var(--cder-radius); padding: var(--cder-gap); margin-bottom: var(--cder-gap); } /* ============================================================= 12 Galleys & downloads ------------------------------------------------------------- Rendered as . No icon is inserted. OJS 3.5 loads Font Awesome only for some plugin contexts, and a raw codepoint with no icon font renders as tofu. ============================================================= */ /* Emphasis is a per-context decision, and the selector carries it: inside a listing -> a quiet outlined chip (up to nine per page) in the sidebar -> the solid teal fill from section 13 The listing rules carry one more class than .btn.btn-primary so they win the cascade outright. A bare .galley-link would tie at (0,2,0) and then LOSE, because section 13 is defined later in this file. `.btn.btn-primary` does correctly win for the sidebar case: the download button there is the primary action of the page. `.issue-toc` is the only verified container for these, so it is used rather than a bare .article-summary. */ .issue-toc .galley-link, .issue-toc .galley-link.btn, .issue-toc .btn-group .galley-link { display: inline-block; font-family: var(--cder-font-sans); font-size: 13px; font-weight: 600; line-height: 1.45; color: var(--cder-teal-800); background: var(--cder-teal-050); border: 1px solid var(--cder-teal-100); border-radius: var(--cder-radius); padding: 7px 14px; margin: 0 0 4px; box-shadow: none; transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease; } .issue-toc .galley-link:hover, .issue-toc .galley-link:focus, .issue-toc .galley-link.btn:hover, .issue-toc .galley-link.btn:focus { background: var(--cder-teal-700); border-color: var(--cder-teal-700); color: #fff; text-decoration: none; box-shadow: var(--cder-shadow-1); } /* ============================================================= 13 Buttons & links ------------------------------------------------------------- Bootstrap 3 is very specific here, so selectors are lifted one level to win on specificity rather than reaching for !important. ============================================================= */ .btn { font-family: var(--cder-font-sans); font-size: 14px; font-weight: 600; line-height: 1.45; padding: 9px 18px; border-radius: var(--cder-radius); border: 1px solid transparent; transition: background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, transform .1s ease; } .btn:hover { transform: translateY(-1px); text-decoration: none; } .btn:active { transform: translateY(0); box-shadow: none; } .btn.btn-primary { background: var(--cder-teal-700); border-color: var(--cder-teal-700); color: #fff; box-shadow: var(--cder-shadow-1); } .btn.btn-primary:hover, .btn.btn-primary:focus { background: var(--cder-teal-800); border-color: var(--cder-teal-800); color: #fff; box-shadow: var(--cder-shadow-2); } .btn.btn-default { background: var(--cder-bg); border-color: var(--cder-line); color: var(--cder-teal-800); box-shadow: var(--cder-shadow-1); } .btn.btn-default:hover, .btn.btn-default:focus { background: var(--cder-teal-050); border-color: var(--cder-teal-300); color: var(--cder-teal-900); } .btn.btn-success { background: var(--cder-teal-600); border-color: var(--cder-teal-600); color: #fff; } .btn.btn-success:hover, .btn.btn-success:focus { background: var(--cder-teal-700); border-color: var(--cder-teal-700); color: #fff; } .btn.btn-danger { background: #A8322A; border-color: #A8322A; color: #fff; } .btn.btn-danger:hover, .btn.btn-danger:focus { background: #8E2A23; border-color: #8E2A23; color: #fff; } /* Download / PDF call to action gets the amber accent */ .btn.download, a.download.btn { background: var(--cder-amber-600); border-color: var(--cder-amber-600); color: #fff; } .btn.download:hover, .btn.download:focus, a.download.btn:hover, a.download.btn:focus { background: var(--cder-amber-700); border-color: var(--cder-amber-700); color: #fff; } .btn-group .btn { border-radius: 0; } .btn-group .btn:first-child { border-top-left-radius: var(--cder-radius); border-bottom-left-radius: var(--cder-radius); } .btn-group .btn:last-child { border-top-right-radius: var(--cder-radius); border-bottom-right-radius: var(--cder-radius); } /* ============================================================= 14 Forms ============================================================= */ .form-control, input[type="text"], input[type="search"], input[type="email"], input[type="password"], input[type="url"], input[type="number"], select, textarea { font-family: var(--cder-font-sans); font-size: 15px; color: var(--cder-text-strong); background: var(--cder-bg); border: 1px solid var(--cder-line); border-radius: var(--cder-radius); padding: 9px 12px; transition: border-color .16s ease, box-shadow .16s ease; } .form-control:hover, input:hover, select:hover, textarea:hover { border-color: var(--cder-teal-300); } .form-control:focus, input:focus, select:focus, textarea:focus { border-color: var(--cder-teal-600); box-shadow: var(--cder-ring); outline: none; } .form-control::placeholder, input::placeholder, textarea::placeholder { color: var(--cder-ink-400); } .form-group { margin-bottom: var(--cder-gap); } label { font-family: var(--cder-font-sans); font-size: 13px; font-weight: 600; color: var(--cder-ink-700); margin-bottom: 5px; text-transform: uppercase; letter-spacing: .03em; } /* The sidebar search block that sits above Crossref Membership */ .pkp-search-block-form { margin: 0; } .pkp-search-block-form .form-group { margin-bottom: var(--cder-gap-sm); } .pkp-search-block-form .btn { width: 100%; } /* ============================================================= 15 Sidebar blocks ============================================================= */ .pkp_block { margin-bottom: var(--cder-gap-lg); background: var(--cder-bg); border: 1px solid var(--cder-line); border-radius: var(--cder-radius-lg); box-shadow: var(--cder-shadow-1); overflow: hidden; } .pkp_block:last-child { margin-bottom: 0; } .pkp_block > .title { margin: 0; padding: 11px var(--cder-gap); background: var(--cder-teal-800); color: #fff; font-family: var(--cder-font-sans); font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; border-bottom: 3px solid var(--cder-amber-600); } .pkp_block > .content, .pkp_block .block_content { padding: var(--cder-gap); font-family: var(--cder-font-sans); font-size: 15px; color: var(--cder-ink-600); } .pkp_block .content > p:first-child { margin-top: 0; } .pkp_block .content > p:last-child { margin-bottom: 0; } .pkp_block img { max-width: 100%; height: auto; } .pkp_block a { color: var(--cder-teal-700); font-weight: 600; } /* Custom blocks injected by customBlockManager carry an id, not a class */ #customblock-search, #customblock-crossref, #customblock-scopus-rinking, #customblock-srj-rinking { text-align: center; } #customblock-search .pkp-search-block-form { text-align: left; } /* standard OJS blocks */ .block_information .content ul, .block_make_submission .content ul { list-style: none; padding: 0; margin: 0; } .block_information .content li, .block_make_submission .content li { padding: 5px 0; } .block_information .content li + li, .block_make_submission .content li + li { border-top: 1px solid var(--cder-line-soft); } .block_make_submission .content a, .block_information .content a { font-weight: 600; } /* The Make A Submission block now mirrors the custom blocks: a visible teal header bar instead of the screen-reader-only heading, centred content, and a themed CTA instead of bootstrap's default grey button. The h2 carries OJS's .pkp_screen_reader utility (position:absolute; clip:rect(0,0,0,0)), so it is restored with !important. This is scoped to .block_make_submission, so other sr-only elements are untouched and the heading stays in the accessibility tree. */ .block_make_submission > h2.pkp_screen_reader { position: static !important; width: auto !important; height: auto !important; margin: 0; padding: 11px var(--cder-gap); clip: auto !important; overflow: visible !important; white-space: normal !important; background: var(--cder-teal-800); color: #fff; font-family: var(--cder-font-sans); font-size: 14px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; border-bottom: 3px solid var(--cder-amber-600); } .block_make_submission .content { text-align: center; } /* Specificity (0,3,0) deliberately beats both flatly's and yeti's `.pkp_block.block_make_submission a` (0,2,1) rules, which paint the CTA with bootstrap's default button palette regardless of load order. */ .pkp_block.block_make_submission .block_make_submission_link, .pkp_block.block_make_submission .block_make_submission_link:focus { display: inline-block; padding: 11px var(--cder-gap-lg); border: 1px solid var(--cder-teal-800); border-radius: var(--cder-radius); background: var(--cder-bg); color: var(--cder-teal-800); font-family: var(--cder-font-sans); font-size: 15px; font-weight: 700; text-align: center; text-decoration: none; transition: background-color .16s ease, border-color .16s ease; } .pkp_block.block_make_submission .block_make_submission_link:hover { background: var(--cder-teal-800); border-color: var(--cder-teal-800); color: #fff; text-decoration: none; } /* The sidebar Search block's submit button gets the same light treatment as the Make a Submission CTA: light ground with dark green ink and border echoing the teal-800 custom-block titles, inverting to the title colour on hover/focus. Scoped to the block so the article galley and form buttons keep the dark primary fill. */ #customblock-search .pkp-search-block-form .btn[type="submit"] { background: var(--cder-bg); border-color: var(--cder-teal-800); color: var(--cder-teal-800); } #customblock-search .pkp-search-block-form .btn[type="submit"]:hover, #customblock-search .pkp-search-block-form .btn[type="submit"]:focus { background: var(--cder-teal-800); border-color: var(--cder-teal-800); color: #fff; } /* ============================================================= 16 Panels, alerts, pagination, list groups ============================================================= */ .panel { border: 1px solid var(--cder-line); border-radius: var(--cder-radius-lg); box-shadow: var(--cder-shadow-1); background: var(--cder-bg); } .panel-default > .panel-heading { background: var(--cder-teal-050); border-bottom: 1px solid var(--cder-teal-100); color: var(--cder-teal-800); font-family: var(--cder-font-sans); font-weight: 700; padding: 11px var(--cder-gap); border-radius: var(--cder-radius-lg) var(--cder-radius-lg) 0 0; } .panel-default > .panel-body { padding: var(--cder-gap); } .panel-title { font-size: 17px; } .alert { border: 1px solid transparent; border-left-width: 4px; border-radius: var(--cder-radius); padding: var(--cder-gap); font-family: var(--cder-font-sans); font-size: 15px; } .alert-success { background: var(--cder-teal-050); border-color: var(--cder-teal-500); color: var(--cder-teal-900); } .alert-info { background: var(--cder-teal-050); border-color: var(--cder-teal-600); color: var(--cder-teal-900); } .alert-warning { background: var(--cder-amber-100); border-color: var(--cder-amber-600); color: #6B3F0D; } .alert-danger { background: #FBEDEC; border-color: #A8322A; color: #7A231D; } .pagination { margin: var(--cder-gap-lg) 0; font-family: var(--cder-font-sans); } .pagination > li > a, .pagination > li > span { color: var(--cder-teal-700); border: 1px solid var(--cder-line); border-radius: var(--cder-radius-sm) !important; margin: 0 3px; padding: 7px 13px; } .pagination > .active > a, .pagination > .active > span, .pagination > .active > a:hover, .pagination > .active > span:hover { background: var(--cder-teal-700); border-color: var(--cder-teal-700); color: #fff; } .pagination > li > a:hover, .pagination > li > span:hover { background: var(--cder-teal-050); border-color: var(--cder-teal-300); } .list-group-item { border-color: var(--cder-line-soft); color: var(--cder-ink-700); padding: var(--cder-gap); } .list-group-item:first-child { border-top-left-radius: var(--cder-radius); border-top-right-radius: var(--cder-radius); } .list-group-item:last-child { border-bottom-left-radius: var(--cder-radius); border-bottom-right-radius: var(--cder-radius); } .list-group-item:hover { background: var(--cder-teal-050); } .well { background: var(--cder-bg-soft); border: 1px solid var(--cder-line); border-radius: var(--cder-radius); color: var(--cder-ink-600); } /* ============================================================= 17 Breadcrumbs ============================================================= */ .cmp_breadcrumbs, .breadcrumb { font-family: var(--cder-font-sans); font-size: 13px; padding: 0 0 var(--cder-gap); margin-bottom: var(--cder-gap); border-bottom: 1px solid var(--cder-line-soft); } .breadcrumb a { color: var(--cder-ink-500); } .breadcrumb a:hover { color: var(--cder-teal-700); } .breadcrumb .active { color: var(--cder-ink-700); font-weight: 600; } /* ============================================================= 18 Tables ============================================================= */ table { width: 100%; border-collapse: separate; border-spacing: 0; font-family: var(--cder-font-sans); font-size: 15px; } table > thead > tr > th { background: var(--cder-teal-050); color: var(--cder-teal-800); font-weight: 700; text-align: left; border-bottom: 2px solid var(--cder-teal-100); padding: 11px var(--cder-gap); } table > tbody > tr > td { border-bottom: 1px solid var(--cder-line-soft); padding: 11px var(--cder-gap); color: var(--cder-ink-700); } table > tbody > tr:hover > td { background: var(--cder-teal-050); } /* ============================================================= 19 Footer ------------------------------------------------------------- The journal footer is assembled from two pieces: footer.footer the "Indexed by" logo strip and the OJS/PKP brand, kept on a light ground so the journal-supplied logo images stay legible; body > h the copyright line the customHeaderPlugin emits as a bare right after the page wrapper, themed here into a full-width dark bottom band. The journal supplies the indexing logos as raw inline HTML (an inline
of / wrapped images with   spacers). The tidy layout is therefore produced purely by styling those links as uniform white cards in a centred, wrapping grid. flatly already owns the footer box through `footer[role="contentinfo"] { background:#ecf0f1; padding:2em; margin-top:4em }`. Its fixed-width .container overflows viewports from 768px up, so it is made fluid here (a long-standing issue on this journal). ============================================================= */ footer.footer[role="contentinfo"] { background: var(--cder-teal-050); border-top: 4px solid var(--cder-teal-700); padding: var(--cder-gap-xl) 0; margin-top: var(--cder-gap-lg); } footer.footer[role="contentinfo"] > .container { width: auto; max-width: none; padding-right: 15px; padding-left: 15px; margin-right: auto; margin-left: auto; } /* "Indexed by" label, with a short amber rule under it */ footer.footer .col-md-10 > p:first-child { margin: 0 0 var(--cder-gap-lg); text-align: center; font-family: var(--cder-font-sans); font-size: 13px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--cder-teal-800); } footer.footer .col-md-10 > p:first-child::after { content: ""; display: block; width: 46px; height: 3px; margin: 10px auto 0; border-radius: 2px; background: var(--cder-amber-600); } /* the supplied logos as a centred grid of uniform white cards; the journal's raw   spacers are collapsed with font-size:0 */ footer.footer .col-md-10 center { display: block; text-align: center; font-size: 0; } footer.footer .col-md-10 center a { display: inline-flex; align-items: center; justify-content: center; width: 138px; height: 64px; margin: 7px; padding: 11px; background: var(--cder-bg); border: 1px solid var(--cder-line); border-radius: var(--cder-radius); box-shadow: 0 1px 2px rgba(6, 49, 45, .05); vertical-align: middle; transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease; } footer.footer .col-md-10 center a:hover, footer.footer .col-md-10 center a:focus { border-color: var(--cder-teal-300); box-shadow: var(--cder-shadow-2); transform: translateY(-2px); text-decoration: none; } footer.footer .col-md-10 center a img { max-width: 100%; max-height: 40px; width: auto; height: auto; } /* narrow phones: shrink the cards a touch so two still share a row instead of the strip stacking to ten full-width rows */ @media (max-width: 359px) { footer.footer .col-md-10 center a { width: 124px; margin: 5px; padding: 9px; } } /* OJS/PKP brand, small and centred */ footer.footer .col-md-2 { text-align: center; } footer.footer .col-md-2 img { max-width: 150px; margin: 0 auto; opacity: .8; } footer.footer a { color: var(--cder-teal-700); font-weight: 600; } footer.footer a:hover, footer.footer a:focus { color: var(--cder-teal-800); } footer.footer h1, footer.footer h2, footer.footer h3, footer.footer h4, footer.footer .title { color: var(--cder-teal-800); font-family: var(--cder-font-sans); } footer.footer .text-muted, footer.footer small { color: var(--cder-ink-500); } footer.footer .content { color: var(--cder-ink-600); } /* Copyright bottom band. The hook emits a bare `
...
` after the page wrapper. The customHeaderPlugin's unclosed banner
makes the HTML parser re-home that inside the page at runtime, so a `body > h` selector misses it on the live site. The tag is unique in the whole document (OJS headings are all h1-h6), so it is targeted by tag name. */ h { display: block; margin: 0; padding: 18px 15px; background: var(--cder-teal-900); color: rgba(255, 255, 255, .82); font-family: var(--cder-font-sans); font-size: 13px; font-weight: 400; line-height: 1.5; letter-spacing: .01em; text-align: center; } h center { color: inherit; } h b { color: #fff; font-weight: 600; } /* keep the PDF viewer page clean whatever the parse nesting turns out to be */ body.pdfjs_view h { display: none; } /* ============================================================= 20 Motion & print ============================================================= */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } .btn:hover, .article-summary.media:hover, .cder-quicklink:hover, footer.footer .col-md-10 center a:hover { transform: none; } } @media print { body { font-family: var(--cder-font-serif); font-size: 11pt; color: #000; background: #fff; } #headerNavigationContainer.navbar, .navbar-toggle, .pkp_structure_sidebar, .cder-quicklinks, .btn, .pagination, footer.footer { display: none !important; } .pkp_structure_content { padding: 0; } .pkp_block, .panel, .issue-summary, .cder-card, .article-summary.media { border: 1px solid #999 !important; box-shadow: none !important; break-inside: avoid; } .article-details .title { font-size: 18pt; } a { color: #000; text-decoration: underline; } /* print the destination of links, since the chrome is gone */ a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; } } /* ============================================================= 21 Responsive behaviour ------------------------------------------------------------- Long unbroken tokens such as DOI and ORCID URLs skip the browser's line-break algorithm and, on narrow phones, spill outside their box (the references list on the article page is the worst case: at 320px the DOI links ran ~60px past the text column). `overflow-wrap: break-word` lets the browser break the token at an arbitrary point once it can no longer fit on a line. Scoped to the content columns so the header and navigation keep their current (short-token) layout untouched. ============================================================= */ .pkp_structure_main, .pkp_structure_sidebar, .article-details, .page-content { overflow-wrap: break-word; } /* ============================================================= 22 Premium refinements ------------------------------------------------------------- A presentation-only layer on top of the base design system. Nothing here changes a layout metric another section depends on (the header rhythm, the logo box, the grid gutters, the issue-TOC grid): the additions are gradients, layered shadows, accent rules and micro-interactions only. The journal stylesheet (public/journals/1/styleSheet.css) still loads last, so anything it deliberately owns is left alone. The new tokens reuse the palette from section 01 so the two halves of the file cannot drift apart. ============================================================= */ :root { /* Brand gradients: deep teal -> light teal, plus the amber accent. */ --cder-grad-brand: linear-gradient(135deg, #0A4741 0%, #0F6E64 52%, #149084 100%); --cder-grad-brand-deep: linear-gradient(135deg, #04211E 0%, #06312D 48%, #0A4741 100%); --cder-grad-amber: linear-gradient(135deg, #B96A16 0%, #C8781E 48%, #E8963C 100%); --cder-grad-accent: linear-gradient(90deg, #0F6E64 0%, #12897C 50%, #C8781E 100%); --cder-grad-surface: linear-gradient(180deg, #FFFFFF 0%, #FBFDFD 100%); /* Layered shadows: a hairline contact shadow plus a soft ambient one, which reads far richer than one heavier drop shadow. */ --cder-shadow-soft: 0 1px 1px rgba(6,49,45,.03), 0 2px 6px rgba(6,49,45,.05); --cder-shadow-lift: 0 2px 4px rgba(6,49,45,.05), 0 16px 34px -14px rgba(6,49,45,.22); --cder-shadow-header-strong: 0 1px 0 rgba(6,49,45,.03), 0 8px 26px -10px rgba(6,49,45,.22); --cder-inset-top: inset 0 1px 0 rgba(255,255,255,.65); } /* --- Typography polish --------------------------------------- balance re-wraps headlines so the last line is never a single orphan word. text-rendering only affects kerning/ligatures. */ h1, h2, h3, .h1, .h2, .h3 { text-wrap: balance; } body { text-rendering: optimizeLegibility; } a { text-underline-offset: 2px; text-decoration-thickness: 1px; } html { scroll-behavior: smooth; } /* --- 04 Header: gradients + brand underline ------------------- */ /* A gentle top-to-bottom wash keeps the white band from reading as a flat block; the strip gets its own faint gradient. Neither touches the 19px + 80px row rhythm. */ #headerNavigationContainer.navbar { background: linear-gradient(180deg, #FFFFFF 0%, #FAFCFC 100%); box-shadow: var(--cder-shadow-header-strong); } #headerNavigationContainer > .container-fluid:first-of-type { background: linear-gradient(180deg, #EAF6F4 0%, var(--cder-strip-bg) 100%); } /* Brand accent line under the whole header. The element is sticky and is therefore already a containing block; the bar is decoration only and cannot change the measured header height. */ #headerNavigationContainer::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 2px; background: var(--cder-grad-accent); opacity: .85; pointer-events: none; } /* Animated underline sweep on the primary navigation (desktop only; the collapsed mobile menu keeps its own treatment). Hidden on the active item, which already owns the amber border. */ @media (min-width: 768px) { #main-navigation > li > a { position: relative; } #main-navigation > li > a::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--cder-amber-600); transform: scaleX(0); transform-origin: left center; transition: transform .2s ease; } #main-navigation > li > a:hover::after, #main-navigation > li > a:focus::after { transform: scaleX(1); } #main-navigation > .active > a::after, #main-navigation > .current > a::after { display: none; } } /* Register/Login chips: a soft shadow and a 1px lift on hover. */ #navigationUser.nav-pills > li > a { box-shadow: var(--cder-shadow-soft); } #navigationUser.nav-pills > li > a:hover, #navigationUser.nav-pills > li > a:focus { box-shadow: 0 6px 16px -8px rgba(15,110,100,.55); transform: translateY(-1px); } /* --- Banner (customHeaderPlugin) ------------------------------ The banner markup and its inline