/* ========================================================================= BioPredictive Library — shared stylesheet for ALL mockups ------------------------------------------------------------------------- This file is the canonical source for every design token used in the mockups. The implementation team copies the :root block verbatim into the production stylesheet (or Flask static asset). Class names follow a flat BEM convention: .block, .block__element, .block--modifier. Mobile preview: every page-level mockup has a `.mobile.html` twin whose carries the `vp-mobile` class. The mobile styles trigger on either that class OR the (max-width: 768px) media query, so the same stylesheet demonstrates desktop and mobile without a separate file. ========================================================================= */ /* ------------------------------------------------------------------------- 0. Alpine.js: hide x-cloaked elements until Alpine boots. Without this rule modals / drawers flash visible on page load AND, if Alpine fails to start, remain stuck open (the prod symptom that surfaced as "cart drawer won't close, staff modal underneath"). ------------------------------------------------------------------------- */ [x-cloak] { display: none !important; } /* ------------------------------------------------------------------------- 1. Design tokens (CSS custom properties) ------------------------------------------------------------------------- */ :root { /* ── Brand palette (source: BioPredictive design system) ───────────────── */ --bp-navy-900: #07283A; --bp-navy-800: #0B3A52; --bp-navy-700: #134C6B; --bp-blue-700: #2E7AAA; --bp-blue-600: #56A3D2; --bp-blue-500: #7BB8DD; --bp-blue-200: #C0DDEE; --bp-blue-100: #DDECF6; --bp-blue-050: #EEF6FB; --bp-teal-600: #1F8A85; --bp-teal-400: #76C5C4; --bp-cyan-100: #E2F2F2; /* Diagnostic ramp — reserved for liver-staging visualisations only */ --bp-stage-F0: #5BA85B; --bp-stage-F1: #A6C84B; --bp-stage-F2: #E8B23E; --bp-stage-F3: #DD8030; --bp-stage-F4: #C0392B; /* Semantic / feedback (DS) */ --bp-success: #2E8B57; --bp-warning: #DA8B2C; --bp-danger: #C0392B; --bp-info: #56A3D2; /* Neutrals (DS) */ --bp-white: #FFFFFF; --bp-paper: #FAFBFC; --bp-bg-subtle: #F4F7F9; --bp-bg-soft: #EAF0F4; --bp-border: #DCE4E9; --bp-border-strong:#B7C5CE; --bp-ink: #0B3A52; --bp-ink-muted: #4F6573; --bp-ink-soft: #7E8F9A; --bp-ink-on-dark: #E6EEF3; /* Semantic roles (DS) */ --fg-1: var(--bp-ink); --fg-2: var(--bp-ink-muted); --fg-3: var(--bp-ink-soft); --fg-on-brand: var(--bp-white); --fg-link: var(--bp-blue-700); /* darkened to AA on white (4.51:1) */ --fg-link-hover: var(--bp-navy-700); --bg-page: var(--bp-white); --bg-alt: var(--bp-bg-subtle); --bg-card: var(--bp-white); --bg-brand: var(--bp-navy-800); --bg-brand-soft: var(--bp-blue-050); --border-1: var(--bp-border); --border-2: var(--bp-border-strong); /* ── Tag families (source: proposed — DS defines a primary blue accent but no second-family tag pair) ─────────────────────────────────────── */ --tag-test-bg: var(--bp-blue-050); --tag-test-fg: var(--bp-blue-700); /* 4.51:1 on bg, AA pass */ --tag-test-bd: var(--bp-blue-200); --tag-disease-bg: var(--bp-cyan-100); --tag-disease-fg: #146A66; /* darkened teal — 5.62:1 on cyan-100, AA pass */ --tag-disease-bd: var(--bp-teal-400); --tag-neutral-bg: var(--bp-bg-soft); --tag-neutral-fg: var(--bp-ink-muted); --tag-neutral-bd: var(--bp-border); /* ── Badges ──────────────────────────────────────────────────────────── */ --badge-key-bg: #FDF6E9; /* pale cream — quieter than amber */ --badge-key-fg: var(--bp-navy-800); /* navy text, AAA on cream */ --badge-key-icon: #B07A1F; /* amber star icon */ --badge-type-bg: var(--bp-blue-100); --badge-type-fg: var(--bp-navy-800); /* 11.6:1 on bg, AAA pass */ /* ── Typography (DS) ─────────────────────────────────────────────────── */ --font-sans: 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif; --font-serif: 'Helvetica Neue', 'HelveticaNeue', Helvetica, Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --text-xs: 12px; --text-sm: 14px; --text-base:16px; --text-md: 17px; --text-lg: 19px; --text-xl: 22px; --text-2xl: 28px; --text-3xl: 36px; --text-4xl: 46px; --text-5xl: 58px; --leading-tight: 1.15; --leading-snug: 1.3; --leading-base: 1.55; --leading-loose: 1.7; --tracking-tight: -0.01em; --tracking-base: 0; --tracking-wide: 0.04em; --tracking-caps: 0.08em; /* ── Spacing (DS) ────────────────────────────────────────────────────── */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* ── Radii / shadows / motion (DS) ──────────────────────────────────── */ --radius-0: 0; --radius-1: 2px; --radius-2: 4px; --radius-3: 6px; --radius-4: 8px; --radius-5: 12px; --radius-pill: 999px; --shadow-1: 0 1px 2px rgba(11,58,82,0.06), 0 1px 1px rgba(11,58,82,0.04); --shadow-2: 0 2px 6px rgba(11,58,82,0.08), 0 1px 2px rgba(11,58,82,0.05); --shadow-3: 0 8px 24px rgba(11,58,82,0.10), 0 2px 6px rgba(11,58,82,0.06); --shadow-4: 0 20px 48px rgba(11,58,82,0.14), 0 6px 16px rgba(11,58,82,0.08); --ring-focus: 0 0 0 3px rgba(86,163,210,0.45); /* nudged up from 0.35 for AA visibility */ --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in: cubic-bezier(0.6, 0.0, 0.8, 0.3); --ease-std: cubic-bezier(0.4, 0.0, 0.2, 1); --dur-fast: 120ms; --dur-base: 200ms; --dur-slow: 320ms; /* ── Layout (DS) ─────────────────────────────────────────────────────── */ --container-narrow: 720px; --container-base: 1080px; --container-wide: 1280px; --nav-height: 76px; /* ── Z-index scale (source: proposed — no DS value) ─────────────────── */ --z-base: 1; --z-sticky: 100; --z-header: 200; --z-dropdown: 300; --z-drawer: 400; --z-modal-backdrop: 500; --z-modal: 510; --z-toast: 600; /* ── Breakpoints (source: proposed — no DS value). Reference values for media-query authoring; CSS cannot read these. */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; /* ── Loading / skeleton (source: proposed) ──────────────────────────── */ --skeleton-base: var(--bp-bg-soft); --skeleton-shine: var(--bp-bg-subtle); } /* ------------------------------------------------------------------------- 2. Reset / base ------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font-sans); font-size: var(--text-base); line-height: var(--leading-base); color: var(--fg-1); background: var(--bp-paper); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } img, svg { max-width: 100%; vertical-align: middle; } button { font: inherit; cursor: pointer; } :focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-2); } .icon { width: 1em; height: 1em; flex: none; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Skip link — keyboard users land on this first */ .skip-link { position: absolute; left: -9999px; background: var(--bp-navy-800); color: #fff; padding: var(--space-3) var(--space-4); border-radius: var(--radius-3); z-index: var(--z-toast); } .skip-link:focus { left: var(--space-3); top: var(--space-3); } /* ------------------------------------------------------------------------- 3. Typography (mirrors DS .bp-* utilities) ------------------------------------------------------------------------- */ h1, h2, h3, h4 { margin: 0; color: var(--bp-navy-800); font-weight: 600; letter-spacing: var(--tracking-tight); } h1 { font-size: var(--text-3xl); line-height: var(--leading-tight); } h2 { font-size: var(--text-2xl); line-height: var(--leading-snug); } h3 { font-size: var(--text-xl); line-height: var(--leading-snug); } h4 { font-size: var(--text-lg); line-height: var(--leading-snug); } p { margin: 0 0 var(--space-3); } a { color: var(--fg-link); text-decoration: none; border-bottom: 1px solid rgba(86,163,210,0.30); transition: color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std); } a:hover { color: var(--fg-link-hover); border-bottom-color: var(--fg-link-hover); } a.bare { border-bottom: 0; } .eyebrow { font-size: var(--text-xs); font-weight: 600; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--bp-teal-600); margin: 0 0 var(--space-2); } .muted { color: var(--fg-2); } .soft { color: var(--fg-3); } /* ------------------------------------------------------------------------- 4. Layout primitives ------------------------------------------------------------------------- */ .container { width: 100%; max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--space-6); } .container--narrow { max-width: var(--container-narrow); } .container--base { max-width: var(--container-base); } .divider { height: 1px; background: var(--bp-border); border: 0; margin: 0; } /* ------------------------------------------------------------------------- 5. Header ------------------------------------------------------------------------- */ .site-header { position: sticky; top: 0; z-index: var(--z-header); background: var(--bp-white); border-bottom: 1px solid var(--bp-border); height: var(--nav-height); display: flex; align-items: center; } .site-header__inner { width: 100%; max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--space-6); display: flex; align-items: center; gap: var(--space-5); } .site-header__brand { display: inline-flex; align-items: center; gap: var(--space-3); border: 0; padding: 0; } .site-header__brand img { height: 48px; width: auto; display: block; } .site-header__tagline { display: inline-block; font-size: var(--text-xs); color: var(--fg-3); border-left: 1px solid var(--bp-border); padding-left: var(--space-3); margin-left: var(--space-1); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: 600; } .site-header__spacer { flex: 1; } .site-header__actions { display: flex; align-items: center; gap: var(--space-2); } .header-link { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--fg-2); border: 0; background: transparent; border-radius: var(--radius-3); transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std); } .header-link:hover { color: var(--bp-navy-800); background: var(--bp-bg-subtle); } .header-link .icon { width: 16px; height: 16px; } /* Quiet variant — used for low-priority entries like Staff access. Icon-only by default; label only shown to assistive tech. Sits in the row without competing with the primary external links. */ .header-link--quiet { color: var(--fg-3); padding: var(--space-2); border-radius: var(--radius-pill); } .header-link--quiet:hover { color: var(--bp-blue-700); background: var(--bp-bg-subtle); } .header-link--quiet .header-link__label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .header-link--quiet .icon { width: 16px; height: 16px; } /* T084 (Phase 10.E): swap the closed/open lock icon based on data-staff-state. Hidden by default; we set ".icon--lock-closed" to visible only when data-staff-state="locked", and the reverse for unlocked. Also gives the unlocked button a subtle "active" green tint so the change is obvious. */ .header-link--staff .icon--lock-closed, .header-link--staff .icon--lock-open { display: none; } .header-link--staff[data-staff-state="locked"] .icon--lock-closed { display: inline-block; } .header-link--staff[data-staff-state="unlocked"] .icon--lock-open { display: inline-block; } .header-link--staff[data-staff-state="unlocked"] { color: var(--bp-success, #2e7d32); background: rgba(46, 125, 50, 0.08); } .header-link--staff[data-staff-state="unlocked"]:hover { background: rgba(46, 125, 50, 0.16); } /* Cart counter — staff only */ .cart-button { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--bp-border); background: var(--bp-white); border-radius: var(--radius-3); font-size: var(--text-sm); color: var(--bp-navy-800); } .cart-button:hover { background: var(--bp-bg-subtle); } .cart-button .icon { width: 16px; height: 16px; } .cart-button__count { display: inline-flex; min-width: 20px; height: 20px; padding: 0 6px; align-items: center; justify-content: center; background: var(--bp-blue-600); color: #fff; font-size: var(--text-xs); font-weight: 700; border-radius: var(--radius-pill); line-height: 1; } .cart-button--warn .cart-button__count { background: var(--bp-warning); } /* Hide staff-only chrome until body.staff is present */ body:not(.staff) [data-staff-only] { display: none !important; } /* ------------------------------------------------------------------------- 6. Footer ------------------------------------------------------------------------- */ .site-footer { background: var(--bp-navy-900); color: var(--bp-ink-on-dark); margin-top: var(--space-16); padding: var(--space-10) 0 var(--space-6); } .site-footer__inner { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--space-6); display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-6); } .site-footer__brand { display: inline-flex; align-items: center; gap: var(--space-3); } .site-footer__brand img { height: 28px; width: auto; } .site-footer__spacer { flex: 1; } .site-footer__nav { display: flex; gap: var(--space-5); flex-wrap: wrap; } .site-footer__nav a { color: var(--bp-ink-on-dark); border-bottom: 1px solid rgba(230,238,243,0.25); font-size: var(--text-sm); } .site-footer__nav a:hover { color: var(--bp-white); border-bottom-color: var(--bp-white); } .site-footer__copy { color: rgba(230,238,243,0.65); font-size: var(--text-xs); width: 100%; margin-top: var(--space-4); } /* ------------------------------------------------------------------------- 7. Buttons ------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-size: var(--text-sm); font-weight: 600; padding: 0 var(--space-4); height: 38px; border-radius: var(--radius-3); border: 1px solid transparent; transition: background var(--dur-fast) var(--ease-std), color var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std), transform var(--dur-fast) var(--ease-std); white-space: nowrap; } .btn .icon { width: 16px; height: 16px; } .btn--sm { height: 32px; padding: 0 var(--space-3); font-size: var(--text-xs); } .btn--lg { height: 46px; padding: 0 var(--space-5); font-size: var(--text-md); } .btn--block { width: 100%; } .btn--primary { background: var(--bp-blue-600); color: #fff; } .btn--primary:hover { background: var(--bp-blue-500); } .btn--primary:active { background: var(--bp-blue-700); transform: translateY(1px); } .btn--primary[disabled], .btn--primary[aria-disabled="true"] { background: var(--bp-blue-200); color: #fff; cursor: not-allowed; } .btn--secondary { background: transparent; color: var(--bp-blue-700); border-color: var(--bp-blue-600); } .btn--secondary:hover { background: var(--bp-blue-050); } .btn--secondary:active { background: var(--bp-blue-100); transform: translateY(1px); } .btn--secondary[disabled] { color: var(--bp-blue-200); border-color: var(--bp-blue-200); cursor: not-allowed; } .btn--ghost { background: transparent; color: var(--bp-navy-800); } .btn--ghost:hover { background: var(--bp-bg-subtle); } .btn--danger { background: var(--bp-danger); color: #fff; } .btn--danger:hover { filter: brightness(1.08); } .btn--loading { color: transparent; pointer-events: none; position: relative; } .btn--loading::after { content: ''; position: absolute; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; color: #fff; } .btn--secondary.btn--loading::after { color: var(--bp-blue-700); } @keyframes spin { to { transform: rotate(360deg); } } /* Toggled "Added" state for any .btn carrying data-added="true" */ .btn .cart-btn-added { display: none; } .btn[data-added="true"] .cart-btn-add { display: none; } .btn[data-added="true"] .cart-btn-added { display: inline; } .btn .icon--check { display: none; } .btn[data-added="true"] .icon--add { display: none; } .btn[data-added="true"] .icon--check { display: inline-flex; } .btn--secondary[data-added="true"] { background: rgba(46,139,87,0.10); border-color: var(--bp-success); color: var(--bp-success); } /* ------------------------------------------------------------------------- 8. Inputs ------------------------------------------------------------------------- */ .input, .select { font-family: var(--font-sans); font-size: var(--text-sm); width: 100%; height: 40px; padding: 0 var(--space-3); border: 1px solid var(--bp-border); border-radius: var(--radius-3); background: var(--bp-white); color: var(--fg-1); transition: border-color var(--dur-fast) var(--ease-std); } .input::placeholder { color: var(--fg-3); } .input:hover, .select:hover { border-color: var(--bp-border-strong); } .input:focus, .select:focus { border-color: var(--bp-blue-600); outline: none; box-shadow: var(--ring-focus); } .input--error { border-color: var(--bp-danger); } .input--error:focus { box-shadow: 0 0 0 3px rgba(192,57,43,0.30); } .input[disabled] { background: var(--bp-bg-subtle); color: var(--fg-3); cursor: not-allowed; } .input-group { position: relative; } .input-group .icon-leading { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--fg-3); pointer-events: none; } .input-group .input { padding-left: 36px; } .field { display: block; } .field__label { font-size: var(--text-sm); font-weight: 600; color: var(--bp-navy-800); margin-bottom: var(--space-2); display: block; } .field__error { font-size: var(--text-xs); color: var(--bp-danger); margin-top: var(--space-2); display: flex; align-items: center; gap: var(--space-1); } .field__hint { font-size: var(--text-xs); color: var(--fg-3); margin-top: var(--space-2); } /* ------------------------------------------------------------------------- 9. Chips / filter pills ------------------------------------------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: 600; padding: 3px 10px; border-radius: var(--radius-pill); border: 1px solid transparent; white-space: nowrap; line-height: 1.4; } .chip--test { background: var(--tag-test-bg); color: var(--tag-test-fg); } .chip--disease { background: var(--tag-disease-bg); color: var(--tag-disease-fg); } .chip--neutral { background: var(--tag-neutral-bg); color: var(--tag-neutral-fg); } .chip--mesh { background: transparent; color: var(--fg-3); border-color: var(--bp-border); font-weight: 500; letter-spacing: 0; } .chip a, .chip { border-bottom: 0; } /* Filter pill (clickable, with count) */ .filter-pill { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); width: 100%; padding: var(--space-2) var(--space-3); font-size: var(--text-sm); color: var(--fg-1); background: transparent; border: 1px solid transparent; border-radius: var(--radius-3); text-align: left; transition: background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std); } .filter-pill:hover { background: var(--bp-bg-subtle); } .filter-pill__count { font-variant-numeric: tabular-nums; color: var(--fg-3); font-size: var(--text-xs); } .filter-pill__check { width: 16px; height: 16px; flex: none; border: 1.5px solid var(--bp-border-strong); border-radius: var(--radius-2); background: var(--bp-white); display: inline-flex; align-items: center; justify-content: center; color: var(--bp-white); } .filter-pill[aria-pressed="true"] { background: transparent; } .filter-pill[aria-pressed="true"] > span:nth-child(2) { color: var(--bp-navy-800); font-weight: 600; } .filter-pill[aria-pressed="true"] .filter-pill__check { background: var(--bp-blue-600); border-color: var(--bp-blue-600); } .filter-pill[aria-pressed="true"] .filter-pill__count { color: var(--bp-blue-700); font-weight: 600; } .filter-pill[aria-disabled="true"] { color: var(--fg-3); cursor: not-allowed; } .filter-pill[aria-disabled="true"] .filter-pill__count { color: var(--fg-3); } /* Active-filter "removable" chip (top of result list) */ .chip--removable { padding-right: 4px; } .chip--removable .chip__remove { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; background: transparent; border: 0; color: inherit; border-radius: var(--radius-pill); cursor: pointer; } .chip--removable .chip__remove:hover { background: rgba(11,58,82,0.10); } /* ------------------------------------------------------------------------- 10. Badges ------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); font-weight: 700; padding: 2px 8px; letter-spacing: var(--tracking-wide); text-transform: uppercase; border-radius: var(--radius-2); line-height: 1.5; } .badge--key { background: var(--badge-key-bg); color: var(--badge-key-fg); } .badge--key .icon { width: 12px; height: 12px; color: var(--badge-key-icon); } .badge--type { background: var(--badge-type-bg); color: var(--badge-type-fg); } /* T082 (Phase 10.D): when a badge is an it must read as interactive — subtle hover lift, no underline override of the uppercase typography. Same for clickable .chip. */ a.badge, a.chip { text-decoration: none; transition: filter var(--dur-base, 0.15s) var(--ease-out, ease), transform var(--dur-base, 0.15s) var(--ease-out, ease); } a.badge:hover, a.chip:hover { filter: brightness(0.92); transform: translateY(-1px); } a.badge:focus-visible, a.chip:focus-visible { outline: 2px solid var(--bp-accent, #2c7be5); outline-offset: 2px; } /* ------------------------------------------------------------------------- 11. Publication card / result row Hard-density constraint: ≤6 HTML elements per row. Flat list: no card outline; year-anchor

s break the run by publication year and act as scroll anchors. ------------------------------------------------------------------------- */ .results { list-style: none; margin: 0; padding: 0; } .results > .result-row { border-bottom: 1px solid var(--bp-border); } .results > .result-row:first-of-type { border-top: 1px solid var(--bp-border); } .result-card { display: grid; grid-template-columns: 88px 1fr; gap: var(--space-3); padding: var(--space-3); background: transparent; border: 0; border-radius: var(--radius-3); color: inherit; transition: background var(--dur-fast) var(--ease-std); content-visibility: auto; contain-intrinsic-size: 0 136px; } .result-card:hover { background: var(--bp-bg-subtle); } .result-card:focus-visible { outline: none; box-shadow: var(--ring-focus); border-radius: var(--radius-3); } .result-card__thumb { width: 88px; height: 124px; border-radius: var(--radius-2); background: var(--bp-bg-subtle); display: block; object-fit: cover; border: 1px solid var(--bp-border); grid-column: 1; grid-row: 1 / span 3; align-self: start; } .result-card__title, .result-card__meta, .result-card__tags { grid-column: 2; } .result-card__title { grid-row: 1; align-self: start; } .result-card__meta { grid-row: 2; align-self: start; } .result-card__tags { grid-row: 3; align-self: start; } .result-card__title { font-size: var(--text-base); font-weight: 600; line-height: 1.4; color: var(--bp-navy-800); margin: 0 0 4px; letter-spacing: var(--tracking-tight); text-wrap: balance; } .result-card__title .badge { vertical-align: 2px; margin-left: var(--space-2); } .result-card__meta { font-size: var(--text-xs); color: var(--fg-2); margin: 0 0 var(--space-2); } .result-card__meta b { font-weight: 600; color: var(--bp-navy-800); } .result-card__tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); } .result-card__tags li { display: contents; } /* Year anchor — sticky group label between rows of different publication years. Acts as both a visual rhythm and a scroll anchor in long lists. */ .year-anchor { position: sticky; top: calc(var(--nav-height) + 4px); z-index: 1; background: var(--bp-paper); margin-top: var(--space-8); padding: var(--space-3) var(--space-3) var(--space-2); display: flex; align-items: baseline; gap: var(--space-3); border-top: 2px solid var(--bp-navy-800); border-bottom: 1px solid var(--bp-border); list-style: none; } .year-anchor:first-child { margin-top: 0; } .year-anchor__year { font-size: var(--text-2xl); font-weight: 700; color: var(--bp-navy-800); line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .year-anchor__count { font-size: var(--text-xs); color: var(--fg-3); font-weight: 600; font-variant-numeric: tabular-nums; } .year-anchor__count b { color: var(--bp-navy-800); font-weight: 700; } /* Per-row "Add to cart" — staff-only floating action, bottom-right of the row. Sits OUTSIDE the anchor (sibling inside the

) so we never nest a button inside an . Costs +1 element per row, but the row stays at 5 structural elements when staff is off (the button is hidden via [data-staff-only]). */ .results li { position: relative; } .result-row__cart { position: absolute; bottom: var(--space-3); right: var(--space-3); width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; background: var(--bp-blue-600); color: #fff; border: 0; border-radius: var(--radius-pill); box-shadow: var(--shadow-2); cursor: pointer; z-index: 2; /* Discoverable: always visible at 70% opacity when staff is unlocked, full opacity on row hover. (Original mockup hid it entirely until hover — too easy to miss). */ opacity: 0.7; transform: scale(0.9); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out); } .results li:hover .result-row__cart, .result-row__cart:hover, .result-row__cart:focus-visible { opacity: 1; transform: scale(1); } .result-row__cart:hover { background: var(--bp-blue-500); } .result-row__cart:active { transform: scale(0.97); } .result-row__cart[data-added="true"] { opacity: 1; transform: scale(1); background: var(--bp-success); } .result-row__cart[data-added="true"]:hover { background: var(--bp-success); filter: brightness(1.08); } .result-row__cart .icon { width: 18px; height: 18px; } .result-row__cart .icon--check { display: none; } .result-row__cart[data-added="true"] .icon--add { display: none; } .result-row__cart[data-added="true"] .icon--check { display: inline-block; } /* Cart item — link wraps text area; remove button stays a sibling. */ .cart-item__link { display: block; color: inherit; border-bottom: 0; text-decoration: none; flex: 1; min-width: 0; } .cart-item__link:hover .cart-item__title { color: var(--bp-blue-700); } .cart-item { display: flex; align-items: flex-start; gap: var(--space-3); } .cart-item .cart-item__title { transition: color var(--dur-fast) var(--ease-std); } /* ------------------------------------------------------------------------- 12. Home layout — filter sidebar + result list ------------------------------------------------------------------------- */ .home { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-8); max-width: var(--container-wide); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-12); align-items: start; } .home__sidebar { position: sticky; top: calc(var(--nav-height) + var(--space-4)); max-height: calc(100vh - var(--nav-height) - var(--space-6)); overflow: auto; padding-right: var(--space-2); } .home__main { min-width: 0; } .facet { border-bottom: 1px solid var(--bp-border); padding: var(--space-4) 0; } .facet:first-child { padding-top: 0; } .facet:last-child { border-bottom: 0; } .facet__head { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--bp-navy-800); margin-bottom: var(--space-3); } .facet__toggle { background: transparent; border: 0; padding: 0; color: inherit; cursor: pointer; display: flex; align-items: center; justify-content: space-between; width: 100%; font: inherit; letter-spacing: inherit; text-transform: inherit; } .facet__toggle .icon { width: 14px; height: 14px; color: var(--fg-3); transition: transform var(--dur-fast) var(--ease-std); } .facet[data-collapsed="true"] .facet__toggle .icon { transform: rotate(-90deg); } .facet[data-collapsed="true"] .facet__body { display: none; } /* T068 (Phase 10.A): half-collapsed shows the first N options and hides the overflow. Toggling data-collapsed off makes everything visible. */ .facet[data-collapsed="half"] .facet__list li[data-facet-overflow="true"] { display: none; } .facet[data-collapsed="half"] .facet__toggle .icon { transform: rotate(-45deg); } .facet__show-all { display: none; /* hidden by default; CSS below shows it in half state */ width: 100%; margin-top: var(--space-2); padding: var(--space-2) var(--space-3); background: transparent; border: 1px dashed var(--bp-border); border-radius: var(--radius-3); color: var(--fg-2); font-size: var(--text-xs); font-weight: 500; cursor: pointer; display: inline-flex; align-items: center; gap: var(--space-1); } .facet:not([data-collapsed="half"]) .facet__show-all { display: none; } .facet[data-collapsed="half"] .facet__show-all { display: inline-flex; } .facet__show-all:hover { background: var(--bp-bg-subtle); color: var(--bp-navy-800); } .facet__show-all .icon { width: 14px; height: 14px; } .facet__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; } .facet__list--scroll { max-height: 280px; overflow: auto; } .facet__show-more { font-size: var(--text-xs); font-weight: 600; background: transparent; border: 0; padding: var(--space-2) var(--space-3); color: var(--bp-blue-700); border-radius: var(--radius-3); } .facet__show-more:hover { background: var(--bp-blue-050); } /* ------------------------------------------------------------------------- Year-range — dual-handle slider (Publication Year facet) ------------------------------------------------------------------------- */ .year-range { padding: var(--space-1) 0 var(--space-2); } .year-range__values { display: flex; justify-content: space-between; align-items: baseline; font-variant-numeric: tabular-nums; margin-bottom: var(--space-2); } .year-range__values [data-year-min], .year-range__values [data-year-max] { font-size: var(--text-md); font-weight: 700; color: var(--bp-navy-800); font-variant-numeric: tabular-nums; } .year-range__values .sep { color: var(--fg-3); font-weight: 400; padding: 0 var(--space-1); } .year-range__histogram { display: grid; grid-template-columns: repeat(26, 1fr); gap: 1px; align-items: end; height: 32px; margin-bottom: 4px; } .year-range__histogram span { background: var(--bp-blue-100); height: calc(var(--h, 0.2) * 100%); min-height: 2px; border-radius: 1px 1px 0 0; transition: background var(--dur-fast) var(--ease-std); } .year-range__histogram span.in-range { background: var(--bp-blue-600); } .year-range__track { position: relative; height: 24px; margin: 0 9px; } .year-range__rail { position: absolute; top: 10px; left: 0; right: 0; height: 4px; border-radius: 2px; background: var(--bp-bg-soft); } .year-range__fill { position: absolute; top: 10px; height: 4px; border-radius: 2px; background: var(--bp-blue-600); left: var(--min-pct, 0%); right: calc(100% - var(--max-pct, 100%)); pointer-events: none; } .year-range__input { position: absolute; top: 0; left: -9px; right: -9px; width: calc(100% + 18px); height: 24px; margin: 0; background: transparent; appearance: none; -webkit-appearance: none; pointer-events: none; } .year-range__input::-webkit-slider-runnable-track { height: 4px; background: transparent; border: 0; } .year-range__input::-moz-range-track { height: 4px; background: transparent; border: 0; } .year-range__input::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; background: var(--bp-white); border: 2px solid var(--bp-blue-600); border-radius: 50%; pointer-events: auto; cursor: grab; box-shadow: var(--shadow-1); margin-top: -7px; transition: transform var(--dur-fast) var(--ease-std), box-shadow var(--dur-fast) var(--ease-std); } .year-range__input::-moz-range-thumb { width: 18px; height: 18px; background: var(--bp-white); border: 2px solid var(--bp-blue-600); border-radius: 50%; pointer-events: auto; cursor: grab; box-shadow: var(--shadow-1); } .year-range__input:hover::-webkit-slider-thumb { transform: scale(1.10); } .year-range__input:hover::-moz-range-thumb { transform: scale(1.10); } .year-range__input:focus { outline: none; } .year-range__input:focus-visible::-webkit-slider-thumb { box-shadow: var(--ring-focus); } .year-range__input:focus-visible::-moz-range-thumb { box-shadow: var(--ring-focus); } .year-range__input:active::-webkit-slider-thumb { cursor: grabbing; } .year-range__bounds { display: flex; justify-content: space-between; font-size: var(--text-xs); color: var(--fg-3); margin: var(--space-2) 0 0; font-variant-numeric: tabular-nums; } .year-range__match { font-size: var(--text-xs); color: var(--fg-2); margin: var(--space-3) 0 0; text-align: center; font-variant-numeric: tabular-nums; } .year-range__match b { color: var(--bp-blue-700); font-weight: 700; } .toolbar { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-5); } .toolbar__count { font-size: var(--text-sm); color: var(--fg-2); font-variant-numeric: tabular-nums; } .toolbar__count b { color: var(--bp-navy-800); font-weight: 600; } .toolbar__spacer { flex: 1; } .sort { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--bp-navy-800); padding: 0 var(--space-3); height: 36px; background: var(--bp-white); border: 1px solid var(--bp-border); border-radius: var(--radius-3); appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right var(--space-3) center; padding-right: var(--space-8); } .search { flex: 1; min-width: 260px; max-width: 520px; } .active-filters { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .active-filters__clear { font-size: var(--text-xs); font-weight: 600; background: transparent; border: 0; color: var(--bp-blue-700); padding: 4px 6px; border-radius: var(--radius-2); } .active-filters__clear:hover { background: var(--bp-blue-050); } .results-meta { margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--bp-border); } .page-title { margin: 0 0 var(--space-2); font-size: var(--text-3xl); font-weight: 600; color: var(--bp-navy-800); letter-spacing: var(--tracking-tight); } .page-lede { margin: 0; color: var(--fg-2); max-width: 62ch; font-size: var(--text-md); } /* Hero — catalog-as-corpus. The big number is the page identity; the title is its caption. */ .hero { margin-bottom: var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--bp-border); display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); align-items: end; gap: var(--space-3) var(--space-6); } .hero__title { grid-column: 1 / -1; } .hero__copy { min-width: 0; } .hero__stat { display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-1); margin: 0; text-align: right; border-left: 1px solid var(--bp-border); padding-left: var(--space-6); } @media (max-width: 720px) { .hero { grid-template-columns: 1fr; gap: var(--space-4); } .hero__stat { align-items: flex-start; text-align: left; border-left: 0; padding-left: 0; padding-top: var(--space-3); border-top: 1px solid var(--bp-border); } } .hero__number { font-size: 56px; font-weight: 700; line-height: 0.9; letter-spacing: -0.035em; color: var(--bp-navy-800); font-variant-numeric: tabular-nums; margin: 0; display: inline-flex; align-items: baseline; gap: 4px; } .hero__number em { font-style: normal; font-size: var(--text-2xl); color: var(--fg-3); font-weight: 400; letter-spacing: 0; } .hero__number em b { color: var(--bp-navy-800); font-weight: 600; font-variant-numeric: tabular-nums; } .hero__sub { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--bp-teal-600); margin: 0; line-height: 1.6; } .hero__sub b { color: var(--bp-navy-800); font-variant-numeric: tabular-nums; } .hero__title { font-size: var(--text-2xl); margin: 0 0 var(--space-2); color: var(--bp-navy-800); font-weight: 600; letter-spacing: var(--tracking-tight); } .hero__lede { margin: 0; max-width: 62ch; color: var(--fg-2); font-size: var(--text-md); } /* HTMX swap indicator */ .results[data-loading="true"] { opacity: 0.55; transition: opacity var(--dur-base) var(--ease-std); } .skeleton-row { display: grid; grid-template-columns: 80px 1fr; gap: var(--space-4); padding: var(--space-4); border: 1px solid var(--bp-border); border-radius: var(--radius-4); background: var(--bp-white); } .skeleton-row + .skeleton-row { margin-top: var(--space-3); } .skeleton { background: linear-gradient(90deg, var(--skeleton-base) 0%, var(--skeleton-shine) 50%, var(--skeleton-base) 100%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; border-radius: var(--radius-2); } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .skeleton--thumb { width: 80px; height: 113px; border-radius: var(--radius-2); } .skeleton--line { height: 12px; margin-bottom: 8px; } /* Empty state */ .empty-state { text-align: center; padding: var(--space-12) var(--space-6); background: var(--bp-white); border: 1px dashed var(--bp-border); border-radius: var(--radius-4); } .empty-state__icon { width: 48px; height: 48px; border-radius: var(--radius-pill); background: var(--bp-blue-050); color: var(--bp-blue-700); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--space-4); } .empty-state__icon .icon { width: 24px; height: 24px; } .empty-state__title { font-size: var(--text-xl); margin: 0 0 var(--space-2); } .empty-state__body { color: var(--fg-2); max-width: 50ch; margin: 0 auto var(--space-4); } /* ------------------------------------------------------------------------- 13. Publication detail layout ------------------------------------------------------------------------- */ .detail { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-10); max-width: var(--container-wide); margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-12); align-items: start; } .detail__main { min-width: 0; max-width: var(--container-narrow); } .detail__aside { position: sticky; top: calc(var(--nav-height) + var(--space-4)); display: flex; flex-direction: column; gap: var(--space-4); } .breadcrumb { font-size: var(--text-sm); color: var(--fg-2); margin: 0 0 var(--space-4); } .breadcrumb a { color: var(--fg-2); border-bottom-color: transparent; } .breadcrumb a:hover { color: var(--bp-navy-800); border-bottom-color: var(--bp-border-strong); } .breadcrumb__sep { margin: 0 var(--space-2); color: var(--fg-3); } .pub-title { font-size: var(--text-3xl); line-height: 1.2; color: var(--bp-navy-800); letter-spacing: var(--tracking-tight); margin: 0 0 var(--space-4); font-weight: 600; text-wrap: pretty; } /* Inline authors line — sits between the title and the abstract; gives a quick scan of who wrote it without forcing the reader to look at the sidebar. Clicking a name navigates to the catalog filtered by that author; "See all" expands the full author block in the sidebar. */ .authors-inline { font-size: var(--text-md); color: var(--fg-2); line-height: 1.5; margin: 0 0 var(--space-8); text-wrap: pretty; } .authors-inline a { color: var(--bp-navy-800); font-weight: 500; border-bottom: 0; white-space: nowrap; padding: 0 1px; border-radius: var(--radius-1); transition: color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std); } .authors-inline a:hover { color: var(--bp-blue-700); background: var(--bp-blue-050); } .authors-inline__sep { color: var(--fg-3); margin: 0 2px; } .authors-inline__ellipsis { color: var(--fg-3); margin: 0 var(--space-2); letter-spacing: 1px; } .authors-inline__see-all { display: inline-flex; align-items: center; gap: 4px; background: transparent; border: 0; color: var(--bp-blue-700); font-weight: 600; font-size: var(--text-sm); margin-left: var(--space-2); padding: 2px 8px; border-radius: var(--radius-2); cursor: pointer; } .authors-inline__see-all:hover { background: var(--bp-blue-050); } .authors-inline__see-all .icon { width: 14px; height: 14px; } /* Sidebar authors box: highlight when the user just jumped to it. */ .aside-card--flash { animation: card-flash 1.4s var(--ease-std); } @keyframes card-flash { 0% { box-shadow: 0 0 0 0 rgba(86,163,210,0.0); } 20% { box-shadow: 0 0 0 4px rgba(86,163,210,0.40); } 100% { box-shadow: 0 0 0 0 rgba(86,163,210,0.0); } } /* Sidebar authors box — sits above the Citation card. Each name links to the catalog filtered by that author. */ .authors { font-size: var(--text-sm); margin: 0; line-height: 1.5; } .authors__list--initial, .authors__list--full { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); } .authors__list--full { display: none; max-height: 56vh; overflow-y: auto; padding-right: var(--space-2); } .authors[data-expanded="true"] .authors__list--initial { display: none; } .authors[data-expanded="true"] .authors__list--full { display: flex; } /* T076 (Phase 10.C): explicit "Show N more authors" button inside the aside. */ .authors__expand { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); padding: var(--space-2) var(--space-3); background: transparent; border: 1px dashed var(--bp-border); border-radius: var(--radius-3); color: var(--fg-2); font-size: var(--text-xs); font-weight: 500; cursor: pointer; width: 100%; justify-content: center; } .authors__expand:hover { background: var(--bp-bg-subtle); color: var(--bp-navy-800); } .authors__expand .icon { width: 14px; height: 14px; } .authors[data-expanded="true"] .authors__expand { display: none; } .authors__name { font-weight: 600; color: var(--bp-navy-800); display: block; border-bottom: 0; transition: color var(--dur-fast) var(--ease-std); } a.authors__name:hover { color: var(--bp-blue-700); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .authors__aff { color: var(--fg-3); font-size: var(--text-xs); display: block; margin-top: 2px; line-height: 1.4; } .authors__toggle { display: inline-flex; align-items: center; gap: var(--space-1); background: transparent; border: 0; font-size: var(--text-xs); font-weight: 600; color: var(--bp-blue-700); padding: var(--space-1) 0; margin-top: var(--space-3); } .authors__toggle:hover { color: var(--bp-navy-700); } .authors__count { font-size: var(--text-xs); font-weight: 600; color: var(--fg-3); font-variant-numeric: tabular-nums; } .abstract { font-size: var(--text-md); line-height: 1.7; color: var(--fg-1); margin: 0 0 var(--space-8); text-align: justify; hyphens: auto; text-justify: inter-word; } .abstract h3 { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--bp-teal-600); margin: var(--space-5) 0 var(--space-2); } .abstract h3:first-child { margin-top: 0; } .abstract p { margin: 0 0 var(--space-3); } .keywords { font-size: var(--text-sm); color: var(--fg-2); margin: 0 0 var(--space-6); line-height: 1.7; } .keywords__label { font-weight: 700; color: var(--bp-navy-800); margin-right: var(--space-2); } .keywords__hint { font-style: italic; font-weight: 400; color: var(--fg-3); font-size: var(--text-xs); letter-spacing: 0; margin-left: 4px; } .keywords a { color: var(--fg-1); border-bottom: 0; padding-bottom: 0; } .keywords a:hover { color: var(--bp-blue-700); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } .keywords a + a { margin-left: 0; } .mesh-strip { margin: 0 0 var(--space-10); padding-top: var(--space-4); border-top: 1px solid var(--bp-border); } .mesh-strip__label { display: inline-block; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-3); margin-right: var(--space-3); vertical-align: 2px; } .mesh-strip__hint { font-size: var(--text-xs); font-style: italic; font-weight: 400; color: var(--fg-3); text-transform: none; letter-spacing: 0; margin-left: 4px; } .mesh-strip__chips { display: inline-flex; flex-wrap: wrap; gap: var(--space-1); vertical-align: top; } .mesh-strip__chips a.chip--mesh { color: var(--fg-3); border-bottom: 0; } .mesh-strip__chips a.chip--mesh:hover { background: var(--bp-bg-subtle); color: var(--bp-navy-800); border-color: var(--bp-border-strong); } /* Sidebar card on detail page */ .aside-card { background: var(--bp-white); border: 1px solid var(--bp-border); border-radius: var(--radius-4); padding: var(--space-4); } .aside-card__head { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--fg-3); margin: 0 0 var(--space-3); } .aside-card__thumb { display: block; width: 100%; height: auto; border-radius: var(--radius-3); background: var(--bp-bg-subtle); border: 1px solid var(--bp-border); aspect-ratio: 400 / 566; object-fit: cover; } .aside-card__actions { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); } .aside-card__thumb-btn { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; border-radius: var(--radius-3); } .aside-card__thumb-btn:focus-visible { outline: 2px solid var(--bp-accent, #2c7be5); outline-offset: 2px; } .aside-card__thumb-btn .aside-card__thumb { transition: transform var(--dur-base, 0.15s) var(--ease-out, ease); } .aside-card__thumb-btn:hover .aside-card__thumb { transform: scale(1.01); } .thumb-backdrop { padding: var(--space-6); cursor: zoom-out; } .thumb-backdrop[hidden] { display: none; } .thumb-modal__img { max-width: min(900px, 95vw); max-height: 92vh; width: auto; height: auto; border-radius: var(--radius-4); box-shadow: var(--shadow-4); background: var(--bp-white); cursor: default; } .thumb-modal__close { position: fixed; top: var(--space-4); right: var(--space-4); width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.9); border: 0; color: var(--bp-navy-800); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: var(--shadow-2); } .thumb-modal__close:hover { background: #fff; } .thumb-modal__close .icon { width: 20px; height: 20px; } .citation { font-size: var(--text-sm); line-height: 1.55; color: var(--fg-1); } .citation b { color: var(--bp-navy-800); font-weight: 600; } .citation i { font-style: italic; } .citation .muted { color: var(--fg-2); } /* Citation head with inline Copy action. */ .aside-card__head--with-action { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0 0 var(--space-2); } .copy-btn { display: inline-flex; align-items: center; gap: var(--space-1); background: transparent; border: 1px solid var(--bp-border); color: var(--fg-2); border-radius: var(--radius-3); font-size: var(--text-xs); font-weight: 600; padding: 3px 8px; text-transform: none; letter-spacing: 0; transition: color var(--dur-fast) var(--ease-std), background var(--dur-fast) var(--ease-std), border-color var(--dur-fast) var(--ease-std); } .copy-btn .icon { width: 13px; height: 13px; } .copy-btn:hover { color: var(--bp-navy-800); background: var(--bp-bg-subtle); border-color: var(--bp-border-strong); } .copy-btn[data-copied="true"] { color: var(--bp-success); border-color: var(--bp-success); background: rgba(46,139,87,0.08); } .copy-btn[data-copied="true"] .copy-btn__label-default { display: none; } .copy-btn .copy-btn__label-done { display: none; } .copy-btn[data-copied="true"] .copy-btn__label-done { display: inline; } .id-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) var(--space-4); font-size: var(--text-sm); } .id-list dt { color: var(--fg-3); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-wide); font-weight: 700; } .id-list dd { margin: 2px 0 0; word-break: break-all; } .tag-list { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* Related publications block */ .related { margin-top: var(--space-12); padding-top: var(--space-8); border-top: 1px solid var(--bp-border); } .related + .related { margin-top: var(--space-10); padding-top: var(--space-8); } .related__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--space-4); } .related__title { margin: 0; font-size: var(--text-xl); color: var(--bp-navy-800); } .related__grid { display: grid; /* 2-up grid for legibility — titles + journal+year fit comfortably in half a content row width. Below 720px we drop to a single column. */ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); } @media (max-width: 720px) { .related__grid { grid-template-columns: 1fr; } } .related-card { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-3); padding: var(--space-3); background: var(--bp-white); border: 1px solid var(--bp-border); border-radius: var(--radius-4); color: inherit; border-bottom: 1px solid var(--bp-border); transition: background var(--dur-fast) var(--ease-std); } .related-card:hover { background: var(--bp-bg-subtle); } .related-card__thumb { width: 56px; height: 79px; border-radius: var(--radius-2); border: 1px solid var(--bp-border); object-fit: cover; background: var(--bp-bg-subtle); } .related-card__title { font-size: var(--text-sm); font-weight: 600; color: var(--bp-navy-800); line-height: 1.35; margin: 0 0 var(--space-2); } .related-card__meta { font-size: var(--text-xs); color: var(--fg-3); margin: 0; } /* ------------------------------------------------------------------------- 14. Modal & drawer ------------------------------------------------------------------------- */ .backdrop { position: fixed; inset: 0; background: rgba(11,58,82,0.45); z-index: var(--z-modal-backdrop); display: flex; align-items: center; justify-content: center; padding: var(--space-4); animation: fade-in var(--dur-base) var(--ease-std); } @keyframes fade-in { from { opacity: 0; } } .modal { z-index: var(--z-modal); background: var(--bp-white); border-radius: var(--radius-4); box-shadow: var(--shadow-4); max-width: 440px; width: 100%; padding: var(--space-6); animation: modal-in var(--dur-base) var(--ease-out); } @keyframes modal-in { from { opacity: 0; transform: translateY(8px); } } .modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); } .modal__title { margin: 0; font-size: var(--text-xl); color: var(--bp-navy-800); display: inline-flex; align-items: center; gap: var(--space-2); } .modal__close { background: transparent; border: 0; color: var(--fg-2); width: 32px; height: 32px; border-radius: var(--radius-3); display: inline-flex; align-items: center; justify-content: center; } .modal__close:hover { background: var(--bp-bg-subtle); color: var(--bp-navy-800); } .modal__close .icon { width: 18px; height: 18px; } .modal__body { font-size: var(--text-sm); color: var(--fg-2); margin-bottom: var(--space-4); line-height: 1.55; } .modal__actions { display: flex; gap: var(--space-3); justify-content: flex-end; margin-top: var(--space-4); } .alert-inline { background: #FBE9E7; color: #8A1F12; border: 1px solid rgba(192,57,43,0.30); padding: var(--space-2) var(--space-3); border-radius: var(--radius-3); font-size: var(--text-xs); display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-3); } .alert-inline .icon { width: 14px; height: 14px; flex: none; } .alert-inline--warn { background: #FFF6E5; color: #7A4D0B; border-color: rgba(218,139,44,0.40); } /* Drawer (cart) */ .drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 100%; background: var(--bp-white); box-shadow: var(--shadow-4); z-index: var(--z-drawer); display: flex; flex-direction: column; animation: drawer-in var(--dur-base) var(--ease-out); } @keyframes drawer-in { from { transform: translateX(20px); opacity: 0; } } .drawer__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--bp-border); } .drawer__title { margin: 0; font-size: var(--text-lg); color: var(--bp-navy-800); display: inline-flex; align-items: center; gap: var(--space-2); } .drawer__body { flex: 1; overflow: auto; padding: var(--space-3) var(--space-5); } .drawer__foot { border-top: 1px solid var(--bp-border); padding: var(--space-4) var(--space-5); background: var(--bp-paper); display: flex; flex-direction: column; gap: var(--space-3); } .drawer__count { display: flex; align-items: center; justify-content: space-between; font-size: var(--text-sm); } .drawer__count b { font-weight: 700; color: var(--bp-navy-800); font-variant-numeric: tabular-nums; } .drawer__count--warn b { color: var(--bp-warning); } .cart-item { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: start; padding: var(--space-3) 0; border-bottom: 1px solid var(--bp-border); } .cart-item:last-child { border-bottom: 0; } .cart-item__title { font-size: var(--text-sm); font-weight: 600; color: var(--bp-navy-800); margin: 0 0 var(--space-1); line-height: 1.4; } .cart-item__meta { font-size: var(--text-xs); color: var(--fg-3); margin: 0; } .cart-item__remove { background: transparent; border: 0; color: var(--fg-3); width: 28px; height: 28px; border-radius: var(--radius-2); display: inline-flex; align-items: center; justify-content: center; } .cart-item__remove:hover { color: var(--bp-danger); background: var(--bp-bg-subtle); } .cart-item__remove .icon { width: 14px; height: 14px; } .cart-empty { padding: var(--space-10) var(--space-4); text-align: center; } .cart-empty__icon { width: 56px; height: 56px; margin: 0 auto var(--space-4); border-radius: var(--radius-pill); background: var(--bp-blue-050); color: var(--bp-blue-700); display: inline-flex; align-items: center; justify-content: center; } .cart-empty__icon .icon { width: 28px; height: 28px; } .cart-empty__title { font-size: var(--text-lg); color: var(--bp-navy-800); margin: 0 0 var(--space-2); } .cart-empty__body { font-size: var(--text-sm); color: var(--fg-2); margin: 0 auto; max-width: 36ch; } /* ------------------------------------------------------------------------- 15. Language switcher ------------------------------------------------------------------------- */ .lang { position: relative; display: inline-flex; align-items: center; } .lang__button { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border: 1px solid var(--bp-border); background: var(--bp-white); border-radius: var(--radius-3); font-size: var(--text-sm); color: var(--bp-navy-800); font-weight: 500; } .lang__button:hover { background: var(--bp-bg-subtle); } .lang__button .icon { width: 14px; height: 14px; color: var(--fg-3); } .lang__menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: var(--bp-white); border: 1px solid var(--bp-border); border-radius: var(--radius-4); box-shadow: var(--shadow-3); padding: var(--space-2); list-style: none; margin: 0; z-index: var(--z-dropdown); } .lang__menu li button { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); background: transparent; border: 0; font-size: var(--text-sm); color: var(--bp-navy-800); border-radius: var(--radius-3); font-weight: 500; } .lang__menu li button:hover { background: var(--bp-bg-subtle); } .lang__menu li button[aria-current="true"] { background: var(--bp-blue-050); color: var(--bp-blue-700); } .lang__menu li button .icon { width: 14px; height: 14px; color: var(--bp-blue-700); } .lang__menu li button[aria-current="true"] .check { display: inline-flex; } .lang__menu li button .check { display: none; } /* ------------------------------------------------------------------------- 16. Error page ------------------------------------------------------------------------- */ .error-page { min-height: 60vh; display: grid; place-items: center; padding: var(--space-12) var(--space-6); } .error-page__inner { max-width: 480px; text-align: center; } .error-page__code { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-caps); color: var(--bp-blue-700); margin: 0 0 var(--space-3); } .error-page__title { font-size: var(--text-3xl); margin: 0 0 var(--space-3); color: var(--bp-navy-800); } .error-page__body { color: var(--fg-2); margin: 0 0 var(--space-6); } .error-page__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; } .error-page__art { font-size: 64px; font-weight: 600; color: var(--bp-blue-200); letter-spacing: -0.03em; margin: 0 0 var(--space-4); } /* ------------------------------------------------------------------------- 17. Mobile rules — trigger on either width OR body.vp-mobile ------------------------------------------------------------------------- */ .mobile-frame { width: 390px; margin: 24px auto; background: var(--bp-paper); border: 1px solid var(--bp-border); border-radius: 32px; box-shadow: var(--shadow-3); overflow: hidden; } .mobile-frame__chrome { height: 28px; background: var(--bp-navy-900); display: flex; align-items: center; justify-content: center; color: var(--bp-ink-on-dark); font-size: 11px; letter-spacing: 0.05em; } .mobile-frame__viewport { width: 100%; max-height: 780px; overflow: auto; } .mobile-label { text-align: center; color: var(--fg-3); font-size: var(--text-xs); margin: var(--space-4) 0 var(--space-2); letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: 600; } @media (max-width: 880px) { .home { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5) var(--space-4) var(--space-12); } .home__sidebar { display: none; } .detail { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-5) var(--space-4) var(--space-10); } .detail__aside { position: static; order: -1; } .related__grid { grid-template-columns: 1fr; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-3); } .related__grid > * { scroll-snap-align: start; } .pub-title { font-size: var(--text-2xl); } .page-title { font-size: var(--text-2xl); } .site-header__tagline { display: none; } .header-link__label { display: none; } .drawer { width: 100%; top: auto; height: 80vh; border-radius: 16px 16px 0 0; } @keyframes drawer-in { from { transform: translateY(20px); opacity: 0; } } .id-list { grid-template-columns: 1fr; } } body.vp-mobile .home { grid-template-columns: 1fr; gap: var(--space-5); padding: var(--space-5) var(--space-4) var(--space-12); } body.vp-mobile .home__sidebar { display: none; } body.vp-mobile .detail { grid-template-columns: 1fr; gap: var(--space-6); padding: var(--space-5) var(--space-4) var(--space-10); } body.vp-mobile .detail__aside { position: static; order: -1; } body.vp-mobile .related__grid { grid-template-columns: 1fr; grid-auto-flow: column; grid-auto-columns: 80%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--space-3); } body.vp-mobile .related__grid > * { scroll-snap-align: start; } body.vp-mobile .pub-title { font-size: var(--text-2xl); } body.vp-mobile .page-title { font-size: var(--text-2xl); } body.vp-mobile .site-header__tagline { display: none; } body.vp-mobile .header-link__label { display: none; } body.vp-mobile .drawer { width: 100%; top: auto; height: 80vh; border-radius: 16px 16px 0 0; } body.vp-mobile .id-list { grid-template-columns: 1fr; } body.vp-mobile .site-footer__inner { flex-direction: column; align-items: flex-start; } body.vp-mobile .site-footer__spacer { display: none; } body.vp-mobile .results-meta { grid-template-columns: 1fr; gap: var(--space-4); } body.vp-mobile .stat-block { border-left: 0; padding-left: 0; border-top: 1px solid var(--bp-border); padding-top: var(--space-4); justify-items: start; text-align: left; } body.vp-mobile .stat-block__sub { justify-content: flex-start; } @media (max-width: 880px) { .results-meta { grid-template-columns: 1fr; gap: var(--space-4); } .stat-block { border-left: 0; padding-left: 0; border-top: 1px solid var(--bp-border); padding-top: var(--space-4); justify-items: start; text-align: left; } .stat-block__sub { justify-content: flex-start; } } /* When body.vp-mobile is set on a desktop viewport, render the entire page at a phone width so the reviewer sees the true mobile layout without having to resize the browser. */ @media (min-width: 481px) { body.vp-mobile { max-width: 430px; margin: 24px auto; border: 1px solid var(--bp-border); border-radius: 28px; box-shadow: var(--shadow-3); overflow: hidden; background: var(--bp-paper); } body.vp-mobile .site-header { position: relative; } body.vp-mobile::before { content: "Mobile preview \00B7 430 px"; display: block; text-align: center; background: var(--bp-navy-900); color: var(--bp-ink-on-dark); font-size: 11px; padding: 6px 0; letter-spacing: 0.05em; } } /* Mobile filter button (replaces sidebar on small viewports) */ .filters-btn { display: none; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-3); background: var(--bp-white); color: var(--bp-navy-800); border: 1px solid var(--bp-border); border-radius: var(--radius-3); font-size: var(--text-sm); font-weight: 600; } .filters-btn .icon { width: 16px; height: 16px; } .filters-btn__count { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; background: var(--bp-blue-600); color: #fff; font-size: var(--text-xs); font-weight: 700; border-radius: var(--radius-pill); line-height: 1; } @media (max-width: 880px) { .filters-btn { display: inline-flex; } } body.vp-mobile .filters-btn { display: inline-flex; } /* Mobile bottom-sheet for filters / cart drawer indicator handle */ .sheet-handle { width: 40px; height: 4px; border-radius: 2px; background: var(--bp-border-strong); margin: var(--space-2) auto; } /* ------------------------------------------------------------------------- 18. Print styles — publication detail ------------------------------------------------------------------------- */ @media print { .site-header, .site-footer, .detail__aside, .related, .breadcrumb, .filters-btn { display: none !important; } body { background: #fff; color: #000; } .detail { grid-template-columns: 1fr; padding: 0; } a { color: #000; border-bottom: 0; } a[href]:after { content: " (" attr(href) ")"; font-size: 0.85em; color: #555; } .pub-title, h1, h2, h3, h4 { color: #000 !important; page-break-after: avoid; } .abstract h3 { color: #555 !important; } .chip, .badge { border: 1px solid #999 !important; background: #fff !important; color: #000 !important; } .keywords, .mesh-strip { color: #000; } .authors__list--full { display: block !important; } .authors__list--initial, .authors__toggle { display: none !important; } } /* ------------------------------------------------------------------------- Admin pages (US4 — /admin/syncs and /admin/syncs/). Minimal but legible styling; mirrors the publication-aside vocabulary. ------------------------------------------------------------------------- */ .admin-main { max-width: 1180px; margin: 0 auto; padding: var(--space-6) var(--space-5); color: var(--fg-1); } .admin-main h1 { font-size: var(--text-2xl); color: var(--bp-navy-800); margin: 0 0 var(--space-2); display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; } .admin-main h2 { font-size: var(--text-lg); color: var(--bp-navy-800); margin: var(--space-6) 0 var(--space-3); border-bottom: 1px solid var(--bp-border); padding-bottom: var(--space-2); } .admin-main > p.muted { margin: 0 0 var(--space-5); } /* Tabular layout */ .admin-table { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--bp-white); border: 1px solid var(--bp-border); border-radius: var(--radius-4); overflow: hidden; font-size: var(--text-sm); } .admin-table thead th { background: var(--bp-bg-subtle); color: var(--fg-2); font-weight: 600; text-align: left; text-transform: uppercase; letter-spacing: var(--tracking-caps); font-size: var(--text-xs); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--bp-border); white-space: nowrap; } .admin-table tbody td { padding: var(--space-3); border-bottom: 1px solid var(--bp-border); vertical-align: middle; } .admin-table tbody tr:last-child td { border-bottom: 0; } .admin-table tbody tr:hover { background: var(--bp-blue-050); } .admin-table a { color: var(--bp-blue-700); text-decoration: none; font-weight: 500; } .admin-table a:hover { text-decoration: underline; } /* Status pills */ .status-pill { display: inline-block; padding: 2px 10px; font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-wide); border-radius: 999px; line-height: 1.6; color: var(--bp-white); } .status-pill--ok { background: var(--bp-success); } .status-pill--partial { background: var(--bp-warning); } .status-pill--failed, .status-pill--aborted { background: var(--bp-danger); } .status-pill--running { background: var(--bp-blue-700); } /* Detail view: definition list */ .kv { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-2) var(--space-4); margin: 0 0 var(--space-4); } .kv dt { color: var(--fg-2); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-caps); align-self: center; } .kv dd { margin: 0; color: var(--fg-1); font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace); font-size: var(--text-sm); } /* Failure groups (details/summary) */ .admin-main details { border: 1px solid var(--bp-border); border-radius: var(--radius-3); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); background: var(--bp-white); } .admin-main details[open] { padding-bottom: var(--space-3); } .admin-main summary { cursor: pointer; font-size: var(--text-sm); color: var(--fg-1); padding: var(--space-1) 0; } .admin-main summary b { color: var(--bp-navy-800); text-transform: capitalize; } .failure-list { list-style: none; padding: 0; margin: var(--space-2) 0 0; font-size: var(--text-xs); color: var(--fg-2); } .failure-list li { padding: var(--space-1) 0; border-top: 1px dashed var(--bp-border); word-break: break-word; } .failure-list li:first-child { border-top: 0; } .failure-list code { background: var(--bp-bg-subtle); padding: 1px 6px; border-radius: var(--radius-2); font-size: var(--text-xs); color: var(--bp-navy-800); } .classif-transient { color: var(--bp-warning); font-weight: 600; } .classif-fatal { color: var(--bp-danger); font-weight: 600; } .classif-unknown { color: var(--fg-3); font-weight: 600; } /* Tighter on mobile */ @media (max-width: 720px) { .admin-main { padding: var(--space-4) var(--space-3); } .admin-table { font-size: var(--text-xs); } .admin-table thead { display: none; } .admin-table tbody tr { display: grid; grid-template-columns: max-content 1fr; gap: var(--space-1) var(--space-3); padding: var(--space-2); } .admin-table tbody td { border: 0; padding: 0; } } /* Inline spinner for buttons in a loading state (cart ZIP build). */ .spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; vertical-align: -3px; animation: spin 0.7s linear infinite; } .btn--with-spinner { display: inline-flex; align-items: center; gap: var(--space-2); justify-content: center; } .btn--with-spinner[disabled], .btn--with-spinner[aria-busy="true"] { opacity: 0.85; cursor: progress; pointer-events: none; } /* Discreet "Empty cart" link inside the drawer counter row. */ .cart-clear-btn { background: transparent; border: 0; color: var(--fg-3); font-size: var(--text-xs); display: inline-flex; align-items: center; gap: 4px; margin-left: var(--space-3); padding: 2px 6px; border-radius: var(--radius-2); cursor: pointer; } .cart-clear-btn:hover { color: var(--bp-danger); background: rgba(192, 57, 43, 0.08); } .cart-clear-btn:disabled { opacity: 0.4; cursor: not-allowed; } .cart-clear-btn .icon { width: 12px; height: 12px; } /* "Add all results to cart" — staff-only, sits between the sort controls and the result list on the home page. Understated chip. */ .bulk-add-row { display: flex; justify-content: flex-end; margin: 0 0 var(--space-3); } .bulk-add-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--bp-bg-subtle); border: 1px dashed var(--bp-border-strong); border-radius: var(--radius-3); color: var(--bp-navy-800); font-size: var(--text-xs); font-weight: 600; cursor: pointer; } .bulk-add-btn:hover { background: var(--bp-blue-050); border-color: var(--bp-blue-600); color: var(--bp-blue-700); } .bulk-add-btn .icon { width: 14px; height: 14px; }