/* Theme Name: Martha Nelson Lab Theme URI: https://marthanelsonlab.com/ Author: Unified Media LLC Description: Block theme for the Nelson Lab at NIH. White ground, restrained editorial typography, and a viridis-derived accent palette. All design tokens are declared once, in theme.json; this file only consumes them. Requires at least: 6.5 Tested up to: 7.0 Requires PHP: 7.4 Version: 2.78.2 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: martha-nelson-lab Tags: one-column, block-patterns, full-site-editing, education, accessibility-ready */ /* ============================================================================ 1. GLOBAL Colors, fonts and spacing all come from theme.json as --wp--preset--* custom properties. Nothing in this file redeclares a token. The one exception is the choropleth ramp below, which is derived, colorblind-safe, and not something an editor should be changing from the Site Editor. ========================================================================= */ :root { /* Every color now lives in theme.json: the palette for anything an editor might reasonably change, settings.custom for the derived values that should not appear in a color picker - the choropleth ramp, control borders, shadows. Nothing in this file states a color literally. The glyph below is an asset rather than a token, so it stays here. */ --nl-imgph:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 4h16v16H4z' fill='none' stroke='black' stroke-width='1.4'/%3E%3Ccircle cx='9' cy='9.5' r='1.6'/%3E%3Cpath d='M5.5 18l4.2-5 3 3.4 2.4-2.6 3.4 4.2z'/%3E%3C/svg%3E"); } body { -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } ::selection { background:var(--wp--preset--color--accent-tint); color:var(--wp--preset--color--accent-dark); } :where(a,button,input,select,textarea,summary,details,[tabindex]):focus-visible { outline:2px solid var(--wp--preset--color--accent); outline-offset:2px; border-radius:var(--wp--custom--radius-control); } .skip-link { position:absolute; left:-9999px; top:0; z-index:100000; background:var(--wp--preset--color--base); color:var(--wp--preset--color--accent-dark); padding:var(--wp--custom--space--md) var(--wp--custom--space--lg); border:2px solid var(--wp--preset--color--accent); border-radius:0 0 var(--wp--custom--radius) 0; font-weight:650; font-size:var(--wp--preset--font-size--small); } .skip-link:focus { left:0; } /* ============================================================================ 2. HEADER ========================================================================= */ .nl-siteheader { position:sticky; top:0; z-index:40; background:var(--wp--custom--header-bg); backdrop-filter:saturate(170%) blur(8px); border-bottom:1px solid var(--wp--preset--color--rule); padding-block:var(--wp--custom--space--base); } .admin-bar .nl-siteheader { top:32px; } /* 782, not 781, on purpose: this one matches WordPress's own rule for the admin bar growing to 46px, so the two have to switch at the same pixel. Layout rules of ours still use 781 to stay off that boundary. */ @media (max-width:782px){ .admin-bar .nl-siteheader { top:46px; } } /* The bar. The current page carries a rule under the item rather than extra weight, so the row does not reflow as you move around the site. mnl_nav_current() in functions.php adds nl-current and nl-ancestor, because the menu is built from custom links and core only marks links it knows to be posts. */ .nl-siteheader .wp-block-navigation { gap:var(--wp--custom--space--lg); font-size:var(--wp--preset--font-size--compact); font-weight:500; } .nl-siteheader .wp-block-navigation__container > li > a { display:inline-block; padding-block:var(--wp--custom--space--xxs); border-bottom:2px solid transparent; transition:color .15s, border-color .15s; } .nl-siteheader .wp-block-navigation__container > li > a:hover { border-bottom-color:var(--wp--preset--color--accent-tint); } .nl-siteheader .wp-block-navigation a.nl-current, .nl-siteheader .wp-block-navigation a.nl-ancestor { color:var(--wp--preset--color--contrast); } .nl-siteheader .wp-block-navigation__container > li > a.nl-current, .nl-siteheader .wp-block-navigation__container > li > a.nl-ancestor { border-bottom-color:var(--wp--preset--color--accent); } /* The dropdown sizes itself to its longest label rather than to a guessed width. */ .nl-siteheader .wp-block-navigation__submenu-container { background:var(--wp--preset--color--base); border:1px solid var(--wp--preset--color--rule); border-radius:var(--wp--custom--radius); box-shadow:var(--wp--custom--shadow--lg); padding:var(--wp--custom--space--xs) 0; min-width:14rem; align-items:flex-start; } /* The bar is justified right, which core passes down to the panel, so the alignment is set back here rather than left to inherit. */ .nl-siteheader .wp-block-navigation__submenu-container li { width:100%; } .nl-siteheader .wp-block-navigation__submenu-container li > a { padding:var(--wp--custom--space--xs) var(--wp--custom--space--base); font-size:var(--wp--preset--font-size--small); line-height:1.4; white-space:nowrap; border-left:2px solid transparent; transition:background .15s, border-color .15s, color .15s; width:100%; text-align:left; justify-content:flex-start; } .nl-siteheader .wp-block-navigation__submenu-container li > a:hover, .nl-siteheader .wp-block-navigation__submenu-container li > a:focus-visible, .nl-siteheader .wp-block-navigation__submenu-container li > a.nl-current { background:var(--wp--preset--color--surface); border-left-color:var(--wp--preset--color--accent); } /* The overlay menu. Keyed on .is-menu-open at any width, not inside the phone breakpoint, because the panel can be open at any width: open it on a phone, then rotate or widen the window and it stays open. When these rules were inside the breakpoint the desktop dropdown styling came back at 782px and drew a bordered, shadowed box around the second level while the panel was still open. Two things had to be fixed before the panel worked at all. The header carries a backdrop blur, and backdrop-filter makes an element the containing block for fixed descendants, so the panel opened inside the 56px header instead of filling the viewport. And the bar's layout is justified right, which carried into the panel and pushed the links to the far edge. The selectors are long on purpose: core sets padding:0 and width on overlay items four classes deep, so anything shorter loses. */ .nl-siteheader:has(.is-menu-open) { backdrop-filter:none; } .nl-siteheader .wp-block-navigation__responsive-container.is-menu-open { background:var(--wp--preset--color--base); padding:var(--wp--custom--space--lg) var(--wp--custom--space--sm) var(--wp--custom--space--xl); } .nl-siteheader .is-menu-open .wp-block-navigation__responsive-container-content, .nl-siteheader .is-menu-open .wp-block-navigation__container { align-items:stretch; gap:0; } /* Rows stretch to the panel rather than being set to 100% of it: the panel has padding, so a 100% row overflowed and put a scrollbar across the menu. Each item is a column so its submenu sits under the link and left aligned. */ .nl-siteheader .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content, .nl-siteheader .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container, .nl-siteheader .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item, .nl-siteheader .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content, .nl-siteheader .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { width:auto; align-self:stretch; box-sizing:border-box; } .nl-siteheader .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item { flex-direction:column; align-items:flex-start; justify-content:flex-start; } /* Top level: one row per link, a rule between them, a target for a thumb. */ .nl-siteheader .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item__content { display:block; padding:var(--wp--custom--space--xs); font-size:var(--wp--preset--font-size--lede); font-weight:600; border-bottom:1px solid var(--wp--preset--color--rule); border-radius:var(--wp--custom--radius-control); } /* Second level: a step in and a size down, no chrome and no rules of its own - with a divider on every row the panel read as thirteen equal things. */ .nl-siteheader .is-menu-open .wp-block-navigation__submenu-container { border:0; box-shadow:none; background:transparent; min-width:0; max-width:none; padding:0 0 0 var(--wp--custom--space--sm); } .nl-siteheader .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container { padding-left:var(--wp--custom--space--sm); } .nl-siteheader .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { padding:var(--wp--custom--space--xxs) var(--wp--custom--space--xs); font-size:var(--wp--preset--font-size--subhead); font-weight:450; color:var(--wp--preset--color--muted); border-bottom:0; white-space:normal; } /* Rollover, and where you are. The bar on the left is the marker here: the underline the desktop bar uses would be lost among the row dividers. */ .nl-siteheader .is-menu-open .wp-block-navigation-item__content:hover, .nl-siteheader .is-menu-open .wp-block-navigation-item__content:focus-visible { background:var(--wp--preset--color--surface); color:var(--wp--preset--color--accent-dark); } .nl-siteheader .is-menu-open a.nl-current, .nl-siteheader .is-menu-open a.nl-ancestor { color:var(--wp--preset--color--accent-dark); box-shadow:inset 3px 0 0 var(--wp--preset--color--accent); } .nl-siteheader .wp-block-navigation__responsive-container-open, .nl-siteheader .wp-block-navigation__responsive-container-close { padding:var(--wp--custom--space--sm); } /* Below 782px the bar would wrap under the site title, so the button takes over there rather than at WordPress's own 600px. Core shows the inline list and hides the button from 600px up, so both of those are undone in between, and the masthead is shorter to leave room for the panel. */ @media (max-width:781px) { .nl-siteheader { padding-block:var(--wp--custom--space--sm); } .nl-siteheader .wp-block-navigation__responsive-container-open:not(.always-shown) { display:flex; } .nl-siteheader .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display:none; } /* The desktop dropdown, when it is reachable at all at this width. */ .nl-siteheader .wp-block-navigation__submenu-container li > a { white-space:normal; } } /* ============================================================================ 3. PAGE RHYTHM ========================================================================= */ /* The editor has no .nl-main - the canvas root is .editor-styles-wrapper, with a .wp-block-post-content inside it - so the rules that decide what a writer sees name both contexts. Twin selectors rather than a duplicate block: one set of declarations, so the editor cannot drift away from the page. Front-end chrome (the sticky header, footer spacing, min-height) is deliberately not repeated. */ .nl-main { min-height:50vh; } .wp-site-blocks .nl-main { margin-top:var(--wp--custom--space--xxxl); } /* The canvas is wider than the page's content column, so the root is capped at the same width and centred. Without it the left-pinned content sits against the far edge of the editor and reads nothing like the page. 1200px is the wideSize in theme.json, which is also what the template's main group uses. */ .editor-styles-wrapper .wp-block-post-content.is-root-container, /* The title is not in the root container - the editor keeps it in a wrapper of its own - so it is capped and centred to the same width, or it starts at the canvas edge while the copy under it starts 100px in. */ .editor-styles-wrapper .editor-visual-editor__post-title-wrapper { max-width:1200px; margin-inline:auto; padding-inline:var(--wp--custom--space--base); } /* The editor centres constrained children, so the title needs the same left-hand pin the post-content children get; on the front end the template already does it. Without this the writer sees a centred title over left-aligned copy. */ .editor-styles-wrapper .wp-block-post-title { margin-left:0 !important; margin-right:auto !important; } .nl-main .wp-block-post-title, .nl-main .nl-areatitle, .nl-main .nl-pagetitle, .editor-styles-wrapper .wp-block-post-title { max-width:var(--wp--custom--measure-narrow); margin-bottom:var(--wp--custom--space--xl); text-wrap:balance; } .nl-main .wp-block-post-title::after, .nl-main .nl-areatitle::after, .nl-main .nl-pagetitle::after, .editor-styles-wrapper .wp-block-post-title::after { content:""; display:block; width:56px; height:4px; border-radius:var(--wp--custom--radius-control); /* The group colour where the title sits inside one - an area page, a paper - and the accent everywhere else, which is what --g falls back to. */ background:var(--g,var(--wp--preset--color--accent)); margin-top:var(--wp--custom--space--base); } .nl-main h2, .editor-styles-wrapper h2 { margin-top:0; margin-bottom:var(--wp--custom--space--base); letter-spacing:-0.016em; } /* ...but a section heading that follows content needs air. Only applies when something precedes it, so a heading opening a column stays flush. */ .nl-main * + h2, .editor-styles-wrapper * + h2 { margin-top:var(--wp--custom--space--xxl); } .nl-main h3, .editor-styles-wrapper h3 { margin-top:var(--wp--custom--space--xl); margin-bottom:var(--wp--custom--space--sm); } /* ...but that rhythm is for prose. A heading that opens a card starts flush, or the featured flag above it ends up further from its title than from the card edge. */ .nl-main .nl-pub-t, .nl-main .nl-tile-t, .nl-main .nl-newstitle { margin-top:0; } .nl-main p, .editor-styles-wrapper p { text-wrap:pretty; } .nl-main .wp-block-separator, .editor-styles-wrapper .wp-block-separator { /* Was margin:0, which only looked right because every page had a Spacer block on either side of it. The section break owns its own air now. */ margin:var(--wp--custom--space--xxl) 0; border:0; height:1px; background:var(--wp--preset--color--rule); opacity:1; max-width:100%; } .nl-main ul.wp-block-list, .editor-styles-wrapper ul.wp-block-list { padding-left:var(--wp--custom--space--base); } .nl-main ul.wp-block-list li, .editor-styles-wrapper ul.wp-block-list li { margin-bottom:var(--wp--custom--space--sm); } /* ------------------------------------------------------------------ page aside The site has three asides: the one beside a publication, the media note on the news page, and the reference column on Martha's page. They used to be a boxed panel, a bare paragraph and a bespoke label. One vocabulary now: a small caps label, small text, a hairline between sections, no container. */ .nl-side { font-size:var(--wp--preset--font-size--small); color:var(--wp--preset--color--muted); } .nl-side h2, .nl-side h3 { font-family:var(--wp--preset--font-family--sans); font-size:var(--wp--preset--font-size--label); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--wp--preset--color--faint); margin:0 0 var(--wp--custom--space--sm); } .nl-side > * + h2, .nl-side > * + h3 { margin-top:var(--wp--custom--space--lg); padding-top:var(--wp--custom--space--lg); border-top:1px solid var(--wp--preset--color--rule); } .nl-side p { margin:0 0 var(--wp--custom--space--sm); line-height:1.55; } .nl-side p:last-child { margin-bottom:0; } .nl-side ul.wp-block-list { list-style:none; margin:0; padding:0; } .nl-side ul.wp-block-list li { margin:0 0 var(--wp--custom--space--xxs); } .nl-main .wp-block-column > *, .editor-styles-wrapper .wp-block-column > * { max-width:var(--wp--custom--measure); } .nl-main .wp-block-column > .wp-block-group, .editor-styles-wrapper .wp-block-column > .wp-block-group { max-width:none; } /* ============================================================================ 4. FOOTER ========================================================================= */ /* Capped for readability, so the constrained layout would otherwise center it in the footer box. !important beats WordPress's own auto margins on that layout. */ .nl-sitefooter { border-top:1px solid var(--wp--preset--color--rule); padding-block:var(--wp--custom--space--xxxl); } .wp-site-blocks .nl-sitefooter { margin-top:var(--wp--custom--space--band); } .nl-sitefooter .nl-copyright { margin-top:var(--wp--custom--space--xl); } .nl-sitefooter .nl-disclaimer { max-width:var(--wp--custom--measure); margin-bottom:var(--wp--custom--space--lg); padding-left:var(--wp--custom--space--base); margin-left:0 !important; margin-right:auto !important; border-left:3px solid var(--wp--preset--color--violet); } @media (prefers-reduced-motion:reduce){ *,*::before,*::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } html { scroll-behavior:auto !important; } } @media print { .nl-siteheader, .nl-sitefooter { display:none !important; } } /* ============================================================================ 5. COMPONENTS Markup for these comes from the nelson-lab-core plugin's blocks; the styling lives here so every color and typeface resolves to a single theme.json token. ========================================================================= */ .nl { color: var(--wp--preset--color--contrast); font-family: var(--wp--preset--font-family--sans); font-feature-settings:'kern' 1,'liga' 1,'calt' 1; } /* Pathogen groups carry a color that repeats everywhere they appear: card top rules, publication rails, area chips, section markers. */ .nl-g-flu { --g:var(--wp--preset--color--accent); --g-soft:var(--wp--preset--color--accent-soft); --g-dark:var(--wp--preset--color--accent-dark); } .nl-g-cov { --g:var(--wp--preset--color--violet); --g-soft:var(--wp--preset--color--violet-soft); --g-dark:var(--wp--preset--color--violet-dark); } .nl-g-x { --g:var(--wp--preset--color--lime); --g-soft:var(--wp--preset--color--lime-soft); --g-dark:var(--wp--preset--color--lime-dark); } /* The fallback for anything with no group of its own. In :where() so it carries no weight: an area page root is class="nl nl-areapage nl-g-cov", and a plain .nl rule of equal specificity declared after .nl-g-cov used to win, which turned the coronavirus and other-systems pages accent-teal from the root down - every descendant that inherited --g rather than setting it. */ :where(.nl) { --g:var(--wp--preset--color--accent); --g-soft:var(--wp--preset--color--accent-soft); --g-dark:var(--wp--preset--color--accent-dark); } .nl-sr { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; margin:-1px; padding:0; border:0; } .nl *:focus-visible { outline:2px solid var(--wp--preset--color--accent); outline-offset:2px; border-radius:var(--wp--custom--radius-control); } /* ---------------------------------------------------------------- type */ /* One lede rule. There were two, identical but for a margin, 74 lines apart. */ .nl-lede { font-family:var(--wp--preset--font-family--serif); font-size:var(--wp--preset--font-size--lede); line-height:1.6; color:var(--wp--preset--color--contrast-soft); max-width:var(--wp--custom--measure); margin:0 0 var(--wp--custom--space--xl); text-wrap:pretty; } .nl-h2 { font-family:var(--wp--preset--font-family--serif); font-size:var(--wp--preset--font-size--x-large); font-weight:650; letter-spacing:-0.014em; line-height:1.25; margin:var(--wp--custom--space--xxxl) 0 var(--wp--custom--space--base); padding-top:var(--wp--custom--space--base); border-top:2px solid var(--g); display:flex; align-items:baseline; gap:var(--wp--custom--space--sm); } /* Vertical padding on a pill is in rem, never em. See the note above .nl-tag: an em of the meta size is a fractional pixel, and a fractional pixel splits unevenly above and below the text. */ .nl-h2n { font-size:var(--wp--preset--font-size--meta); font-weight:500; line-height:1.5; color:var(--g-dark); background:var(--g-soft); border-radius:var(--wp--custom--radius-pill); padding:.25rem .65em .1875rem; } .nl-notice { padding:var(--wp--custom--space--lg); background:var(--wp--preset--color--surface); border:1px dashed var(--wp--custom--control--border); border-radius:var(--wp--custom--radius); color:var(--wp--preset--color--muted); } .nl-empty { padding:var(--wp--custom--space--xxxl) 0; color:var(--wp--preset--color--muted); font-size:var(--wp--preset--font-size--medium); } /* ---------------------------------------------------------------- tags Every pill on the site is the same object - one line of meta text in a rounded box - so they share a line height of 1.5 and the same whole-pixel padding: 4px above the text, 3px below. Two reasons for those numbers. The padding is in rem rather than em because .2em of the meta size is 2.496px, and a browser cannot draw half a pixel, so it rounded the space above and the space below in opposite directions. And the extra pixel on top is the optical correction: a line box centres the font's ascent and descent, which for Inter leaves about three quarters of a pixel more room under the baseline than over the capitals, so evenly padded text reads high. Horizontal padding stays in em, where a fraction of a pixel is invisible. */ .nl-tag { display:inline-flex; align-items:center; gap:.3em; font-size:var(--wp--preset--font-size--meta); line-height:1.5; font-weight:550; padding:.25rem .65em .1875rem; border-radius:var(--wp--custom--radius-pill); background:var(--g-soft); color:var(--g-dark); border:1px solid color-mix(in srgb, var(--g) 22%, transparent); /* The row wraps between pills, so a pill only breaks internally when it cannot fit a line on its own. It used to be nowrap, which pushed the longest area name past the right edge of a phone and scrolled the whole page sideways. */ max-width:100%; } /* One featured list, so the star is redundant on every card in it. */ .nl-list-nofeat .nl-flag { display:none; } .nl-tag-quiet { background:var(--wp--preset--color--surface); color:var(--wp--preset--color--muted); border-color:var(--wp--preset--color--rule); font-weight:450; } .nl-meta-row { display:flex; gap:var(--wp--custom--space--xxs); flex-wrap:wrap; margin:var(--wp--custom--space--sm) 0 0; } .nl-flag { display:inline-flex; align-items:center; gap:.35em; font-size:var(--wp--preset--font-size--label); font-weight:700; letter-spacing:.07em; text-transform:uppercase; color:var(--wp--preset--color--flag); margin:0 0 var(--wp--custom--space--xxxs); line-height:1.2; } .nl-flag span { color:var(--wp--preset--color--flag); font-size:var(--wp--preset--font-size--small); } /* Research area header: the title on the left, the description on the right. The block renders the title so both can sit in one grid; the template's own title is removed in the theme's functions.php rather than hidden here. */ .nl-areahead { display:grid; grid-template-columns:1fr; gap:var(--wp--custom--space--xs) var(--wp--custom--space--xxxl); align-items:start; margin-bottom:var(--wp--custom--space--xxl); } .nl-areahead .nl-areatitle { margin-top:0; margin-bottom:0; } .nl-areahead .nl-lede { margin:0; } @media (min-width:900px) { .nl-areahead { grid-template-columns:minmax(0,7fr) minmax(0,9fr); } } /* Featured publications sit in a box rather than between two rules, so the heading inside it drops the rule it carries everywhere else. */ .nl-featured { margin:0 0 var(--wp--custom--space--xxl); padding:var(--wp--custom--space--lg) var(--wp--custom--space--lg) var(--wp--custom--space--lg); background:var(--wp--preset--color--surface); border:1px solid var(--wp--preset--color--rule); border-radius:var(--wp--custom--radius); } .nl-featured .nl-h2 { margin:0; padding-top:0; border-top:0; } /* Smaller than a section heading: on the publications page this box sits under a page title and a filter bar, and a full-size heading competed with both. */ .nl-h2-sm { font-size:var(--wp--preset--font-size--lede); } .nl-main .nl-featbox { margin-top:var(--wp--custom--space--xl); } .nl-main #nl-allhead { margin-top:0; } .nl-featured .nl-list { margin-top:var(--wp--custom--space--sm); } /* ---------------------------------------------------------------- publications */ .nl-list { margin-top:var(--wp--custom--space--base); } .nl-yeargroup { margin-bottom:var(--wp--custom--space--xxl); } .nl-yr { font-size:var(--wp--preset--font-size--meta); font-weight:700; letter-spacing:.1em; color:var(--wp--preset--color--faint); margin:0 0 var(--wp--custom--space--base); display:flex; align-items:center; gap:var(--wp--custom--space--base); font-variant-numeric:tabular-nums; } .nl-yr::after { content:""; flex:1; height:1px; background:var(--wp--preset--color--rule); } .nl-yr span { color:var(--wp--preset--color--violet); font-size:var(--wp--preset--font-size--medium); font-weight:500; } .nl-pub { display:flex; gap:var(--wp--custom--space--base); padding:var(--wp--custom--space--base) 0 var(--wp--custom--space--base); border-bottom:1px solid var(--wp--preset--color--rule); } .nl-yritems > .nl-pub:last-child { border-bottom:0; } .nl-pub-rail { flex:none; width:3px; border-radius:var(--wp--custom--radius-control); background:var(--g); opacity:.55; align-self:stretch; } /* Illustration mark. Decorative on purpose: it repeats what the citation already says, so it carries an empty alt and the subject stays in the data. */ .nl-pub-fig, .nl-areafig { flex:none; width:72px; height:72px; border-radius:var(--wp--custom--radius-control); object-fit:cover; /* One tone across the set: twenty-odd photographers, one contrast curve, so the marks read as a family rather than as a row of unrelated pictures. Shared with the research area list on the home page, which draws from the same library. */ filter:saturate(.85) contrast(1.05); } .nl-pub-fig { background:var(--wp--preset--color--surface); border:1px solid var(--wp--preset--color--rule); } @media (max-width:600px) { .nl-pub-fig { width:56px; height:56px; } } .nl-pub-body { min-width:0; flex:1; } .nl-pub-t { font-family:var(--wp--preset--font-family--serif); font-size:var(--wp--preset--font-size--subhead); font-weight:600; line-height:1.4; margin:0 0 var(--wp--custom--space--xxs); letter-spacing:-0.006em; } .nl-pub-t a { color:var(--wp--preset--color--contrast); text-decoration:none; background-image:linear-gradient(var(--g),var(--g)); background-size:0 1.5px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .18s; } .nl-pub-au { font-size:var(--wp--preset--font-size--small); color:var(--wp--preset--color--muted); line-height:1.55; margin:0 0 var(--wp--custom--space--xxs); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .nl-pub-jr { font-size:var(--wp--preset--font-size--small); color:var(--wp--preset--color--faint); margin:0; } .nl-journal { color:var(--wp--preset--color--muted); font-weight:600; font-style:italic; } .nl-dot { margin:0 .4em; opacity:.55; } .nl-pub-links { display:flex; gap:var(--wp--custom--space--base); row-gap:var(--wp--custom--space--xxs); flex-wrap:wrap; margin:var(--wp--custom--space--sm) 0 0; font-size:var(--wp--preset--font-size--meta); } /* 2px of vertical padding takes these links to a 24px tall target, the minimum in WCAG 2.2. Section 508 points at 2.0, which has no target-size rule, so this is for thumbs and imprecise pointers rather than for compliance. */ .nl-pub-links a { color:var(--wp--preset--color--accent); text-decoration:none; font-weight:550; padding-block:2px; } .nl-pub-links a::before { content:"↗"; margin-right:.25em; font-size:.85em; opacity:.7; } .nl-pub-links a:hover { color:var(--wp--preset--color--accent-dark); text-decoration:underline; } /* Abstract disclosure. The +/- glyph is driven off aria-expanded so the button's visual state and its accessible state can never disagree. The panel ships expanded and is collapsed by nl.js, so the text survives without JavaScript. */ /* ---------------------------------------------------------------- single publication The record gets a page of its own, so the type is set for reading rather than for scanning a list: the abstract runs at 1.06rem against the 0.82rem it had inside a citation. The margin holds what this paper is related to. */ .nl-single { display:grid; grid-template-columns:minmax(0,1fr) var(--wp--custom--aside); gap:var(--wp--custom--space--xxxl); align-items:start; } .nl-single.is-solo { grid-template-columns:minmax(0,1fr); } .nl-single-main { min-width:0; max-width:var(--wp--custom--measure); } .nl-crumb { font-size:var(--wp--preset--font-size--meta); margin:0 0 var(--wp--custom--space--base); } .nl-crumb-end { margin:var(--wp--custom--space--xxl) 0 0; padding-top:var(--wp--custom--space--base); border-top:1px solid var(--wp--preset--color--rule); } .nl-crumb a { color:var(--wp--preset--color--muted); text-decoration:none; } .nl-crumb a::before { content:"\2190\00a0"; } .nl-crumb a:hover, .nl-crumb a:focus-visible { color:var(--wp--preset--color--accent-dark); text-decoration:underline; } .nl-main .nl-single-t { font-family:var(--wp--preset--font-family--serif); font-size:var(--wp--preset--font-size--x-large); line-height:1.18; letter-spacing:-0.018em; margin:0 0 var(--wp--custom--space--base); text-wrap:pretty; } /* The byline and the journal line are one block of record detail, so they take one size: subhead, the step the scale already had between compact and medium. The authors were a step below it and the journal a step above, which read as two unrelated lines. */ .nl-single-au { font-size:var(--wp--preset--font-size--subhead); line-height:1.6; color:var(--wp--preset--color--muted); margin:0 0 var(--wp--custom--space--sm); } .nl-single-jr { font-size: var(--wp--preset--font-size--subhead); margin: 0 0 var(--wp--custom--space--lg); line-height: 1.35; } /* Inline citation line: the dots sit in normal text flow, so the collapsed whitespace already spaces them - keep the margin small. */ .nl-single-jr .nl-dot { margin: 0 0.1em; } .nl-single-jr .nl-journal { font-weight:600; } /* Area and network pills, in the record rather than the margin. They are links here, unlike the pills on a citation, so the underline is suppressed. */ .nl-single-tags { display:flex; flex-wrap:wrap; gap:var(--wp--custom--space--xxs); margin:0 0 var(--wp--custom--space--base); } /* Identifiers on one line, each printed in full. The label does the work a heading used to, so there is no heading. */ .nl-single-ids { display:flex; flex-wrap:wrap; gap:var(--wp--custom--space--xs); align-items:baseline; margin:0 0 var(--wp--custom--space--xl); font-size:var(--wp--preset--font-size--compact); } .nl-idlabel { color:var(--wp--preset--color--faint); } /* The PDF link is an action, so it reads as one: the mark, then the words, in link colour, deepening together on hover. */ /* Not a flex box. The identifiers line aligns its items on the baseline, and a flex box hands up the baseline of its first child - here the icon, which has none, so the browser used its bottom edge and the words sat several pixels below DOI and PubMed ID. As plain inline text the words keep their own baseline and the icon is nudged onto it. */ .nl-pdf { white-space:nowrap; } .nl-pdf .nl-ico { margin-right:.35em; vertical-align:-.14em; } /* ---------------------------------------------------------------- link kinds Four behaviors, one block each. A component joins the selector list for the kind it wants rather than writing its own hover, which is how these drifted into eight slightly different underlines in the first place. title - a headline that happens to be a link. Underline grows from nothing, color deepens to the pathogen color where one is in scope. body - a link inside running text or a row of links. Accent, underline on hover, the ordinary web convention. pill - a tag or chip. Never underlines; the shape carries the affordance. quiet - navigation and metadata. Muted until hovered, never underlines. */ .nl-pub-t a, .nl-newstitle a, .nl-aside-pubs a, .nl-tile-t a, .nl-mcard-name a, .nl-alum-links a, .nl-single-t a, .nl-arealist a span { color:var(--wp--preset--color--contrast); text-decoration:none; background-image:linear-gradient(var(--g, var(--wp--preset--color--accent)), var(--g, var(--wp--preset--color--accent))); background-size:0 1.5px; background-repeat:no-repeat; background-position:0 100%; transition:background-size .18s; } .nl-pub-t a:hover, .nl-pub-t a:focus-visible, .nl-newstitle a:hover, .nl-newstitle a:focus-visible, .nl-aside-pubs a:hover, .nl-aside-pubs a:focus-visible, .nl-tile-t a:hover, .nl-tile-t a:focus-visible, .nl-single-t a:hover, .nl-single-t a:focus-visible, .nl-alum-links a:hover, .nl-alum-links a:focus-visible, .nl-mcard:hover .nl-mcard-name a, .nl-mcard-name a:focus-visible, .nl-arealist a:hover span, .nl-arealist a:focus-visible span { color:var(--g-dark, var(--wp--preset--color--accent-dark)); background-size:100% 1.5px; } .nl-pub-links a, .nl-side a, .nl-crumb a, .nl-single-ids a, .nl-newspaper a, .nl-sitefooter a { color:var(--wp--preset--color--accent); text-decoration:none; } .nl-pub-links a:hover, .nl-pub-links a:focus-visible, .nl-side a:hover, .nl-side a:focus-visible, .nl-crumb a:hover, .nl-crumb a:focus-visible, .nl-single-ids a:hover, .nl-single-ids a:focus-visible, .nl-newspaper a:hover, .nl-newspaper a:focus-visible, .nl-sitefooter a:hover, .nl-sitefooter a:focus-visible { color:var(--wp--preset--color--accent-dark); text-decoration:underline; } .nl-single-tags a { text-decoration:none; } .nl-single-tags a:hover, .nl-single-tags a:focus-visible { border-color:var(--wp--preset--color--accent); background:var(--wp--preset--color--accent-soft); color:var(--wp--preset--color--accent-dark); } /* A research area pill is a filter control. It keeps its group colour on hover — deepened text, a solid border — rather than reverting to the generic accent, because the colour is what identifies the area. */ /* font:inherit is here to strip the browser's own button type, but it is a shorthand: it was also resetting the weight and the line height the pill sets two rules up, so the same pill rendered at 400/1.65 as a link and 550/1.5 as a button - a pixel and a half taller, and visibly lighter, in the same row. The two properties the pill owns are restated rather than inherited. */ a.nl-tag, button.nl-tag { text-decoration:none; cursor:pointer; font:inherit; font-size:var(--wp--preset--font-size--meta); line-height:1.5; font-weight:550; transition:background .15s, border-color .15s, color .15s; } a.nl-tag:hover, a.nl-tag:focus-visible, button.nl-tag:hover, button.nl-tag:focus-visible { /* The pill already sits on its group's soft tint, so hover has to go a step deeper than that to register. 22% of the group colour on white clears 4.5:1 against the dark text in all three groups; the border goes solid. */ background:color-mix(in srgb, var(--g) 22%, var(--wp--preset--color--base)); border-color:var(--g); color:var(--g-dark); } .nl-siteheader .wp-block-navigation a { color:var(--wp--preset--color--muted); text-decoration:none; } .nl-siteheader .wp-block-navigation a:hover, .nl-siteheader .wp-block-navigation a:focus-visible { color:var(--wp--preset--color--accent-dark); } /* Sizes, the current-page rule and the dropdown live in section 2. */ /* ---------------------------------------------------------------- home page Research areas as a list in a column beside the introduction: group heading, area names, nothing else. The cards with their descriptions and counts still run on the Research page, where there is room to read them. */ .nl-arealist { display:flex; flex-direction:column; gap:var(--wp--custom--space--lg); } /* --g is the pathogen colour, set once on .nl-g-* near the top of this file and used by every component that carries a group. This rule had its own parallel set of variables, two of which were the wrong colour. */ .nl-agroup { padding-left:var(--wp--custom--space--md); border-left:3px solid var(--g, var(--wp--preset--color--rule)); } .nl-main .nl-agrouplabel, .editor-styles-wrapper .nl-agrouplabel { font-family:var(--wp--preset--font-family--sans); font-size:var(--wp--preset--font-size--label); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--wp--preset--color--faint); margin:0 0 var(--wp--custom--space--sm); } .nl-arealist ul { list-style:none; margin:0; padding:0; } .nl-arealist li + li { margin-top:var(--wp--custom--space--sm); } /* Each area is a picture and a name on one line. The picture comes from the illustration library, cropped square there, so it only needs sizing here. */ .nl-arealist a { display:flex; align-items:center; gap:var(--wp--custom--space--md); font-family:var(--wp--preset--font-family--serif); font-size:var(--wp--preset--font-size--lede); line-height:1.3; text-decoration:none; } /* The hero image slot is an empty Group block, not an Image block. An Image block with no picture chosen is dropped entirely by core on render, which is why nothing appeared here before. A group survives being empty, so it can hold the space and draw a placeholder; add an Image block inside it and :empty stops matching, the dashes go, and the picture fills the frame. */ .nl-main .nl-heroph, .editor-styles-wrapper .nl-heroph { margin:0 0 var(--wp--custom--space--xl); aspect-ratio:16 / 10; border-radius:var(--wp--custom--radius); overflow:hidden; } .nl-heroph img { width:100%; height:100%; object-fit:cover; display:block; } .nl-heroph > figure, .nl-heroph > .wp-block-image { margin:0; height:100%; } .nl-heroph:empty { display:grid; place-items:center; color:var(--wp--preset--color--rule); background:var(--wp--preset--color--surface); border:1px dashed var(--wp--preset--color--rule); } .nl-heroph:empty::after { content:""; width:22%; max-width:110px; aspect-ratio:1 / 1; background:currentColor; -webkit-mask:var(--nl-imgph) center / contain no-repeat; mask:var(--nl-imgph) center / contain no-repeat; } /* Two columns on the home page, areas on the right. */ .nl-home { gap:var(--wp--custom--space--xxxl); align-items:flex-start; } /* The research areas heading sits beside the page title rather than under it, so it steps down a size: at the page-title size the two competed. */ .nl-main .nl-home h2, .editor-styles-wrapper .nl-home h2 { font-size:var(--wp--preset--font-size--large); } .nl-home .nl-lede { margin-bottom:var(--wp--custom--space--xl); } .nl-main .nl-single-h, .editor-styles-wrapper .nl-single-h { font-size:var(--wp--preset--font-size--label); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--wp--preset--color--faint); margin:var(--wp--custom--space--xl) 0 var(--wp--custom--space--md); font-family:var(--wp--preset--font-family--sans); } /* Reads as the page heading, matching the Publications page, so a paper opens with the same title treatment as the list it came from. */ .nl-main .nl-pagetitle { font-family:var(--wp--preset--font-family--serif); font-size:var(--wp--preset--font-size--xx-large); font-weight:600; line-height:1.06; letter-spacing:-0.018em; color:var(--wp--preset--color--contrast); margin-top:0; } /* No measure of its own: .nl-single-main already holds the column to 66ch, and a second ch-based cap here would narrow the paragraph every time the type got smaller. */ .nl-single-abs p { font-size:var(--wp--preset--font-size--compact); line-height:1.7; margin:0 0 var(--wp--custom--space--base); text-wrap:pretty; } .nl-single-abs p:last-child { margin-bottom:0; } .nl-single-noabs { font-size:var(--wp--preset--font-size--medium); color:var(--wp--preset--color--muted); font-style:italic; margin:var(--wp--custom--space--lg) 0 0; } .nl-single-aside { position:sticky; top:1.5rem; } .nl-main .nl-aside-h, .editor-styles-wrapper .nl-aside-h { font-size:var(--wp--preset--font-size--label); font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--wp--preset--color--faint); margin:0 0 var(--wp--custom--space--sm); font-family:var(--wp--preset--font-family--sans); } .nl-single-aside > .nl-aside-h ~ .nl-aside-h, .nl-single-aside > * + .nl-aside-h { margin-top:var(--wp--custom--space--xl); } .nl-aside-pubs { list-style:none; margin:0; padding:0; } .nl-aside-pubs li { padding:var(--wp--custom--space--sm) 0; border-top:1px solid var(--wp--preset--color--rule); } .nl-aside-pubs li:first-child { border-top:0; padding-top:0; } .nl-aside-pubs a { display:block; font-family:var(--wp--preset--font-family--serif); font-size:var(--wp--preset--font-size--small); line-height:1.35; color:var(--wp--preset--color--contrast); text-decoration:none; } .nl-aside-yr { display:block; font-size:var(--wp--preset--font-size--label); color:var(--wp--preset--color--faint); margin-top:var(--wp--custom--space--xxxs); } .nl-aside-plain { display:block; font-family:var(--wp--preset--font-family--serif); font-size:var(--wp--preset--font-size--small); line-height:1.35; } /* PlumX sizes its own widget and ignores data-width, so this takes the width back. Everything needs !important because their root carries an inline min-width of 310px; the markup asks for data-hide-print, which drops the large plum print graphic and accounts for most of the rest. If PlumX ever changes these class names the overrides simply stop matching and the widget goes back to overflowing, which is visible rather than broken. */ .nl-metrics { margin-top:var(--wp--custom--space--xl); max-width:100%; overflow:hidden; } .nl-metrics > div, .nl-metrics > a { max-width:100%; } .nl-metrics img, .nl-metrics svg { max-width:100%; height:auto; } .nl-metrics .PlumX-Details { min-width:0 !important; width:100% !important; } .nl-metrics .PlumX-Details .ppd-container, .nl-metrics .PlumX-Details .ppd-rows, .nl-metrics .PlumX-Details .ppd-row { min-width:0 !important; width:100% !important; } .nl-metrics .PlumX-Details .ppd-box { width:100% !important; min-width:0 !important; box-sizing:border-box !important; } .nl-metrics .PlumX-Details li { width:auto !important; min-width:0 !important; } /* The widget colors its category headings for its own palette, which lands at 1.7:1 on white for Mentions. The colored rule above each box keeps the coding. */ .nl-metrics .PlumX-Details .ppd-title { color:var(--wp--preset--color--muted) !important; } /* Their type runs a couple of points larger than the rest of this column. */ .nl-metrics .PlumX-Details, .nl-metrics .PlumX-Details * { font-size:var(--wp--preset--font-size--meta) !important; line-height:1.45 !important; } .nl-list-plain .nl-pub:last-child { border-bottom:0; } /* Hiding, not re-rendering: the reason filtering no longer flashes. */ .is-hidden { display:none !important; } .nl-animate .nl-pub, .nl-animate .nl-newsitem { animation:nl-in .22s ease both; } @keyframes nl-in { from { opacity:0; transform:translateY(3px); } to { opacity:1; transform:none; } } /* ---------------------------------------------------------------- filters */ .nl-filters { background:var(--wp--preset--color--surface); border:1px solid var(--wp--preset--color--rule); border-radius:var(--wp--custom--radius); padding:var(--wp--custom--space--base) var(--wp--custom--space--lg); margin:var(--wp--custom--space--xl) 0 var(--wp--custom--space--lg); } /* Every field shares the row rather than holding a fixed width, so Search keeps its place on the line instead of wrapping once a fifth menu appears. Search takes a double share; the checkbox takes only what it needs. */ .nl-frow { display:flex; gap:var(--wp--custom--space--md); flex-wrap:wrap; align-items:flex-end; } .nl-field { margin:0; display:flex; flex-direction:column; flex:1 1 150px; min-width:0; } .nl-field-grow { flex:2 1 200px; } .nl-field-check { flex:0 0 auto; justify-content:flex-end; } .nl-field select, .nl-field input[type=search], .nl-field .nl-combo { width:100%; } .nl-field label { font-size:var(--wp--preset--font-size--label); color:var(--wp--preset--color--faint); font-weight:640; letter-spacing:.03em; margin-bottom:var(--wp--custom--space--xxs); } .nl-filters select, .nl-filters input[type=search] { font:inherit; font-size:var(--wp--preset--font-size--small); padding:var(--wp--custom--space--xs) var(--wp--custom--space--sm); border:1px solid var(--wp--custom--control--border); border-radius:var(--wp--custom--radius-control); background:var(--wp--preset--color--base); color:var(--wp--preset--color--contrast); min-width:0; max-width:100%; } .nl-filters select:hover, .nl-filters input[type=search]:hover { border-color:var(--wp--custom--control--border-strong); } /* Searchable country combobox. The real