/* ========================================================================== scik-theme.css Reader-facing theme for the SCIK OJS 2.3.6 installation (scik.org). Covers all eight journals: afpt, aia, abl, cmbn, eml, jmcs, jsta, mfl. Install: place at /styles/scik-theme.css It is linked LAST from templates/article/header.tpl. For every other page the link must also be added last inside -- see README.md. Written against the rewritten templates in this bundle, with a compatibility section (part 12) that keeps the OLD table-based table of contents looking correct, so a partial deployment never leaves a broken-looking page. ========================================================================== */ /* ---------- 0. Tokens ---------------------------------------------------- */ :root{ --scik-maroon:#7a0d13; --scik-maroon-lit:#8d1119; --scik-maroon-dark:#560a0e; --scik-cream:#f2e9d8; --scik-maroon-tint:#f6eeee; --scik-ink:#1b1a19; --scik-ink-2:#4a4644; --scik-ink-3:#7b7570; --scik-line:#e5e0d9; --scik-line-2:#f0ece6; --scik-bg:#faf8f5; --scik-shell:#efece7; --scik-radius:10px; --scik-shadow:0 1px 2px rgba(27,26,25,.04),0 4px 14px rgba(27,26,25,.05); --scik-sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Helvetica Neue",Arial,sans-serif; --scik-serif:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --scik-max:1180px; } /* ---------- 1. Base ------------------------------------------------------ */ body{ font-family:var(--scik-sans) !important; font-size:16px !important; line-height:1.65; color:var(--scik-ink); background:var(--scik-shell); margin:0; -webkit-font-smoothing:antialiased; -webkit-text-size-adjust:100%; } a{color:var(--scik-maroon);text-decoration:none} a:hover{color:var(--scik-maroon-dark);text-decoration:underline} img{max-width:100%;height:auto} [hidden]{display:none !important} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{ outline:2px solid var(--scik-maroon); outline-offset:2px; border-radius:3px; } .skip-link{ position:absolute;left:-9999px;top:0; background:var(--scik-maroon);color:#fff; padding:10px 16px;border-radius:0 0 8px 0;z-index:999; } .skip-link:focus{left:0} /* ---------- 2. Shell ----------------------------------------------------- */ /* The three hard-coded widths in the old markup (header 780px, body 950px, main 598px) never lined up. !important is required because on pages still rendered by lib/pkp those widths arrive as inline style attributes. */ #container{ width:100% !important; max-width:none !important; background:var(--scik-shell); } #header{ width:auto !important; max-width:var(--scik-max); margin:0 auto !important; padding:18px 26px 14px !important; background:#fff; border-bottom:1px solid var(--scik-line) !important; text-align:left !important; } #headerTitle h3{ margin:0; font-family:var(--scik-serif); font-size:22px; font-weight:600; line-height:1.3; color:var(--scik-maroon); } #headerTitle h3 a, #headerTitle h3 a:hover{color:inherit;text-decoration:none} #headerTitle .masthead-link{display:flex;align-items:center;gap:13px} #headerTitle .masthead-logo{width:36px;height:auto;flex:none} /* Journal mark: a seal carrying the journal abbreviation, built from the journal path. A circle with an inset cream ring -- the ring is what keeps it from reading as a coloured dot. Four letters are set as two rows of two; three or fewer sit on one row at a slightly larger size. text-indent compensates for the trailing letter-spacing on the last glyph, which would otherwise push the letters left of centre. */ .masthead-mark{ position:relative; flex:none; width:44px; height:44px; border-radius:50%; background:linear-gradient(165deg,var(--scik-maroon-lit),var(--scik-maroon-dark)); box-shadow:0 1px 2px rgba(27,26,25,.22); color:var(--scik-cream); font-family:var(--scik-serif); font-weight:600; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-size:12.5px; line-height:1; letter-spacing:.1em; text-indent:.1em; -webkit-font-smoothing:antialiased; } .masthead-mark::after{ content:""; position:absolute; top:3.5px; right:3.5px; bottom:3.5px; left:3.5px; border-radius:50%; border:1px solid rgba(242,233,216,.45); } .masthead-mark-stacked{font-size:12px;letter-spacing:.12em;text-indent:.12em} .masthead-mark-stacked > span{display:block;line-height:1.24} .masthead-mark-long{font-size:9.5px;letter-spacing:.02em;text-indent:.02em} #container #body{ width:auto !important; max-width:var(--scik-max); margin:0 auto !important; padding:26px; background:var(--scik-bg); display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:30px; align-items:start; text-align:left !important; } /* #sidebar and #main are siblings inside #body, so the grid lives on #body. */ #container #sidebar{ width:auto !important; display:block; padding:0; min-width:0; order:2; } #container #leftSidebar, #container #rightSidebar{ float:none !important; width:auto !important; margin:0 !important; padding:0 !important; display:flex; flex-direction:column; } #container #main{ float:none !important; width:auto !important; margin:0 !important; padding:0 !important; border:0 !important; background:transparent !important; min-width:0; order:1; } /* ---------- 3. Navigation ------------------------------------------------ */ #navbar{ margin:0 0 18px !important; padding:0 !important; background:#fff; border:1px solid var(--scik-line) !important; border-radius:var(--scik-radius); overflow-x:auto; } #navbar ul.menu{ display:flex; flex-wrap:wrap; margin:0; padding:0 6px; list-style:none; } #navbar ul.menu li{margin:0;padding:0;float:none !important;display:block} #navbar ul.menu li a{ display:block; padding:12px 14px; font-size:14.5px; color:var(--scik-ink-2); border-bottom:2px solid transparent; white-space:nowrap; letter-spacing:0 !important; } #navbar ul.menu li a:hover{ color:var(--scik-maroon); background:var(--scik-line-2); text-decoration:none; } #navbar ul.menu li#home a{ color:var(--scik-maroon); border-bottom-color:var(--scik-maroon); font-weight:600; } #breadcrumb{ margin:0 !important; padding:0 0 14px !important; border:0 !important; font-size:13px; color:var(--scik-ink-3); } #breadcrumb a.current{color:var(--scik-ink);font-weight:600} /* ---------- 4. Content card --------------------------------------------- */ #content{ background:#fff; border:1px solid var(--scik-line); border-radius:var(--scik-radius); padding:26px 30px !important; } #content h1,#content h2,#content h3,#content h4{ font-family:var(--scik-serif); color:var(--scik-ink); font-weight:600; line-height:1.32; } #content h2{font-size:20px;margin:28px 0 12px} #content h3{font-size:18px;margin:24px 0 10px} #content h4{font-size:16px;margin:20px 0 8px} #content > h2:first-child, #content > h1:first-child{margin-top:0} /* ---------- 5. Journal home --------------------------------------------- */ .journal-intro{overflow:hidden;margin:0 0 8px} .journal-intro-cover{ float:right; margin:0 0 16px 24px; max-width:150px; } .journal-intro-cover img{ display:block; width:100%; border:1px solid var(--scik-line); border-radius:8px; } .journal-intro-text{max-width:66ch} .journal-additional-content{margin:18px 0} .issue-identification{ font-size:22px !important; margin:30px 0 4px !important; padding-top:24px; border-top:1px solid var(--scik-line-2); } .toc-heading{ font-size:15px !important; letter-spacing:.09em; text-transform:uppercase; font-family:var(--scik-sans) !important; color:var(--scik-ink-3) !important; font-weight:700 !important; margin:18px 0 14px !important; } #issueDescription{margin:0 0 16px;color:var(--scik-ink-2)} #announcementsHome{margin:24px 0} .announcements-more{margin:10px 0 0;font-size:14px} /* ---------- 6. Table of contents ---------------------------------------- */ .toc-list{display:block} /* Flex rather than grid: an entry may or may not carry a cover image, and a two-column grid pushed the PDF button onto its own row whenever one was present. */ .toc-item{ display:flex; flex-wrap:nowrap; gap:18px; align-items:flex-start; background:#fff; border:1px solid var(--scik-line); border-radius:var(--scik-radius); padding:16px 18px; margin:0 0 12px; transition:border-color .15s,box-shadow .15s; } .toc-item:hover{border-color:#d8cfc4;box-shadow:var(--scik-shadow)} .toc-item-cover{flex:0 0 auto;width:80px} .toc-item-cover img{width:100%;border:1px solid var(--scik-line);border-radius:6px} .toc-item-main{flex:1 1 auto;min-width:0} .toc-authors{ margin:0; font-size:13.6px; line-height:1.5; color:var(--scik-ink-3); } .toc-title{ margin:5px 0 6px !important; font-family:var(--scik-serif); font-size:17px !important; font-weight:600; line-height:1.4; } .toc-title a{color:var(--scik-ink);text-decoration:none} .toc-title a:hover{color:var(--scik-maroon);text-decoration:none} .toc-source{ margin:0; font-size:12.6px; color:var(--scik-ink-3); } .toc-doi{margin-left:10px} .toc-doi a{ font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:12px; color:var(--scik-ink-3); } .toc-doi a:hover{color:var(--scik-maroon)} .toc-item-actions{ flex:0 0 auto; display:flex; flex-direction:column; gap:7px; align-items:stretch; white-space:nowrap; } .toc-item-actions:empty{display:none} .toc-item-actions a.file{ display:inline-block; border:1px solid var(--scik-line); border-radius:8px; padding:7px 14px; font-size:13px; font-weight:500; color:var(--scik-maroon); background:#fff; text-align:center; text-decoration:none !important; line-height:1.2; } .toc-item-actions a.file:hover{ background:var(--scik-maroon-tint); border-color:#e2c9c9; } .toc-item-actions .accessLogo{align-self:center} /* Pagination controls. Built by the script at the bottom of issue.tpl, so they only exist when a volume actually has more entries than one page. */ .toc-pager{ display:flex; align-items:center; flex-wrap:wrap; gap:6px; margin:20px 0 4px; padding-top:16px; border-top:1px solid var(--scik-line-2); } .toc-pager-info{ font-size:12.5px; color:var(--scik-ink-3); margin-right:auto; } .toc-pager-btn{ min-width:38px; min-height:36px; padding:6px 12px; font-family:inherit; font-size:13.5px; line-height:1.2; color:var(--scik-ink-2); background:#fff; border:1px solid var(--scik-line); border-radius:8px; cursor:pointer; } .toc-pager-btn:hover:not(:disabled){ background:var(--scik-maroon-tint); border-color:#e2c9c9; color:var(--scik-maroon); } .toc-pager-btn.is-current{ background:var(--scik-maroon); border-color:var(--scik-maroon); color:#fff; font-weight:600; cursor:default; } .toc-pager-btn:disabled{ opacity:.4; cursor:default; } .toc-pager-step{font-size:13px} .toc-pager-gap{ padding:0 2px; color:var(--scik-ink-3); font-size:13px; } .separator{height:1px;background:var(--scik-line);margin:26px 0} /* ---------- 7. Article landing page ------------------------------------- */ #topBar:empty{display:none} #articleTitle h1{ margin:0 0 12px; font-family:var(--scik-serif); font-size:27px; line-height:1.3; font-weight:600; letter-spacing:-.005em; } #authorString{ font-size:15px; color:var(--scik-ink-2); margin:0 0 18px; } #authorString em{font-style:normal;font-weight:500} .article-meta{ display:flex; flex-wrap:wrap; gap:8px 32px; margin:0 0 24px; padding:14px 0; border-top:1px solid var(--scik-line-2); border-bottom:1px solid var(--scik-line-2); font-size:13px; } .article-meta-item{min-width:0} /* Spans, not dt/dd: lib/pkp/styles/common.css floats dt, which turned this row into overlapping columns. float:none below also protects the row if a future edit reintroduces a definition list here. */ .article-meta-label, .article-meta dt{ display:block; float:none; margin:0; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--scik-ink-3); } .article-meta-value, .article-meta dd{ display:block; margin:2px 0 0; color:var(--scik-ink-2); } .article-meta-value a, .article-meta dd a{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.6px} #articleAbstract h2, #articleSubject h2, #articleCitations h2{ font-family:var(--scik-sans) !important; font-size:12px !important; letter-spacing:.09em; text-transform:uppercase; color:var(--scik-ink-3) !important; font-weight:700 !important; margin:0 0 10px !important; } #articleAbstract{margin:0 0 22px} #articleAbstract > div, #articleSubject > div{ font-size:16.5px; line-height:1.72; max-width:70ch; color:#26241f; } #articleSubject,#articleCitations{margin:0 0 22px} #articleCitations p{font-size:14.5px;line-height:1.6;margin:0 0 .7em} .galley-links{ display:flex; align-items:center; flex-wrap:wrap; gap:10px; margin:0 0 24px; } .galley-links-label{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--scik-ink-3); font-weight:700; } .galley-actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center} #content a.action{ display:inline-block; border:1px solid var(--scik-line); border-radius:999px; padding:8px 18px; font-size:13.5px; font-weight:500; color:var(--scik-maroon); background:#fff; text-decoration:none !important; line-height:1.3; } #content a.action:hover{background:var(--scik-maroon-tint);border-color:#e2c9c9} #content a.action.btn-primary{ background:var(--scik-maroon); border-color:var(--scik-maroon); color:#fff; padding:10px 22px; font-size:14.5px; } #content a.action.btn-primary:hover{ background:var(--scik-maroon-dark); border-color:var(--scik-maroon-dark); color:#fff; } .cite-box{ background:#fbf9f6; border:1px solid var(--scik-line); border-radius:var(--scik-radius); padding:16px 18px; margin:0 0 18px; } .cite-box h2{ font-family:var(--scik-sans) !important; font-size:12px !important; letter-spacing:.09em; text-transform:uppercase; color:var(--scik-ink-3) !important; font-weight:700 !important; margin:0 0 8px !important; } .cite-text{ margin:0; font-size:14px; line-height:1.6; color:var(--scik-ink-2); } .cite-text a{word-break:break-word} .license-note{ font-size:12.8px; line-height:1.6; color:var(--scik-ink-3); margin:0; padding-top:16px; border-top:1px solid var(--scik-line-2); } /* PDF galley view */ #articlePdfResizer{margin:0 0 14px} /* ---------- 8. Sidebar blocks ------------------------------------------- */ #leftSidebar .block, #rightSidebar .block{ background:#fff; border:1px solid var(--scik-line); border-radius:var(--scik-radius); padding:15px 17px; margin:0 0 14px; font-size:14px; } #leftSidebar .blockTitle, #rightSidebar .blockTitle{ display:block; margin:0 0 10px; padding:0; border:0; font-size:11.5px; letter-spacing:.09em; text-transform:uppercase; color:var(--scik-ink-3); font-weight:700; } #leftSidebar .blockSubtitle, #rightSidebar .blockSubtitle{ display:block; margin:12px 0 6px; font-size:12.5px; font-weight:600; color:var(--scik-ink-2); } #leftSidebar ul,#rightSidebar ul{margin:0;padding:0;list-style:none} #leftSidebar li,#rightSidebar li{padding:6px 0;border-bottom:1px solid var(--scik-line-2)} #leftSidebar li:last-child,#rightSidebar li:last-child{border-bottom:0} /* The sidebar forms are laid out with tables; unwrap them for a narrow column. */ #leftSidebar table,#leftSidebar tbody,#leftSidebar tr,#leftSidebar td, #rightSidebar table,#rightSidebar tbody,#rightSidebar tr,#rightSidebar td{ display:block !important; width:100% !important; padding:0 !important; border:0 !important; text-align:left !important; } #leftSidebar td,#rightSidebar td{margin-bottom:6px} #leftSidebar label,#rightSidebar label{ display:block; margin-bottom:3px; font-size:12.5px; color:var(--scik-ink-3); } /* Readers vastly outnumber logged-in users: search and browse first, login last. */ #leftSidebar #sidebarNavigation,#rightSidebar #sidebarNavigation{order:1} #leftSidebar #sidebarInformation,#rightSidebar #sidebarInformation{order:2} #leftSidebar #sidebarUser,#rightSidebar #sidebarUser{order:99} /* #custom is an empty block on most journals. Selector is id+id so it beats the "#leftSidebar .block" card styling above; without that it renders as a blank white panel in the sidebar. */ #leftSidebar #custom,#rightSidebar #custom{ order:3; background:none; border:0; padding:0; margin:0; } #leftSidebar #custom:not(:has(a)):not(:has(img)), #rightSidebar #custom:not(:has(a)):not(:has(img)){display:none} /* ---------- 9. Forms and buttons ---------------------------------------- */ input.textField,input[type="text"],input[type="password"],input[type="email"], select,textarea{ font-family:inherit; font-size:14px; padding:8px 10px; border:1px solid var(--scik-line); border-radius:7px; background:#fff; color:var(--scik-ink); max-width:100%; } input.textField:focus,select:focus,textarea:focus{ border-color:var(--scik-maroon); box-shadow:0 0 0 3px var(--scik-maroon-tint); outline:none; } input.button,input[type="submit"],button{ font-family:inherit; font-size:13.5px; font-weight:500; padding:8px 16px; min-height:38px; border:1px solid var(--scik-line); border-radius:999px; background:#fff; color:var(--scik-ink-2); cursor:pointer; } input.button:hover,button:hover{background:var(--scik-line-2)} input.defaultButton,input[value="Log In"],input[value="Search"]{ background:var(--scik-maroon) !important; border-color:var(--scik-maroon) !important; color:#fff !important; } input.defaultButton:hover,input[value="Log In"]:hover,input[value="Search"]:hover{ background:var(--scik-maroon-dark) !important; } /* ---------- 10. Site footer --------------------------------------------- */ #siteFooter{ background:#1f1d1b; color:#b8b1a8; font-size:13.2px; } .site-footer-inner{ max-width:var(--scik-max); margin:0 auto; padding:24px 26px; display:flex; flex-wrap:wrap; align-items:center; gap:6px 24px; } .site-footer-title{ font-family:var(--scik-serif); font-size:15px; color:#e9e3d9; flex:1 1 auto; } .site-footer-issn{color:#8d857c} .site-footer-links{display:flex;gap:16px;flex-wrap:wrap} .site-footer-links a{color:#e2dbd1} /* Page subtitle emitted by lib/pkp/templates/common/header.tpl */ .page-subtitle{ font-family:var(--scik-serif); font-size:20px; font-weight:600; margin:0 0 14px; color:var(--scik-ink); } /* ---------- 10b. Generic content tables --------------------------------- Editorial board, announcements, archive listings, search results. OJS emits these as table.data / table.listing. ------------------------------------------------------------------------ */ #content table.data, #content table.listing{ width:100%; max-width:100%; border-collapse:collapse; margin:0 0 20px; } #content table.data td, #content table.listing td{ padding:9px 10px; border-bottom:1px solid var(--scik-line-2); vertical-align:top; } #content table.data tr.heading td, #content table.listing tr.heading td{ font-size:11.5px; letter-spacing:.07em; text-transform:uppercase; font-weight:700; color:var(--scik-ink-3); border-bottom:1px solid var(--scik-line); } #content table.data tr:last-child td, #content table.listing tr:last-child td{border-bottom:0} /* Any other content table still gets a sane maximum. */ #content table:not(.tocArticle):not(.data):not(.listing){max-width:100%} /* ---------- 11. Responsive ---------------------------------------------- */ @media (max-width:980px){ #container #body{grid-template-columns:1fr;gap:20px;padding:18px} #container #sidebar{order:2} #container #main{order:1} #header{padding:14px 18px !important} #headerTitle h3{font-size:18px} .masthead-mark{width:38px;height:38px;font-size:11px} .masthead-mark::after{top:3px;right:3px;bottom:3px;left:3px} .masthead-mark-stacked{font-size:10.5px} .masthead-mark-long{font-size:8.5px} #content{padding:20px 18px !important} #articleTitle h1{font-size:22px} .site-footer-inner{padding:20px 18px} } @media (max-width:640px){ #navbar ul.menu{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch} #navbar ul.menu li a{padding:12px;font-size:14px} /* Stack the card: the PDF button drops onto its own row instead of squeezing the title into a narrow column. */ .toc-item{flex-wrap:wrap;gap:12px} .toc-item-main{flex:1 1 60%} .toc-item-actions{flex:1 1 100%;flex-direction:row;flex-wrap:wrap} .toc-item-actions a.file{flex:0 0 auto;min-width:96px} .toc-item-cover{width:64px} .toc-title{font-size:16px !important} .journal-intro-cover{float:none;margin:0 0 14px;max-width:120px} #articleAbstract > div{font-size:16px} .article-meta{gap:10px 18px} } /* ---------- 12. Compatibility with the OLD table-based markup ------------ Kept so that a partially deployed site (new stylesheet, old templates, or a page type not yet rewritten) still renders correctly. Safe to delete once every template in this bundle is live. ------------------------------------------------------------------------ */ table.tocArticle{ width:100% !important; border-collapse:separate; border-spacing:0; margin:0 0 12px !important; background:#fff; border:1px solid var(--scik-line); border-radius:var(--scik-radius); } table.tocArticle:hover{border-color:#d8cfc4;box-shadow:var(--scik-shadow)} table.tocArticle td{border:0 !important;padding:16px 18px !important;vertical-align:top} table.tocArticle td.tocTitle{font-size:13.6px;color:var(--scik-ink-3);line-height:1.55} table.tocArticle td.tocTitle a{ display:block; margin:5px 0 6px; font-family:var(--scik-serif); font-size:17px; font-weight:600; line-height:1.4; color:var(--scik-ink); text-decoration:none !important; } table.tocArticle td.tocTitle a:hover{color:var(--scik-maroon)} table.tocArticle td.tocTitle br{display:none} table.tocArticle td.tocGalleys{white-space:nowrap;text-align:right;width:1%} table.tocArticle td.tocGalleys a{ display:inline-block; border:1px solid var(--scik-line); border-radius:8px; padding:7px 14px; font-size:13px; font-weight:500; color:var(--scik-maroon); background:#fff; text-decoration:none !important; } table.tocArticle td.tocGalleys a:hover{background:var(--scik-maroon-tint);border-color:#e2c9c9} #articleTitle h3{ margin:0 0 12px; font-family:var(--scik-serif); font-size:27px; line-height:1.3; font-weight:600; } #articleAbstract h4{ font-family:var(--scik-sans) !important; font-size:12px !important; letter-spacing:.09em; text-transform:uppercase; color:var(--scik-ink-3) !important; font-weight:700 !important; margin:0 0 10px !important; } #articleAbstract > div{font-size:16.5px;line-height:1.72;max-width:70ch} #show-more-button{ display:block; margin:18px auto 6px !important; padding:10px 22px !important; font-family:inherit; font-size:14px; border-radius:999px !important; background-color:var(--scik-maroon) !important; border:1px solid var(--scik-maroon) !important; color:#fff !important; } @media (max-width:640px){ table.tocArticle,table.tocArticle tbody,table.tocArticle tr,table.tocArticle td{ display:block !important;width:100% !important; } table.tocArticle td.tocGalleys{text-align:left;padding:0 18px 16px !important} table.tocArticle td.tocTitle{padding-bottom:10px !important} } /* ---------- 13. Print ---------------------------------------------------- */ @media print{ #sidebar,#navbar,#breadcrumb,#siteFooter,.toc-more-button, .skip-link,#headerTitle .masthead-logo{display:none !important} #container #body{display:block;padding:0} #content{border:0;padding:0 !important} body{background:#fff;font-size:11pt} a{color:#000;text-decoration:none} #articleAbstract > div{max-width:none} .toc-item{break-inside:avoid;border:0;border-bottom:1px solid #ccc;border-radius:0;padding:8px 0} }