/* ── Dev preview (local server only) ──────────────────────────────── These rules only apply when the element has class="preview". The production page never has that class, so nothing here is active in production. ──────────────────────────────────────────────────────────────────── */ html.preview { margin: auto; max-width: var(--max-content-width); body { font-family: Source Sans Pro Web, Helvetica Neue, Helvetica, Roboto, Arial, sans-serif; font-size: 16px; color: var(--gray-900); background: var(--gray-100); margin: 0.25rem; } h1 { font-size: 1.75rem; font-weight: 700; margin-bottom: 1rem; } p:not(.item-count), .usa-alert { margin: .5rem auto 1rem auto; } .list-container { margin: auto auto 2rem auto; padding-top: 1rem; padding-bottom: 2rem; } } #search-input-ghost:not(.preview #search-input-ghost) { margin-top: -0.2em; } @media screen and (width <=600px) { #user-content-root { margin-left: 0px !important; margin-right: 0px !important; .usa-in-page-nav-container { margin-left: 0px !important; margin-right: 0px !important; } #main-content { margin-left: 0px !important; padding-right: 0px !important; } .grid-container { padding-left: 0 !important; padding-right: 0 !important; } } } /* ── Design tokens ───────────────────────────────────────────────── */ :root { --max-content-width: 1024px; --pagination-max-width: 900px; /* Blues */ --blue-50: #ebf8ff; --blue-400: #4299e1; --blue-600: #3182ce; --blue-700: #2b6cb0; /* Greens */ --green-50: #f0fff4; --green-600: #48bb78; --green-700: #276749; /* Purples */ --purple-50: #faf5ff; --purple-500: #9f7aea; --purple-700: #6b46c1; /* Neutrals */ --gray-50: #f7fafc; --gray-100: #f0f4f8; --gray-200: #e2e8f0; --gray-300: #cbd5e0; --gray-400: #a0aec0; --gray-600: #718096; --gray-700: #4a5568; --gray-800: #2d3748; --gray-900: #1a202c; /* Amber (anchor banner) */ --amber-100: #fffbeb; --amber-200: #fefcbf; --amber-400: #f6e05e; --amber-600: #d69e2e; --amber-800: #744210; --amber-900: #a0522d; /* Shape & motion */ --radius-sm: 6px; --radius-md: 8px; --radius-pill: 9999px; /* Typography scale */ --text-xs: 0.75rem; /* tooltips */ --text-sm: 0.82rem; /* ref-toggle, anchor-banner actions, filter buttons */ --text-meta: 0.85rem; /* item count, per-page label, anchor banner body */ --text-ref: 0.9rem; /* reference list items */ --text-lg: 1.1rem; /* definition text, modal dismiss */ --text-xl: 1.6rem; /* card name/title */ } /* ── Box-sizing reset ────────────────────────────────────────────── */ .preview *, .preview *::before, .preview *::after, .list-container *, .list-container *::before, .list-container *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── List container ──────────────────────────────────────────────── */ .list-container { line-height: 1.6; padding: 0; margin: 0 auto; max-width: var(--max-content-width); /* container-query root: lets descendants respond to .list-container's width instead of the viewport, so embedding contexts that constrain us (e.g. NIST USWDS .grid-container padding) trigger the narrow layout naturally. */ container-type: inline-size; container-name: metrology-list; } /* ── Controls (search + filter bar) ─────────────────────────────── */ .controls { margin: 0 auto 0; display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; } .search-input-wrap { flex: 1 1 260px; display: grid; grid-template-columns: minmax(0, 1fr); } .search-input { grid-area: 1 / 1; padding: 0.5rem 0.8rem; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); background: transparent; outline: none; transition: border-color 0.15s, box-shadow 0.15s; font-family: inherit; font-size: inherit; color: var(--gray-900); &:focus { border-color: var(--blue-400); box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.2); } } /* Inline ghost suggestion — sits in the same grid cell as the real input. Real input has transparent background. The ghost's prefix span is invisible but takes up the same width as the typed text, so the visible tail starts exactly where the user's typing ends — no overlap. Accepted with Tab. */ .search-input-ghost { grid-area: 1 / 1; padding: 0.5rem 0.8rem; border: 1px solid transparent; border-radius: var(--radius-sm); background: #fff; font-family: inherit; font-size: inherit; line-height: normal; pointer-events: none; overflow: hidden; white-space: pre; color: var(--gray-400); } .search-input-ghost__prefix { visibility: hidden; } .search-input-ghost__tail { font-style: italic; font-weight: 400; color: var(--gray-400); } /* ── Starter queries (shown only when search input is empty) ─────── */ .starter-queries { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.5rem; font-size: var(--text-meta); color: var(--gray-600); } .starter-queries__label { color: var(--gray-600); font-style: italic; margin-right: 0.15rem; } .starter-query-chip { padding: 0.15em 0.7em; border: 1px solid var(--gray-300); border-radius: var(--radius-pill); background: #fff; color: var(--blue-700); font-size: 0.85rem; font-weight: 500; cursor: pointer; transition: background 0.12s, border-color 0.12s, color 0.12s; -webkit-tap-highlight-color: transparent; &:hover, &:focus-visible { background: var(--blue-50); border-color: var(--blue-400); } &:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 1px; } } /* ── Filter toggle bar ───────────────────────────────────────────── */ .filter-toggle-bar { display: flex; width: 100%; gap: 0.5rem; } /* Shared base for the Clear and Copy link toolbar buttons */ .toolbar-btn { padding: 0.7rem 0.9rem; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); background: #fff; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; transition: background 0.12s, border-color 0.12s, opacity 0.15s, color 0.15s; -webkit-tap-highlight-color: transparent; &:disabled { opacity: 0.4; cursor: not-allowed; } &:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; } } .filter-clear { color: var(--gray-700); &:hover:not(:disabled) { background: var(--gray-50); border-color: var(--gray-400); } } .filter-copy-link { color: var(--blue-600); &:hover:not(:disabled) { background: var(--blue-50); border-color: var(--blue-400); } } .filter-toggle { display: flex; align-items: center; gap: 0.5rem; flex: 1; padding: 0.7rem 0.9rem; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); background: #fff; font-weight: 600; color: var(--gray-700); cursor: pointer; text-align: left; transition: background 0.12s, border-color 0.12s; -webkit-tap-highlight-color: transparent; &:hover { background: var(--gray-50); border-color: var(--gray-400); } &:focus-visible { outline: 2px solid var(--blue-400); outline-offset: 2px; } &[aria-expanded="true"] .filter-toggle__chevron { transform: rotate(180deg); } } .filter-toggle__label { flex: 1; } .filter-active-badge { background: var(--blue-400); color: #fff; border-radius: var(--radius-pill); font-weight: 700; line-height: 1; padding: 0.2em 0.55em; min-width: 1.5em; text-align: center; } .filter-toggle__chevron { flex-shrink: 0; color: var(--gray-600); transition: transform 0.2s ease; line-height: 1; } /* ── Collapsible filter area (CSS grid trick) ────────────────────── */ .filter-area { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; width: 100%; margin-top: -0.5rem; margin-bottom: 0.5rem; &.filter-area--open { grid-template-rows: 1fr; } } .filter-area-inner { overflow: hidden; display: flex; flex-direction: column; gap: 1.1rem; padding-top: 0.25rem; } .filter-group { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; padding-left: 1rem; } .filter-group__pills { display: flex; flex-wrap: wrap; gap: 0.4rem; /* padding-left: 1rem; */ } .filter-group__label { font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.72rem; color: var(--gray-600); white-space: nowrap; } /* Filter button = transparent wrapper; the pill is .filter-btn__label */ .filter-btn { display: inline-flex; align-items: center; gap: 0.2em; padding: 0; background: none; border: none; cursor: pointer; -webkit-tap-highlight-color: transparent; &:hover .filter-btn__label { background: var(--gray-50); border-color: var(--gray-400); } &[data-filter="rmf"].active .filter-btn__label { background: var(--blue-50); color: var(--blue-700); border-color: var(--blue-400); } &[data-filter="rmf"].active .filter-btn__count { color: var(--blue-600); } &[data-filter="lifecycle"].active .filter-btn__label { background: var(--green-50); color: var(--green-700); border-color: var(--green-600); } &[data-filter="lifecycle"].active .filter-btn__count { color: var(--green-700); } &[data-filter="tevv"].active .filter-btn__label { background: var(--purple-50); color: var(--purple-700); border-color: var(--purple-500); } &[data-filter="tevv"].active .filter-btn__count { color: var(--purple-700); } /* TEVV Instrument — muted gray theme, matches its metadata role */ &[data-filter="instrument"].active .filter-btn__label { background: var(--gray-100); color: var(--gray-800); border-color: var(--gray-400); } &[data-filter="instrument"].active .filter-btn__count { color: var(--gray-700); } } .filter-btn__label { display: inline-flex; align-items: center; padding: 0.18em 0.7em; border-radius: var(--radius-pill); font-size: var(--text-sm); font-weight: 500; border: 1px solid var(--gray-300); background: #fff; color: var(--gray-700); transition: background 0.12s, color 0.12s, border-color 0.12s; } /* Centered dot separator visually anchors the count to its pill */ .filter-btn__count { font-size: var(--text-xs); color: var(--gray-400); font-weight: 500; min-width: 1.6em; text-align: left; transition: color 0.12s; &::before { content: "·"; margin-right: 0.25em; color: var(--gray-400); } &:empty::before { content: none; } } /* ── Item count + meta controls bar ─────────────────────────────── */ .list-meta { margin: 0 auto 0.75rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .list-meta-controls { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; flex-shrink: 0; } .item-count { font-size: var(--text-meta); color: var(--gray-600); margin: 0; } .per-page-label { font-size: var(--text-meta); color: var(--gray-600); white-space: nowrap; flex-shrink: 0; } .per-page-select { padding: 0.2rem 0.4rem; border: 1px solid var(--gray-300); border-radius: var(--radius-sm); background: #fff; color: var(--gray-700); cursor: pointer; margin-left: 0.3rem; &:focus { outline: 2px solid var(--blue-400); outline-offset: 1px; } } /* ── List ────────────────────────────────────────────────────────── */ .item-list { list-style: none; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; } /* ── Card ────────────────────────────────────────────────────────── */ .measure-item { position: relative; background: #fff; border: 1px solid var(--gray-200); border-left: 4px solid var(--blue-400); border-radius: var(--radius-md); padding: 1.25rem 1.5rem; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); scroll-margin-top: 1rem; &[hidden] { display: none; } } /* ── TEVV Instrument badge (top-right corner metadata) ──────────────── */ .instrument-badge { position: absolute; top: 1rem; right: 1.25rem; font-size: 0.7rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.08em; color: var(--gray-600); pointer-events: none; white-space: nowrap; /* max-width: 8rem; */ overflow: hidden; text-overflow: ellipsis; } .instrument-badge:empty { display: none; } /* Reserve room on the name row so the absolutely-positioned badge can sit to its right without overlapping long names. */ .field--name dd { padding-right: 8.5rem; } /* ── Definition list ─────────────────────────────────────────────── */ dl { display: flex; flex-direction: column; gap: 0.65rem; } .field { display: flex; flex-direction: column; gap: 0.15rem; &.field--inline { flex-direction: row; align-items: baseline; flex-wrap: wrap; gap: 0.35em; } } dt { font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--gray-600); flex-shrink: 0; &::after { content: ":"; } } dd { color: var(--gray-800); } /* Hide the "Name:" label — name is presented as a heading */ .field--name dt { display: none; } .field--name dd { font-size: var(--text-xl); font-weight: 700; color: var(--gray-900); } .field--definition dd { font-size: var(--text-lg); color: var(--gray-700); } /* ── Anchor self-link (¶ on hover) ───────────────────────────────── */ .anchor-link { font-weight: 400; color: var(--gray-400); text-decoration: none; margin-left: 0.35em; opacity: 0; transition: opacity 0.15s; } .measure-item:hover .anchor-link, .anchor-link:focus { opacity: 1; } /* ── Debug: MiniSearch relevance score (only visible during search) ── */ .debug-relevance { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.75rem; font-weight: 400; color: var(--gray-600); margin-left: 0.5rem; opacity: 0.7; } /* ── Copy-link tooltip ───────────────────────────────────────────── */ .anchor-tooltip { position: absolute; transform: translateX(-50%) translateY(-100%); background: var(--gray-900); color: #fff; font-size: var(--text-xs); font-weight: 500; padding: 0.25em 0.65em; border-radius: 4px; white-space: nowrap; pointer-events: none; z-index: 9999; opacity: 1; transition: opacity 0.4s ease; &.anchor-tooltip--fade { opacity: 0; } @media print { display: none; } } /* ── Badges ──────────────────────────────────────────────────────── */ .badge { display: inline-flex; align-items: center; /* Center content along both axes so when the text wraps (e.g. "Facial Recognition Benchmark Evaluation" inside a 320px badge at 360px viewport) the empty space is split evenly left/right instead of pooling on the right. No effect when the text fits on one line. */ justify-content: center; text-align: center; padding: 0.18em 0.6em; /* Cap the corner radius at ≈ the badge's line-height. For single-line badges this is ≥ half the box height, so the browser clips it to half-height → identical pill shape as `--radius-pill`. For multi- line wrapped badges (taller box) the radius stops growing, so the end-caps stay a tight rounded-rectangle instead of bulging into huge semicircles that read as "extra side padding". */ border-radius: 1em; font-weight: 500; margin: 0; white-space: nowrap; } .badge--rmf { background: var(--blue-50); color: var(--blue-700); } .badge--lifecycle { background: var(--green-50); color: var(--green-700); } .badge--tevv { background: var(--purple-50); color: var(--purple-700); } /* Badge dd: flex container so row spacing is gap-based (no hanging right margin). Wrapped rows have balanced spacing on every side. */ .field--rmf > dd, .field--lifecycle > dd, .field--tevv > dd { display: flex; flex-wrap: wrap; gap: 0.3em; align-items: baseline; } /* ── References & Tools (shared list styling) ─────────────────────── */ .ref-list, .tool-list { list-style: none; padding-left: 0; display: flex; flex-direction: column; gap: 0.3rem; } .ref-list li, .tool-list li { font-size: var(--text-ref); color: var(--gray-700); line-height: 1.45; } /* Leading-icon row: icon + wrapping text. Shared by reference items and tool items so the icon→text gap is identical regardless of whether the row wraps its content in an (URL-only tools) or not (text / text+URL). */ .ref-list li, .tool-list li { display: flex; align-items: baseline; gap: 0.55em; } .ref-text { min-width: 0; } .ref-list a { color: var(--blue-600); text-decoration: none; } .ref-list a:hover { text-decoration: underline; } /* ── Collapsible list (shared by References and Tools) ─────────────── */ .ref-list-wrap, .tool-list-wrap { position: relative; } /* Fade on item 3 when collapsed — purely visual, not semantic */ .ref-list-wrap.ref-list-wrap--collapsed .ref-list li:nth-child(3), .tool-list-wrap.tool-list-wrap--collapsed .tool-list li:nth-child(3) { position: relative; } .ref-list-wrap.ref-list-wrap--collapsed .ref-list li:nth-child(3)::after, .tool-list-wrap.tool-list-wrap--collapsed .tool-list li:nth-child(3)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, transparent 0%, #fff 90%); pointer-events: none; } /* Grid trick: clips overflow list without display:none (screen-reader safe) */ .ref-overflow, .tool-overflow { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.25s ease; } .ref-overflow > ul, .tool-overflow > ul { overflow: hidden; } /* The flex `gap` of .ref-list/.tool-list only spaces siblings within one