/** * PAGEPress theme for OJS 3.5 - main stylesheet. * Loaded after the stylesheet of the parent (default) theme. * * Sections: * 1. Tokens and base 7. Interior pages, sidebar blocks * 2. Parent theme overrides 8. Article lists * 3. Buttons 9. Article page * 4. Header and navigation 10. Issues and archive * 5. Hero (home) 11. Core pages (about, search, forms...) * 6. Home sections, footer 12. PAGEPress theme additions * 13. Responsive and reduced motion * * Colours: the values below are the defaults (primary #4b7d92, accent #f7bc4a). * PAGEPressThemePlugin::getPalette() recomputes them from the theme options and * prints them inline after this stylesheet. */ /* ===================================================== 1. Tokens and base */ :root { /* Colori calcolati dal tema: da --brand a --line i valori vengono ricalcolati a ogni pagina da "Colore primario" e "Colore di accento" (Sito web > Aspetto > Tema) e scritti in uno stile caricato dopo questo file. Qui sotto ci sono solo i valori predefiniti (#4b7d92 e #f7bc4a): cambiarli in questo file non ha effetto. */ --brand: #4b7d92; /* Barra del menu principale e sfondo dell'header della home senza immagine: il colore primario come scelto; se il bianco ci si legge appena (tra 3:1 e 4,5:1) viene usato --primary, così il testo resta bianco */ --on-brand: #ffffff; /* Testo delle voci del menu principale: bianco, o scuro se il primario è chiaro */ --accent-on-brand: #f7bc4a; /* Linea sotto la voce del menu attiva o al passaggio del mouse: l'accento, oppure il colore del testo del menu se l'accento non si distingue dalla barra */ --primary: #4b7d92; /* Primario scurito, se serve, fino al contrasto 4,5:1 su bianco: link, pulsanti pieni e a contorno, etichette (Current issue, Journal information), sezione nelle card, sfondo del blocco "Submit your article" */ --primary-700: #3d6677; /* Primario più scuro: link e pulsanti al passaggio del mouse o con il focus */ --dark: #1d272b; /* Scuro con la tinta del primario: titoli (pagine, fascicoli, articoli, riquadri), footer, sfondo dell'header della home, ombre */ --dark-900: #13191b; /* Ancora più scuro: barra PAGEPress in alto, fascia finale del footer, sfumatura sopra l'immagine/video dell'header */ --accent: #f7bc4a; /* Colore di accento come scelto: bordo delle notifiche, trattini nell'archivio, link "salta al contenuto" */ --on-accent: #10202a; /* Testo su --accent: bianco o scuro, il più leggibile */ --accent-on-dark: #f7bc4a; /* Accento schiarito, se serve, per lo scuro (4,5:1 su --dark): pulsanti dell'header della home (Read the current issue), avanzamento dello slideshow, categoria attiva e testi nella testata delle pagine */ --on-accent-dark: #10202a; /* Testo su --accent-on-dark: bianco o scuro, il più leggibile */ --accent-soft: #fad285; /* Tono più chiaro di --accent-on-dark: pulsanti dell'header al passaggio del mouse */ --cta-button: #f7bc4a; /* Pulsante del blocco "Submit your article" (sfondo --primary): l'accento, oppure bianco se l'accento non si distingue dal blocco */ --on-cta-button: #10202a; /* Testo di quel pulsante */ --accent-tint: #fef6e7; /* Accento quasi bianco: sfondo delle notifiche */ --focus: #3083a6; /* Contorno dell'elemento selezionato da tastiera (accessibilità), almeno 3:1 su bianco */ --link-on-dark: #a6cddd; /* Link su fondo scuro: footer, breadcrumb nelle testate delle pagine */ --mist: #f0f5f7; /* Sfondo chiarissimo con la tinta del primario: riquadro del fascicolo corrente, testata dell'indice del fascicolo, etichette (tag), voci di menu e liste al passaggio del mouse */ --line: #d8e0e4; /* Bordi e linee divisorie: riquadri della colonna destra, card, schede, separatori */ /* Valori fissi (non dipendono dalle opzioni del tema) */ --ink: #15222F; /* Testo principale */ --slate: #4A5B6C; /* Testo secondario: date, autori nelle liste, etichette dei dati, breadcrumb, menu utente e utility */ --white: #FFFFFF; /* Sfondo della pagina */ --serif: 'Spectral', Georgia, 'Times New Roman', serif; /* Titoli e testi lunghi (descrizione, abstract): Spectral, incluso nel tema */ --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif; /* Interfaccia (menu, pulsanti, etichette, dati): Figtree, incluso nel tema */ --wrap: 1240px; /* Larghezza massima del contenuto */ } html, body { background: var(--white); } body.pagepress { margin: 0; font-family: var(--sans); font-size: 17px; line-height: 1.6; color: var(--ink); -webkit-font-smoothing: antialiased; } .pp *, .pp *::before, .pp *::after { box-sizing: border-box; } .pp a { color: var(--primary); } .pp a:hover, .pp a:focus { color: var(--primary-700); } .pp a:focus-visible, .pp button:focus-visible, .pp [tabindex]:focus-visible, .pp input:focus-visible, .pp select:focus-visible, .pp textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .pp img { max-width: 100%; height: auto; } .wrap { width: 100%; max-width: calc(var(--wrap) + 64px); margin-left: auto; margin-right: auto; padding-left: 32px; padding-right: 32px; } .pp .ico { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex: none; vertical-align: middle; } .pp .ico-sm { width: 16px; height: 16px; } .pp .ico .fill { fill: currentColor; stroke: none; } .pp .sr, .pp .pkp_screen_reader { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .pp [hidden] { display: none !important; } /* Skip links */ .pp .cmp_skip_to_content a { position: absolute; z-index: 100; top: -60px; left: 16px; padding: 10px 16px; background: var(--accent); color: var(--on-accent); font-weight: 600; border-radius: 0 0 6px 6px; } .pp .cmp_skip_to_content a:focus { top: 0; } /* ================================================ 2. Parent theme overrides */ .pp .pkp_structure_content { width: auto; max-width: none; padding-top: 0; } .pp .pkp_structure_content.wrap { max-width: calc(var(--wrap) + 64px); } .pp .pkp_structure_content > .pkp_structure_main { float: none; width: auto; margin: 0; padding: 0; } .pp .pkp_structure_content > .pkp_structure_main::before, .pp .pkp_structure_content > .pkp_structure_main::after { display: none; content: none; } .pp .pkp_structure_sidebar { float: none; width: auto; } .pp .pkp_structure_footer_wrapper { background: none; } .pp :where(.pkp_structure_main) h1, .pp :where(.pkp_structure_main) h2, .pp :where(.pkp_structure_main) h3 { font-family: var(--serif); font-weight: 600; color: var(--dark); letter-spacing: -0.005em; } .pp :where(.pkp_structure_main) h1 { font-size: 40px; line-height: 1.15; margin: 8px 0 24px; } .pp :where(.pkp_structure_main) h2 { font-size: 28px; line-height: 1.25; margin: 40px 0 16px; } .pp :where(.pkp_structure_main) h3 { font-size: 22px; line-height: 1.3; margin: 32px 0 12px; } .pp :where(.pkp_structure_main) h4 { font-size: 17px; line-height: 1.4; margin: 24px 0 8px; } .pp :where(.pkp_structure_main) p, .pp :where(.pkp_structure_main) ul { line-height: 1.65; margin: 0 0 16px; } /* ================================================================ 3. Buttons */ .pp .btn, .pp .pkp_button, .pp .cmp_button { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 6px; font: 600 16px/1 var(--sans); text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .pp .btn-gold { background: var(--accent-on-dark); color: var(--on-accent-dark); } .pp .btn-gold:hover, .pp .btn-gold:focus { background: var(--accent-soft); color: var(--on-accent-dark); } .pp .btn-ghost { border-color: rgba(255,255,255,.7); color: #fff; } .pp .btn-ghost:hover, .pp .btn-ghost:focus { background: rgba(255,255,255,.12); color: #fff; } .pp .btn-primary, .pp .pkp_button, .pp .cmp_button, .pp button.submit, .pp .cmp_form .buttons button { background: var(--primary); color: #fff; border-color: var(--primary); } .pp .btn-primary:hover, .pp .pkp_button:hover, .pp .cmp_button:hover, .pp .btn-primary:focus { background: var(--primary-700); color: #fff; } .pp .btn-line { border-color: var(--primary); color: var(--primary); background: #fff; } .pp .btn-line:hover, .pp .btn-line:focus { background: var(--mist); color: var(--primary-700); } .pp .btn-sm { min-height: 36px; padding: 0 14px; font-size: 14px; gap: 7px; border-radius: 5px; } .pp .btn-block { width: 100%; } /* ================================================ 4. Header and navigation */ .pp .site-header { z-index: 60; background: #fff; transition: top .4s ease, left .4s ease, right .4s ease, border-radius .4s ease, box-shadow .4s ease; } .pp .site-header.is-floating { position: fixed; top: 24px; left: 24px; right: 24px; border-radius: 12px; box-shadow: 0 10px 30px color-mix(in srgb, var(--dark) 18%, transparent); } .pp .site-header.is-floating.is-docked { top: 0; left: 0; right: 0; border-radius: 0; box-shadow: 0 6px 22px color-mix(in srgb, var(--dark) 20%, transparent); } .pp .site-header.is-static { position: sticky; top: 0; box-shadow: 0 1px 0 var(--line); } .pp .site-header.is-static.is-docked { box-shadow: 0 6px 22px color-mix(in srgb, var(--dark) 16%, transparent); } body.admin-bar .pp .site-header.is-static { top: 0; } .pp .hdr-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 28px; transition: padding .4s ease; } .pp .is-docked .hdr-top { padding-top: 6px; padding-bottom: 6px; } .pp .hdr-logo { display: block; flex: none; text-decoration: none; } .pp .hdr-logo img { display: block; height: 72px; width: auto; transition: height .4s ease; } .pp .is-docked .hdr-logo img { height: 50px; } .pp .hdr-title { font: 600 22px/1.2 var(--serif); color: var(--dark); } /* Utility menu (Search, News, Contacts...) and user menu (Register, Login...) */ .pp .hdr-util-nav { display: flex; align-items: center; } .pp .hdr-utility + .hdr-user { margin-left: 8px; padding-left: 8px; border-left: 1px solid var(--line); } .pp .hdr-util { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; } .pp .hdr-util > li { position: relative; } .pp .hdr-util > li > a, .pp .hdr-util > li > .nav-parent { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border-radius: 6px; font: 500 15px/1 var(--sans); color: var(--slate); text-decoration: none; background: none; border: 0; cursor: pointer; } .pp .hdr-util > li > a:hover, .pp .hdr-util > li > .nav-parent:hover { color: var(--primary); background: var(--mist); } .pp .hdr-util > li > a.login { color: var(--primary); border: 1.5px solid var(--line); margin-left: 8px; } .pp .hdr-util .nav-sub { right: 0; left: auto; } .pp .hdr-burger { display: none; align-items: center; justify-content: center; width: 48px; height: 48px; border: 1.5px solid var(--line); background: #fff; border-radius: 8px; color: var(--primary); cursor: pointer; } .pp .hdr-burger .i-close { display: none; } .pp .menu-open .hdr-burger .i-open { display: none; } .pp .menu-open .hdr-burger .i-close { display: inline; } /* Primary menu */ .pp .hdr-nav { background: var(--brand); } .pp .is-floating .hdr-nav { border-radius: 0 0 12px 12px; transition: border-radius .4s ease; } .pp .is-floating.is-docked .hdr-nav { border-radius: 0; } .pp .nav-list { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0 16px; } .pp .nav-list > li { position: relative; } .pp .nav-list > li > a, .pp .nav-list > li > .nav-parent { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 14px; color: var(--on-brand); font: 600 15px/1 var(--sans); text-decoration: none; background: none; border: 0; cursor: pointer; } .pp .nav-list > li > a:hover, .pp .nav-list > li > a:focus { color: var(--on-brand); } .pp .nav-list > li > a::after, .pp .nav-list > li > .nav-parent::after { content: ''; position: absolute; left: 14px; right: 14px; bottom: 10px; height: 2px; background: var(--accent-on-brand); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; } .pp .nav-list > li:hover > a::after, .pp .nav-list > li:hover > .nav-parent::after, .pp .nav-list > li.is-open > .nav-parent::after, .pp .nav-list > li > a[aria-current]::after { transform: scaleX(1); } .pp .nav-parent .caret { transition: transform .2s ease; } .pp .is-open > .nav-parent .caret { transform: rotate(180deg); } .pp .nav-sub { display: none; position: absolute; z-index: 5; top: 100%; left: 0; min-width: 300px; margin: 0; padding: 8px; list-style: none; background: #fff; border-radius: 0 0 10px 10px; box-shadow: 0 18px 40px color-mix(in srgb, var(--dark) 22%, transparent); } .pp .has-sub.is-open > .nav-sub { display: block; } .pp .nav-sub a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 6px; color: var(--ink); text-decoration: none; font: 500 15px/1.35 var(--sans); } .pp .nav-sub a:hover, .pp .nav-sub a:focus { background: var(--mist); color: var(--primary); } .pp .mob-util { display: none; } @media (min-width: 861px) and (hover: hover) { .pp .has-sub:hover > .nav-sub { display: block; } } /* ======================================================= 5. Hero (home) */ .pp .hero { position: relative; height: 780px; background: var(--dark); color: #fff; overflow: hidden; } .pp .hero-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.2s ease; } .pp .hero-slide.is-active { opacity: 1; } .pp .hero-slide img, .pp .hero-slide video { display: block; width: 100%; height: 100%; object-fit: cover; transform: scale(1.07); transition: transform 9s linear; } .pp .hero-slide video { object-position: 72% center; } .pp .hero-slide.is-active img, .pp .hero-slide.is-active video { transform: scale(1); } .pp .hero-scrim { position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--dark) 86%, transparent) 0%, color-mix(in srgb, var(--dark) 55%, transparent) 42%, color-mix(in srgb, var(--dark) 5%, transparent) 78%), linear-gradient(0deg, color-mix(in srgb, var(--dark-900) 85%, transparent) 0%, color-mix(in srgb, var(--dark-900) 0%, transparent) 34%); } .pp .hero-inner { position: absolute; inset: 0; } .pp .hero-inner .wrap { position: relative; height: 100%; } .pp .caps { position: absolute; left: 32px; right: 32px; bottom: 200px; height: 380px; } .pp .cap { position: absolute; left: 0; bottom: 0; max-width: 720px; opacity: 0; transform: translateY(14px); transition: opacity .7s ease .25s, transform .7s ease .25s, visibility 0s linear 1s; visibility: hidden; } .pp .cap.is-active { opacity: 1; transform: none; visibility: visible; transition: opacity .7s ease .25s, transform .7s ease .25s; } .pp .cap-kicker { margin: 0 0 6px; font: italic 400 24px/1.2 var(--serif); color: var(--accent-on-dark); } .pp .cap-title { margin: 0; font: 600 64px/1.03 var(--serif); letter-spacing: -0.015em; color: #fff; text-wrap: balance; } .pp .cap-title.is-long { font-size: 56px; } .pp .cap-text { margin: 20px 0 0; font: 400 19px/1.55 var(--sans); color: rgba(255,255,255,.9); max-width: 54ch; } .pp .cap-text p { margin: 0; } .pp .cap-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; } .pp .hero-ctrl { position: absolute; right: 32px; bottom: 200px; display: flex; gap: 10px; } .pp .ctrl { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.45); background: color-mix(in srgb, var(--dark) 35%, transparent); color: #fff; cursor: pointer; transition: background .2s, border-color .2s; } .pp .ctrl:hover { background: rgba(255,255,255,.14); border-color: #fff; } .pp .ctrl .i-play { display: none; } .pp .is-paused .ctrl .i-play { display: inline; } .pp .is-paused .ctrl .i-pause { display: none; } .pp .rail { position: absolute; left: 32px; right: 32px; bottom: 36px; display: grid; grid-template-columns: repeat(var(--n, 9), minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; } .pp .seg { display: block; width: 100%; padding: 14px 0 0; background: none; border: 0; text-align: left; color: rgba(255,255,255,.7); cursor: pointer; font: 500 13px/1.35 var(--sans); } .pp .seg:hover, .pp .seg.is-active { color: #fff; } .pp .seg-bar { position: relative; display: block; height: 3px; border-radius: 2px; background: rgba(255,255,255,.26); overflow: hidden; margin-bottom: 12px; } .pp .seg-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent-on-dark); } .pp .seg.is-done .seg-fill { width: 100%; background: rgba(255,255,255,.6); } .pp .seg.is-active .seg-fill { animation: ppSegFill 8s linear forwards; } .pp .seg.is-video.is-active .seg-fill { animation-duration: 16s; } .pp .is-paused .seg.is-active .seg-fill, .pp .is-offscreen .seg.is-active .seg-fill { animation-play-state: paused; } @keyframes ppSegFill { from { width: 0; } to { width: 100%; } } .pp .rail-now { display: none; } /* ============================================= 6. Home sections and footer */ .pp .sec-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px; margin: 0 0 40px; } .pp .sec-title { margin: 0; font: 600 42px/1.1 var(--serif); letter-spacing: -0.01em; color: var(--dark); } .pp .sec-sub { margin: 10px 0 0; font-size: 18px; line-height: 1.5; color: var(--slate); max-width: 60ch; } .pp .sec-link { font: 600 16px/1.3 var(--sans); text-decoration: none; } .pp .sec-link:hover { text-decoration: underline; text-underline-offset: 4px; } .pp .pp-banner { padding: 32px 0 0; text-align: center; } .pp .pp-banner img { display: inline-block; max-width: 100%; height: auto; } .pp .intro { padding: 96px 0 88px; } .pp .intro > .wrap { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 72px; align-items: start; } .pp .lead { margin: 18px 0 0; font: 400 22px/1.6 var(--serif); color: var(--ink); max-width: 36em; } .pp .lead p { margin: 0 0 14px; line-height: 1.6; } .pp .lead p:last-child { margin-bottom: 0; } .pp .intro-side { display: grid; gap: 20px; min-width: 0; } /* Facts about the journal, under the current issue */ .pp .facts-card { padding: 26px 28px 28px; background: #fff; border: 1px solid var(--line); border-radius: 14px; } .pp .facts-kicker { margin: 0; font: 600 15px/1.2 var(--sans); color: var(--primary); } .pp .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin: 18px 0 0; padding: 0; } .pp .facts > div { min-width: 0; } .pp .facts > .is-wide { grid-column: 1 / -1; padding-bottom: 18px; border-bottom: 1px solid var(--line); } .pp .facts dt { font: 500 14px/1.3 var(--sans); color: var(--slate); } .pp .facts dd { margin: 4px 0 0; font: 600 16px/1.4 var(--sans); color: var(--ink); overflow-wrap: anywhere; } .pp .facts dd p { margin: 0; } .pp .intro-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; } .pp .issue-card { display: grid; grid-template-columns: 148px minmax(0, 1fr); gap: 26px; padding: 28px; background: var(--mist); border-radius: 14px; } .pp .issue-card.no-cover { grid-template-columns: minmax(0, 1fr); } .pp .issue-cover img { display: block; width: 100%; border-radius: 6px; box-shadow: 0 8px 24px color-mix(in srgb, var(--dark) 18%, transparent); } .pp .issue-kicker { margin: 0; font: 600 15px/1.2 var(--sans); color: var(--primary); } .pp .issue-title { margin: 8px 0 4px; font: 600 32px/1.1 var(--serif); color: var(--dark); } .pp .issue-date { margin: 0; color: var(--slate); font-size: 16px; } .pp .issue-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 22px; } .pp .latest { padding: 104px 0 112px; } .pp .art-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; margin: 0; padding: 0; list-style: none; } .pp .art-card { padding: 28px 0 30px; border-top: 1px solid var(--line); } .pp .art-sec { margin: 0; font: 600 14px/1.3 var(--sans); color: var(--primary); } .pp .art-title { margin: 8px 0; font: 600 23px/1.28 var(--serif); color: var(--dark); text-wrap: pretty; } .pp .art-title a { color: inherit; text-decoration: none; } .pp .art-title a:hover, .pp .art-title a:focus { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .pp .art-title .subtitle { display: block; margin-top: 4px; font: italic 400 18px/1.35 var(--serif); color: var(--slate); } .pp .art-authors { margin: 0; color: var(--slate); font-size: 16px; line-height: 1.5; } .pp .art-doi { display: inline-block; margin-top: 10px; font-size: 14.5px; overflow-wrap: anywhere; } .pp .additional_content { padding: 0 0 96px; } /* Editorial Pick (Editorial Pick plugin): cards on a tinted band, the image of the article on top when it has one; the whole card links to the article */ .pp .edp { padding: 88px 0 96px; background: var(--mist); } .pp .edp .sec-head { margin-bottom: 36px; } .pp .edp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin: 0; padding: 0; list-style: none; } .pp .edp-cols-1 { grid-template-columns: minmax(0, 1fr); } .pp .edp-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp .edp-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .pp .edp-card { position: relative; display: flex; flex-direction: column; min-width: 0; margin: 0; background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; transition: box-shadow .2s, border-color .2s; } .pp .edp-card:not(.has-cover)::before { content: ""; flex: none; height: 4px; background: var(--primary); } .pp .edp-card:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--line)); box-shadow: 0 14px 34px color-mix(in srgb, var(--dark) 12%, transparent); } .pp .edp-card:has(a:focus-visible) { outline: 3px solid var(--focus); outline-offset: 3px; } .pp .edp-img { aspect-ratio: 16 / 9; overflow: hidden; background: var(--mist); } .pp .edp-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; } .pp .edp-card:hover .edp-img img { transform: scale(1.03); } .pp .edp-body { display: flex; flex: 1; flex-direction: column; padding: 22px 24px 24px; } .pp .edp-sec { margin: 0 0 8px; font: 600 14px/1.3 var(--sans); color: var(--primary); } .pp .edp-title { margin: 0; font: 600 21px/1.3 var(--serif); color: var(--dark); text-wrap: pretty; } .pp .edp-cols-4 .edp-title { font-size: 19px; } .pp .edp-title a { color: inherit; text-decoration: none; outline: none; } .pp .edp-title a::after { content: ""; position: absolute; inset: 0; z-index: 1; } .pp .edp-card:hover .edp-title a { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } .pp .edp-authors { margin: 10px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--slate); } .pp .edp-meta { display: flex; flex-wrap: wrap; margin: auto 0 0; padding-top: 16px; font: 500 14px/1.5 var(--sans); color: var(--slate); } .pp .edp-meta span + span::before { content: "\00B7"; padding: 0 8px; } /* A single article: image on the left */ .pp .edp-cols-1 .edp-card.has-cover { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } .pp .edp-cols-1 .edp-img { aspect-ratio: auto; min-height: 260px; } .pp .edp-cols-1 .edp-body { justify-content: center; padding: 32px 36px; } .pp .edp-cols-1 .edp-title { font-size: 26px; } .pp .edp-cols-1 .edp-meta { margin-top: 0; } @media (max-width: 1100px) { .pp .edp-cols-3, .pp .edp-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp .edp-cols-4 .edp-title { font-size: 21px; } } @media (max-width: 700px) { .pp .edp { padding: 64px 0 72px; } .pp .edp-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; } .pp .edp-cols-1 .edp-card.has-cover { display: flex; } .pp .edp-cols-1 .edp-img { aspect-ratio: 16 / 9; min-height: 0; } .pp .edp-cols-1 .edp-body { padding: 22px 24px 24px; } .pp .edp-cols-1 .edp-title { font-size: 21px; } } @media (prefers-reduced-motion: reduce) { .pp .edp-img img { transition: none; } .pp .edp-card:hover .edp-img img { transform: none; } } .pp .site-footer { background: var(--dark); color: rgba(255,255,255,.82); font-size: 16px; line-height: 1.6; } .pp .ft-top { display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(auto-fit, minmax(180px, 1fr)); gap: 48px; padding-top: 80px; padding-bottom: 56px; } .pp .ft-name { margin: 0 0 14px; font: 600 24px/1.2 var(--serif); color: #fff; } .pp .ft-pagefooter p { margin: 0 0 12px; } .pp .ft-issn { margin: 12px 0 0; } .pp .site-footer a { color: var(--link-on-dark); } .pp .site-footer a:hover, .pp .site-footer a:focus { color: #fff; } .pp .ft-h { margin: 0 0 16px; font: 600 17px/1.3 var(--sans); color: #fff; } .pp .ft-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .pp .ft-list a { text-decoration: none; } .pp .ft-bottom { background: var(--dark-900); color: rgba(255,255,255,.68); font-size: 13.5px; line-height: 1.6; } .pp .ft-bottom .wrap { display: flex; align-items: center; gap: 28px; padding-top: 20px; padding-bottom: 24px; } .pp .ft-pp-logo { flex: none; display: block; } .pp .ft-pp-logo img { display: block; width: auto; height: 26px; } .pp .ft-bottom p { margin: 0; } /* =================================== 7. Interior pages and sidebar blocks */ .pp .pkp_structure_content.layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 56px; padding-top: 40px; padding-bottom: 104px; } .pp .layout > .col-main { flex: 999 1 560px; min-width: 0; } .pp .layout > .col-side { flex: 1 1 300px; min-width: 0; display: grid; gap: 22px; } .pp .pp-home-content > .col-main { width: 100%; } /* Breadcrumbs */ .pp .cmp_breadcrumbs { display: block; } .pp .cmp_breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 24px; padding: 0; list-style: none; font-size: 14.5px; line-height: 1.5; color: var(--slate); } .pp .cmp_breadcrumbs li { display: inline-flex; align-items: center; } .pp .cmp_breadcrumbs a { text-decoration: none; } .pp .cmp_breadcrumbs a:hover { text-decoration: underline; } .pp .cmp_breadcrumbs .separator { color: #9AA9B8; padding: 0 6px; } .pp .cmp_breadcrumbs .current, .pp .cmp_breadcrumbs .current h1 { color: var(--slate); font: inherit; margin: 0; } /* Full-width page heading (category, section) */ .pp .page-head { position: relative; overflow: hidden; background: var(--dark); color: #fff; padding: 40px 0 52px; } .pp .page-head .bg { position: absolute; top: 0; right: 0; bottom: 0; width: 62%; } .pp .page-head .bg img { width: 100%; height: 100%; object-fit: cover; opacity: .55; } .pp .page-head .bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--dark) 0%, color-mix(in srgb, var(--dark) 60%, transparent) 45%, color-mix(in srgb, var(--dark) 15%, transparent) 100%); } .pp .page-head .wrap { position: relative; } .pp .page-head .cmp_breadcrumbs ol { color: rgba(255,255,255,.75); } .pp .page-head .cmp_breadcrumbs .separator { color: rgba(255,255,255,.45); } .pp .page-head .cmp_breadcrumbs a { color: var(--link-on-dark); } .pp .page-head .cmp_breadcrumbs .current { color: rgba(255,255,255,.75); } .pp .page-title { margin: 0; font: 600 56px/1.05 var(--serif); letter-spacing: -0.015em; color: #fff; } .pp .page-desc { margin: 22px 0 0; max-width: 68ch; font-size: 18px; line-height: 1.65; color: rgba(255,255,255,.88); } .pp .page-desc p { margin: 0 0 10px; } .pp .page-meta { margin: 16px 0 0; font: 600 15px/1.3 var(--sans); color: var(--accent-on-dark); } .pp .cat-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 0; padding: 0; list-style: none; } .pp .cat-switch a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px; border-radius: 999px; border: 1px solid rgba(255,255,255,.3); color: #fff; text-decoration: none; font: 500 14.5px/1 var(--sans); transition: border-color .2s, background .2s; } .pp .cat-switch a:hover, .pp .cat-switch a:focus { border-color: var(--accent-on-dark); color: #fff; } .pp .cat-switch a[aria-current="page"] { background: var(--accent-on-dark); border-color: var(--accent-on-dark); color: var(--on-accent-dark); font-weight: 600; } /* Sidebar blocks */ .pp .pkp_structure_sidebar { display: grid; gap: 22px; align-content: start; } .pp .pkp_block { margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; font-size: 15.5px; } .pp .pkp_block .title { display: block; margin: 0 0 12px; padding: 13px 20px; font: 600 16px/1.3 var(--sans); color: var(--dark); text-align: left; text-indent: 0; text-transform: none; letter-spacing: 0; background: var(--mist); background: color-mix(in srgb, var(--primary) 9%, #fff); border-bottom: 1px solid var(--line); } .pp .pkp_block .content { padding: 0 20px 18px; } .pp .pkp_block .title.pkp_screen_reader + .content { padding-top: 18px; } /* Custom blocks whose content starts with its own title, as on the PAGEPress sites (

FOR AUTHORS

, block name hidden): the same band, edge to edge, and the text of the paragraph as a title. and in the title keep their bold: the HTML of the block decides */ .pp .pkp_block .content .title { margin: 0 -20px 12px; } .pp .pkp_block .title.pkp_screen_reader + .content > .title:first-child { margin-top: -18px; } .pp .pkp_block .title :is(p, h1, h2, h3, h4, h5, h6, span, div) { margin: 0; padding: 0; font: inherit; color: inherit; text-transform: inherit; letter-spacing: inherit; } .pp .pkp_block .content > p { margin: 0 0 10px; } .pp .pkp_block .content ul { margin: 0 -12px; padding: 0; list-style: none; } .pp .pkp_block .content li { margin: 0; } .pp .pkp_block .content li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 6px; color: var(--ink); text-decoration: none; } .pp .pkp_block .content li a::after { content: ''; width: 7px; height: 7px; border-right: 1.7px solid #9AA9B8; border-top: 1.7px solid #9AA9B8; transform: rotate(45deg); flex: none; } .pp .pkp_block .content li a:hover, .pp .pkp_block .content li a:focus { background: var(--mist); color: var(--primary); } .pp .pkp_block .content img { display: block; max-width: 100%; height: auto; } .pp .pkp_block.side-cta, .pp .side-cta { padding: 24px; border: 0; background: var(--primary); color: #fff; } .pp .side-cta .title { padding: 0; margin: 0 0 6px; font: 600 22px/1.2 var(--serif); color: #fff; background: none; border: 0; } .pp .side-cta .content { padding: 0; } .pp .side-cta p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.5; color: rgba(255,255,255,.88); } .pp .side-cta .btn-gold { background: var(--cta-button); color: var(--on-cta-button); } .pp .side-cta .btn-gold:hover, .pp .side-cta .btn-gold:focus { background: var(--cta-button); color: var(--on-cta-button); box-shadow: inset 0 0 0 2px currentColor; } .pp .side-block { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #fff; } .pp .side-block > h2 { margin: 0 0 12px; padding: 13px 20px; font: 600 16px/1.3 var(--sans); color: var(--dark); background: var(--mist); background: color-mix(in srgb, var(--primary) 9%, #fff); border-bottom: 1px solid var(--line); } .pp .side-block > ul { list-style: none; margin: 0; padding: 0 8px 8px; } .pp .side-block > ul li a { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; padding: 8px 12px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 15.5px; } .pp .side-block > ul li a:hover, .pp .side-block > ul li a:focus { background: var(--mist); color: var(--primary); } .pp .side-block > ul li a .ico { color: #9AA9B8; } .pp .side-block > ul li .current { display: block; padding: 8px 12px; font-size: 15.5px; color: var(--slate); } .pp .side-block .note { font-size: 14px; line-height: 1.6; color: var(--slate); padding: 0 20px 18px; margin: 0; overflow-wrap: anywhere; } /* Pagination */ .pp .cmp_pagination { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 12px; margin-top: 40px; font-size: 15px; color: var(--slate); text-align: center; } .pp .cmp_pagination::before, .pp .cmp_pagination::after { display: none; } .pp .cmp_pagination .prev { grid-column: 1; justify-self: start; float: none; margin: 0; } .pp .cmp_pagination .current { grid-column: 2; } .pp .cmp_pagination .next { grid-column: 3; justify-self: end; margin: 0; } .pp .cmp_pagination a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 1.5px solid var(--primary); border-radius: 6px; font-weight: 600; text-decoration: none; } .pp .cmp_pagination a:hover { background: var(--mist); } /* Notifications */ .pp .cmp_notification { margin: 0 0 24px; padding: 16px 20px; border-left: 4px solid var(--accent); background: var(--accent-tint); border-radius: 0 8px 8px 0; font-size: 15.5px; } /* ========================================================= 8. Article lists */ .pp .cmp_article_list, .pp .row-list { list-style: none; margin: 0; padding: 0; } .pp .cmp_article_list > li { margin: 0; } .pp .obj_article_summary.art-row { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 26px; margin: 0; padding: 30px 0; border-bottom: 1px solid var(--line); } .pp .obj_article_summary.art-row.no-cover { grid-template-columns: minmax(0, 1fr); } .pp .obj_article_summary::before, .pp .obj_article_summary::after { content: none; display: none; } .pp .cmp_article_list > li:first-child .art-row { padding-top: 6px; } .pp .obj_article_summary .art-thumb { display: block; float: none; width: auto; height: auto; max-height: none; margin: 0; } .pp .art-thumb img { display: block; width: 112px; height: 112px; max-height: none; object-fit: cover; border-radius: 8px; background: var(--mist); } .pp .obj_article_summary .art-title { margin: 0 0 8px; font: 600 22px/1.28 var(--serif); border: 0; } .pp .art-meta { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 8px 0 0; padding: 0; font-size: 15px; line-height: 1.4; color: var(--slate); } .pp .art-meta .pages, .pp .art-meta .published { color: var(--slate); } .pp .more-btn { background: none; border: 0; padding: 0 2px; font: inherit; color: var(--primary); font-weight: 600; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; } .pp .stats { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 14px 0 0; padding: 0; list-style: none; font-size: 15px; line-height: 1.4; color: var(--slate); } .pp .stats li { display: inline-flex; align-items: center; gap: 7px; } .pp .stats strong { color: var(--ink); font-weight: 600; } /* Statistics and scite.ai badge of an article in lists */ .pp .stats-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin: 14px 0 0; } .pp .stats-row .stats { margin: 0; } .pp .scite-badge { min-height: 22px; line-height: 1; } .pp .obj_article_summary .galleys_links { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 0; padding: 0; list-style: none; } .pp .obj_article_summary .galleys_links li { margin: 0; } .pp .obj_galley_link { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 14px; border: 1.5px solid var(--primary); border-radius: 5px; background: #fff; color: var(--primary); font: 600 14px/1 var(--sans); text-decoration: none; } .pp .obj_galley_link::before { margin: 0; } .pp .obj_galley_link:hover, .pp .obj_galley_link:focus { background: var(--primary); color: #fff; } .pp .dl-card .obj_galley_link.pdf { background: var(--primary); color: #fff; } .pp .dl-card .obj_galley_link.pdf:hover, .pp .dl-card .obj_galley_link.pdf:focus { background: var(--primary-700); } .pp .obj_galley_link.restricted { border-color: #B0105E; color: #B0105E; background: #fff; } .pp .page_catalog_category .subcategories { margin-bottom: 24px; } .pp .group-h { margin: 32px 0 8px; font: 600 15px/1.3 var(--sans); color: var(--primary); } .pp .empty { color: var(--slate); } /* ========================================================== 9. Article page */ .pp .page_article .cmp_breadcrumbs ol { margin-bottom: 8px; } .pp .obj_article_details.art-layout { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 56px; } .pp .art-main { flex: 999 1 560px; min-width: 0; } .pp .art-side { flex: 1 1 300px; min-width: 0; display: grid; gap: 22px; } .pp .obj_article_details .item { padding: 0; } .pp .obj_article_details .entry_details.art-side { margin: 0; border: 0; float: none; width: auto; } .pp .obj_article_details .entry_details .item { padding: 0; border: 0; } .pp .tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; } .pp .tag { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px; border-radius: 999px; font: 600 13.5px/1 var(--sans); background: var(--mist); color: var(--primary); text-decoration: none; } .pp a.tag:hover { background: #DFE8EF; } .pp .tag.oa { background: #FFF6CC; color: #5C4A00; } .pp .pkp_structure_main .art-h1 { margin: 16px 0 0; font: 600 44px/1.14 var(--serif); letter-spacing: -0.012em; color: var(--dark); text-wrap: pretty; } .pp .art-subtitle { margin: 10px 0 0; font: italic 400 22px/1.4 var(--serif); color: var(--slate); } .pp .obj_article_details .authors { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; } .pp .obj_article_details .authors li { margin: 0; } .pp .author-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; } .pp .obj_article_details .authors .name { display: inline; font-weight: 600; font-size: 17.5px; color: var(--ink); } .pp .obj_article_details .authors a.name { text-decoration: none; } .pp .obj_article_details .authors a.name:hover, .pp .obj_article_details .authors a.name:focus { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } .pp .obj_article_details .authors .orcid { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; } .pp .obj_article_details .authors .orcid_icon, .pp .obj_article_details .authors .orcid svg { width: 18px; height: 18px; } .pp .obj_article_details .authors .userGroup { display: inline; } .pp .obj_article_details .authors .affiliation { display: block; margin-top: 2px; font-size: 15.5px; color: var(--slate); } .pp .mini { display: inline-flex; align-items: center; gap: 5px; font: 500 14px/1 var(--sans); text-decoration: none; } .pp .corr { font: 500 13px/1 var(--sans); color: var(--slate); background: var(--mist); border-radius: 999px; padding: 6px 10px; } .pp .meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px 28px; margin: 32px 0 0; padding: 22px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .pp .meta-grid dt { font: 500 14px/1.3 var(--sans); color: var(--slate); } .pp .meta-grid dd { margin: 4px 0 0; font: 600 16px/1.35 var(--sans); color: var(--ink); overflow-wrap: anywhere; } .pp .tabs { display: flex; gap: 4px; margin: 36px 0 0; padding: 0; border-bottom: 1px solid var(--line); overflow-x: auto; } .pp .tab { position: relative; min-height: 48px; padding: 0 18px; background: none; border: 0; font: 600 16px/1 var(--sans); color: var(--slate); cursor: pointer; white-space: nowrap; } .pp .tab:hover { color: var(--primary); } .pp .tab.is-on { color: var(--dark); } .pp .tab.is-on::after { content: ''; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; border-radius: 3px 3px 0 0; background: var(--primary); } .pp .art-tabs .panel { padding: 30px 0 0; } .pp .art-tabs .panel + .panel { margin-top: 24px; } .pp .art-tabs.is-tabbed .panel + .panel { margin-top: 0; } .pp .pkp_structure_main .panel-h { margin: 0 0 16px; font: 600 24px/1.25 var(--serif); color: var(--dark); } .pp .art-tabs.is-tabbed .panel-h { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .pp .abstract-text { font: 400 19.5px/1.75 var(--serif); color: var(--ink); max-width: 68ch; } .pp .abstract-text p { margin: 0 0 16px; line-height: 1.75; } .pp .pkp_structure_main .kw-h { margin: 32px 0 12px; font: 600 16px/1.3 var(--sans); color: var(--dark); } .pp .kws { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .pp .kws a { display: inline-flex; min-height: 36px; align-items: center; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 15px; color: var(--ink); text-decoration: none; } .pp .kws a:hover, .pp .kws a:focus { border-color: var(--primary); color: var(--primary); } .pp .refs { margin: 0; padding-left: 28px; font-size: 16px; line-height: 1.6; } .pp .refs li { margin: 0 0 12px; padding-left: 4px; overflow-wrap: anywhere; } .pp .bios { list-style: none; margin: 0; padding: 0; } .pp .bio-name { font-weight: 600; margin: 0 0 6px; } .pp .panel-intro { margin: 0 0 18px; color: var(--slate); font-size: 16px; } .pp .badges { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .pp .badge-box { display: grid; place-items: center; min-height: 140px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; } .pp .obj_article_details .downloads_chart { margin-top: 36px; } .pp .obj_article_details .license { margin-top: 40px; padding: 22px 24px; border: 1px solid var(--line); border-radius: 10px; font-size: 15.5px; color: var(--slate); } .pp .obj_article_details .license .label { margin: 0 0 8px; font: 600 16px/1.3 var(--sans); color: var(--dark); } .pp .obj_article_details .license p { margin: 0 0 8px; } .pp .dl-card { padding: 20px; border: 1px solid var(--line); border-radius: 12px; display: grid; gap: 14px; } .pp .dl-card .cover_image img { display: block; width: 100%; border-radius: 8px; } .pp .dl-card .galleys_links, .pp .dl-card .supplementary_galleys_links { display: grid; grid-template-columns: minmax(0, 1fr); justify-content: stretch; gap: 10px; margin: 0; padding: 0; list-style: none; } .pp .dl-card .galleys_links li, .pp .dl-card .supplementary_galleys_links li { display: block; width: 100%; margin: 0; } .pp .dl-card .obj_galley_link { width: 100%; justify-content: center; min-height: 48px; font-size: 16px; border-radius: 6px; } .pp .dl-card .side-sub { margin: 4px 0 0; font: 600 15px/1.3 var(--sans); color: var(--dark); } .pp .dl-card .obj_galley_link_supplementary { font-size: 15px; } .pp .mini-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(92px, 1fr)); gap: 8px; padding: 0 20px 18px; } .pp .mini-stats b { display: block; font: 600 24px/1.1 var(--serif); color: var(--dark); } .pp .mini-stats span { font-size: 13.5px; line-height: 1.3; color: var(--slate); } .pp .scite-row { padding: 14px 20px 18px; border-top: 1px solid var(--line); } .pp .scite-label { margin: 0 0 8px; font-size: 13.5px; line-height: 1.3; color: var(--slate); } /* Dates of the article (output of the dates plugin) */ .pp .art-dates-body { padding: 0 20px 18px; font-size: 15px; line-height: 1.75; color: var(--ink); } .pp .art-dates-body b, .pp .art-dates-body strong { font-weight: 600; color: var(--dark); } .pp .art-dates-body > :first-child { margin-top: 0; } .pp .art-dates-body > :last-child { margin-bottom: 0; } .pp .art-plugins:empty { display: none; } .pp .obj_article_details .art-plugins > .item { padding: 0 20px 18px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .pp .obj_article_details .art-plugins .label { margin: 0 0 10px; font: 600 17px/1.3 var(--sans); color: var(--dark); } /* Heading of a plugin block (e.g. How to cite): band as the other blocks */ .pp .obj_article_details .art-plugins > .item > h2.label, .pp .obj_article_details .art-plugins > .item > .sub_item:first-child > h2.label { margin: 0 -20px 12px; padding: 13px 20px; font-size: 16px; background: var(--mist); background: color-mix(in srgb, var(--primary) 9%, #fff); border-bottom: 1px solid var(--line); } .pp .art-plugins #citationOutput { font: 400 15.5px/1.6 var(--serif); overflow-wrap: anywhere; } .pp .obj_article_details .art-plugins .citation_formats { margin-top: 14px; border: 0; border-radius: 0; } .pp .obj_article_details .art-plugins .citation_formats_button { display: block; width: 100%; min-height: 42px; margin: 0; padding: 0 40px 0 14px; border: 1.5px solid var(--primary); border-radius: 6px; background: #fff; color: var(--primary); font: 600 14px/39px var(--sans); text-align: left; cursor: pointer; } .pp .obj_article_details .art-plugins .citation_formats_button:hover, .pp .obj_article_details .art-plugins .citation_formats_button:focus-visible { background: var(--mist); } .pp .obj_article_details .art-plugins .citation_formats_button[aria-expanded="true"] { border-radius: 6px 6px 0 0; } .pp .obj_article_details .art-plugins .citation_formats_list { border: 1px solid var(--line); border-top: 0; border-radius: 0 0 6px 6px; } .pp .obj_article_details .art-plugins .citation_formats_list .label { margin: 0; padding: 12px 14px 4px; font: 600 12px/1.3 var(--sans); letter-spacing: .05em; text-transform: uppercase; color: var(--slate); } .pp .obj_article_details .art-plugins .citation_formats_styles a { padding: 8px 14px; font-size: 14.5px; } /* ===================================================== 10. Issues and archive */ /* Issue (volume) page: header card, links to the sections, sections with image, volume pager. Children use the theme's own toc-* classes: the default theme's .obj_issue_toc rules do not apply. */ .pp .pp-toc { container-type: inline-size; } .pp .toc-head { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 44px; align-items: start; margin: 4px 0 44px; padding: 36px; border-radius: 16px; background: var(--mist); } .pp .toc-head.no-cover { grid-template-columns: minmax(0, 1fr); } .pp .toc-cover img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; box-shadow: 0 12px 30px color-mix(in srgb, var(--dark) 20%, transparent); } .pp .pp-toc .toc-title { margin: 0; font: 600 44px/1.08 var(--serif); color: var(--dark); } .pp .toc-intro .arch-meta { margin-top: 12px; font-size: 16px; } .pp .toc-pid { margin: 10px 0 0; font-size: 15px; color: var(--slate); overflow-wrap: anywhere; } .pp .toc-pid .type { margin-right: 6px; font-weight: 600; color: var(--ink); } .pp .toc-desc { max-width: 66ch; margin-top: 20px; font: 400 18px/1.6 var(--serif); color: var(--ink); } .pp .toc-desc > :first-child { margin-top: 0; } .pp .toc-desc > :last-child { margin-bottom: 0; } .pp .toc-galleys { margin-top: 24px; } .pp .toc-galleys .arch-label { margin-top: 0; } .pp .toc-galleys .galleys_links { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 0; padding: 0; list-style: none; } .pp .toc-jump { margin: 0 0 8px; } .pp .toc-jump .arch-label { margin: 0; } .pp .toc-jump ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; } .pp .toc-jump a { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 7px 0 15px; border: 1px solid var(--line); border-radius: 999px; background: #fff; font: 500 15px/1.2 var(--sans); color: var(--dark); text-decoration: none; } .pp .toc-jump a:hover, .pp .toc-jump a:focus { border-color: var(--primary); color: var(--primary); } .pp .toc-jump .n { display: inline-grid; place-items: center; min-width: 26px; height: 26px; padding: 0 7px; border-radius: 999px; background: var(--mist); font-size: 13px; font-weight: 600; color: var(--primary); } .pp .toc-sec { margin-top: 48px; scroll-margin-top: 170px; } .pp .toc-sec-head { display: flex; align-items: center; gap: 18px; padding-bottom: 16px; border-bottom: 2px solid var(--primary); } .pp .toc-sec-img { flex: none; width: 64px; height: 64px; border-radius: 12px; object-fit: cover; background: var(--mist); } .pp .pp-toc .toc-sec-title { margin: 0; font: 600 28px/1.15 var(--serif); color: var(--dark); } .pp .toc-sec-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; margin: 6px 0 0; font-size: 15px; color: var(--slate); } .pp .toc-sec-meta a { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; text-decoration: none; } .pp .toc-sec-meta a:hover, .pp .toc-sec-meta a:focus { text-decoration: underline; text-underline-offset: 3px; } .pp .toc-articles > li:first-child .art-row { padding-top: 28px; } .pp .toc-articles > li:last-child .art-row { border-bottom: 0; } .pp .toc-pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 56px; } .pp .toc-pager a { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; color: var(--dark); text-decoration: none; } .pp .toc-pager a:hover, .pp .toc-pager a:focus { border-color: var(--primary); background: var(--mist); color: var(--dark); } .pp .toc-pager small { display: block; margin-bottom: 3px; font: 600 12px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); } .pp .toc-pager span { font: 600 20px/1.2 var(--serif); } .pp .toc-pager .ico { flex: none; width: 22px; height: 22px; color: var(--primary); } .pp .toc-next { grid-column: 2; justify-content: flex-end; text-align: right; } @container (max-width: 760px) { .pp .toc-head { grid-template-columns: 140px minmax(0, 1fr); gap: 24px; padding: 24px; } .pp .pp-toc .toc-title { font-size: 34px; } .pp .pp-toc .toc-sec-title { font-size: 24px; } .pp .toc-sec-img { width: 52px; height: 52px; border-radius: 10px; } } @container (max-width: 520px) { .pp .toc-head { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; } .pp .toc-cover { width: 132px; } .pp .pp-toc .toc-title { font-size: 30px; } .pp .toc-intro .arch-meta { flex-direction: column; align-items: flex-start; gap: 2px; } .pp .toc-intro .arch-meta span:not(:first-child)::before { display: none; } .pp .toc-pager { grid-template-columns: minmax(0, 1fr); } .pp .toc-next { grid-column: 1; } } @media (max-width: 860px) { .pp .toc-sec { scroll-margin-top: 96px; } } /* Archive: current volume card, then one row per volume (year, cover, title, articles) */ .pp .page_issue_archive { container-type: inline-size; } .pp .page_issue_archive .arch-lead { margin: -6px 0 36px; font: 400 19px/1.5 var(--serif); color: var(--slate); } .pp .arch-cover { display: block; } .pp .arch-cover img { display: block; width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 6px; box-shadow: 0 10px 26px color-mix(in srgb, var(--dark) 18%, transparent); transition: transform .2s ease; } .pp a.arch-cover:hover img { transform: translateY(-3px); } .pp .arch-kicker { margin: 0 0 8px; font: 600 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--primary); } .pp .arch-title { margin: 0; font: 600 24px/1.2 var(--serif); color: var(--dark); } .pp .arch-title a { color: inherit; text-decoration: none; } .pp .arch-title a:hover, .pp .arch-title a:focus { color: var(--primary); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; } .pp .arch-series { margin: 4px 0 0; font-size: 16px; color: var(--slate); } .pp .arch-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin: 8px 0 0; font-size: 15px; line-height: 1.4; color: var(--slate); } .pp .arch-meta span:not(:first-child)::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 12px 0 0; border-radius: 50%; background: currentColor; opacity: .55; vertical-align: middle; } .pp .arch-desc { max-width: 64ch; margin: 16px 0 0; font: 400 17px/1.6 var(--serif); color: var(--ink); } .pp .arch-label { margin: 26px 0 4px; font: 600 13px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--slate); } .pp .arch-articles { margin: 0; padding: 0; list-style: none; } .pp .arch-articles a { color: var(--dark); text-decoration: none; } .pp .arch-articles a:hover, .pp .arch-articles a:focus { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; } .pp .arch-more { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font: 600 15px/1.2 var(--sans); text-decoration: none; } .pp .arch-more:hover { text-decoration: underline; text-underline-offset: 3px; } .pp .arch-actions { margin-top: 26px; } /* Current volume */ .pp .arch-current { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 40px; align-items: start; margin: 0 0 56px; padding: 32px; border-radius: 16px; background: var(--mist); } .pp .arch-current .arch-title { font-size: 36px; line-height: 1.1; } .pp .arch-current .arch-articles li { padding: 10px 0; border-bottom: 1px solid var(--line); } .pp .arch-current .arch-articles a { display: -webkit-box; font: 400 17px/1.4 var(--serif); -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Other volumes */ .pp .arch-subhead { margin: 0; padding-bottom: 10px; border-bottom: 2px solid var(--primary); font: 600 15px/1.3 var(--sans); color: var(--primary); } .pp .arch-list { margin: 0; padding: 0; list-style: none; } .pp .arch-list > li + li { border-top: 1px solid var(--line); } .pp .arch-row { display: grid; grid-template-columns: 104px 92px minmax(0, 1fr); gap: 28px; align-items: start; padding: 28px 0; } .pp .arch-row:not(:has(.arch-cover)) { grid-template-columns: 104px minmax(0, 1fr); } .pp .arch-year { margin: 0; font: 400 44px/.9 var(--serif); color: var(--primary); font-variant-numeric: lining-nums; } .pp .arch-row .arch-articles { margin-top: 12px; } .pp .arch-row .arch-articles li { position: relative; padding: 3px 0 3px 18px; } .pp .arch-row .arch-articles li::before { content: ""; position: absolute; left: 0; top: 15px; width: 8px; height: 2px; border-radius: 1px; background: var(--accent); } .pp .arch-row .arch-articles a { display: block; font: 400 17px/1.45 var(--serif); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } @container (max-width: 760px) { .pp .arch-current { grid-template-columns: 136px minmax(0, 1fr); gap: 24px; padding: 24px; } .pp .arch-current .arch-title { font-size: 30px; } .pp .arch-row, .pp .arch-row:not(:has(.arch-cover)) { grid-template-columns: 72px minmax(0, 1fr); gap: 18px; padding: 22px 0; } .pp .arch-row:not(:has(.arch-cover)) { grid-template-columns: minmax(0, 1fr); } .pp .arch-year { display: none; } .pp .arch-row .arch-title { font-size: 21px; } .pp .arch-row .arch-articles a { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .pp .arch-row .arch-meta { flex-direction: column; align-items: flex-start; gap: 2px; } .pp .arch-row .arch-meta span::before { display: none; } } @container (max-width: 520px) { .pp .arch-current { grid-template-columns: minmax(0, 1fr); padding: 22px 20px; } .pp .arch-current .arch-cover { width: 132px; } .pp .arch-current .arch-title { font-size: 28px; } .pp .arch-current .arch-meta { flex-direction: column; align-items: flex-start; gap: 2px; } .pp .arch-current .arch-meta span::before { display: none; } .pp .arch-current .arch-actions .btn { width: 100%; } } /* ================================== 11. Core pages (about, search, forms...) */ .pp .pkp_structure_main .page { font-size: 17px; } .pp .pkp_structure_main .page > h1:first-of-type, .pp .pkp_structure_main .page .page_title { font: 600 40px/1.15 var(--serif); color: var(--dark); } .pp .cmp_form fieldset { border: 0; margin: 0 0 24px; padding: 0; } .pp .cmp_form legend { font: 600 22px/1.3 var(--serif); color: var(--dark); margin-bottom: 12px; } .pp .cmp_form label .label, .pp .cmp_form .label { font-weight: 600; font-size: 15px; } .pp .cmp_form input[type="text"], .pp .cmp_form input[type="email"], .pp .cmp_form input[type="password"], .pp .cmp_form input[type="url"], .pp .cmp_form input[type="tel"], .pp .cmp_form select, .pp .cmp_form textarea, .pp .pkp_search input[type="text"], .pp .search_input input { width: 100%; max-width: 560px; min-height: 46px; padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 6px; font: 400 16px/1.4 var(--sans); color: var(--ink); background: #fff; } .pp .cmp_form input:focus, .pp .cmp_form select:focus, .pp .cmp_form textarea:focus { border-color: var(--primary); outline: 2px solid rgba(24,136,176,.35); outline-offset: 0; } /* Announcements: list, summary card, full view and homepage cards */ .pp .ann-intro { max-width: 46em; margin: 12px 0 0; font-size: 17.5px; line-height: 1.6; color: var(--ink); } .pp .ann-list { list-style: none; margin: 24px 0 0; padding: 0; } .pp .ann-list > li { margin: 0; padding: 32px 0; border-bottom: 1px solid var(--line); } .pp .ann-list > li:first-child { padding-top: 8px; } .pp .ann-card.has-image { display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr); gap: 32px; align-items: start; } .pp .ann-img { display: block; border-radius: 10px; overflow: hidden; background: var(--mist); } .pp .ann-img img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .4s ease; } .pp .ann-card:hover .ann-img img { transform: scale(1.03); } .pp .ann-date { display: flex; align-items: center; gap: 8px; margin: 0 0 8px; font: 600 14px/1.3 var(--sans); color: var(--primary); } .pp .obj_announcement_summary .ann-title { margin: 0; font: 600 26px/1.25 var(--serif); } .pp .ann-title a { color: var(--dark); text-decoration: none; } .pp .ann-title a:hover, .pp .ann-title a:focus { color: var(--primary); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; } .pp .ann-summary { margin: 12px 0 0; max-width: 62em; font-size: 16.5px; line-height: 1.65; color: var(--ink); } .pp .ann-summary p { margin: 0 0 10px; } .pp .ann-summary p:last-child { margin-bottom: 0; } .pp .ann-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font: 600 15px/1.3 var(--sans); color: var(--primary); text-decoration: none; } .pp .ann-more:hover, .pp .ann-more:focus { color: var(--primary-700); text-decoration: underline; text-underline-offset: 3px; } .pp .ann-full { max-width: 760px; } .pp .ann-full .ann-date { margin-top: 4px; } .pp .pkp_structure_main .ann-full-title { margin: 0; font: 600 40px/1.15 var(--serif); color: var(--dark); } .pp .ann-full-img { margin: 28px 0 0; } .pp .ann-full-img img { display: block; max-width: 100%; height: auto; border-radius: 12px; } .pp .ann-text { margin-top: 28px; font: 400 19px/1.75 var(--serif); color: var(--ink); } .pp .ann-text > :first-child { margin-top: 0; } .pp .ann-text p { margin: 0 0 18px; } .pp .ann-text ul, .pp .ann-text ol { margin: 0 0 18px; padding-left: 1.3em; } .pp .ann-back { margin: 36px 0 0; padding-top: 20px; border-top: 1px solid var(--line); } .pp .ann-back a { display: inline-flex; align-items: center; gap: 6px; font: 600 15px/1.3 var(--sans); color: var(--primary); text-decoration: none; } .pp .ann-back a:hover, .pp .ann-back a:focus { text-decoration: underline; text-underline-offset: 3px; } .pp .ann-home { margin-top: 36px; padding: 22px 24px 8px; border-radius: 16px; background: var(--mist); } .pp .ann-home-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin: 0 0 6px; } .pp .ann-home-title { display: flex; align-items: center; gap: 8px; margin: 0; font: 600 20px/1.2 var(--serif); color: var(--dark); } .pp .ann-home-title .ico { color: var(--primary); } .pp .ann-home-all { display: inline-flex; align-items: center; gap: 4px; font: 600 14.5px/1.3 var(--sans); text-decoration: none; } .pp .ann-home-all:hover, .pp .ann-home-all:focus { text-decoration: underline; text-underline-offset: 3px; } .pp .ann-feed { margin: 0; padding: 0; list-style: none; } .pp .ann-feed-item { display: flex; align-items: flex-start; gap: 16px; margin: 0; padding: 16px 0; } .pp .ann-feed-item + .ann-feed-item { border-top: 1px solid var(--line); } .pp .ann-tile { display: flex; flex: none; flex-direction: column; align-items: center; justify-content: center; width: 64px; padding: 8px 0 9px; border-radius: 12px; background: var(--primary); color: #fff; text-decoration: none; line-height: 1; } .pp .ann-tile-d { font: 600 26px/1 var(--serif); } .pp .ann-tile-m { margin-top: 3px; font: 700 11px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; } .pp .ann-tile-y { margin-top: 2px; font: 500 11px/1.2 var(--sans); opacity: .8; } .pp .ann-feed-body { min-width: 0; } .pp .ann-feed-title { margin: 2px 0 0; font: 600 18px/1.3 var(--serif); } .pp .ann-feed-title a { color: var(--dark); text-decoration: none; } .pp .ann-feed-title a:hover, .pp .ann-feed-title a:focus { color: var(--primary); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .pp .ann-feed-date { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .pp .ann-feed-text { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--slate); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } @media (max-width: 700px) { .pp .ann-card.has-image { grid-template-columns: minmax(0, 1fr); gap: 16px; } .pp .obj_announcement_summary .ann-title { font-size: 23px; } .pp .pkp_structure_main .ann-full-title { font-size: 32px; } .pp .ann-text { font-size: 18px; } } .pp .pkp_structure_main table { border-collapse: collapse; width: 100%; } .pp .pkp_structure_main th, .pp .pkp_structure_main td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; } /* ============================================ 12. PAGEPress theme additions */ /* PAGEPress bar */ .pp .pp-bar { position: relative; z-index: 61; background: var(--dark-900); color: rgba(255,255,255,.8); } .pp .pp-bar-in { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 40px; padding: 0 28px; } .pp .pp-bar-logo { display: block; flex: none; } .pp .pp-bar-logo img { display: block; width: auto; height: 22px; } .pp .pp-bar-social { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; } .pp .pp-bar-social a { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 6px; color: rgba(255,255,255,.82); font-size: 16px; text-decoration: none; } .pp .pp-bar-social a:hover, .pp .pp-bar-social a:focus { background: rgba(255,255,255,.1); color: #fff; } .pp .ico-brand { display: block; width: 16px; height: 16px; } .pp .site-header.is-floating.has-bar { top: 56px; } .pp .site-header.is-floating.has-bar.is-docked { top: 0; } /* Homepage header: single image or video, or a band in the journal's colours */ .pp .hero-single { height: 620px; } .pp .hero-single.no-media { background: linear-gradient(120deg, var(--brand) 0%, var(--dark) 78%); } .pp .hero-single.no-media .hero-scrim { display: none; } .pp .hero-slider { height: 680px; } .pp .hero-single .caps { bottom: 72px; } .pp .hero-single .cap-title.is-long { font-size: 54px; } .pp .hero-single .hero-ctrl { bottom: 72px; } /* Impact Factor and CiteScore: glass boxes on the right of the homepage header, aligned with the buttons (desktop only) */ .pp .hero-metrics { position: absolute; right: 32px; bottom: 72px; z-index: 2; display: flex; align-items: stretch; gap: 10px; margin: 0; padding: 0; list-style: none; } .pp .hero-slider .hero-metrics { bottom: 266px; } .pp .hero-metrics li { display: flex; margin: 0; } .pp .metric { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 116px; padding: 11px 16px 12px; border: 1px solid rgba(255,255,255,.32); border-radius: 12px; background: rgba(255,255,255,.1); background: color-mix(in srgb, var(--dark) 34%, rgba(255,255,255,.08)); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 10px 30px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.18); color: #fff; text-align: center; text-decoration: none; transition: background .25s ease, border-color .25s ease, transform .25s ease; } .pp a.metric:hover, .pp a.metric:focus-visible { background: rgba(255,255,255,.18); background: color-mix(in srgb, var(--dark) 20%, rgba(255,255,255,.2)); border-color: rgba(255,255,255,.6); color: #fff; transform: translateY(-2px); } .pp .metric-value { font: 600 28px/1 var(--serif); letter-spacing: -0.01em; } .pp .metric-label { margin-top: 7px; font: 600 10.5px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.9); } .pp .metric-year { margin-top: 3px; font: 600 11.5px/1.2 var(--sans); color: var(--accent-on-dark); } .pp .hero.has-metrics .cap { max-width: min(720px, calc(100% - 320px)); } .pp .hero-single.has-metrics .hero-ctrl { bottom: 180px; } /* Homepage: facts, logos, custom content, table of contents */ .pp .facts .fact-note { font-weight: 500; color: var(--slate); } .pp .facts dd a { color: var(--primary); text-decoration: none; border-bottom: 1px solid currentColor; } .pp .facts dd a:hover, .pp .facts dd a:focus { color: var(--primary-700); } .pp .pp-logos { display: flex; justify-content: center; align-items: center; margin: 8px 0 0; padding: 8px 0; } .pp .pp-logos a { display: block; max-width: 100%; } .pp .pp-logos img { display: block; width: auto; max-width: 100%; height: auto; max-height: 240px; margin: 0 auto; } .pp .pp-custom { margin-top: 28px; font-size: 17px; line-height: 1.6; } .pp .pp-custom > :first-child { margin-top: 0; } .pp .pp-custom > :last-child { margin-bottom: 0; } .pp .intro.no-side > .wrap { grid-template-columns: minmax(0, 1fr); } .pp .intro.no-side .lead { max-width: 46em; } .pp .home-toc { padding: 24px 0 104px; } .pp .home-toc .sec-head { margin-bottom: 8px; } .pp .pp-toc.is-sections-only .toc-sec:first-child { margin-top: 32px; } /* Footer columns from the footer menu */ .pp .ft-col { min-width: 0; } /* Search page */ .pp .pp-search .search-form { margin-top: 28px; } .pp .pp-search .search-bar { display: flex; align-items: stretch; gap: 12px; max-width: 860px; } .pp .pp-search .search_input { flex: 1; min-width: 0; } .pp .pp-search .search_input input { width: 100%; max-width: none; min-height: 56px; padding: 0 18px; border-radius: 10px; font-size: 17.5px; } .pp .pp-search .search-go { min-height: 56px; padding: 0 24px; border-radius: 10px; font-size: 16px; } .pp .pp-search .search-filters { position: relative; margin: 22px 0 0; padding: 22px 26px 24px; border: 1px solid var(--line); border-radius: 14px; background: var(--mist); } .pp .pp-search .search-filters > legend { float: left; width: 100%; margin: 0 0 16px; padding: 0; font: 600 16px/1.3 var(--sans); color: var(--dark); } .pp .pp-search .filters-grid { clear: both; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px 44px; } .pp .pp-search .date_range, .pp .pp-search .filters-more .author { float: none; width: auto; margin: 0; } .pp .pp-search .date_range { display: grid; gap: 16px; } .pp .pp-search .date_range .to fieldset { margin-bottom: 0; } .pp .pp-search .date_range select + label + select { margin-left: 0; } .pp .pp-search .date_range fieldset { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, .8fr); gap: 8px; margin: 0; } .pp .pp-search .date_range legend { padding: 0; margin: 0 0 6px; font: 600 14px/1.3 var(--sans); color: var(--slate); } .pp .pp-search .date_range label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .pp .pp-search .search-filters select, .pp .pp-search .search-filters input[type="text"] { width: 100%; max-width: none; min-height: 44px; border-radius: 8px; background-color: #fff; font-size: 15.5px; } .pp .pp-search .filters-more { display: grid; gap: 16px; align-content: start; } /* Filters added by plugins: every wrapper and select as wide as the column (the plugins' own widths are overridden) */ .pp .pp-search .filters-more :is(div, span, p, fieldset):has(select) { display: block; float: none; width: 100%; max-width: none; margin-left: 0; margin-right: 0; } .pp .pp-search .filters-more select { display: block; width: 100% !important; max-width: none !important; } .pp .pp-search .filters-more br { display: none; } .pp .pp-search .filters-more label, .pp .pp-search .filters-more .label { display: block; margin: 0 0 6px; font: 600 14px/1.3 var(--sans); color: var(--slate); } .pp .pp-search .filters-more .label_contexts, .pp .pp-search .filters-more :is(select, input, .btn-group) + label { margin-top: 16px; } /* Filters added by plugins with bootstrap-multiselect ("None selected") */ .pp .pp-search .filters-more .btn-group { display: block; width: 100%; } .pp .pp-search .filters-more button.multiselect { width: 100%; min-height: 44px; padding: 0 12px; text-align: left; border: 1.5px solid var(--line); border-radius: 8px; background: #fff; font: 400 15.5px/1.3 var(--sans); color: var(--ink); } .pp .pp-search .filters-clear { position: absolute; top: 22px; right: 26px; font-size: 15px; line-height: 1.3; } .pp .pp-search .search-results { margin-top: 40px; scroll-margin-top: 120px; } .pp .pp-search .results-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; padding-bottom: 14px; margin-bottom: 8px; border-bottom: 1px solid var(--line); } .pp .pp-search .results-count { margin: 0; font-size: 17px; color: var(--slate); } .pp .pp-search .results-count strong { font: 600 24px/1 var(--serif); color: var(--dark); } .pp .pp-search .results-sort { display: flex; align-items: center; gap: 10px; } .pp .pp-search .results-sort label { font-size: 14.5px; color: var(--slate); white-space: nowrap; } .pp .pp-search .results-sort select { width: auto; max-width: 240px; min-height: 40px; padding: 4px 10px; border: 1.5px solid var(--line); border-radius: 8px; background-color: #fff; font: 400 15px/1.3 var(--sans); color: var(--ink); } .pp .pp-search .results-sort select:focus { border-color: var(--primary); } @media (max-width: 860px) { .pp .pp-search .filters-grid { grid-template-columns: minmax(0, 1fr); } .pp .pp-search .search-filters { padding: 18px 16px 20px; } .pp .pp-search .filters-clear { top: 18px; right: 16px; } } @media (max-width: 600px) { .pp .pp-search .search-go { padding: 0 16px; } .pp .pp-search .search-go span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .pp .pp-search .results-sort { width: 100%; } .pp .pp-search .results-sort select { flex: 1; max-width: none; } .pp .page_contact .contact-grid { grid-template-columns: minmax(0, 1fr); } .pp .page_contact .contact-address { grid-row: auto; } .pp .page_contact .contact-card { padding: 22px 20px 24px; } } /* Contact page */ .pp .page_contact .contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 28px; align-items: start; } /* Mailing address on the left, the contacts stacked on the right */ .pp .page_contact .contact-address { grid-row: span 2; align-self: stretch; } .pp .page_contact .contact-card { margin: 0; padding: 26px 28px 28px; border: 1px solid var(--line); border-radius: 14px; background: #fff; min-width: 0; } .pp .page_contact .contact-address { background: var(--mist); border-color: var(--mist); } .pp .page_contact .contact-kicker { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; font: 600 15px/1.2 var(--sans); color: var(--primary); } .pp .page_contact .contact-name { margin: 0; font: 600 24px/1.25 var(--serif); color: var(--dark); } .pp .page_contact .contact-title { margin: 4px 0 0; font-size: 16px; color: var(--ink); } .pp .page_contact .contact-aff { margin: 6px 0 0; font-size: 15.5px; line-height: 1.5; color: var(--slate); } .pp .page_contact .contact-aff p { margin: 0; } .pp .page_contact .contact-lines { display: grid; gap: 10px; margin: 18px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid var(--line); } .pp .page_contact .contact-lines li { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 16px; line-height: 1.4; overflow-wrap: anywhere; } .pp .page_contact .contact-lines .ico { flex: none; color: var(--primary); } .pp .page_contact .contact-address-body { font-size: 16px; line-height: 1.6; color: var(--ink); overflow-wrap: anywhere; } .pp .page_contact .contact-address-body p { margin: 0; } .pp .page_contact .contact-address-body img { display: block; max-width: 100%; height: auto; margin: 0 0 14px; } /* ====================================== 13. Responsive and reduced motion */ @media (max-width: 1100px) { .pp .hdr-util .lbl { display: none; } .pp .nav-list > li > a, .pp .nav-list > li > .nav-parent { padding: 0 10px; font-size: 14.5px; } .pp .ft-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } .pp .intro > .wrap { grid-template-columns: minmax(0, 1fr); gap: 48px; } .pp .intro-side { max-width: 560px; } .pp .rail .seg-text { display: none; } .pp .rail-now { display: block; position: absolute; left: 32px; bottom: 62px; margin: 0; font: 600 15px/1.3 var(--sans); color: #fff; } } @media (max-width: 860px) { .wrap { padding-left: 20px; padding-right: 20px; } .pp .site-header.is-floating { top: 12px; left: 12px; right: 12px; } .pp .hdr-top { padding: 8px 12px 8px 16px; } .pp .hdr-logo img { height: 54px; } .pp .is-docked .hdr-logo img { height: 44px; } .pp .hdr-util-nav { display: none; } .pp .hdr-burger { display: inline-flex; } .pp .hdr-nav { display: none; max-height: calc(100vh - 90px); overflow-y: auto; } .pp .is-floating .hdr-nav { border-radius: 0 0 12px 12px; } .pp .menu-open .hdr-nav { display: block; } .pp .nav-list { flex-direction: column; align-items: stretch; padding: 8px 12px 16px; } .pp .nav-list > li > a, .pp .nav-list > li > .nav-parent { width: 100%; min-height: 48px; font-size: 16px; justify-content: space-between; } .pp .nav-list > li > a::after, .pp .nav-list > li > .nav-parent::after { display: none; } .pp .nav-sub { position: static; min-width: 0; box-shadow: none; background: transparent; padding: 0 0 8px 14px; } .pp .nav-sub a { color: rgba(255,255,255,.88); padding: 8px 10px; } .pp .nav-sub a:hover, .pp .nav-sub a:focus { background: rgba(255,255,255,.1); color: #fff; } .pp .mob-util { display: block; padding: 8px 12px 16px; border-top: 1px solid rgba(255,255,255,.18); } .pp .mob-util-list { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; } .pp .mob-util-list a, .pp .mob-util-list .nav-parent { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 1px solid rgba(255,255,255,.3); border-radius: 6px; color: #fff; background: none; text-decoration: none; font: 600 15px/1 var(--sans); } .pp .mob-util-list .nav-sub a { border: 0; } .pp .mob-util-list + .mob-util-list { margin-top: 8px; } .pp .hero { height: 640px; } .pp .hero-scrim { background: linear-gradient(0deg, color-mix(in srgb, var(--dark-900) 94%, transparent) 0%, color-mix(in srgb, var(--dark) 72%, transparent) 55%, color-mix(in srgb, var(--dark) 45%, transparent) 100%); } .pp .caps { left: 20px; right: 20px; bottom: 150px; } .pp .cap-title, .pp .cap-title.is-long { font-size: 38px; } .pp .cap-kicker { font-size: 20px; } .pp .cap-text { font-size: 17px; } .pp .hero-ctrl { right: 20px; bottom: 76px; } .pp .ctrl { width: 44px; height: 44px; } .pp .rail { left: 20px; right: 20px; gap: 6px; bottom: 24px; } .pp .rail-now { left: 20px; bottom: 84px; max-width: 55%; } .pp .sec-title { font-size: 32px; } .pp .lead { font-size: 20px; } .pp .facts-card { padding: 20px; } .pp .issue-card { grid-template-columns: 110px minmax(0, 1fr); padding: 20px; gap: 18px; } .pp .art-grid { grid-template-columns: minmax(0, 1fr); } .pp .ft-top { grid-template-columns: minmax(0, 1fr); gap: 36px; padding-top: 56px; } .pp .page-title { font-size: 38px; } .pp .page-head .bg { width: 100%; } .pp .obj_article_summary.art-row { grid-template-columns: 72px minmax(0, 1fr); gap: 16px; } .pp .art-thumb img { width: 72px; height: 72px; } .pp .pkp_structure_main .art-h1 { font-size: 32px; } .pp .badges { grid-template-columns: minmax(0, 1fr); } .pp .pkp_structure_content.layout { gap: 40px; padding-top: 24px; padding-bottom: 72px; } } @media (max-width: 860px) { .pp .pp-bar-in { padding: 0 12px 0 16px; } .pp .site-header.is-floating.has-bar { top: 52px; } .pp .site-header.is-floating.has-bar.is-docked { top: 0; } .pp .hero-single { height: 560px; } .pp .hero-single .caps { bottom: 48px; } .pp .hero-single .cap-title.is-long { font-size: 36px; } .pp .hero-single .hero-ctrl { bottom: auto; top: 128px; } .pp .hero-metrics { display: none; } .pp .hero.has-metrics .cap { max-width: 720px; } .pp .hero-single.has-metrics .hero-ctrl { bottom: auto; } .pp .hero-slider { height: 640px; } .pp .ft-bottom .wrap { flex-direction: column; align-items: flex-start; gap: 14px; } } @media (prefers-reduced-motion: reduce) { .pp *, .pp *::before, .pp *::after { transition-duration: .01ms !important; animation: none !important; scroll-behavior: auto !important; } .pp .hero-slide img, .pp .hero-slide video { transform: none; } }