/* ===================================================================== RKB — "Quiet Reference" design system. An ultra-minimal, hairline-based editorial system: no cards, no shadows, no rounded corners. Separation comes from 1px rules (--line) and whitespace only. Light-weight display serif (Spectral) for headlines/species names/reading copy; Archivo for UI chrome. The defining product requirement this styles: trust must be legible at a glance. Reviewed ("official", emerald) and community-contributed (terracotta) content are two distinct visual tiers, and color alone is never the differentiator — every status carries a text label. Token layering — IMPORTANT. The `--bg`/`--ink`/`--line`/`--official` set below is the source of truth. The older RKB-008/011 token names (--page-bg, --text, --card-border, --accent, …) are kept as aliases that resolve to it, because ~40 server-rendered routers reference them directly. Restyling the alias layer is what carries the redesign across every page without editing each router. Add new colors to the canonical set, not the alias set. ===================================================================== */ /* ---------- Canonical tokens — light theme (lush forest) ---------- */ :root { --bg: #f6faf4; /* page background (ivory-green) */ --bg-alt: #ebf3e6; /* alternating section background */ --surface: #ffffff; --ink: #122018; /* primary text */ --ink-2: #48594c; /* secondary text */ --ink-3: #8b9c8e; /* tertiary / muted / zero-values */ --line: #dce8d8; /* hairline dividers — the only separator */ --official: #1e8f5e; /* reviewed content */ --official-tint: #dff5e9; --official-ink: #146b45; --community: #d96a2e; /* community-contributed content */ --community-tint: #fbe8d8; --community-ink: #a84e1d; --success: #2fa85e; /* consensus agreement */ --success-tint: #e1f6e9; --conflict: #d93a3a; /* consensus disagreement / flagged conflict */ --conflict-tint: #fadada; --info: #1e88a8; /* informational notices, empty states */ --info-tint: #ddf2f7; --warning: #c99a1e; /* scientific-review-pending */ --warning-tint: #f8efd0; --serif: 'Spectral', Georgia, 'Times New Roman', serif; --sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; } /* ---------- Canonical tokens — dark theme ---------- Never mix light and dark hex values. Several colors (--official-ink above all) are NOT opacity variants of their light counterparts; they are independently tuned for contrast on their own background, so the full set swaps together or not at all. */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --bg: #0e1712; --bg-alt: #141f18; --surface: #131d17; --ink: #eaf3ec; --ink-2: #a6bcac; --ink-3: #647a6a; --line: #233329; --official: #4fe39a; --official-tint: #123321; --official-ink: #8cf0be; --community: #f0a15e; --community-tint: #33220f; --community-ink: #f6c089; --success: #6edb98; --success-tint: #122a1c; --conflict: #f0776b; --conflict-tint: #301613; --info: #5fc4e0; --info-tint: #0f2730; --warning: #e3c15c; --warning-tint: #2e2408; } } /* Explicit override, for a future user-facing theme toggle: stamping data-theme="dark" on is all it takes. */ :root[data-theme='dark'] { --bg: #0e1712; --bg-alt: #141f18; --surface: #131d17; --ink: #eaf3ec; --ink-2: #a6bcac; --ink-3: #647a6a; --line: #233329; --official: #4fe39a; --official-tint: #123321; --official-ink: #8cf0be; --community: #f0a15e; --community-tint: #33220f; --community-ink: #f6c089; --success: #6edb98; --success-tint: #122a1c; --conflict: #f0776b; --conflict-tint: #301613; --info: #5fc4e0; --info-tint: #0f2730; --warning: #e3c15c; --warning-tint: #2e2408; } /* ---------- Alias layer — the pre-redesign token names ---------- Kept so every existing router restyles in place. Do not add new colors here; add them to the canonical set above. */ :root { --page-bg: var(--bg); --card-bg: var(--surface); --card-border: var(--line); --text: var(--ink); --muted: var(--ink-2); --accent: var(--official); --accent-hover: var(--official-ink); --link: var(--official-ink); --official-bg: var(--surface); --official-border: var(--line); --community-bg: var(--bg-alt); --community-border: var(--community); --community-banner-bg: var(--official-tint); --badge-bg: var(--official); --badge-text: var(--surface); --danger: var(--conflict); --warning-bg: var(--warning-tint); --warning-border: var(--warning); --consensus-agree: var(--success); --consensus-conflict: var(--conflict); --info-bg: var(--info-tint); --info-border: var(--info); --info-text: var(--info); --success-bg: var(--success-tint); --success-border: var(--success); --success-text: var(--official-ink); --font-family: var(--sans); --font-family-serif: var(--serif); /* Type scale (see the design's own scale: H1 58/1.12, H2 32/1.2, care-sheet H3 22/1.3, body 18–19/1.7–1.8, UI labels 11–13px). */ --font-size-xs: 0.6875rem; /* 11px — uppercase micro-labels */ --font-size-sm: 0.8125rem; /* 13px — UI / meta */ --font-size-base: 0.875rem; /* 14px — UI body */ --font-size-md: 1.125rem; /* 18px — reading copy */ --font-size-lg: 1.375rem; /* 22px — care-sheet H3 */ --font-size-xl: 2rem; /* 32px — section H2 */ --font-size-2xl: 2.75rem; /* 44px — article title */ --font-size-3xl: 3.625rem; /* 58px — hero H1 */ --line-height-tight: 1.2; --line-height-base: 1.6; --line-height-relaxed: 1.8; --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4.375rem; /* 70px — standard section padding */ --container-width: 1100px; --container-width-narrow: 780px; --container-width-wide: 1320px; /* No border-radius anywhere in this system; every corner is sharp. Circles (status dots, avatars) opt in explicitly with 50%. */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; --shadow-sm: none; --shadow-md: none; font-family: var(--sans); color-scheme: light dark; } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: var(--font-size-base); line-height: var(--line-height-base); -webkit-font-smoothing: antialiased; } a { color: var(--official-ink); text-decoration: none; } a:hover { text-decoration: underline; text-underline-offset: 3px; } img { max-width: 100%; } /* ---------- Typography ---------- */ h1, h2, h3, h4, h5, h6 { font-family: var(--serif); font-weight: 300; line-height: var(--line-height-tight); color: var(--ink); margin: 0 0 var(--space-3); letter-spacing: -0.01em; } h1 { font-size: var(--font-size-2xl); } h2 { font-size: var(--font-size-xl); } h3 { font-size: var(--font-size-lg); font-weight: 400; letter-spacing: 0; } h4 { font-size: 1.125rem; font-weight: 400; letter-spacing: 0; } p { margin: 0 0 var(--space-4); } em, i, .scientific-name { font-style: italic; } small, .text-sm { font-size: var(--font-size-sm); } .text-xs { font-size: var(--font-size-xs); } .text-muted { color: var(--ink-2); } /* Long-form reading copy — serif, generous leading. The one place the serif face carries body text rather than headlines. */ .article-serif, .article-body, .care-sheet__body { font-family: var(--serif); font-weight: 300; font-size: var(--font-size-md); line-height: var(--line-height-relaxed); color: var(--ink); } .article-serif h2, .article-body h2 { font-size: 1.75rem; font-weight: 400; margin: 2.5rem 0 var(--space-4); border: 0; padding: 0; } .article-serif h3, .article-body h3 { font: 400 var(--font-size-lg)/1.3 var(--serif); margin: 2.25rem 0 var(--space-4); } .article-serif p, .article-body p { margin: 0 0 1.125rem; } .article-body img { border-radius: 0; } .article-body table { width: 100%; border-collapse: collapse; font-family: var(--sans); font-size: var(--font-size-sm); } .article-body table th, .article-body table td { padding: 0.6rem 0.65rem; border-bottom: 1px solid var(--line); text-align: left; } .article-body table th { color: var(--ink-2); font-weight: 500; } /* Inline numbered citation marker — superscript, accent-colored. */ .cite, .citation-marker { font-family: var(--sans); font-size: 0.62em; vertical-align: super; color: var(--official-ink); font-weight: 600; text-decoration: none; } .cite:hover, .citation-marker:hover { text-decoration: underline; } /* ---------- Accessibility ---------- */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; left: -999px; top: 0; z-index: 100; background: var(--official-ink); color: #fff; padding: 0.7rem 1.15rem; font: 500 var(--font-size-sm)/1 var(--sans); } .skip-link:focus { left: 0; } /* Visible, high-contrast focus ring on every interactive element — never rely on the browser default alone, but never remove it either. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--official); outline-offset: 3px; } /* ---------- Brandmark ---------- "R·K·B" — the dotted treatment is the approved mark; never compress to a bare "RKB". Final B in the official accent, dots in tertiary. */ .site-header__brand, .brandmark { font: 500 20px/1 var(--serif); letter-spacing: 0.06em; color: var(--ink); text-decoration: none; white-space: nowrap; } .site-header__brand:hover, .brandmark:hover { text-decoration: none; } .site-header__brand b, .site-header__brand span, .brandmark b, .brandmark span { color: var(--official); font-weight: 500; } /* The dots are tertiary, not accent — this must outrank the rule above. */ .brandmark .dot, .site-header__brand .dot { color: var(--ink-3); margin: 0 3px; font-weight: 400; } /* ---------- Header / nav ---------- */ .site-header { background: var(--bg); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 20; } .site-header__bar { display: flex; align-items: center; gap: 1.5rem; padding: 22px 56px; max-width: var(--container-width-wide); margin: 0 auto; font-family: var(--sans); } .site-nav { display: flex; align-items: center; gap: 26px; margin-right: auto; font: 500 var(--font-size-sm)/1 var(--sans); } .site-nav a { color: var(--ink-2); text-decoration: none; padding: 0.25rem 0; border-bottom: 1px solid transparent; white-space: nowrap; } .site-nav a:hover, .site-nav a.is-active, .site-nav a[aria-current='page'] { color: var(--official-ink); text-decoration: none; } /* Search — a hairline underline, never a pill or a box. */ .site-search { flex: 0 1 240px; } .site-search input { width: 100%; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; padding: 5px 0; font: 400 var(--font-size-sm)/1.4 var(--sans); color: var(--ink); outline: 0; } .site-search input::placeholder { color: var(--ink-3); } .site-search input:focus { border-bottom-color: var(--official); outline: 0; } .site-header__user { position: relative; display: flex; align-items: center; gap: 0.9rem; white-space: nowrap; } .user-menu-toggle { display: flex; align-items: center; gap: 0.4rem; background: none; border: 0; padding: 0.35rem 0; cursor: pointer; font: 500 var(--font-size-sm)/1 var(--sans); color: var(--ink-2); } .user-menu-toggle:hover { color: var(--official-ink); } .user-menu-dropdown, .notification-dropdown { display: none; position: absolute; right: 0; top: calc(100% + 14px); background: var(--surface); border: 1px solid var(--line); min-width: 210px; padding: 0.35rem; z-index: 30; } .user-menu-dropdown.is-open, .notification-dropdown.is-open { display: block; } .user-menu-dropdown a, .user-menu-dropdown button { display: block; width: 100%; text-align: left; padding: 0.55rem 0.65rem; border: none; background: none; color: var(--ink-2); text-decoration: none; font: 400 var(--font-size-sm)/1 var(--sans); cursor: pointer; } .user-menu-dropdown a:hover, .user-menu-dropdown button:hover { background: var(--bg-alt); color: var(--official-ink); } .site-header__notifications { position: relative; } .notification-bell { position: relative; font-size: 1rem; color: var(--ink-2); text-decoration: none; padding: 0.25rem; background: none; border: none; cursor: pointer; line-height: 1; } .notification-bell__dot { position: absolute; top: 0; right: 0; width: 6px; height: 6px; border-radius: 50%; background: var(--conflict); } .notification-bell__dot[hidden] { display: none; } .notification-dropdown { width: 320px; max-height: 400px; overflow-y: auto; padding: 0; } .notification-dropdown__header { display: flex; justify-content: space-between; align-items: center; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line); font: 600 var(--font-size-sm)/1 var(--sans); } .notification-list { list-style: none; margin: 0; padding: 0; } .notification-list__empty { padding: 1rem 0.85rem; color: var(--ink-3); font-size: var(--font-size-sm); text-align: center; } .notification-item { padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line); cursor: pointer; font-size: var(--font-size-sm); } .notification-item:last-child { border-bottom: none; } .notification-item:hover { background: var(--bg-alt); } .notification-item--unread { border-left: 2px solid var(--official); } .notification-item__title { margin: 0; } .notification-item__meta { margin: 0.2rem 0 0; color: var(--ink-3); font-size: var(--font-size-xs); } .notification-dropdown__footer { text-align: center; padding: 0.5rem; border-top: 1px solid var(--line); font-size: var(--font-size-sm); } /* Hamburger — the design collapses nav/search/actions under ~1000px. */ .nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 24px; height: 24px; border: 0; background: none; cursor: pointer; padding: 0; } .nav-toggle__bar { display: block; height: 1px; width: 20px; background: var(--ink); } /* ---------- Buttons — text-style, hairline-underlined. No fills. ---------- */ .btn { display: inline-block; padding: 0 0 3px; border: 0; border-bottom: 1px solid var(--ink); border-radius: 0; background: none; color: var(--ink); text-decoration: none; font: 500 var(--font-size-sm)/1.3 var(--sans); letter-spacing: 0.02em; cursor: pointer; white-space: nowrap; } .btn:hover { text-decoration: none; opacity: 0.72; } .btn--primary, .form-card .btn, .btn:not(.btn--secondary):not(.btn--outline):not(.btn--ghost):not(.btn--danger) { color: var(--official-ink); font-weight: 600; border-bottom-color: var(--official-ink); } .btn--secondary, .btn--outline, .btn--ghost { color: var(--ink-2); border-bottom-color: var(--line); font-weight: 500; } .btn--secondary:hover, .btn--outline:hover, .btn--ghost:hover { color: var(--official-ink); border-bottom-color: var(--official-ink); opacity: 1; } .btn--danger { color: var(--conflict); border-bottom-color: var(--conflict); } .btn--small { font-size: var(--font-size-xs); } .btn--large { font-size: var(--font-size-base); } .btn--block { display: block; width: 100%; text-align: center; } .btn[disabled], .btn[aria-disabled='true'] { opacity: 0.45; cursor: not-allowed; pointer-events: none; } /* ---------- Layout regions ---------- */ .container { max-width: var(--container-width-wide); margin: 0 auto; padding: 0 56px; } .container--wide { max-width: var(--container-width-wide); margin: 0 auto; padding: 0 56px; } .container--narrow { max-width: var(--container-width-narrow); margin: 0 auto; padding: 0 56px; } .page-main { max-width: var(--container-width-wide); margin: 0 auto; padding: 44px 56px 90px; } .page-main--narrow { max-width: 800px; } /* Standard section rhythm: 70px vertical / 56px horizontal. */ .section { padding: var(--space-8) 0; } .section--alt { background: var(--bg-alt); padding: var(--space-8) 56px; margin: 0 -56px; } .section-head { margin-bottom: 40px; } .section-head h2 { font: 300 var(--font-size-xl)/1.2 var(--serif); margin: 0; } .section-head p { font: 400 var(--font-size-base)/1.6 var(--sans); color: var(--ink-2); margin: 8px 0 0; max-width: 520px; } .section-head-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; } /* The pre-redesign section header. Same rhythm, hairline instead of nothing. */ .section-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin: 3.5rem 0 1.75rem; } .section-heading h2 { margin: 0; font: 300 var(--font-size-xl)/1.2 var(--serif); } .section-heading a { font: 500 var(--font-size-sm)/1 var(--sans); } /* ---------- Footer ---------- */ .site-footer { border-top: 1px solid var(--line); margin-top: var(--space-8); padding: var(--space-8) 56px 34px; font-family: var(--sans); } .site-footer__inner { max-width: var(--container-width-wide); margin: 0 auto; display: flex; justify-content: space-between; gap: 60px; flex-wrap: wrap; padding-bottom: 44px; } .site-footer__col { flex: 1 1 260px; max-width: 300px; } .site-footer__col p { font: 400 13.5px/1.6 var(--sans); color: var(--ink-2); margin-top: 14px; } .site-footer__links { display: flex; flex-direction: column; } .site-footer__links a { display: block; font: 400 14px/1 var(--sans); color: var(--ink-2); padding: 7px 0; text-decoration: none; } .site-footer__links a:hover { color: var(--official-ink); text-decoration: none; } .site-footer__links-title { font: 600 var(--font-size-xs)/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; } /* The honesty strip — review + beta status, always present. */ .honesty-strip { max-width: var(--container-width-wide); margin: 0 auto; border-top: 1px solid var(--line); padding-top: 26px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; font: 400 13px/1.7 var(--sans); color: var(--ink-2); } /* ---------- Hero ---------- */ .hero { padding: 110px 0 70px; max-width: 820px; margin: 0 auto; text-align: center; position: relative; } .hero > * { position: relative; z-index: 1; } .eyebrow { font: 500 12px/1 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--official-ink); margin-bottom: 26px; } .hero__title { font: 300 var(--font-size-3xl)/1.12 var(--serif); margin: 0 0 22px; color: var(--ink); letter-spacing: -0.01em; position: relative; } .hero__title em { font-style: italic; color: var(--official-ink); font-weight: 400; } /* Watermark — gecko + snake + turtle silhouettes at 10% opacity, centered behind the H1. Quiet texture; never competes with the text. */ .hero__watermark { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0.1; pointer-events: none; z-index: 0; display: flex; gap: 60px; align-items: center; justify-content: center; } .hero__watermark img { height: 120px; width: auto; } /* "For / From Your Information" mark. The per-letter colors are deliberate and coordinated (R/K/B/I green-family, F/Y terracotta) — keep the linkage if this mark is ever re-cut. */ .hero__fyi { display: inline-flex; flex-direction: column; align-items: center; gap: 8px; margin: 6px 0 28px; font-family: var(--sans); } .hero__fyi-mark { display: inline-flex; align-items: center; gap: 0.35em; font-weight: 500; color: var(--ink-2); font-size: 34px; } .hero__fyi-stack { display: inline-flex; flex-direction: column; align-items: center; font-size: 0.56em; line-height: 1.3; font-weight: 600; letter-spacing: 0.02em; } .hero__fyi-stack span { font-style: normal; } .hero__fyi-stack span:first-child { border-bottom: 1px solid currentColor; padding-bottom: 0.1em; margin-bottom: 0.1em; } .hero__fyi-domain { font: 500 14px/1 var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-3); } .dl-r { color: #1e8f5e; } .dl-k { color: #146b45; } .dl-b { color: #2fa85e; } .dl-f { color: #d96a2e; } .dl-y { color: #a84e1d; } .dl-i { color: #146b45; } @media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .dl-r { color: #4fe39a; } :root:not([data-theme='light']) .dl-k { color: #8cf0be; } :root:not([data-theme='light']) .dl-b { color: #6edb98; } :root:not([data-theme='light']) .dl-f { color: #f0a15e; } :root:not([data-theme='light']) .dl-y { color: #f6c089; } :root:not([data-theme='light']) .dl-i { color: #8cf0be; } } :root[data-theme='dark'] .dl-r { color: #4fe39a; } :root[data-theme='dark'] .dl-k { color: #8cf0be; } :root[data-theme='dark'] .dl-b { color: #6edb98; } :root[data-theme='dark'] .dl-f { color: #f0a15e; } :root[data-theme='dark'] .dl-y { color: #f6c089; } :root[data-theme='dark'] .dl-i { color: #8cf0be; } .hero__lead, .hero__sub { font: 300 19px/1.65 var(--serif); color: var(--ink-2); max-width: 520px; margin: 0 auto 36px; } .hero__search { max-width: 440px; margin: 0 auto 30px; display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--ink); padding: 10px 2px; } .hero__search input { flex: 1; border: 0; outline: 0; background: transparent; font: 400 15px/1.4 var(--sans); color: var(--ink); } .hero__search input::placeholder { color: var(--ink-3); } .hero__ctas { display: flex; gap: 36px; justify-content: center; padding-top: 4px; } /* ---------- Beta banner — hairline strip, not a boxed card ---------- */ .beta-banner { max-width: 820px; margin: 0 auto; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); display: flex; gap: 20px; align-items: flex-start; font-family: var(--sans); } .beta-banner__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--official); flex: none; margin-top: 8px; } .beta-banner h3 { margin: 0 0 6px; font: 600 15px/1.3 var(--sans); color: var(--ink); letter-spacing: 0; } .beta-banner p { margin: 0; font: 400 14px/1.65 var(--sans); color: var(--ink-2); } .beta-banner__links { display: flex; gap: 22px; margin-top: 12px; flex-wrap: wrap; } .beta-banner__links a { font: 500 13px/1 var(--sans); } /* ---------- Stat row — hairline-separated cells, vivid serif numerals ---------- */ .stat-grid, .stat-row { display: flex; } .stat-tile { flex: 1; padding: 0 24px; border-left: 1px solid var(--line); background: none; border-top: 0; border-right: 0; border-bottom: 0; text-align: left; } .stat-tile:first-child { border-left: 0; padding-left: 0; } .stat-tile__value, .stat-tile .val { font: 400 40px/1 var(--serif); color: var(--official-ink); } /* A zero is an honest number, not an error state. */ .stat-tile__value--zero, .stat-tile .val.zero { color: var(--ink-3); } /* Some "stats" are words, not counts ("reptile", "Not assessed"). The vivid 40px serif numeral treatment is for magnitudes; a word set that way just reads as a mistake. */ .stat-tile__value--text { font: 500 1rem/1.4 var(--sans); color: var(--ink); } .stat-tile__label, .stat-tile .lbl { font: 500 12.5px/1.3 var(--sans); color: var(--ink-2); margin-top: 14px; } .stat-tile__hint, .stat-tile .hint { font: 400 11.5px/1.4 var(--sans); color: var(--ink-3); margin-top: 3px; } /* ---------- "How RKB works" — hairline columns, not cards ---------- */ .how-grid { display: flex; } .how-card { flex: 1; padding: 0 28px; border-left: 1px solid var(--line); } .how-card:first-child { border-left: 0; padding-left: 0; } .how-card__icon { width: 28px; height: 20px; margin-bottom: 16px; display: flex; align-items: center; } .how-card__icon img { height: 100%; width: auto; opacity: 0.9; } .how-card__tag { display: block; font: 600 11px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 16px; } .how-card--official .how-card__tag { color: var(--official-ink); } .how-card--community .how-card__tag { color: var(--community-ink); } .how-card--review .how-card__tag { color: var(--warning); } .how-card h3 { font: 400 20px/1.3 var(--serif); margin: 0 0 10px; color: var(--ink); } .how-card p { font: 400 14px/1.65 var(--sans); color: var(--ink-2); margin: 0; } /* ---------- Species card — no card chrome at all ---------- */ .card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; } .species-card { display: block; background: none; border: 0; border-radius: 0; padding: 0; text-decoration: none; color: var(--ink); } .species-card:hover { border: 0; box-shadow: none; text-decoration: none; } .species-card:hover .species-card__common-name { color: var(--official-ink); } .species-card__common-name { font: 400 21px/1.3 var(--serif); color: var(--ink); margin: 0 0 3px; } .species-card__scientific-name { font: italic 300 14px/1.4 var(--serif); color: var(--ink-2); margin: 0 0 14px; } .species-card__meta { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: center; } /* ---------- Editorial status system ---------- Five states, each a colored dot + uppercase label. Color-only differentiation is never sufficient — the text label always ships. */ .status-badge, .badge { display: inline-flex; align-items: center; gap: 7px; font: 500 12px/1 var(--sans); color: var(--ink-2); background: none; border: 0; border-radius: 0; padding: 0; } .status-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor; margin: 0; } .badge--neutral, .status-badge--draft { color: var(--ink-3); } .badge--info, .status-badge--review { color: var(--info); } .badge--warning, .status-badge--scientific-review { color: var(--warning); } .badge--success, .status-badge--published { color: var(--official-ink); } .badge--danger { color: var(--conflict); } .badge--gold { color: var(--warning); } .status-badge--archived { color: var(--ink-3); opacity: 0.6; } /* Dots inherit the badge color via currentColor; these keep the pre-redesign standalone-dot classes meaningful. */ .status-dot--published, .status-dot--approved { background: var(--official); } .status-dot--draft, .status-dot--review { background: var(--warning); } .status-dot--archived, .status-dot--deprecated { background: var(--ink-3); } .status-dot--conflict { background: var(--conflict); } /* ---------- Chips / pills — plain text tags, no boxes ---------- */ .chip-row { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 18px; } .chip, .pill { display: inline-flex; align-items: center; gap: 0.3rem; font: 500 12px/1 var(--sans); color: var(--ink-3); background: none; border: 0; border-radius: 0; padding: 0; white-space: nowrap; } .pill--muted { color: var(--ink-3); } .pill--badge { color: var(--official-ink); font-weight: 600; } .pill--no-sheet { color: var(--warning); } .pill--success { color: var(--official-ink); } .pill--warning { color: var(--warning); } .pill--removable { text-decoration: none; cursor: pointer; } .pill--removable:hover { color: var(--official-ink); } /* ---------- Evidence / citation blocks ---------- One per major sourced claim: left accent border, claim in sans, then source name + provenance. */ .evidence-card { border-left: 2px solid var(--official); padding: 2px 0 2px 20px; margin: 24px 0; font-family: var(--sans); } .evidence-card__fact, .evidence-card .fact { font: 500 14.5px/1.55 var(--sans); color: var(--ink); margin: 0 0 8px; } .evidence-card__source, .evidence-card .src { display: flex; justify-content: space-between; align-items: center; gap: 12px; font: 400 12px/1.4 var(--sans); color: var(--ink-3); flex-wrap: wrap; } .evidence-card__source b, .evidence-card .src b { color: var(--ink-2); font-weight: 500; } .citation-block, .citelist { border-top: 1px solid var(--line); margin-top: 44px; padding-top: 26px; font-family: var(--sans); } .citation-list, ol.citelist { margin: 0; padding-left: 1.2rem; } .citation-list li, .citelist li { font: 400 13.5px/1.75 var(--sans); color: var(--ink-2); margin-bottom: 11px; } .citation-formatted { font-family: var(--serif); font-style: italic; padding: 0.75rem 0 0.75rem 20px; background: none; border-left: 2px solid var(--official); border-radius: 0; } .evidence-indicator { display: inline-flex; align-items: center; gap: 0.35rem; font-size: var(--font-size-xs); } /* ---------- Community tier — terracotta, deliberately plainer ---------- No serif, no italics: this tier reads as less "authored" on purpose, and every instance carries the explicit "never official" label. */ .community-panel, .community-separation-notice, .contribution-detail__experience-note { border-left: 2px solid var(--community); border-top: 0; border-right: 0; border-bottom: 0; border-radius: 0; background: none; padding: 4px 0 4px 20px; margin: 0 0 28px; display: flex; gap: 14px; align-items: flex-start; font: 400 14px/1.65 var(--sans); color: var(--ink-2); } .community-panel b, .community-separation-notice b { color: var(--community-ink); font-weight: 600; } .community-separation-notice { font-weight: 400; color: var(--ink-2); } .entry-card { padding: 20px 0; border-top: 1px solid var(--line); font-family: var(--sans); } .entry-card__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; } .entry-card__user { font: 500 13.5px/1 var(--sans); color: var(--ink); } .entry-card__meta { font: 400 12px/1 var(--sans); color: var(--ink-3); } .entry-card__body { font: 400 14.5px/1.65 var(--sans); color: var(--ink-2); } /* ---------- Consensus — thin 2px agreement bars, never chunky ---------- */ .consensus-item { padding: 20px 0; border-top: 1px solid var(--line); font-family: var(--sans); } .consensus-item__claim { font: 600 14px/1.4 var(--sans); margin-bottom: 8px; color: var(--ink); } .consensus-bar { height: 2px; background: var(--line); overflow: hidden; display: flex; margin: 14px 0; } .consensus-fill { background: var(--success); } .consensus-fill--conflict { background: var(--conflict); } .consensus-item__caption { font: 400 12px/1.4 var(--sans); color: var(--ink-3); } .conflict-flag { border-left: 2px solid var(--conflict); padding: 4px 0 4px 20px; margin-top: 8px; font: 400 14px/1.65 var(--sans); color: var(--ink); } .conflict-flag b { color: var(--conflict); font-weight: 600; } .consensus-summary { display: flex; gap: var(--space-5); margin: 0.75rem 0; font-size: var(--font-size-sm); } .consensus-summary__stat strong { font-size: 1.1em; } /* ---------- Alerts — left rule, no fill, no box ---------- */ .alert { display: flex; gap: 14px; align-items: flex-start; padding: 16px 0 16px 20px; margin-bottom: var(--space-4); border: 0; border-left: 2px solid; border-radius: 0; background: none; font: 400 14px/1.65 var(--sans); color: var(--ink); } .alert--info { border-color: var(--info); } .alert--success { border-color: var(--success); } .alert--warning { border-color: var(--warning); } .alert--danger { border-color: var(--conflict); } .alert__icon { flex: 0 0 auto; } .error-banner { background: none; border: 0; border-left: 2px solid var(--conflict); border-radius: 0; color: var(--ink); padding: 16px 0 16px 20px; margin-bottom: var(--space-4); font: 400 14px/1.65 var(--sans); } /* Empty states explain; they never apologize or imply breakage. */ .empty-state { grid-column: 1 / -1; padding: 36px 0; text-align: left; color: var(--ink-2); font: 400 14px/1.7 var(--sans); border: 0; border-top: 1px solid var(--line); border-radius: 0; } .empty-state a { font: 500 13px/1 var(--sans); } /* ---------- Panels — hairline, never a card ---------- */ .panel { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: var(--space-5) 0 0; box-shadow: none; } .panel + .panel { margin-top: var(--space-5); } .panel__title { margin-top: 0; } /* ---------- Forms ---------- */ .form-card { max-width: 440px; margin: var(--space-8) auto; background: none; border: 0; border-radius: 0; padding: 0; } .form-card h1 { margin-top: 0; font: 300 var(--font-size-xl)/1.2 var(--serif); margin-bottom: var(--space-5); } .form-field { margin-bottom: var(--space-5); } .form-field label { display: block; font: 500 var(--font-size-xs)/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 0.55rem; color: var(--ink-3); } .form-field input, .form-field textarea, .form-field select { width: 100%; padding: 8px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: 400 15px/1.5 var(--sans); outline: 0; } .form-field input:focus, .form-field textarea:focus, .form-field select:focus { border-bottom-color: var(--official); outline: 0; } .form-card .btn { width: auto; margin-top: var(--space-4); } .form-card__footer { margin-top: var(--space-6); font-size: var(--font-size-sm); color: var(--ink-2); } .form-field--checkbox label { display: flex; align-items: center; gap: 0.6rem; font: 400 var(--font-size-base)/1.5 var(--sans); color: var(--ink-2); text-transform: none; letter-spacing: 0; } .form-field--checkbox input { width: auto; } .field-hint { font-size: var(--font-size-xs); color: var(--ink-3); margin: 0.35rem 0 0; } .form-actions { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: center; } .filters-bar { display: flex; gap: var(--space-5); flex-wrap: wrap; align-items: center; margin-bottom: var(--space-6); background: none; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; padding: var(--space-4) 0; } .filters-bar select, .filters-bar input[type='search'] { padding: 6px 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; color: var(--ink); font: 400 var(--font-size-sm)/1.4 var(--sans); } /* ---------- Breadcrumbs ---------- */ .breadcrumbs { padding: 16px 0; border-bottom: 1px solid var(--line); } .breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0; padding: 0; font: 500 12px/1 var(--sans); color: var(--ink-3); } .breadcrumbs a { color: var(--ink-2); text-decoration: none; } .breadcrumbs a:hover { color: var(--official-ink); } .breadcrumbs__item[aria-current='page'], .breadcrumbs li:last-child span { color: var(--ink); font-weight: 500; } .breadcrumbs__sep { color: var(--ink-3); } /* ---------- Species profile header ---------- */ .profile-header, .sp-header { display: flex; gap: 48px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 0; padding: 56px 0 0; } .sp-media { width: 240px; height: 240px; flex: none; background: var(--bg-alt); display: flex; align-items: center; justify-content: center; position: relative; } .sp-media img { width: 55%; height: auto; opacity: 0.45; } /* Once real photography exists the slot holds the photo itself, not the "Photo pending" silhouette — same 240px square, full opacity. */ .sp-media--photo { height: auto; background: none; display: block; } .sp-media--photo .species-media__item--featured { margin: 0; } .sp-media--photo img { width: 100%; opacity: 1; aspect-ratio: 1 / 1; object-fit: cover; } .sp-media__label { font: 500 11px/1 var(--sans); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; position: absolute; bottom: 14px; } .sp-info { flex: 1 1 420px; padding-bottom: 6px; } .sp-common, .profile-header h1 { font: 300 46px/1.1 var(--serif); margin: 14px 0 4px; color: var(--ink); } .sp-sci, .profile-header__scientific { font: italic 300 21px/1.3 var(--serif); color: var(--ink-2); margin: 0 0 18px; } .sp-summary { font: 400 14.5px/1.65 var(--sans); color: var(--ink-2); max-width: 600px; } .review-banner { display: inline-flex; align-items: center; gap: 8px; color: var(--official-ink); font: 600 12px/1 var(--sans); text-transform: uppercase; letter-spacing: 0.03em; } /* ---------- Tab bar (species profile) ---------- */ .tab-bar, .tab-nav { display: flex; gap: 34px; border-bottom: 1px solid var(--line); margin: 36px 0 0; padding: 0; overflow-x: auto; position: static; background: none; font-family: var(--sans); scrollbar-width: thin; } .tab-btn, .tab-nav a { font: 500 13px/1 var(--sans); letter-spacing: 0.01em; padding: 16px 0; color: var(--ink-3); background: none; border: 0; border-bottom: 1px solid transparent; cursor: pointer; white-space: nowrap; margin-bottom: -1px; text-decoration: none; } .tab-btn:hover, .tab-nav a:hover { color: var(--ink-2); text-decoration: none; } .tab-btn.is-active, .tab-btn[aria-selected='true'], .tab-nav a.is-active, .tab-nav a[aria-current='page'] { color: var(--official-ink); border-bottom-color: var(--official-ink); } .tab-panel { padding: 48px 0; } .tab-panel[hidden] { display: none; } .care-sheet, .reading-column { max-width: 680px; margin: 0 auto; } .care-status-row { display: flex; align-items: center; gap: 18px; margin-bottom: 30px; flex-wrap: wrap; font-family: var(--sans); } .care-meta { font: 400 12px/1.4 var(--sans); color: var(--ink-3); } .profile-section { scroll-margin-top: 100px; margin-bottom: var(--space-7); } .profile-section h2 { border: 0; padding-bottom: 0; } /* ---------- Article reader ---------- */ .reader-wrap { display: flex; gap: 64px; padding: 56px 0 90px; max-width: 1180px; margin: 0 auto; align-items: flex-start; } .reader-toc { width: 200px; flex: none; position: sticky; top: 90px; } .reader-toc h4, .sidebar-panel__title { font: 600 11px/1 var(--sans); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 16px; } .reader-toc a, .toc a { display: block; font: 400 13.5px/1.7 var(--sans); color: var(--ink-2); padding: 5px 0; text-decoration: none; } .reader-toc a:hover, .toc a:hover { color: var(--official-ink); } .reader-toc a.is-active, .toc a.is-active { color: var(--official-ink); font-weight: 600; } .toc { list-style: none; margin: 0; padding: 0; } .toc .toc--level-2 { padding-left: 0.9rem; } .article-head, .article-header { margin-bottom: 36px; } .type-badge, .article-header__type { font: 600 11px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--official-ink); margin-bottom: 16px; display: block; } .article-title, .article-header__title { font: 300 var(--font-size-2xl)/1.15 var(--serif); margin: 16px 0 14px; color: var(--ink); } .article-header__subtitle { color: var(--ink-2); font: 300 19px/1.6 var(--serif); margin-bottom: var(--space-4); } .article-meta, .article-header__meta { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; font: 400 12.5px/1.4 var(--sans); color: var(--ink-3); padding-top: 0; border-top: 0; } .article-meta .dot { width: 4px; height: 4px; border-radius: 50%; background: var(--official); } .article-header__meta-item { display: flex; align-items: center; gap: 0.35rem; } /* ---------- Get involved / contributors ---------- */ .involve-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px; } .involve-card h3 { font: 400 18px/1.3 var(--serif); margin: 0 0 10px; color: var(--ink); } .involve-card p { font: 400 14px/1.65 var(--sans); color: var(--ink-2); margin: 0 0 16px; } .involve-card a { font: 500 13px/1 var(--sans); } .contrib-row { display: flex; gap: 44px; flex-wrap: wrap; } .contributor-card { display: flex; align-items: center; gap: 14px; padding: 0; border: 0; text-decoration: none; color: inherit; flex: 1 1 220px; } .contributor-card:hover { text-decoration: none; } .contributor-card:hover .contributor-card__name { color: var(--official-ink); } .contributor-card__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--official-tint); color: var(--official-ink); display: flex; align-items: center; justify-content: center; font: 500 12px/1 var(--sans); flex: none; border: 0; object-fit: cover; } .contributor-card__name { font: 500 14px/1.3 var(--sans); color: var(--ink); display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .contributor-card__meta { font: 400 12px/1.4 var(--sans); color: var(--ink-3); margin-top: 2px; } .contributor-profile__avatar, .contributor-photo { background: none; border: 1px solid var(--line); border-radius: 0; padding: 0; } .contributor-photo--avatar { border-color: var(--official); } /* ---------- Tables ---------- */ table.data-table { width: 100%; border-collapse: collapse; font: 400 var(--font-size-sm)/1.5 var(--sans); } table.data-table th, table.data-table td { text-align: left; padding: 0.7rem 0.65rem; border-bottom: 1px solid var(--line); } table.data-table th { color: var(--ink-3); font: 600 var(--font-size-xs)/1 var(--sans); text-transform: uppercase; letter-spacing: 0.06em; } .comparison-table-wrap { overflow-x: auto; } table.comparison-table th:first-child, table.comparison-table td:first-child { color: var(--ink-2); font-weight: 500; white-space: nowrap; } table.comparison-table th { vertical-align: top; } /* ---------- Pagination ---------- */ .pagination { display: flex; gap: 20px; align-items: center; justify-content: center; margin: var(--space-8) 0 0; font: 500 13px/1 var(--sans); } .pagination a, .pagination span { padding: 0; border: 0; border-radius: 0; background: none; text-decoration: none; color: var(--ink-2); font-size: 13px; } .pagination a:hover { color: var(--official-ink); text-decoration: none; } .pagination .is-current { background: none; color: var(--official-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; } /* ---------- Search results ---------- */ .search-hit-list { display: flex; flex-direction: column; } .search-hit { background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 22px 0; } .search-hit__meta { display: flex; gap: 0.9rem; margin-bottom: 0.5rem; } .search-hit__title { font: 400 21px/1.3 var(--serif); text-decoration: none; display: block; margin-bottom: 0.35rem; color: var(--ink); } .search-hit__title:hover { color: var(--official-ink); text-decoration: none; } .search-hit__snippet { margin: 0; color: var(--ink-2); font: 400 14px/1.65 var(--sans); } .search-hit__snippet mark { background: var(--official-tint); color: var(--ink); padding: 0 0.15rem; } /* ---------- Bookmarks / lists ---------- */ .bookmark-list, .notification-list--page { list-style: none; margin: 0; padding: 0; } .bookmark-item, .notification-list__item { display: flex; align-items: center; gap: 0.75rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); flex-wrap: wrap; } .notification-list__item { align-items: flex-start; justify-content: space-between; } .notification-list__item.is-unread { background: none; border-left: 2px solid var(--official); padding-left: 16px; } .bookmark-item a { flex: 1 1 auto; } .sidebar-link-list, .quick-facts, .evidence-list, .variant-list, .synonym-list, .distribution-list, .species-search-results { list-style: none; margin: 0; padding: 0; font: 400 var(--font-size-sm)/1.6 var(--sans); } .sidebar-link-list li, .evidence-list__item, .variant-list li, .synonym-list li, .distribution-list li, .species-search-results li { padding: 0.5rem 0; border-bottom: 1px solid var(--line); } .sidebar-link-list li:last-child, .evidence-list__item:last-child, .variant-list li:last-child, .synonym-list li:last-child, .distribution-list li:last-child { border-bottom: none; } .evidence-list__label { margin: 0 0 0.2rem; } .quick-facts__row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.6rem 0; border-bottom: 1px solid var(--line); } .quick-facts__row:last-child { border-bottom: none; } .quick-facts__label { color: var(--ink-3); } .quick-facts__value { text-align: right; font-weight: 500; color: var(--ink); } .evidence-timeline { list-style: none; margin: 0; padding: 0; font-size: var(--font-size-sm); } .evidence-timeline__item { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); } .evidence-timeline__item:last-child { border-bottom: none; } .evidence-timeline__label { color: var(--ink-3); } .evidence-timeline__date { font-weight: 500; text-align: right; } /* ---------- Taxonomy tree ---------- */ .taxonomy-tree { list-style: none; margin: 0 0 var(--space-4); padding: 0; font: 400 var(--font-size-base)/1.6 var(--sans); } .taxonomy-rank { display: flex; gap: 0.6rem; align-items: baseline; padding: 0.4rem 0; padding-left: calc(var(--taxonomy-depth, 0) * 1.1rem); border-left: 1px solid var(--line); margin-left: calc(var(--taxonomy-depth, 0) * 0.1rem); } .taxonomy-rank__label { flex: 0 0 6rem; color: var(--ink-3); font: 500 var(--font-size-xs)/1.4 var(--sans); text-transform: uppercase; letter-spacing: 0.06em; } .taxonomy-rank__value a { text-decoration: none; } .taxonomy-rank__value a:hover { text-decoration: underline; } /* ---------- Reference cards ---------- */ .reference-card { display: block; padding: 20px 0; background: none; border: 0; border-top: 1px solid var(--line); border-radius: 0; text-decoration: none; color: inherit; } .reference-card:hover { border-color: var(--line); text-decoration: none; } .reference-card:hover .reference-card__title { color: var(--official-ink); } .reference-card__title { font: 400 17px/1.4 var(--serif); margin: 0 0 0.3rem; color: var(--ink); } .reference-card__byline { color: var(--ink-3); font-size: var(--font-size-sm); margin: 0 0 0.6rem; } .reference-card__badges { display: flex; flex-wrap: wrap; gap: 0.9rem; } .license-badge { white-space: nowrap; } /* ---------- Media / gallery ---------- */ .species-media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: var(--space-4); margin: var(--space-5) 0; } .species-media__item { margin: 0; background: none; border: 0; border-radius: 0; overflow: hidden; } .species-media__item--featured { border-radius: 0; box-shadow: none; margin-bottom: var(--space-5); } .species-media__link { display: block; cursor: zoom-in; } .species-media__item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: var(--bg-alt); } .species-media__item--featured img { aspect-ratio: 16 / 10; } .species-media__caption { padding: 0.6rem 0 0; font: 400 var(--font-size-sm)/1.5 var(--sans); color: var(--ink-2); } .species-media__meta { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.15rem 0 0.6rem; } .species-media__credit { font-size: var(--font-size-xs); color: var(--ink-3); margin: 0; } .species-media__item.image-load-error img { display: none; } .species-media__item.image-load-error::after { content: 'Image unavailable'; display: block; padding: var(--space-6) var(--space-3); text-align: center; color: var(--ink-3); font-size: var(--font-size-sm); background: var(--bg-alt); } .gallery-placeholder { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--space-4); margin: var(--space-5) 0; } .gallery-placeholder__item { aspect-ratio: 4 / 3; background: var(--bg-alt); border: 0; border-radius: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-3); font: 500 var(--font-size-xs)/1.4 var(--sans); text-transform: uppercase; letter-spacing: 0.06em; text-align: center; padding: var(--space-3); } /* Accessible image viewer — a native . showModal() handles the focus trap and backdrop; public/site.js handles arrow-key prev/next. */ /* NB: no `display` in this base rule. A is hidden by the UA's `dialog:not([open]) { display: none }`, and ANY author `display` here would beat that on origin (not specificity) and leave the closed viewer rendered inline on every page. The grid layout therefore lives on `[open]` alone. */ .media-viewer { border: 1px solid var(--line); border-radius: 0; padding: 0; max-width: min(92vw, 1100px); max-height: 92vh; background: var(--surface); color: var(--ink); } .media-viewer::backdrop { background: rgba(14, 23, 18, 0.82); } .media-viewer[open] { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: 1fr auto; } .media-viewer__stage { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: center; min-height: 40vh; max-height: 78vh; overflow: hidden; background: #0e1712; } .media-viewer__image { max-width: 100%; max-height: 78vh; object-fit: contain; display: block; } .media-viewer__error-message { color: #fff; padding: var(--space-5); text-align: center; } .media-viewer__prev, .media-viewer__next { grid-row: 1; align-self: center; background: none; border: 1px solid var(--line); border-radius: 0; color: var(--ink); width: 2.75rem; height: 2.75rem; font-size: 1.1rem; cursor: pointer; margin: var(--space-3); } .media-viewer__prev { grid-column: 1; } .media-viewer__next { grid-column: 3; } .media-viewer__prev:disabled, .media-viewer__next:disabled { opacity: 0.35; cursor: default; } .media-viewer__close { position: absolute; top: var(--space-3); right: var(--space-3); background: var(--surface); border: 1px solid var(--line); border-radius: 0; color: var(--ink); width: 2.25rem; height: 2.25rem; font-size: 1rem; line-height: 1; cursor: pointer; z-index: 1; } .media-viewer__info { grid-column: 1 / -1; grid-row: 2; padding: var(--space-4); border-top: 1px solid var(--line); } .media-viewer__caption { margin: 0 0 0.25rem; font-weight: 500; } .media-viewer__caption:empty, .media-viewer__credit:empty { display: none; } .media-viewer__credit { margin: 0 0 0.15rem; color: var(--ink-2); font-size: var(--font-size-sm); } .media-viewer__license { margin: 0; color: var(--ink-3); font-size: var(--font-size-xs); } /* ---------- Community interaction bits ---------- */ .vote-controls { display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap; margin: 0.6rem 0; } .vote-controls__form { display: inline-block; margin: 0; } .vote-controls__count { font-size: var(--font-size-sm); color: var(--ink-3); } .vote-controls__form button[aria-pressed='true'], .vote-controls__form button.is-active { color: var(--official-ink); border-bottom-color: var(--official-ink); font-weight: 600; } .contribution-detail__meta { display: flex; gap: var(--space-4); flex-wrap: wrap; font: 400 var(--font-size-sm)/1.4 var(--sans); color: var(--ink-3); margin-bottom: 0.6rem; } .contribution-detail__body { white-space: pre-wrap; } .comment-thread, .comment-thread__children { list-style: none; margin: 0; padding: 0; } .comment-thread__item { padding: 0.9rem 0; border-bottom: 1px solid var(--line); } .comment-thread__meta { display: flex; gap: 0.6rem; font: 400 var(--font-size-xs)/1.4 var(--sans); color: var(--ink-3); } .comment-thread__body { margin: 0.35rem 0; color: var(--ink-2); } .comment-thread__reply-toggle { font-size: var(--font-size-sm); } .comment-thread__reply-toggle textarea { width: 100%; margin: 0.4rem 0; } .comment-thread__children { margin-top: 0.5rem; padding-left: var(--space-5); border-left: 1px solid var(--line); } .comment-thread__actions { display: flex; gap: var(--space-4); align-items: flex-start; margin-top: 0.4rem; } .comment-thread__actions form { margin: 0; } /* ---------- Editorial pipeline / roadmap ---------- */ .editorial-pipeline { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); padding: var(--space-5) 0; margin: 0 0 var(--space-5); background: none; border: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; } .editorial-pipeline__step { display: inline-flex; } .editorial-pipeline__arrow { color: var(--ink-3); } .roadmap-list { margin: 0; padding-left: 1.15rem; line-height: var(--line-height-relaxed); color: var(--ink-2); } .roadmap-list li { margin-bottom: 0.5rem; } .knowledge-group { margin-bottom: var(--space-5); } .knowledge-group__title { font: 400 1.125rem/1.3 var(--serif); margin: 0 0 0.75rem; } .related-content-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 44px; } .active-filters { display: flex; gap: 1.1rem; flex-wrap: wrap; margin: -0.5rem 0 1.5rem; } .active-filters .badge a { color: inherit; text-decoration: none; margin-left: 0.35rem; font-weight: 700; } .active-filters .badge a:hover { text-decoration: underline; } .species-hero { flex-wrap: wrap; } .species-hero__badges { display: flex; gap: 1.1rem; flex-wrap: wrap; margin-top: 0.6rem; } /* ---------- Error pages ---------- */ .error-page { text-align: center; padding: var(--space-8) 0; } .error-page__code { font: 300 5rem/1 var(--serif); color: var(--ink-3); margin: 0; } .error-page__message { font: 300 1.5rem/1.3 var(--serif); margin: 0.75rem 0 var(--space-6); color: var(--ink); } /* ---------- Grids / sidebar ---------- */ .grid { display: grid; gap: 44px; } .grid--2 { grid-template-columns: repeat(2, 1fr); } .grid--3 { grid-template-columns: repeat(3, 1fr); } .grid--4 { grid-template-columns: repeat(4, 1fr); } .page-layout--with-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 64px; align-items: start; } /* The article reader's table-of-contents rail: a narrow sticky column on the left. The content still comes first in the DOM, so reading order and tab order stay content-first. */ .page-layout--sidebar-left { grid-template-columns: 200px minmax(0, 1fr); } .page-layout--sidebar-left .page-layout__sidebar { order: -1; } .page-layout--sidebar-left .page-layout__content { max-width: 700px; } .page-layout__sidebar { position: sticky; top: 90px; } .sidebar-panel { margin-bottom: var(--space-6); } /* ---------- Component sheet (living style guide) ---------- */ .swatch-grid { display: flex; } .swatch { flex: 1; border-left: 1px solid var(--line); padding-left: 14px; } .swatch:first-child { border-left: 0; padding-left: 0; } .swatch__fill { height: 56px; } .swatch__label { padding: 10px 0 2px; font: 500 11px/1.3 var(--sans); color: var(--ink); } .swatch__hex { font: 400 10.5px/1.3 var(--sans); color: var(--ink-3); } .type-row { display: flex; align-items: baseline; gap: 24px; padding: 16px 0; border-bottom: 1px solid var(--line); } .type-row__name { width: 110px; flex: none; font: 500 11px/1 var(--sans); color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; } .badge-row { display: flex; gap: 26px; flex-wrap: wrap; align-items: center; } .comp-block { margin-bottom: 52px; } .subhead { font: 600 11px/1 var(--sans); letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 20px; } /* ---------- Skeleton ---------- */ .skeleton { background: linear-gradient(90deg, var(--line) 25%, var(--bg-alt) 37%, var(--line) 63%); background-size: 400% 100%; animation: skeleton-loading 1.4s ease infinite; border-radius: 0; } @keyframes skeleton-loading { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } } @media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } } /* ===================================================================== Responsive. The reference design is a desktop-fixed 1440px canvas; these breakpoints are a from-scratch implementation guided by it. ===================================================================== */ /* Header collapses to a hamburger + slide-down nav under 1000px — the breakpoint the design specifies. */ @media (max-width: 1000px) { .site-header__bar { padding: 20px 28px; flex-wrap: wrap; gap: 1rem; } .site-header__brand { margin-right: auto; } .nav-toggle { display: flex; order: 1; } .site-search, .site-header__notifications, .site-header__user { display: none; } .site-nav { order: 4; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; max-height: 0; overflow: hidden; margin-right: 0; transition: max-height 0.2s ease; } .site-nav.is-open { max-height: 640px; } .site-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); } /* With the nav open, bring the hidden affordances back inline. */ .site-nav.is-open ~ .site-search, .site-nav.is-open ~ .site-header__notifications, .site-nav.is-open ~ .site-header__user { display: flex; order: 5; flex-basis: 100%; padding-top: 14px; } .site-nav.is-open ~ .site-search { max-width: none; } .container, .container--wide, .container--narrow { padding: 0 28px; } .page-main { padding: 32px 28px 70px; } .section--alt { padding: var(--space-8) 28px; margin: 0 -28px; } .site-footer { padding: var(--space-7) 28px 28px; } .reader-wrap { padding: 40px 0 70px; gap: 40px; } } @media (max-width: 900px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } .card-grid, .involve-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } .stat-grid, .stat-row { flex-wrap: wrap; } .stat-tile { flex: 1 1 33%; padding: 20px 20px; border-left: 1px solid var(--line); } .stat-tile:first-child { padding-left: 20px; border-left: 1px solid var(--line); } .how-grid { flex-direction: column; gap: 36px; } .how-card { padding: 0 0 0 20px; border-left: 1px solid var(--line); } .how-card:first-child { padding-left: 20px; } /* The TOC stops being a sticky rail and becomes a plain lead-in list. */ .reader-wrap { flex-direction: column; } .reader-toc { width: 100%; position: static; padding-bottom: 24px; border-bottom: 1px solid var(--line); } .page-layout--with-sidebar { grid-template-columns: 1fr; gap: 40px; } .page-layout__sidebar { position: static; order: -1; } } @media (max-width: 640px) { :root { --font-size-3xl: 2.5rem; --font-size-2xl: 2rem; --font-size-xl: 1.625rem; } .hero { padding: 60px 0 44px; } .hero__watermark { gap: 24px; } .hero__watermark img { height: 76px; } .hero__fyi-mark { font-size: 26px; } .hero__ctas { flex-direction: column; gap: 18px; align-items: center; } .card-grid, .involve-grid, .grid--2, .grid--3, .grid--4, .related-content-grid { grid-template-columns: 1fr; gap: 32px; } .contrib-row { flex-direction: column; gap: 24px; } .stat-grid, .stat-row { flex-wrap: wrap; } .stat-tile { flex: 1 1 50%; } .sp-header, .profile-header { gap: 28px; padding-top: 32px; } .sp-media { width: 100%; height: 220px; } .sp-common, .profile-header h1 { font-size: 2rem; } .sp-sci, .profile-header__scientific { font-size: 1.125rem; } .tab-bar, .tab-nav { gap: 22px; } .tab-panel { padding: 32px 0; } .beta-banner { flex-direction: column; gap: 12px; } .honesty-strip, .site-footer__inner { flex-direction: column; gap: 24px; } .site-footer__col { max-width: none; } .swatch-grid { flex-wrap: wrap; } .swatch { flex: 1 1 40%; padding: 0 0 16px; border-left: 0; } .filters-bar { flex-direction: column; align-items: stretch; } .bookmark-item { flex-direction: column; align-items: flex-start; } .notification-dropdown, .user-menu-dropdown { position: fixed; left: 0.5rem; right: 0.5rem; width: auto; } .species-media-grid { grid-template-columns: repeat(2, 1fr); } .taxonomy-rank__label { flex-basis: 4.5rem; } .consensus-summary { flex-direction: column; gap: 0.4rem; } table.comparison-table { font-size: var(--font-size-xs); } table.comparison-table th, table.comparison-table td { padding: 0.45rem; } .media-viewer { grid-template-columns: 1fr; } .media-viewer__stage { grid-column: 1; } .media-viewer__prev, .media-viewer__next { grid-row: 1; align-self: end; margin: var(--space-2); } .media-viewer__prev { grid-column: 1; justify-self: start; } .media-viewer__next { grid-column: 1; justify-self: end; } .media-viewer__info { grid-row: 2; } } /* ---------- Print ---------- */ @media print { .site-header, .site-footer, .breadcrumbs, .page-layout__sidebar, .reader-toc, .skip-link, .btn, .tab-bar, .hero__watermark { display: none !important; } .page-layout--with-sidebar, .reader-wrap { display: block; } body { background: #fff; color: #000; } .article-body, .article-serif { font-size: 12pt; line-height: 1.55; } a { color: inherit; text-decoration: underline; } }