/* ============================================================ GrantCompass US Hub — Shared Design System Aesthetic: warm editorial (Economist × Shopify), light mode only Brand tokens per .impeccable.md ============================================================ */ /* -------------------------------------------------------- Fonts (loaded inline in each page for performance) - Fraunces: display + headings (serif, warmth+authority) - DM Sans: body + UI (sans, clarity) - IBM Plex Mono: data labels, dollar amounts, dates -------------------------------------------------------- */ /* -------------------------------------------------------- Tokens — colors, typography, spacing Tinted toward warm hues, never pure black/white -------------------------------------------------------- */ :root { /* Surfaces (cream base; paper for cards on cream) */ --parchment: #faf7f2; --parchment-2: #f4eee2; --paper: #fefcf8; --paper-edge: #efe8d8; /* Ink (warm dark, not pure black) */ --ink: #1C1917; --ink-2: #3a342a; --ink-3: #5c544a; --ink-mute: #7d7567; /* Brand */ --forest: #2d6a4f; --forest-deep: #1f4d39; --forest-tint: #d8e6df; --forest-tint-2: #ecf3ef; --sienna: #c4532b; --sienna-deep: #9a3f1f; --sienna-tint: #f4dccd; /* Edges */ --rule-soft: #e8e0d2; --rule-mid: #d4c9b3; /* Accent for data + status */ --amber-deep: #8a5a14; --amber-tint: #f4e7c4; --slate-deep: #3d4d59; /* Type stacks */ --font-display: "Fraunces", "Iowan Old Style", "Apple Garamond", Georgia, serif; --font-body: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* Fluid type scale */ --fs-display-xl: clamp(2.5rem, 5.5vw + 0.5rem, 4.25rem); --fs-display-l: clamp(2rem, 4vw + 0.5rem, 3.125rem); --fs-display-m: clamp(1.5rem, 2.6vw + 0.5rem, 2.125rem); --fs-h2: clamp(1.5rem, 2.2vw + 0.5rem, 2rem); --fs-h3: clamp(1.125rem, 1vw + 0.85rem, 1.4rem); --fs-body: clamp(1rem, 0.4vw + 0.95rem, 1.125rem); --fs-small: 0.875rem; --fs-mono: 0.85rem; /* Spacing rhythm (varied — not all the same) */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4.5rem; --sp-9: 6.5rem; /* Container */ --content-max: 1100px; --prose-max: 720px; /* Shadows (soft, warm, NOT generic blur) */ --shadow-1: 0 1px 2px rgba(31,26,20,0.04), 0 1px 1px rgba(31,26,20,0.06); --shadow-2: 0 6px 24px -10px rgba(31,26,20,0.12), 0 2px 6px rgba(31,26,20,0.04); --shadow-cut: 0 0 0 1px var(--paper-edge); /* Motion */ --t-fast: 140ms cubic-bezier(0.2, 0, 0.1, 1); --t-normal: 220ms cubic-bezier(0.2, 0, 0.1, 1); } /* -------------------------------------------------------- Reset + base -------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { font-size: 100%; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--sp-6); } body { margin: 0; font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; color: var(--ink); background-color: var(--parchment); background-image: radial-gradient(at 8% 12%, rgba(196, 83, 43, 0.025) 0px, transparent 55%), radial-gradient(at 92% 88%, rgba(45, 106, 79, 0.03) 0px, transparent 55%); background-attachment: fixed; font-feature-settings: "kern", "liga", "ss01"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } ::selection { background-color: var(--forest); color: var(--paper); } /* -------------------------------------------------------- Typography defaults -------------------------------------------------------- */ h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 500; line-height: 1.15; color: var(--ink); letter-spacing: -0.015em; margin: 0 0 var(--sp-4); } h1 { font-size: var(--fs-display-xl); font-weight: 400; letter-spacing: -0.025em; line-height: 1.05; margin-bottom: var(--sp-5); } h2 { font-size: var(--fs-display-l); font-weight: 500; letter-spacing: -0.02em; margin-top: var(--sp-8); margin-bottom: var(--sp-4); position: relative; padding-top: var(--sp-2); } /* Section ruler — editorial accent above h2 */ h2::before { content: ""; display: block; width: 2.25rem; height: 2px; background: var(--sienna); margin-bottom: var(--sp-4); } h3 { font-size: var(--fs-display-m); font-weight: 500; margin-top: var(--sp-6); margin-bottom: var(--sp-3); letter-spacing: -0.015em; } h4 { font-size: var(--fs-h3); font-weight: 600; font-family: var(--font-body); /* h4 switches to DM Sans for utility */ margin-top: var(--sp-5); margin-bottom: var(--sp-2); letter-spacing: -0.005em; } p { margin: 0 0 var(--sp-4); max-width: 70ch; } a { color: var(--forest-deep); text-decoration: underline; text-decoration-color: var(--forest-tint); text-decoration-thickness: 1.5px; text-underline-offset: 3px; transition: text-decoration-color var(--t-fast), color var(--t-fast); } a:hover { text-decoration-color: var(--sienna); color: var(--sienna-deep); } a:focus-visible { outline: 2px solid var(--sienna); outline-offset: 3px; border-radius: 2px; } strong { font-weight: 600; color: var(--ink); } em { font-style: italic; } /* Inline code / data — Plex Mono for precision */ code, kbd, samp { font-family: var(--font-mono); font-size: 0.92em; background: var(--parchment-2); padding: 0.08em 0.35em; border-radius: 3px; color: var(--ink-2); } ul, ol { margin: 0 0 var(--sp-5); padding-left: var(--sp-5); } li { margin-bottom: var(--sp-2); } li::marker { color: var(--ink-mute); } hr { border: 0; border-top: 1px solid var(--rule-soft); margin: var(--sp-7) 0; } /* -------------------------------------------------------- Container + layout primitives -------------------------------------------------------- */ .ush-container { max-width: var(--content-max); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 2.5rem); } .ush-prose { max-width: var(--prose-max); } .ush-prose-wide { max-width: 860px; } /* Asymmetric layout for editorial pages — two-column with intentional offset */ .ush-asym { display: grid; gap: var(--sp-6); grid-template-columns: 1fr; } @media (min-width: 880px) { .ush-asym { grid-template-columns: minmax(0, 1.6fr) minmax(220px, 1fr); gap: var(--sp-7); } .ush-asym > aside { padding-top: var(--sp-7); } } /* -------------------------------------------------------- Page header — masthead style with editorial restraint -------------------------------------------------------- */ .ush-masthead { padding: var(--sp-8) 0 var(--sp-6); border-bottom: 1px solid var(--rule-soft); margin-bottom: var(--sp-7); } .ush-masthead-kicker { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--sienna-deep); margin-bottom: var(--sp-4); display: inline-block; } .ush-masthead h1 { margin-bottom: var(--sp-5); } .ush-masthead-deck { font-family: var(--font-display); font-size: clamp(1.125rem, 1.6vw + 0.5rem, 1.4rem); font-weight: 300; font-style: italic; color: var(--ink-2); max-width: 60ch; line-height: 1.5; } .ush-masthead-meta { margin-top: var(--sp-5); font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--ink-mute); display: flex; flex-wrap: wrap; gap: var(--sp-4); } .ush-masthead-meta > span { display: inline-flex; gap: 0.4ch; } .ush-masthead-meta strong { color: var(--ink-2); font-weight: 500; } /* -------------------------------------------------------- Quick Answer (Progressive Disclosure layer 1) Editorial pull-callout. Sienna left rule. -------------------------------------------------------- */ .ush-quick-answer { background: var(--paper); border-left: 3px solid var(--sienna); padding: var(--sp-5) var(--sp-6); margin: var(--sp-6) 0; box-shadow: var(--shadow-1); border-radius: 0 6px 6px 0; } .ush-quick-answer__label { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--sienna-deep); margin-bottom: var(--sp-2); display: block; } .ush-quick-answer p { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.125rem, 1.5vw, 1.3rem); line-height: 1.5; color: var(--ink); margin: 0; } /* -------------------------------------------------------- Full Explanation (Progressive Disclosure layer 2) Sits inline with body — no extra container, just rhythm. -------------------------------------------------------- */ .ush-full-explanation { margin: var(--sp-5) 0 var(--sp-6); } .ush-full-explanation > p:first-child { font-size: 1.05em; } /* -------------------------------------------------------- Deep Dive (Progressive Disclosure layer 3) Expandable; quiet by default, generous when open. -------------------------------------------------------- */ details.ush-deep-dive { background: var(--parchment-2); border: 1px solid var(--rule-soft); border-radius: 8px; margin: var(--sp-5) 0; padding: 0; overflow: hidden; } details.ush-deep-dive > summary { padding: var(--sp-3) var(--sp-5); cursor: pointer; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; color: var(--forest-deep); list-style: none; display: flex; align-items: center; gap: var(--sp-3); transition: background var(--t-fast); } details.ush-deep-dive > summary::-webkit-details-marker { display: none; } details.ush-deep-dive > summary::before { content: "+"; font-family: var(--font-mono); font-size: 1.1rem; font-weight: 400; color: var(--sienna); width: 1ch; display: inline-block; transition: transform var(--t-normal); } details.ush-deep-dive[open] > summary::before { content: "−"; } details.ush-deep-dive > summary:hover { background: var(--paper-edge); } details.ush-deep-dive[open] { background: var(--paper); } .ush-deep-dive__body { padding: var(--sp-3) var(--sp-5) var(--sp-5); border-top: 1px solid var(--rule-soft); } /* -------------------------------------------------------- Persona-Addressed Sections Distinctive header treatment — "If you're a..." -------------------------------------------------------- */ .ush-persona { padding: var(--sp-6) 0; border-top: 1px solid var(--rule-soft); } .ush-persona:first-of-type { border-top: 0; } .ush-persona__tag { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--forest); margin-bottom: var(--sp-2); display: inline-block; } .ush-persona h3 { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: clamp(1.4rem, 2.2vw, 1.75rem); margin-top: 0; margin-bottom: var(--sp-3); color: var(--ink); letter-spacing: -0.015em; max-width: 24ch; } .ush-persona__body { max-width: 64ch; } /* -------------------------------------------------------- Micro-Comparison Tables Inline 3-row tables, warm container, monospace data -------------------------------------------------------- */ .ush-micro-table { margin: var(--sp-5) 0; background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 6px; overflow: hidden; box-shadow: var(--shadow-1); } .ush-micro-table__caption { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-mute); padding: var(--sp-3) var(--sp-4); background: var(--parchment-2); border-bottom: 1px solid var(--rule-soft); text-align: left; } .ush-micro-table table, table.ush-micro-table { width: 100%; border-collapse: collapse; } .ush-micro-table th, .ush-micro-table td { padding: var(--sp-3) var(--sp-4); text-align: left; font-size: 0.95rem; vertical-align: top; } .ush-micro-table th { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; color: var(--ink-2); border-bottom: 1px solid var(--rule-mid); background: var(--parchment-2); } .ush-micro-table tbody tr { border-top: 1px solid var(--rule-soft); } .ush-micro-table tbody tr:first-child { border-top: 0; } .ush-micro-table td:first-child { font-weight: 500; color: var(--ink); } /* Monospace for any cell that's data (use class, not heuristic) */ .ush-micro-table td.ush-data, .ush-micro-table .ush-data { font-family: var(--font-mono); font-size: 0.85rem; color: var(--forest-deep); } /* -------------------------------------------------------- Verdict Statements Opinionated callouts. Sienna accent. Bold typography. -------------------------------------------------------- */ .ush-verdict { background: linear-gradient(180deg, var(--sienna-tint) 0%, transparent 100%), var(--paper); border: 1px solid var(--sienna); border-radius: 8px; padding: var(--sp-5) var(--sp-6); margin: var(--sp-6) 0; position: relative; box-shadow: var(--shadow-2); } .ush-verdict::before { content: "verdict"; position: absolute; top: -0.55rem; left: var(--sp-5); background: var(--sienna); color: var(--paper); font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.16em; padding: 0.18rem 0.55rem 0.2rem; border-radius: 3px; font-weight: 600; } .ush-verdict h4, .ush-verdict__statement { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.35; color: var(--ink); margin: 0 0 var(--sp-3); letter-spacing: -0.015em; } .ush-verdict__evidence { font-size: 0.95rem; color: var(--ink-2); margin: 0; } /* -------------------------------------------------------- Decision Trees Indented IF/THEN/ELSE branching. Mono for structure. -------------------------------------------------------- */ .ush-decision-tree { margin: var(--sp-5) 0; background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 6px; padding: var(--sp-5) var(--sp-6); box-shadow: var(--shadow-1); } .ush-decision-tree__title { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.15rem, 1.5vw, 1.3rem); margin: 0 0 var(--sp-4); color: var(--ink); } .ush-decision-tree__branches { font-family: var(--font-mono); font-size: 0.875rem; color: var(--ink-2); line-height: 1.7; } .ush-decision-tree__branches > div { padding-left: var(--sp-5); border-left: 2px solid var(--rule-soft); margin: var(--sp-3) 0; } .ush-decision-tree__branches strong { color: var(--forest-deep); font-weight: 600; } .ush-decision-tree__branches em { color: var(--sienna-deep); font-style: normal; font-weight: 600; } /* -------------------------------------------------------- Conversational Calibration AI-voice passages. "Here's what you need to know..." Subtle paper highlight. Quiet but readable. -------------------------------------------------------- */ .ush-calibrated { background: var(--forest-tint-2); border-left: 2px solid var(--forest); padding: var(--sp-4) var(--sp-5); margin: var(--sp-5) 0; border-radius: 0 4px 4px 0; } .ush-calibrated p { margin: 0; font-size: 0.98rem; color: var(--ink-2); line-height: 1.65; } .ush-calibrated p strong { color: var(--ink); } /* -------------------------------------------------------- Geographic Density section (state hubs only) Two-column when wide. Generous whitespace. -------------------------------------------------------- */ .ush-geo-dense { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 8px; padding: var(--sp-6) var(--sp-6); margin: var(--sp-6) 0; box-shadow: var(--shadow-1); } .ush-geo-dense h3 { margin-top: 0; } .ush-geo-dense__regions { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; } @media (min-width: 720px) { .ush-geo-dense__regions { grid-template-columns: 1fr 1fr; gap: var(--sp-6); } } .ush-geo-dense__region { border-top: 1px solid var(--rule-soft); padding-top: var(--sp-4); } .ush-geo-dense__region h4 { font-family: var(--font-display); font-weight: 500; font-style: italic; font-size: 1.1rem; margin: 0 0 var(--sp-2); color: var(--forest-deep); } .ush-geo-dense__region p { font-size: 0.95rem; color: var(--ink-2); } /* -------------------------------------------------------- FAQ Stacked plain Q&A. Editorial typography. No card-soup. -------------------------------------------------------- */ .ush-faq { margin: var(--sp-7) 0 var(--sp-6); } .ush-faq__item { border-top: 1px solid var(--rule-soft); padding: var(--sp-5) 0; } .ush-faq__item:last-child { border-bottom: 1px solid var(--rule-soft); } .ush-faq__q { font-family: var(--font-display); font-weight: 500; font-size: clamp(1.1rem, 1.5vw, 1.25rem); color: var(--ink); margin: 0 0 var(--sp-3); letter-spacing: -0.01em; } .ush-faq__a { color: var(--ink-2); margin: 0; max-width: 70ch; } /* -------------------------------------------------------- Stat / pull-quote (editorial accent) Use sparingly — high impact when isolated -------------------------------------------------------- */ .ush-stat { font-family: var(--font-display); font-weight: 400; font-size: clamp(2.5rem, 5vw, 3.5rem); line-height: 1; color: var(--forest-deep); letter-spacing: -0.025em; margin: 0 0 var(--sp-2); } .ush-stat__label { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mute); display: block; } /* -------------------------------------------------------- Pull-quote (editorial sidebar) -------------------------------------------------------- */ .ush-pullquote { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: clamp(1.2rem, 1.8vw, 1.5rem); line-height: 1.4; color: var(--ink-2); border-left: 2px solid var(--forest); padding-left: var(--sp-5); margin: var(--sp-5) 0; max-width: 30ch; } /* -------------------------------------------------------- CTA — sienna primary -------------------------------------------------------- */ .ush-cta { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--sienna); color: var(--paper); padding: 0.8rem 1.7rem; border-radius: 9999px; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; text-decoration: none; letter-spacing: 0.01em; transition: background var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast); box-shadow: 0 1px 2px rgba(154, 63, 31, 0.2); } .ush-cta:hover { background: var(--sienna-deep); transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(154, 63, 31, 0.35); color: var(--paper); text-decoration: none; } .ush-cta:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; } .ush-cta--ghost { background: transparent; color: var(--forest-deep); border: 1.5px solid var(--forest); box-shadow: none; } .ush-cta--ghost:hover { background: var(--forest-tint-2); color: var(--forest-deep); box-shadow: none; transform: none; } /* -------------------------------------------------------- Status badges (programStatus inline) -------------------------------------------------------- */ .ush-badge { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; padding: 0.18rem 0.55rem 0.22rem; border-radius: 3px; vertical-align: 0.1em; } .ush-badge--active { background: var(--forest-tint); color: var(--forest-deep); } .ush-badge--between { background: var(--amber-tint); color: var(--amber-deep); } .ush-badge--winding-down { background: #f4d4cc; color: var(--sienna-deep); } .ush-badge--discontinued { background: #e6dfd1; color: var(--ink-mute); } /* -------------------------------------------------------- Cross-link footer (section dividers + links to other hubs) -------------------------------------------------------- */ .ush-related { margin-top: var(--sp-8); padding: var(--sp-6) 0 var(--sp-7); border-top: 2px solid var(--rule-soft); } .ush-related__title { font-family: var(--font-mono); font-size: var(--fs-mono); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mute); margin: 0 0 var(--sp-4); } .ush-related__list { display: grid; gap: var(--sp-3); grid-template-columns: 1fr; list-style: none; padding: 0; } @media (min-width: 640px) { .ush-related__list { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } } .ush-related__list a { display: block; padding: var(--sp-3) 0; border-top: 1px solid var(--rule-soft); font-family: var(--font-display); font-size: 1.05rem; font-weight: 500; text-decoration: none; color: var(--ink-2); } .ush-related__list a:hover { color: var(--sienna-deep); } /* -------------------------------------------------------- Program cards — funding-program list items (badge row + body; used across state / industry / program hubs) -------------------------------------------------------- */ .ush-program-card { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 6px; padding: var(--sp-5); margin: var(--sp-4) 0; } .ush-badge-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); } /* Badge color variants (neutral category tags, not programStatus) */ .ush-badge--forest { background: var(--forest-tint-2); color: var(--forest-deep); } .ush-badge--amber { background: var(--amber-tint); color: var(--amber-deep); } /* -------------------------------------------------------- Stat row — responsive grid of key-number tiles -------------------------------------------------------- */ .ush-stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--sp-4); margin: var(--sp-6) 0; } .ush-stat-card { background: var(--paper); border: 1px solid var(--rule-soft); border-radius: 6px; padding: var(--sp-4); text-align: center; } /* -------------------------------------------------------- Decision-tree shorthand classes (dt-question / dt-branch / dt-leaf — flat alternative to the .ush-decision-tree__branches structure; same visual language) -------------------------------------------------------- */ .dt-question { font-family: var(--font-body); font-weight: 600; color: var(--forest-deep); margin: var(--sp-4) 0 var(--sp-2); } .dt-branch { padding-left: var(--sp-5); border-left: 2px solid var(--rule-mid); margin: var(--sp-2) 0 var(--sp-4); } .dt-leaf { background: var(--forest-tint-2); border-left: 2px solid var(--forest); padding: var(--sp-3) var(--sp-4); border-radius: 0 4px 4px 0; margin: var(--sp-2) 0 var(--sp-4); font-size: 0.95rem; color: var(--ink-2); } /* -------------------------------------------------------- Section + spacing utilities -------------------------------------------------------- */ section { padding: var(--sp-2) 0; } .ush-section--tight { padding-block: var(--sp-3); } .ush-section--breathe { padding-block: var(--sp-7); } .ush-divider { border: 0; border-top: 1px solid var(--rule-soft); margin: var(--sp-7) 0; } /* -------------------------------------------------------- Print + reduced-motion + a11y -------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } html { scroll-behavior: auto; } } @media print { body { background: white; color: black; } .ush-cta { display: none; } details.ush-deep-dive { background: white; border: 1px solid #ccc; } details.ush-deep-dive[open] .ush-deep-dive__body { display: block; } } /* Focus discipline — no fuzzy outlines */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--sienna); outline-offset: 2px; } /* -------------------------------------------------------- Mobile specifics (≤640px) Adapt, don't shrink. Stack tables. Thicker tap targets. -------------------------------------------------------- */ @media (max-width: 640px) { .ush-quick-answer, .ush-verdict, .ush-decision-tree, .ush-geo-dense { padding: var(--sp-4) var(--sp-4); margin-inline: 0; } .ush-micro-table th, .ush-micro-table td { padding: var(--sp-2) var(--sp-3); font-size: 0.875rem; } /* On small screens, let micro-tables scroll horizontally inside their own box. Covers BOTH markup patterns (direct table.ush-micro-table AND nested .ush-micro-table > table). Scroll (not header-hide) preserves comparison-table meaning. */ @media (max-width: 600px) { table.ush-micro-table, .ush-micro-table > table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .ush-micro-table th, .ush-micro-table td { white-space: nowrap; } } } /* -------------------------------------------------------- Scroll-spy "On this page" rail — desktop >=1600px only (the right gutter beside the centered 1100px content column must fit the rail without overlap); JS-built, long pages only, revealed by JS after the hero + in-page TOC. The in-content table of contents remains the fallback when this is hidden. -------------------------------------------------------- */ .ush-spy { position: fixed; top: 96px; /* Anchor in the RIGHT gutter, just right of the CENTERED content column. left edge = viewport center + half the real content width (1100px) + gap. Content stays centered; the rail never overlaps or pushes it. */ left: calc(50% + (var(--content-max) / 2) + 1.75rem); width: 196px; box-sizing: border-box; max-height: 74vh; overflow-y: auto; padding-left: 14px; z-index: 40; /* Hidden until JS reveals it (after the hero + in-page table of contents). */ opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s ease, transform .25s ease, visibility .25s; } .ush-spy.is-visible { opacity: 1; visibility: visible; transform: none; } .ush-spy__title { font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mute, #8a8378); margin: 0 0 0.7rem; } .ush-spy ul { list-style: none; margin: 0; padding: 0; } .ush-spy li { margin: 0; } .ush-spy a { display: block; border-left: 2px solid var(--rule-soft, #e7e1d8); margin-left: -14px; padding: 0.28rem 0 0.28rem 14px; font-size: 0.82rem; line-height: 1.3; color: var(--ink-3, #8a8378); text-decoration: none; transition: color .15s ease, border-color .15s ease; } .ush-spy a:hover { color: var(--ink-2, #4a443c); } .ush-spy a.is-active { color: var(--forest, #1B4332); font-weight: 600; border-left-color: var(--sienna, #C4532B); } /* Only show when the right gutter genuinely fits the rail without overlap: 1100px column + ~196px rail + gaps needs a ~1600px+ viewport. Below that the in-content table of contents is the fallback and the content stays centered. */ @media (max-width: 1599px) { .ush-spy { display: none !important; } } @media (prefers-reduced-motion: reduce) { .ush-spy a { transition: none; } } /* -------------------------------------------------------- Source citations (inline + block footer) — root level so they style on all viewports -------------------------------------------------------- */ p.sbir-source, .sbir-source { font-size: 0.78rem; color: var(--ink-3, #888); font-style: italic; } span.sbir-source { display: inline; margin-left: 0.2em; } /* ============================================================ CONTENT COMPONENT COMPLETION (2026-05-30) The rich guide/hub pages were authored with PER-PAGE class names for the same components (decision trees, type pills, source lines, status cells, program cards, labels). Those names diverge per page (dt-if vs nc-sbg-dt-node vs fl-dt-result ...), so these rules target by PATTERN to style every variant at once. Verified-subtle components (ush-micro-table, ush-deep-dive) are intentionally left alone. ============================================================ */ /* Decision trees: question/node = card with forest left-rule; branch = indent; outcome/result = sienna-accented block. Covers both the flat (dt-if/dt-then) and nested (*-dt-node/*-dt-branch) structures. */ [class*="dt-node"], [class*="dt-question"], [class*="dt-condition"], div[class*="dt-if"] { display: block; padding: var(--sp-2) var(--sp-3); margin: var(--sp-2) 0; background: var(--parchment-2, #f3ede2); border-left: 3px solid var(--forest, #1B4332); border-radius: 0 6px 6px 0; } [class*="dt-branch"], [class*="dt-sub"], [class*="dt-indent"] { margin-left: clamp(0.75rem, 2vw, 1.5rem); padding-left: var(--sp-3); border-left: 1px dashed var(--rule, #d9d2c5); } [class*="dt-then"], [class*="dt-result"], [class*="dt-outcome"] { display: block; padding: var(--sp-2) var(--sp-3); margin: var(--sp-1) 0 var(--sp-3); background: rgba(196, 83, 43, 0.06); border-left: 3px solid var(--sienna, #C4532B); border-radius: 0 6px 6px 0; } [class*="dt-label"] { font-weight: 600; color: var(--forest, #1B4332); } /* Source / citation lines: muted italic block */ [class$="-source"], [class$="-resources"], [class*="-source "] { display: block; font-size: 0.78rem; font-style: italic; color: var(--ink-3, #8a8378); margin-top: 0.3rem; } /* Status cells in comparison tables */ .best { color: var(--forest, #1B4332); font-weight: 600; } .warn { color: var(--sienna, #C4532B); font-weight: 600; } .inactive { color: var(--ink-mute, #8a8378); } /* Funding-type pills (grant / credit / loan) across divergent class names */ [class*="sbg-tag"], [class*="tag-grant"], [class*="tag-credit"], [class*="tag-loan"], [class*="badge-grant"], [class*="badge-credit"], [class*="badge-loan"] { display: inline-block; padding: 0.12em 0.62em; border-radius: 999px; font-size: 0.72rem; font-weight: 600; line-height: 1.7; white-space: nowrap; } [class*="tag-grant"], [class*="badge-grant"], .ush-badge--grant { background: var(--forest, #1B4332); color: #FAF7F2; } [class*="tag-credit"], [class*="badge-credit"], .ush-badge--credit { background: var(--sienna, #C4532B); color: #FAF7F2; } [class*="tag-loan"], [class*="badge-loan"], .ush-badge--loan { background: #2D6A4F; color: #FAF7F2; } [class*="sbg-tag"] { background: var(--parchment-2, #f3ede2); color: var(--ink-2, #4a443c); border: 1px solid var(--rule-soft, #e7e1d8); } /* Program cards (per-page prog-card / program-card / region-card) */ [class*="prog-card"]:not([class*="__"]):not([class*="-meta"]):not([class*="-name"]):not([class*="-lead"]):not([class*="-header"]), [class*="region-card"] { background: var(--paper, #ffffff); border: 1px solid var(--rule-soft, #e7e1d8); border-radius: 8px; padding: var(--sp-4); margin: var(--sp-3) 0; box-shadow: var(--shadow-1, 0 1px 3px rgba(0,0,0,.05)); } [class*="program-card__name"], [class*="prog-card__name"] { font-weight: 600; font-size: 1.05rem; color: var(--ink, #1C1917); } [class*="program-card__lead"], [class*="prog-card__lead"] { color: var(--ink-2, #4a443c); } .pc-meta, [class*="prog-card__meta"], [class*="program-card__meta"] { font-size: 0.85rem; color: var(--ink-2, #4a443c); } /* Inline component labels (Quick Answer / Verdict / First-step eyebrows) */ .qa-label, .vd-label, .fe-label, [class*="verdict-label"] { display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: var(--sienna, #C4532B); margin-bottom: 0.3rem; } /* Table header scannability: subtle fill + separator (keeps the intentional subtle aesthetic) */ .ush-micro-table thead th, .ush-micro-table thead, .ush-micro-table tr:first-child th { background: var(--parchment-2, #f3ede2); border-bottom: 2px solid var(--rule, #d9d2c5); } /* ======================================================== CONTENT-COLUMN CONVENTION (consolidated 2026-05-30d) Every content page's body wrapper now uses the canonical `.ush-container` (max-width + centered + gutter — defined once, way above). Earlier, 22 hub/guide pages had been authored with per-page wrapper class names (sbir-page, w-sbg-wrapper, tx-sbg-wrap, fed-rd-body, ush-main, …) that the shared CSS didn't reach, so their bodies rendered full-bleed. Those wrappers were renamed to `.ush-container`, collapsing a 22-selector rule + 6-selector dedup down to the single generalized dedup below. A build-time guard (dev-tools/us-build/check-layout.js) now fails the deploy if any page reintroduces a full-bleed wrapper, so this can't silently recur. History: docs/US-VISUAL-QA-RUNBOOK.md. Dedup: on pages where the masthead sits INSIDE the content `.ush-container` (it carries its own inner `.ush-container`), neutralize that inner one so the hero aligns flush with the body instead of getting a double inset. Pages whose masthead is a sibling of the wrapper (or a class-less
) don't match and are unaffected. ======================================================== */ .ush-container .ush-masthead .ush-container { max-width: none; padding-left: 0; padding-right: 0; } /* Breadcrumb navs were authored as body-direct siblings of the content wrapper (sbir-breadcrumb / ush-breadcrumb / hz-nav / bare