/* ========================================================================= BioEvidenceHub — foundation Loaded on every page: design tokens, reset, base elements, shared components, header and footer. Template-specific CSS is enqueued separately so a reader never downloads the article stylesheet just to look at the contact page. Written with CSS logical properties throughout (margin-inline, padding-block, inset-inline, border-inline-start …) rather than left/right. The site is served in 25 languages and Arabic is right-to-left; logical properties mirror the entire layout from a single dir="rtl" on , with no separate rtl.css to maintain. ========================================================================= */ /* ------------------------------------------------------------------------- 1. Design tokens ---------------------------------------------------------------------- */ :root { /* Brand — these seven are the palette carried over verbatim from the existing site, so the homepage renders identically. Everything else below is derived from them. They are re-emitted by the Customizer, so changing a colour in the admin overrides these at runtime. */ --beh-primary: #2453e6; --beh-navy: #07132f; --beh-body: #35415a; --beh-surface-soft: #f6f8fb; --beh-pale: #eaf4fc; --beh-line: #dde3ec; --beh-accent: #16845b; /* Derived tints and shades. Kept as literal values rather than color-mix() so they stay identical in every browser and can be overridden one-by-one from the Customizer. */ --beh-primary-050: #eef3ff; --beh-primary-100: #dce7ff; --beh-primary-200: #bcd1ff; --beh-primary-600: #1b41be; --beh-primary-700: #16349a; --beh-accent-050: #e7f7ef; --beh-warn: #b45309; --beh-warn-050: #fef3e2; --beh-surface: #ffffff; --beh-surface-alt: #fbfcfe; --beh-line-soft: #eef2f7; --beh-line-strong: #cad7ec; --beh-muted: #66728a; --beh-muted-soft: #8b95a9; /* Footer sits on navy and needs its own scale. */ --beh-footer-bg: #07132f; --beh-footer-text: #cbd5e7; --beh-footer-head: #ffffff; --beh-footer-line: rgb(255 255 255 / 12%); /* Typography. The UI stack is Inter for all chrome. The editorial stack is Source Serif 4 and is used only inside article bodies and post headlines — the homepage stays entirely on the UI stack so it matches the current design exactly. 'Inter Fallback' / 'Source Serif Fallback' are the metric-matched faces from fonts.css; the generic families after them catch Arabic, Korean and Japanese, which the webfonts do not cover. */ --beh-font-ui: 'Inter', 'Inter Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', 'Noto Sans Arabic', 'Noto Sans KR', 'Noto Sans JP', 'Malgun Gothic', 'Yu Gothic UI', Arial, sans-serif; --beh-font-editorial: 'Source Serif 4', 'Source Serif Fallback', 'Noto Serif', 'Noto Naskh Arabic', 'Noto Serif KR', 'Noto Serif JP', Georgia, 'Times New Roman', serif; --beh-font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /* Global multiplier driven by the Customizer's font-size slider. */ --beh-font-scale: 1; /* Type scale. clamp() means no breakpoint ever has to restate a size. The middle value is in vw so it interpolates smoothly, and the scale multiplier lets the client nudge everything at once. */ --beh-fs-xs: calc(0.75rem * var(--beh-font-scale)); --beh-fs-sm: calc(0.8125rem * var(--beh-font-scale)); --beh-fs-base: calc(0.875rem * var(--beh-font-scale)); --beh-fs-md: calc(1rem * var(--beh-font-scale)); --beh-fs-lg: calc(1.125rem * var(--beh-font-scale)); --beh-fs-xl: calc(1.3125rem * var(--beh-font-scale)); --beh-fs-h3: calc(clamp(1.25rem, 1.6vw, 1.5rem) * var(--beh-font-scale)); --beh-fs-h2: calc(clamp(1.9375rem, 3.2vw, 3rem) * var(--beh-font-scale)); --beh-fs-h1: calc(clamp(2.75rem, 5.2vw, 4.5rem) * var(--beh-font-scale)); --beh-lh-tight: 1.12; --beh-lh-snug: 1.25; --beh-lh-base: 1.65; --beh-lh-relaxed: 1.78; --beh-tracking-tight: -0.045em; --beh-tracking-snug: -0.03em; --beh-tracking-label: 0.13em; /* Spacing — a 4px base grid. */ --beh-s-1: 0.25rem; --beh-s-2: 0.5rem; --beh-s-3: 0.75rem; --beh-s-4: 1rem; --beh-s-5: 1.25rem; --beh-s-6: 1.5rem; --beh-s-7: 1.75rem; --beh-s-8: 2rem; --beh-s-10: 2.5rem; --beh-s-12: 3rem; --beh-s-14: 3.5rem; --beh-s-16: 4rem; --beh-s-20: 5rem; --beh-s-24: 6rem; /* Section rhythm — the vertical beat of the homepage. */ --beh-section-y: clamp(3.875rem, 6vw, 5.5rem); /* Layout */ --beh-container: 1240px; --beh-gutter: 1.75rem; --beh-measure: 72ch; /* Article line length; Customizer-adjustable. */ /* Radii — matched to the current site's values. */ --beh-r-xs: 7px; --beh-r-sm: 9px; --beh-r-md: 12px; --beh-r-lg: 16px; --beh-r-xl: 22px; --beh-r-2xl: 24px; --beh-r-pill: 999px; /* Shadows — all tinted with the navy rather than pure black, which is what keeps them looking like part of the palette instead of dirt. */ --beh-shadow-xs: 0 2px 8px rgb(7 19 47 / 4%); --beh-shadow-sm: 0 8px 28px rgb(7 19 47 / 4%); --beh-shadow-md: 0 18px 45px rgb(7 19 47 / 7.5%); --beh-shadow-lg: 0 24px 60px rgb(7 19 47 / 11%); --beh-shadow-xl: 0 15px 40px rgb(7 19 47 / 10%); /* Motion */ --beh-ease: cubic-bezier(0.32, 0.72, 0, 1); --beh-dur-fast: 0.16s; --beh-dur: 0.22s; /* Layering. Declared as one block so a stacking bug is a five-second read rather than a hunt through six files. */ --beh-z-base: 1; --beh-z-sticky: 40; --beh-z-header: 50; --beh-z-dropdown: 60; --beh-z-overlay: 80; --beh-z-drawer: 90; --beh-z-toast: 100; /* Measured at runtime by header.js so sticky offsets and scroll-margin never need a hardcoded pixel guess. */ /* Logo heights, one per placement. Overridden by the Customizer. */ --beh-logo-h: 40px; --beh-logo-h-mobile: 34px; --beh-logo-h-footer: 38px; /* Distance between the header's bottom edge and any open nav panel. */ --beh-panel-gap: 4px; --beh-header-h: 82px; --beh-admin-bar: 0px; } /* ------------------------------------------------------------------------- 2. Reset and base ---------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; /* scroll-padding keeps anchor targets (TOC jumps, skip link) clear of the sticky header instead of hiding them underneath it. */ scroll-padding-block-start: calc(var(--beh-header-h) + var(--beh-admin-bar) + 1.5rem); } /* Smooth scrolling is opt-in per user preference, never forced. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--beh-surface); color: var(--beh-body); font-family: var(--beh-font-ui); font-size: var(--beh-fs-md); line-height: var(--beh-lh-base); /* Inter ships proportional figures by default; tabular numbers keep dates, reading times and pagination from jittering. cv11 gives the single-storey 'l' that stops 1/l/I confusion in citations. */ font-feature-settings: 'cv11'; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { margin: 0; color: var(--beh-navy); line-height: var(--beh-lh-tight); font-weight: 800; text-wrap: balance; /* Stops a lone orphan word on a headline's last line. */ } h1 { font-size: var(--beh-fs-h1); letter-spacing: var(--beh-tracking-tight); } h2 { font-size: var(--beh-fs-h2); letter-spacing: var(--beh-tracking-snug); } h3 { font-size: var(--beh-fs-h3); letter-spacing: -0.015em; } p { margin-block: 0 var(--beh-s-4); text-wrap: pretty; } p:last-child { margin-block-end: 0; } a { color: var(--beh-primary); text-decoration: none; transition: color var(--beh-dur-fast) var(--beh-ease); } a:hover { color: var(--beh-primary-600); } img, svg, video, iframe, canvas { max-width: 100%; height: auto; display: block; } /* Reserve the aspect ratio while an image loads so nothing jumps. */ img[width][height] { height: auto; } ul, ol { margin-block: 0 var(--beh-s-4); padding-inline-start: 1.35em; } figure { margin: 0; } hr { border: 0; border-block-start: 1px solid var(--beh-line); margin-block: var(--beh-s-10); } blockquote { margin: 0; } code, kbd, pre, samp { font-family: var(--beh-font-mono); font-size: 0.9em; } table { border-collapse: collapse; width: 100%; } button { font: inherit; color: inherit; cursor: pointer; } input, textarea, select { font: inherit; color: inherit; } ::selection { background: var(--beh-primary-100); color: var(--beh-navy); } /* ------------------------------------------------------------------------- 2b. Overflow safety A single unbreakable string — a DOI, a long compound name, a pasted URL — is enough to make a grid or flex item refuse to shrink below its content, which pushes the whole page sideways on a phone. These three rules are what keep every layout in the theme genuinely fluid rather than merely having breakpoints. ---------------------------------------------------------------------- */ :where(p, li, dd, dt, h1, h2, h3, h4, h5, h6, blockquote, figcaption, td, th, a) { overflow-wrap: break-word; } /* Grid and flex children default to min-width:auto, meaning "never shrink below my content". Almost every horizontal-overflow bug in a CSS grid traces back to this. */ :where(.beh-grid, .beh-shell, .beh-archive__inner, .beh-article__grid, .beh-contact__grid, .beh-hero__grid, .beh-banner, .beh-authors) > * { min-inline-size: 0; } /* Nothing may draw wider than the viewport. */ :where(img, svg, video, iframe, embed, object, table, pre) { max-inline-size: 100%; } /* ------------------------------------------------------------------------- 3. Accessibility ---------------------------------------------------------------------- */ /* One consistent focus ring across every interactive element. :focus-visible (not :focus) so it appears for keyboard users and never on a mouse click. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--beh-primary); outline-offset: 3px; border-radius: var(--beh-r-xs); } /* Visually hidden but still announced by screen readers. */ .beh-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Skip link — hidden until focused, then pinned to the top-left. */ .beh-skip { position: absolute; inset-block-start: -100px; inset-inline-start: var(--beh-s-4); z-index: var(--beh-z-toast); background: var(--beh-navy); color: #fff; padding: var(--beh-s-3) var(--beh-s-5); border-radius: 0 0 var(--beh-r-sm) var(--beh-r-sm); font-weight: 700; font-size: var(--beh-fs-base); transition: inset-block-start var(--beh-dur) var(--beh-ease); } .beh-skip:focus { inset-block-start: var(--beh-admin-bar); color: #fff; } /* Honour the OS "reduce motion" setting site-wide. Animations are cut to a near-zero duration rather than removed, so transitionend handlers in JS still fire and no interaction silently breaks. */ @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; } } /* ------------------------------------------------------------------------- 4. Layout primitives ---------------------------------------------------------------------- */ .beh-shell { inline-size: 100%; max-inline-size: var(--beh-container); margin-inline: auto; padding-inline: var(--beh-gutter); } .beh-shell--narrow { max-inline-size: 920px; } .beh-section { padding-block: var(--beh-section-y); } .beh-section--soft { background: var(--beh-surface-soft); } .beh-section--tight { padding-block: calc(var(--beh-section-y) * 0.6); } /* Rules that top-and-tail a band of content, as on the principles strip. */ .beh-section--ruled { border-block: 1px solid var(--beh-line); background: var(--beh-surface); } .beh-grid { display: grid; gap: var(--beh-s-6); } .beh-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .beh-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .beh-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .beh-stack > * + * { margin-block-start: var(--beh-s-4); } /* ------------------------------------------------------------------------- 5. Shared components ---------------------------------------------------------------------- */ /* Eyebrow label — the small uppercase blue line above section headings. */ .beh-label { display: block; font-size: var(--beh-fs-sm); font-weight: 800; letter-spacing: var(--beh-tracking-label); text-transform: uppercase; color: var(--beh-primary); margin-block-end: var(--beh-s-3); } .beh-section-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--beh-s-8); margin-block-end: var(--beh-s-10); } .beh-section-head p { max-inline-size: 650px; margin-block: var(--beh-s-3) 0; } /* Buttons */ .beh-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--beh-s-2); border: 1px solid var(--beh-primary); border-radius: var(--beh-r-sm); padding: 0.8125rem 1.25rem; font-size: var(--beh-fs-base); font-weight: 750; line-height: 1.2; color: #fff; background: var(--beh-primary); cursor: pointer; transition: background var(--beh-dur-fast) var(--beh-ease), border-color var(--beh-dur-fast) var(--beh-ease), color var(--beh-dur-fast) var(--beh-ease), transform var(--beh-dur-fast) var(--beh-ease); } .beh-btn:hover { background: var(--beh-primary-600); border-color: var(--beh-primary-600); color: #fff; } .beh-btn:active { transform: translateY(1px); } .beh-btn--alt { color: var(--beh-primary); background: var(--beh-surface); } .beh-btn--alt:hover { color: #fff; background: var(--beh-primary); } .beh-btn--ghost { color: var(--beh-navy); background: transparent; border-color: var(--beh-line); } .beh-btn--ghost:hover { background: var(--beh-surface-soft); border-color: var(--beh-line-strong); color: var(--beh-navy); } .beh-btn--sm { padding: 0.5rem 0.875rem; font-size: var(--beh-fs-sm); } .beh-btn .beh-i { inline-size: 1.125em; block-size: 1.125em; } /* Text link with a trailing arrow that nudges on hover. */ .beh-link { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--beh-primary); font-weight: 750; font-size: var(--beh-fs-base); } .beh-link .beh-i { inline-size: 1em; block-size: 1em; transition: transform var(--beh-dur) var(--beh-ease); } .beh-link:hover .beh-i { /* translate, not margin — margin would reflow the line. The custom property keeps the direction correct when the page is RTL. */ transform: translateX(var(--beh-nudge, 3px)); } [dir='rtl'] .beh-link { --beh-nudge: -3px; } [dir='rtl'] .beh-link .beh-i, [dir='rtl'] .beh-i--arrow-right, [dir='rtl'] .beh-i--chevron-right { scale: -1 1; } /* Card */ .beh-card { position: relative; background: var(--beh-surface); border: 1px solid var(--beh-line); border-radius: var(--beh-r-lg); padding: var(--beh-s-6); box-shadow: var(--beh-shadow-sm); transition: transform var(--beh-dur) var(--beh-ease), box-shadow var(--beh-dur) var(--beh-ease), border-color var(--beh-dur) var(--beh-ease); } .beh-card:hover { transform: translateY(-3px); box-shadow: var(--beh-shadow-md); border-color: var(--beh-primary-200); } .beh-card--flat { box-shadow: none; } .beh-card--flat:hover { transform: none; box-shadow: var(--beh-shadow-xs); } /* Icon tile — the rounded pale square that fronts a card. */ .beh-icon-tile { display: grid; place-items: center; inline-size: 2.375rem; block-size: 2.375rem; border-radius: var(--beh-r-md); background: var(--beh-pale); color: var(--beh-primary); margin-block-end: var(--beh-s-3); flex: none; } .beh-icon-tile .beh-i { inline-size: 1.25rem; block-size: 1.25rem; } .beh-icon-tile--lg { inline-size: 3rem; block-size: 3rem; } .beh-icon-tile--lg .beh-i { inline-size: 1.5rem; block-size: 1.5rem; } /* Pills — evidence type, category chips, badges. */ .beh-pill { display: inline-flex; align-items: center; gap: 0.3125rem; padding: 0.3125rem 0.5625rem; border-radius: var(--beh-r-pill); font-size: var(--beh-fs-xs); font-weight: 800; line-height: 1.3; background: var(--beh-primary-050); color: var(--beh-primary); white-space: nowrap; } .beh-pill--accent { background: var(--beh-accent-050); color: var(--beh-accent); } .beh-pill--neutral { background: var(--beh-surface-soft); color: var(--beh-muted); } .beh-pill .beh-i { inline-size: 0.875rem; block-size: 0.875rem; } /* Meta line — category · date · reading time. */ .beh-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; font-size: var(--beh-fs-xs); font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--beh-primary); font-variant-numeric: tabular-nums; } .beh-meta a { color: inherit; } .beh-meta a:hover { color: var(--beh-primary-700); } .beh-meta__sep { color: var(--beh-line-strong); } .beh-meta--muted { color: var(--beh-muted); text-transform: none; letter-spacing: 0; font-weight: 600; } /* Screen-reader-friendly "stretched link": makes a whole card clickable without nesting interactive elements or duplicating the anchor. */ .beh-stretch::after { content: ''; position: absolute; inset: 0; z-index: 1; border-radius: inherit; } /* Anything that must stay clickable above a stretched link. */ .beh-above { position: relative; z-index: 2; } /* Media frame — holds an image or the generated placeholder. */ .beh-media { position: relative; overflow: hidden; border-radius: var(--beh-r-md); background: linear-gradient(145deg, var(--beh-primary-100), #f3f8ff); aspect-ratio: 3 / 2; } .beh-media img { inline-size: 100%; block-size: 100%; object-fit: cover; transition: scale var(--beh-dur) var(--beh-ease); } .beh-card:hover .beh-media img, .beh-post-row:hover .beh-media img { scale: 1.035; } /* Placeholder shown when a post has no featured image. Rather than a grey box, it renders the molecule mark on the brand gradient so an unillustrated archive still looks deliberate. */ .beh-media--placeholder { display: grid; place-items: center; color: var(--beh-primary); } .beh-media--placeholder .beh-i { inline-size: 40%; max-inline-size: 3.5rem; block-size: auto; opacity: 0.55; } /* ------------------------------------------------------------------------- 6. Responsive ---------------------------------------------------------------------- */ @media (max-width: 1100px) { .beh-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 860px) { :root { --beh-gutter: 1.25rem; --beh-section-y: 3.875rem; } .beh-grid--2, .beh-grid--3, .beh-grid--4 { grid-template-columns: 1fr; } .beh-section-head { flex-direction: column; align-items: flex-start; gap: var(--beh-s-4); } h1 { font-size: calc(2.75rem * var(--beh-font-scale)); } } /* ------------------------------------------------------------------------- 7. Breadcrumbs Used by archives, single posts and static pages alike, so they live in the foundation rather than in any one template stylesheet. ---------------------------------------------------------------------- */ .beh-breadcrumbs { margin-block-end: var(--beh-s-6); font-size: var(--beh-fs-sm); color: var(--beh-muted); } .beh-breadcrumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin: 0; padding: 0; list-style: none; } .beh-breadcrumbs li { display: inline-flex; align-items: center; gap: 0.375rem; } .beh-breadcrumbs a { color: var(--beh-muted); font-weight: 600; } .beh-breadcrumbs a:hover { color: var(--beh-primary); } .beh-breadcrumbs .beh-i { inline-size: 0.75rem; block-size: 0.75rem; color: var(--beh-line-strong); } .beh-breadcrumbs [aria-current='page'] { color: var(--beh-navy); font-weight: 700; } /* ------------------------------------------------------------------------- 8. Print ---------------------------------------------------------------------- */ @media print { .beh-header, .beh-footer, .beh-progress, .beh-toc, .beh-share, .beh-related, .beh-prevnext, .beh-to-top, .beh-drawer, #cookie-law-info-bar { display: none !important; } body { background: #fff; font-size: 11pt; } /* Expose link targets that would otherwise be lost on paper. */ .beh-article a[href^='http']::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; word-break: break-all; } }