/* ===================================================================== KP Bootstrap: public layout for the Kibogora Polytechnic Scientific Journal Bootstrap 5.3 (self-hosted) + brand tokens. Loaded last, after the parent theme. ===================================================================== */ :root { --kp-navy: #0c2d4d; --kp-navy-2: #143d66; --kp-blue: #1b7fb8; --kp-blue-dark: #12628f; --kp-blue-soft: #e8f3fa; --kp-green: #2f9e63; --kp-green-dark: #24804f; --kp-ink: #1b2733; --kp-muted: #5b6b7a; --kp-line: #e3e9ef; --kp-bg: #f5f7fa; --kp-sky: #7CBEEB; --kp-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; /* Point Bootstrap's theme variables at the brand palette */ --bs-primary: var(--kp-blue); --bs-primary-rgb: 27, 127, 184; --bs-link-color: var(--kp-blue-dark); --bs-link-color-rgb: 18, 98, 143; --bs-link-hover-color: var(--kp-navy); --bs-body-color: var(--kp-ink); --bs-body-bg: #fff; /* components stay white; only uses --kp-bg */ --bs-border-color: var(--kp-line); --bs-border-radius: .625rem; --bs-border-radius-lg: 1rem; --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif; --bs-body-line-height: 1.65; } /* Bootstrap button colours (v5.3 uses per-component variables) */ .btn-primary, .btn-outline-primary:hover { --bs-btn-bg: var(--kp-blue); --bs-btn-border-color: var(--kp-blue); --bs-btn-hover-bg: var(--kp-blue-dark); --bs-btn-hover-border-color: var(--kp-blue-dark); --bs-btn-active-bg: var(--kp-navy); --bs-btn-active-border-color: var(--kp-navy); } .btn-outline-primary { --bs-btn-color: var(--kp-blue-dark); --bs-btn-border-color: var(--kp-blue); --bs-btn-hover-bg: var(--kp-blue); --bs-btn-hover-border-color: var(--kp-blue); --bs-btn-active-bg: var(--kp-blue-dark); --bs-btn-active-border-color: var(--kp-blue-dark); } .kp-btn-primary { background: var(--kp-green); border-color: var(--kp-green); color: #fff; font-weight: 600; } .kp-btn-primary:hover, .kp-btn-primary:focus { background: var(--kp-green-dark); border-color: var(--kp-green-dark); color: #fff; } /* ---------- Base ---------- */ html { scroll-behavior: smooth; } body.kp-body { background: var(--kp-bg); -webkit-font-smoothing: antialiased; overflow-x: hidden; } .kp-page { min-height: 100vh; display: flex; flex-direction: column; } .kp-main, .kp-home-wrap { flex: 1 0 auto; } .kp-main { padding-top: 2rem; padding-bottom: 3rem; width: 100%; } h1, h2, h3, h4 { color: var(--kp-navy); } a { text-decoration: none; } a:hover { text-decoration: underline; } .kp-section-title { font-family: var(--kp-serif); font-size: 1.5rem; font-weight: 700; color: var(--kp-navy); margin-bottom: 1rem; } /* Neutralise the parent theme's own page layout inside our Bootstrap grid */ .kp-content > .pkp_structure_main, .kp-content > .pkp_structure_sidebar { float: none; width: auto; max-width: none; margin: 0; padding-left: calc(var(--bs-gutter-x) * .5); padding-right: calc(var(--bs-gutter-x) * .5); } .kp-content > .pkp_structure_main { background: transparent; } /* ---------- Header / navbar ---------- */ .kp-header { background: #fff; box-shadow: 0 1px 0 var(--kp-line), 0 4px 18px rgba(12, 45, 77, .05); z-index: 1030; } .kp-navbar { padding-top: .6rem; padding-bottom: .6rem; } .kp-brand { padding: 0; margin-right: 1.5rem; } .kp-brand__logo { display: block; height: 52px; width: auto; max-width: 100%; } .kp-brand__text { font-family: var(--kp-serif); font-weight: 700; color: var(--kp-navy); } .kp-navbar .navbar-nav { gap: .15rem; } .kp-navbar .nav-link { color: var(--kp-ink); font-weight: 500; padding: .5rem .85rem; border-radius: .5rem; } .kp-navbar .nav-link:hover, .kp-navbar .nav-link:focus { background: var(--kp-blue-soft); color: var(--kp-blue-dark); text-decoration: none; } .kp-navbar .dropdown-menu { border: 1px solid var(--kp-line); border-radius: .75rem; box-shadow: 0 12px 32px rgba(12, 45, 77, .14); padding: .4rem; margin-top: 0; } .kp-navbar .dropdown-item { border-radius: .5rem; padding: .45rem .8rem; } .kp-navbar .dropdown-item:hover { background: var(--kp-blue-soft); color: var(--kp-blue-dark); } .kp-nav-user { list-style: none; margin: 0; padding: 0; } .kp-nav-user .nav-link { border: 1px solid var(--kp-line); } .kp-nav-user .dropdown-menu { right: 0; left: auto; } .kp-navtools { margin-left: auto; } .kp-search-btn { border-radius: 999px; padding-inline: .9rem; } @media (min-width: 992px) { .kp-navbar .dropdown:hover > .dropdown-menu { display: block; } } @media (max-width: 991.98px) { .kp-navbar .navbar-collapse { padding-top: .75rem; } .kp-navbar .dropdown-menu { display: block; position: static; border: 0; box-shadow: none; padding: 0 0 0 1rem; background: transparent; } .kp-nav-user .dropdown-menu { right: auto; } .kp-navtools { margin-left: 0; padding-top: .5rem; } } /* ---------- Hero ---------- */ .kp-hero { background: linear-gradient(135deg, rgba(12, 45, 77, .93), rgba(20, 61, 102, .82)), var(--kp-hero-img, none) center / cover no-repeat, var(--kp-navy); color: #fff; padding: clamp(3rem, 8vw, 6rem) 0; } .kp-hero__title { font-family: var(--kp-serif); font-weight: 700; color: #fff; } .kp-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; font-weight: 600; color: #a9d4ee; margin-bottom: .75rem; } .kp-issn .badge { font-weight: 500; color: var(--kp-navy); } /* ---------- Quick tiles ---------- */ .kp-tiles { margin-top: -2.25rem; position: relative; z-index: 2; } .kp-tile { border: 1px solid var(--kp-line); border-radius: 1rem; box-shadow: 0 1px 2px rgba(12, 45, 77, .05), 0 6px 20px rgba(12, 45, 77, .06); text-decoration: none !important; transition: transform .15s ease, box-shadow .15s ease; } .kp-tile:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(12, 45, 77, .06), 0 14px 32px rgba(12, 45, 77, .12); } .kp-tile .card-body { display: flex; flex-direction: column; gap: .15rem; padding: 1.25rem; } .kp-tile__icon { width: 2.6rem; height: 2.6rem; display: grid; place-items: center; border-radius: .75rem; background: var(--kp-blue-soft); color: var(--kp-blue-dark); font-size: 1.15rem; margin-bottom: .6rem; } .kp-tile__title { font-weight: 700; color: var(--kp-navy); } .kp-tile__text { color: var(--kp-muted); font-size: .9rem; } /* ---------- Cards ---------- */ .kp-card { border: 1px solid var(--kp-line); border-radius: 1rem; box-shadow: 0 1px 2px rgba(12, 45, 77, .05), 0 6px 20px rgba(12, 45, 77, .06); } .kp-about .card-body, .kp-card .card-body { padding: 1.5rem 1.75rem; } /* Article cards (issue TOC, archives, search) */ .kp-article-card { border: 1px solid var(--kp-line); border-radius: 1rem; margin-bottom: 1rem; box-shadow: 0 1px 2px rgba(12, 45, 77, .04); transition: box-shadow .15s ease, border-color .15s ease; } .kp-article-card:hover { border-color: #cfe0ec; box-shadow: 0 8px 24px rgba(12, 45, 77, .09); } .kp-article-card .card-body { padding: 1.25rem 1.5rem; } .kp-article-card .title { font-family: var(--kp-serif); font-size: 1.2rem; line-height: 1.35; margin: 0 0 .4rem; } .kp-article-card .title a { color: var(--kp-navy); } .kp-article-card .title a:hover { color: var(--kp-blue-dark); } .kp-article-card .meta { color: var(--kp-muted); font-size: .92rem; display: flex; flex-wrap: wrap; gap: .25rem 1rem; } .kp-article-card .cover { float: right; margin: 0 0 .75rem 1rem; max-width: 96px; } .kp-article-card .cover img { border-radius: .5rem; } /* Galley links become Bootstrap-style buttons everywhere */ a.obj_galley_link, .obj_galley_link { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .9rem; border-radius: 999px; background: var(--kp-blue-soft); color: var(--kp-blue-dark); border: 1px solid #cfe0ec; font-weight: 600; font-size: .9rem; line-height: 1.4; text-decoration: none; } a.obj_galley_link:hover { background: var(--kp-blue); border-color: var(--kp-blue); color: #fff; text-decoration: none; } a.obj_galley_link.pdf::before { content: "\f1c1"; font-family: FontAwesome, "Font Awesome 5 Free"; font-weight: 900; } /* Issue TOC */ .obj_issue_toc .heading { margin-bottom: 1.5rem; } .obj_issue_toc .sections .section > h2, .obj_issue_toc .sections .section > h3 { font-size: 1rem; text-transform: uppercase; letter-spacing: .08em; color: var(--kp-muted); border-bottom: 2px solid var(--kp-line); padding-bottom: .4rem; margin: 1.75rem 0 1rem; } .obj_issue_toc .cover img { border-radius: .75rem; box-shadow: 0 6px 20px rgba(12, 45, 77, .15); max-width: 180px; } .obj_issue_toc ul.articles, .obj_issue_toc .articles { list-style: none; padding: 0; margin: 0; } /* ---------- Inner pages ---------- */ .kp-content > .pkp_structure_main > .page, .kp-content > .pkp_structure_main > [class^="page_"], .kp-content > .pkp_structure_main > [class*=" page_"] { background: #fff; border: 1px solid var(--kp-line); border-radius: 1rem; padding: clamp(1.25rem, 3vw, 2.25rem); box-shadow: 0 1px 2px rgba(12, 45, 77, .04); } .kp-content .page_title, .kp-content h1 { font-family: var(--kp-serif); font-weight: 700; color: var(--kp-navy); } .cmp_breadcrumbs { margin-bottom: 1rem; } .cmp_breadcrumbs ol { display: flex; flex-wrap: wrap; gap: .35rem; list-style: none; padding: 0; margin: 0; font-size: .9rem; } .cmp_breadcrumbs .separator { color: var(--kp-muted); } /* Forms & buttons from OJS components, aligned with Bootstrap */ .cmp_form input[type="text"], .cmp_form input[type="email"], .cmp_form input[type="password"], .cmp_form input[type="url"], .cmp_form input[type="tel"], .cmp_form input[type="search"], .cmp_form select, .cmp_form textarea, .pkp_structure_main input[type="text"], .pkp_structure_main input[type="email"], .pkp_structure_main input[type="password"], .pkp_structure_main input[type="search"], .pkp_structure_main select, .pkp_structure_main textarea { max-width: 100%; border: 1px solid #cbd5df; border-radius: .625rem; padding: .55rem .8rem; background: #fff; } .cmp_form input:focus, .cmp_form select:focus, .cmp_form textarea:focus { border-color: var(--kp-blue); outline: 0; box-shadow: 0 0 0 .2rem rgba(27, 127, 184, .18); } .cmp_button, .cmp_form .buttons button, .cmp_form button[type="submit"], .pkp_button, button.submit { background: var(--kp-blue); color: #fff; border: 1px solid var(--kp-blue); border-radius: 999px; padding: .5rem 1.4rem; font-weight: 600; cursor: pointer; } .cmp_button:hover, .cmp_form button[type="submit"]:hover, .pkp_button:hover { background: var(--kp-blue-dark); border-color: var(--kp-blue-dark); color: #fff; text-decoration: none; } .cmp_button_wire { background: transparent; color: var(--kp-blue-dark); } table { max-width: 100%; } .pkp_structure_main table { width: 100%; } img { max-width: 100%; height: auto; } /* ---------- Sidebar ---------- */ .kp-sidebar .pkp_block { background: #fff; border: 1px solid var(--kp-line); border-radius: 1rem; padding: 1.1rem 1.25rem; margin-bottom: 1rem; } .kp-sidebar .pkp_block .title { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--kp-muted); font-weight: 700; margin: 0 0 .6rem; } .kp-sidebar .pkp_block ul { list-style: none; padding: 0; margin: 0; } .kp-sidebar .pkp_block li { padding: .2rem 0; } /* ---------- Footer ---------- */ .kp-footer { background: var(--kp-navy); color: #c9d8e6; margin-top: auto; } .kp-footer a { color: #e6f0f8; } .kp-footer a:hover { color: #fff; } .kp-footer__brand { font-family: var(--kp-serif); font-size: 1.25rem; color: #fff; } .kp-footer__brand p { margin: 0; } .kp-footer__issn { color: #9fb8cf; font-size: .92rem; } .kp-footer__h { font-size: .8rem; text-transform: uppercase; letter-spacing: .1em; color: #8fb3d1; font-weight: 700; margin-bottom: .75rem; } .kp-footer ul li { padding: .2rem 0; } .kp-footer__bottom { border-top: 1px solid rgba(255, 255, 255, .12); font-size: .9rem; color: #9fb8cf; } .kp-footer .pkp_brand_footer img { height: 32px; width: auto; opacity: .85; filter: brightness(0) invert(1); } /* Skip links stay accessible */ .cmp_skip_to_content a { position: absolute; left: -9999px; } .cmp_skip_to_content a:focus { left: 1rem; top: 1rem; z-index: 2000; background: #fff; padding: .5rem 1rem; border-radius: .5rem; } @media (max-width: 575.98px) { .kp-brand__logo { height: 42px; } .kp-tiles { margin-top: -1.5rem; } .kp-article-card .card-body { padding: 1rem 1.1rem; } } /* ---------- Parent-theme overrides (default theme adds negative margins, borders, tab rules) ---------- */ .kp-home .additional_content.kp-about { margin-left: 0 !important; margin-right: 0 !important; padding: 0; border: 0; } .kp-home .additional_content.kp-about .card-body { padding: 1.5rem 1.75rem; } .kp-about .card-body > :last-child { margin-bottom: 0; } .kp-about p { font-family: var(--bs-body-font-family); } .obj_issue_toc .galleys, .obj_issue_toc .section { margin: 1.5rem 0 !important; padding: 0 !important; } .obj_issue_toc .galleys::before, .obj_issue_toc .section::before { display: none !important; } .obj_issue_toc .heading { margin-bottom: .5rem; } .obj_issue_toc .sections .section > h2, .obj_issue_toc .sections .section > h3 { position: static; display: block; background: transparent; border: 0; border-bottom: 2px solid var(--kp-line); padding: 0 0 .4rem; margin: 0 0 1rem; font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; color: var(--kp-muted); } .obj_issue_toc .published { color: var(--kp-muted); } .obj_issue_toc .published .label { font-weight: 600; color: var(--kp-ink); } .obj_issue_toc .articles { margin: 0; padding: 0; list-style: none; } .obj_issue_toc .articles > li { margin: 0; padding: 0; } .kp-footer .pkp_footer_content { padding: 0; text-align: left; text-transform: none; } .kp-footer .pkp_footer_content > *:last-child { margin-bottom: 0; } .kp-footer .pkp_brand_footer { display: inline-block; padding: 0; float: none; max-width: 150px; } .kp-footer .pkp_brand_footer img { display: block; } /* ---------- Article page: replace the parent's floated/fixed-width columns with flexbox ---------- */ .obj_article_details .row { display: flex; flex-wrap: wrap; gap: 0; margin: 0 !important; --bs-gutter-x: 0; --bs-gutter-y: 0; } .obj_article_details .row::before, .obj_article_details .row::after { display: none !important; } .obj_article_details .row > * { margin-top: 0; padding-left: 0; padding-right: 0; max-width: none; } .obj_article_details .main_entry { flex: 1 1 0; min-width: 0; width: auto !important; float: none !important; border: 0 !important; padding: 0 2rem 0 0 !important; margin: 0 !important; } .obj_article_details .entry_details { flex: 0 0 300px; width: 300px !important; float: none !important; margin: 0 !important; padding: 0 0 0 1.75rem !important; border: 0 !important; border-left: 1px solid var(--kp-line) !important; } .obj_article_details .entry_details .item { margin-right: 0 !important; padding-left: 0; padding-right: 0; } .obj_article_details .item { margin-bottom: 1.25rem; padding-left: 0; padding-right: 0; } .obj_article_details .item .label { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--kp-muted); font-weight: 700; margin-bottom: .25rem; } .obj_article_details .item.abstract .label { font-size: 1.15rem; text-transform: none; letter-spacing: 0; font-family: var(--kp-serif); color: var(--kp-navy); } .obj_article_details .authors { display: flex; flex-wrap: wrap; gap: .35rem 1.5rem; list-style: none; padding: 0; margin: 0 0 1rem; } .obj_article_details .authors li { margin: 0; padding: 0; } .obj_article_details .authors .name { font-weight: 600; } .obj_article_details .authors .affiliation { display: block; font-weight: 400; color: var(--kp-muted); font-size: .9rem; } .obj_article_details .item.doi .value, .obj_article_details .item.keywords .value { word-break: break-word; overflow-wrap: anywhere; } .obj_article_details img { max-width: 100%; height: auto; } .obj_article_details .galleys_links { display: flex; flex-wrap: wrap; gap: .5rem; list-style: none; padding: 0; margin: 0; } .obj_article_details .galleys_links li { margin: 0; } @media (max-width: 991.98px) { .obj_article_details .row { flex-direction: column; } .obj_article_details .main_entry { padding-right: 0 !important; } .obj_article_details .entry_details { flex: 1 1 auto; width: 100% !important; padding: 1.25rem 0 0 !important; margin-top: 1rem !important; border-left: 0 !important; border-top: 1px solid var(--kp-line) !important; } } /* Never let long words/URLs force sideways scrolling on inner pages */ .kp-content .pkp_structure_main { min-width: 0; overflow-wrap: break-word; } .kp-content .pkp_structure_main .page_title, .kp-content .pkp_structure_main h1 { overflow-wrap: anywhere; } /* ---------- Full-width layout: fluid container with responsive gutters, no max-width ---------- */ .kp-fluid { width: 100%; max-width: none; padding-left: clamp(1rem, 3.5vw, 4rem); padding-right: clamp(1rem, 3.5vw, 4rem); } .kp-hero .kp-fluid .col-lg-8 { max-width: 60rem; } /* Kill the parent theme's decorative 1px column rules drawn on the main wrapper */ .kp-content > .pkp_structure_main::before, .kp-content > .pkp_structure_main::after, .kp-content::before, .kp-content::after { display: none !important; content: none !important; } /* Phone overflow: keep the main column inside the viewport and let author chips wrap */ .kp-content > .pkp_structure_main { max-width: 100%; min-width: 0; } .obj_article_details section.authors, .obj_article_details .item.authors { display: block; } .obj_article_details ul.authors { display: flex; flex-flow: row wrap; width: auto; max-width: 100%; white-space: normal; } .obj_article_details ul.authors li { flex: 0 1 auto; max-width: 100%; } @media (max-width: 991.98px) { .kp-content > .pkp_structure_main, .kp-content > .pkp_structure_sidebar { flex: 0 0 100%; width: 100%; } } /* ===================================================================== Polish: account pages (login, lost password), archive grid, sidebar CTA ===================================================================== */ /* ---------- Account pages: centred card, no sidebar (kp-narrow is set by header.tpl for page "login") ---------- */ .kp-content.kp-narrow { justify-content: center; } .kp-content.kp-narrow > .pkp_structure_main { flex: 0 1 30rem; max-width: 30rem; } .kp-main:has(.kp-narrow) { padding-top: clamp(2rem, 6vw, 4.5rem); padding-bottom: clamp(3rem, 8vw, 6rem); } .page_login, .page_lost_password, .page_password_reset { box-shadow: 0 1px 2px rgba(12, 45, 77, .05), 0 12px 36px rgba(12, 45, 77, .09) !important; } .page_login h1, .page_lost_password h1 { font-size: 1.75rem; margin-bottom: .35rem; } .page_login > p:first-of-type, .page_lost_password > p { color: var(--kp-muted); font-size: .92rem; } .page_login .cmp_breadcrumbs, .page_lost_password .cmp_breadcrumbs { margin-bottom: .75rem; } .page_login .cmp_form .fields, .page_lost_password .cmp_form .fields { border: 0; padding: 0; margin: 1.25rem 0 0; } .page_login .cmp_form .fields > div, .page_lost_password .cmp_form .fields > div { margin-bottom: 1.15rem; } .page_login .cmp_form label, .page_lost_password .cmp_form label { display: block; width: 100%; margin: 0; } .page_login .cmp_form .label, .page_lost_password .cmp_form .label { display: block; font-weight: 600; font-size: .9rem; color: var(--kp-ink); margin-bottom: .35rem; } .page_login .cmp_form .required, .page_lost_password .cmp_form .required { color: #c0392b; text-decoration: none; border: 0; } .page_login .cmp_form input[type="text"], .page_login .cmp_form input[type="email"], .page_login .cmp_form input[type="password"], .page_lost_password .cmp_form input[type="text"], .page_lost_password .cmp_form input[type="email"] { display: block; width: 100%; max-width: 100%; height: auto; padding: .7rem .9rem; font-size: 1rem; border: 1px solid #cbd5df; border-radius: .7rem; background: #fff; } .page_login .cmp_form input:focus, .page_lost_password .cmp_form input:focus { border-color: var(--kp-blue); box-shadow: 0 0 0 .2rem rgba(27, 127, 184, .18); outline: 0; } .page_login .password a { display: inline-block; margin-top: .45rem; font-size: .88rem; } .page_login .remember label, .page_login .checkbox label { display: flex; align-items: center; gap: .55rem; } .page_login .remember .label, .page_login .checkbox .label { display: inline; font-weight: 400; margin: 0; } .page_login input[type="checkbox"] { width: 1.05rem; height: 1.05rem; accent-color: var(--kp-blue); margin: 0; } .page_login .cmp_form .buttons, .page_lost_password .cmp_form .buttons { display: flex; flex-direction: column; gap: .6rem; margin-top: 1.5rem; } .page_login .cmp_form .buttons > *, .page_lost_password .cmp_form .buttons > * { width: 100%; text-align: center; } .page_login .cmp_form .buttons .submit, .page_lost_password .cmp_form .buttons .submit { padding: .75rem 1.5rem; font-size: 1.02rem; border-radius: .7rem; } .page_login .cmp_form .buttons a, .page_lost_password .cmp_form .buttons a.register, .page_login a.register { display: block; padding: .7rem 1.5rem; border: 1px solid var(--kp-blue); border-radius: .7rem; color: var(--kp-blue-dark); font-weight: 600; text-decoration: none; } .page_login .cmp_form .buttons a:hover { background: var(--kp-blue-soft); } /* ---------- Archive: issue cards in a responsive grid ---------- */ .kp-content > .pkp_structure_main > .page_issue_archive { background: transparent; border: 0; box-shadow: none; padding: 0; } .page_issue_archive h1 { margin-bottom: 1.25rem; } .page_issue_archive .issues_archive { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: 1.1rem; list-style: none; padding: 0; margin: 0; } .page_issue_archive .issues_archive > li { margin: 0; padding: 0; border: 0; } .page_issue_archive .obj_issue_summary { position: relative; height: 100%; display: flex; flex-direction: column; gap: .5rem; padding: 1.4rem 1.5rem 1.2rem; background: #fff; border: 1px solid var(--kp-line); border-radius: 1rem; box-shadow: 0 1px 2px rgba(12, 45, 77, .04); transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .page_issue_archive .obj_issue_summary:hover { transform: translateY(-3px); border-color: #cfe0ec; box-shadow: 0 10px 28px rgba(12, 45, 77, .11); } .page_issue_archive .obj_issue_summary::before { content: "\f02d"; font-family: FontAwesome, "Font Awesome 5 Free"; font-weight: 900; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .75rem; background: var(--kp-blue-soft); color: var(--kp-blue-dark); font-size: 1.1rem; } .page_issue_archive .obj_issue_summary h2 { margin: .4rem 0 0; font-family: var(--kp-serif); font-size: 1.2rem; line-height: 1.3; } .page_issue_archive .obj_issue_summary h2 a.title { color: var(--kp-navy); } .page_issue_archive .obj_issue_summary h2 a.title::after { content: ""; position: absolute; inset: 0; border-radius: 1rem; } /* whole card is the link */ .page_issue_archive .obj_issue_summary .description { color: var(--kp-muted); font-size: .92rem; } .page_issue_archive .obj_issue_summary .description:empty { display: none; } .page_issue_archive .obj_issue_summary::after { content: "Read issue \2192"; margin-top: auto; padding-top: .6rem; color: var(--kp-blue-dark); font-weight: 600; font-size: .9rem; } .page_issue_archive .obj_issue_summary .cover { margin: 0 0 .5rem; } .page_issue_archive .obj_issue_summary .cover img { border-radius: .6rem; box-shadow: 0 6px 18px rgba(12, 45, 77, .14); max-height: 180px; width: auto; } .page_issue_archive .cmp_pagination { margin-top: 1.5rem; } /* ---------- Sidebar "Make a Submission" call to action ---------- */ .kp-sidebar .block_make_submission { background: transparent; border: 0; padding: 0; } .kp-sidebar .block_make_submission .content { margin: 0; } .kp-sidebar .block_make_submission_link { display: block; text-align: center; padding: .8rem 1rem; border-radius: .8rem; border: 0; background: var(--kp-green); color: #fff; font-weight: 700; text-decoration: none; box-shadow: 0 6px 16px rgba(47, 158, 99, .28); transition: background .15s ease, transform .15s ease; } .kp-sidebar .block_make_submission_link:hover { background: var(--kp-green-dark); color: #fff; transform: translateY(-1px); text-decoration: none; } /* Parent theme caps form widths; make the account forms fill their card */ .page_login .cmp_form, .page_lost_password .cmp_form { max-width: none !important; width: 100% !important; } .page_login .cmp_form .fields > div, .page_login .cmp_form label, .page_lost_password .cmp_form .fields > div, .page_lost_password .cmp_form label { width: 100% !important; max-width: none !important; float: none !important; } .page_login .cmp_form input[type="text"], .page_login .cmp_form input[type="email"], .page_login .cmp_form input[type="password"], .page_lost_password .cmp_form input[type="text"], .page_lost_password .cmp_form input[type="email"] { width: 100% !important; max-width: none !important; box-sizing: border-box; } .page_login .cmp_form .buttons, .page_lost_password .cmp_form .buttons { float: none !important; width: 100% !important; margin-left: 0 !important; } .page_login .cmp_form .buttons button { width: 100% !important; margin: 0 !important; } /* Archive: drop the parent's rule under the heading, give the grid breathing room */ .page_issue_archive h1 { border: 0 !important; padding-bottom: 0 !important; margin-bottom: 1.25rem; } .page_issue_archive h1::after { display: none !important; } .page_issue_archive .issues_archive { margin-top: .25rem; border: 0; } /* Account forms: tighter, consistent rhythm and the site font on buttons */ .page_login .cmp_form .fields > div, .page_lost_password .cmp_form .fields > div { margin: 0 0 1rem !important; padding: 0 !important; } .page_login .cmp_form .fields > div.remember, .page_login .cmp_form .fields > div.checkbox { margin-bottom: .5rem !important; } .page_login .cmp_form label, .page_lost_password .cmp_form label { padding: 0 !important; } .page_login .cmp_form .buttons, .page_lost_password .cmp_form .buttons { margin-top: 1.25rem !important; padding: 0 !important; } .page_login .cmp_form button, .page_lost_password .cmp_form button, .cmp_form button.submit { font-family: inherit; } /* ---------- Page background #7CBEEB: keep text that sits directly on it readable ---------- */ .kp-home .current_issue_title, .obj_issue_toc .published, .obj_issue_toc .published .value, .obj_issue_toc .sections .section > h2, .obj_issue_toc .sections .section > h3 { color: var(--kp-navy); } .obj_issue_toc .sections .section > h2, .obj_issue_toc .sections .section > h3 { border-bottom-color: rgba(12, 45, 77, .25); } .kp-home .obj_issue_toc { color: var(--kp-ink); } .kp-tile { border-color: rgba(255, 255, 255, .6); } .kp-content > .pkp_structure_main > .page_issue_archive h1, .page_issue_archive .cmp_breadcrumbs, .page_issue_archive .cmp_breadcrumbs a, .page_issue_archive .cmp_breadcrumbs .separator, .page_issue_archive .cmp_breadcrumbs .current { color: var(--kp-navy); } .page_issue_archive .cmp_breadcrumbs a { text-decoration: underline; } /* Cards and tiles are always white, whatever the page background is */ .card { --bs-card-bg: #fff; background-color: #fff; } .kp-tile, .kp-article-card, .kp-card, .page_issue_archive .obj_issue_summary { background-color: #fff; } /* ===================================================================== Sky-blue accent (#7CBEEB) on the hero banner and the footer. The body stays light grey. Text on these two areas is dark navy for contrast. ===================================================================== */ /* ---------- Hero / top image ---------- */ .kp-hero { background: linear-gradient(135deg, rgba(124, 190, 235, .93), rgba(124, 190, 235, .72)), var(--kp-hero-img, none) center / cover no-repeat, var(--kp-sky); color: var(--kp-navy); } .kp-hero__title { color: var(--kp-navy); } .kp-eyebrow { color: var(--kp-navy-2); } .kp-hero .btn-outline-light { --bs-btn-color: var(--kp-navy); --bs-btn-border-color: var(--kp-navy); --bs-btn-hover-bg: var(--kp-navy); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: var(--kp-navy); --bs-btn-active-bg: var(--kp-navy); --bs-btn-active-color: #fff; border-width: 2px; } .kp-hero .kp-btn-primary { box-shadow: 0 6px 16px rgba(12, 45, 77, .22); } .kp-issn .badge { background: #fff !important; color: var(--kp-navy) !important; } /* ---------- Footer ---------- */ .kp-footer { background: var(--kp-sky); color: var(--kp-navy); } .kp-footer a { color: var(--kp-navy); text-decoration: none; } .kp-footer a:hover { color: #000; text-decoration: underline; } .kp-footer__brand, .kp-footer__brand p { color: var(--kp-navy); } .kp-footer__issn { color: var(--kp-navy-2); } .kp-footer__h { color: var(--kp-navy); } .kp-footer__bottom { border-top-color: rgba(12, 45, 77, .22); color: var(--kp-navy-2); } .kp-footer .pkp_brand_footer img { filter: none; opacity: .85; } /* ---------- PDF / galley buttons: same sky blue (#7CBEEB) as the hero and footer ---------- */ a.obj_galley_link, .obj_galley_link { background: var(--kp-sky); color: var(--kp-navy); border: 1px solid #5fa9d8; } a.obj_galley_link:hover, a.obj_galley_link:focus { background: var(--kp-navy); border-color: var(--kp-navy); color: #fff; text-decoration: none; } /* ---------- Footer text: white (with a soft shadow, since white on #7CBEEB is low contrast) ---------- */ .kp-footer, .kp-footer a, .kp-footer a:hover, .kp-footer__brand, .kp-footer__brand p, .kp-footer .pkp_footer_content, .kp-footer__issn, .kp-footer__h, .kp-footer__bottom { color: #fff; } .kp-footer a:hover { text-decoration: underline; } .kp-footer__brand, .kp-footer__brand p, .kp-footer__issn, .kp-footer__h, .kp-footer li, .kp-footer a, .kp-footer__bottom > span { text-shadow: 0 1px 2px rgba(12, 45, 77, .35); } .kp-footer__bottom { border-top-color: rgba(255, 255, 255, .55); } .kp-footer .pkp_brand_footer img { filter: brightness(0) invert(1); opacity: .95; } /* ---------- Article titles in sky blue (#7CBEEB) ---------- */ .kp-article-card .title a, .kp-article-card .title a:visited, .obj_article_details h1.page_title, .obj_article_details .page_title, .page_article h1.page_title { color: var(--kp-sky); } .kp-article-card .title a:hover, .kp-article-card .title a:focus { color: var(--kp-blue); text-decoration: underline; } .kp-article-card .title { font-weight: 600; } .obj_article_details h1.page_title { font-weight: 700; } /* ---------- PDF button text: white (soft shadow helps on the sky-blue background) ---------- */ a.obj_galley_link, a.obj_galley_link:visited, .obj_galley_link, a.obj_galley_link.pdf::before { color: #fff; text-shadow: 0 1px 2px rgba(12, 45, 77, .35); } a.obj_galley_link:hover, a.obj_galley_link:focus { color: #fff; }