/* ============================================================================ marketing-search.css — the "Search by meaning" widget for §07-A. A fluid, in-flow search result list that replaces the static search mock in the §07 "Search" panel. Query types in → concepts resolve → ranked, cross-lingual, citable results reveal → a sweep links each result to the concept it matched. Built on the site's tokens + fonts (Source Serif 4 / Inter / JetBrains Mono), themes light/dark with the page. Only the widget accent + 3-hue source palette are defined here (per-theme). NOTE: this block used to say the accent was hard-coded "since the site --accent flips cool in dark". That has not been true since the warm espresso dark theme landed — the only place --accent ever went cool was a dead shadcn-slate block, deleted 2026-07-19. --mkt-acc is still its own token for a different, real reason: it is a CHROME FILL, not the ink accent. In light mode #b5532b is oklch(0.559 0.138 41) against --accent's oklch(0.42 0.09 35) — materially lighter and ~53% more saturated, because it has to read as a saturated fill behind white text rather than as ink on paper. Do NOT re-point it at var(--accent). See docs/brand-design-system.md §2.5. Progressive enhancement: without `.mkt-js` (no JS / reduced motion) the fully-revealed result list stays visible. ========================================================================== */ .marketing .mkt-search { /* --mkt-acc, --mkt-acc-fg, --s*-fg, --s*-line and --mkt-tint are inherited from the shared widget-token block in marketing.css. Only the light-mode source TINTS are overridden here. Why they differ from the assistant's (0.10/0.10/0.12): in search these fill behind matched query terms, which must stay legible as a highlight; in the assistant the same hues tint a citation chip, where a lighter wash is enough. Same palette, different job — deliberately not reconciled. */ --s1-bg: rgba(181, 83, 43, 0.12); --s2-bg: rgba(63, 125, 170, 0.12); --s3-bg: rgba(160, 125, 34, 0.14); /* derived — stays local so it resolves against this widget's context */ --mkt-tint: color-mix(in oklch, var(--muted) 45%, transparent); width: 100%; } /* Dark tints MUST be declared on the widget too: the shared dark values in marketing.css sit on and only INHERIT here, and an inherited value always loses to one declared on the element itself — regardless of specificity. Without this block the light tints above would win in dark mode as well. */ html.dark .marketing .mkt-search { --s1-bg: rgba(194, 105, 63, 0.16); --s2-bg: rgba(143, 179, 196, 0.16); --s3-bg: rgba(216, 182, 111, 0.16); } /* ── search bar ─────────────────────────────────────────────────────────── */ .marketing .mkt-search .mkt-s-bar { display: flex; align-items: center; gap: 12px; border: 1px solid var(--hair); background: var(--background); padding: 12px 15px; } .marketing .mkt-search.mkt-js .mkt-s-bar.active { border-color: color-mix(in oklch, var(--mkt-acc) 50%, transparent); } .marketing .mkt-search .mkt-s-mag { flex-shrink: 0; color: var(--muted-foreground); display: flex; } .marketing .mkt-search.mkt-js .mkt-s-bar.active .mkt-s-mag { color: var(--mkt-acc); } .marketing .mkt-search .mkt-s-q { flex: 1; min-width: 0; font-family: var(--font-serif); font-size: 16.5px; color: var(--foreground); line-height: 1.4; white-space: nowrap; overflow: hidden; } .marketing .mkt-search .mkt-s-caret { display: none; width: 1.5px; height: 18px; background: var(--mkt-acc); margin-left: 1px; vertical-align: -3px; } .marketing .mkt-search.mkt-js .mkt-s-bar.typing .mkt-s-caret { display: inline-block; animation: mktSBlink 1s steps(1) infinite; } @keyframes mktSBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } /* ── concept chips (the query, understood) ──────────────────────────────── */ .marketing .mkt-search .mkt-s-concepts { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px; min-height: 28px; } .marketing .mkt-search .mkt-s-concept { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; padding: 5px 10px; border: 1px solid var(--hair); border-radius: 999px; color: color-mix(in oklch, var(--foreground) 75%, transparent); background: var(--mkt-tint); } .marketing .mkt-search .mkt-s-concept::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--mkt-acc); } .marketing .mkt-search .mkt-s-concept.lit { border-color: var(--mkt-acc); color: var(--foreground); background: color-mix(in oklch, var(--mkt-acc) 14%, transparent); } .marketing .mkt-search.mkt-js .mkt-s-concept { display: none; } .marketing .mkt-search.mkt-js .mkt-s-concept.show { display: inline-flex; animation: mktSChip 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.1) both; } @keyframes mktSChip { from { opacity: 0; transform: translateY(5px) scale(0.92); } to { opacity: 1; transform: none; } } /* ── results ────────────────────────────────────────────────────────────── */ .marketing .mkt-search .mkt-s-results { list-style: none; margin: 16px 0 0; padding: 0; } .marketing .mkt-search .mkt-s-row { display: grid; grid-template-columns: 28px 1fr; gap: 13px; padding: 14px 4px; border-top: 1px solid var(--hair); transition: background 0.25s; } .marketing .mkt-search .mkt-s-row.lit { background: var(--mkt-tint); border-radius: 8px; } .marketing .mkt-search.mkt-js .mkt-s-row { display: none; } .marketing .mkt-search.mkt-js .mkt-s-row.show { display: grid; animation: mktSRow 0.42s cubic-bezier(0.2, 0.8, 0.3, 1) both; } @keyframes mktSRow { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } .marketing .mkt-search .mkt-s-rank { font-family: var(--font-serif); font-size: 15px; font-weight: 600; font-variant-numeric: lining-nums; color: color-mix(in oklch, var(--foreground) 45%, transparent); padding-top: 2px; } .marketing .mkt-search .mkt-s-row.lit .mkt-s-rank { color: var(--mkt-acc); } .marketing .mkt-search .mkt-s-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; } .marketing .mkt-search .mkt-s-type { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; } .marketing .mkt-search .mkt-s-type svg { width: 14px; height: 14px; display: block; } .marketing .mkt-search .mkt-s-row[data-accent="1"] .mkt-s-type { color: var(--s1-fg); } .marketing .mkt-search .mkt-s-row[data-accent="2"] .mkt-s-type { color: var(--s2-fg); } .marketing .mkt-search .mkt-s-row[data-accent="3"] .mkt-s-type { color: var(--s3-fg); } .marketing .mkt-search .mkt-s-lang { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; color: var(--muted-foreground); border: 1px solid var(--hair); border-radius: 3px; padding: 2px 6px; } .marketing .mkt-search .mkt-s-lang b { color: color-mix(in oklch, var(--foreground) 80%, transparent); font-weight: 500; } .marketing .mkt-search .mkt-s-cite { margin-left: auto; flex-shrink: 0; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: color-mix(in oklch, var(--foreground) 42%, transparent); display: inline-flex; align-items: center; gap: 4px; } .marketing .mkt-search .mkt-s-cite svg { width: 12px; height: 12px; } .marketing .mkt-search .mkt-s-title { font-family: var(--font-serif); font-size: 16.5px; font-weight: 600; line-height: 1.28; color: var(--foreground); letter-spacing: -0.005em; margin-bottom: 5px; } .marketing .mkt-search .mkt-s-meta { font-family: var(--font-sans); font-size: 12px; color: var(--muted-foreground); margin-bottom: 7px; } .marketing .mkt-search .mkt-s-meta .org { color: color-mix(in oklch, var(--foreground) 80%, transparent); } .marketing .mkt-search .mkt-s-snip { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; color: var(--muted-foreground); } .marketing .mkt-search .mkt-s-snip mark { background: transparent; color: color-mix(in oklch, var(--foreground) 85%, transparent); font-weight: 500; border-bottom: 1.5px solid var(--hair); border-radius: 1px; padding-bottom: 1px; transition: background 0.25s, border-color 0.25s, color 0.25s; } .marketing .mkt-search .mkt-s-row[data-accent="1"] .mkt-s-snip mark { border-color: var(--s1-line); } .marketing .mkt-search .mkt-s-row[data-accent="2"] .mkt-s-snip mark { border-color: var(--s2-line); } .marketing .mkt-search .mkt-s-row[data-accent="3"] .mkt-s-snip mark { border-color: var(--s3-line); } .marketing .mkt-search .mkt-s-row.lit[data-accent="1"] .mkt-s-snip mark { background: var(--s1-bg); color: var(--foreground); } .marketing .mkt-search .mkt-s-row.lit[data-accent="2"] .mkt-s-snip mark { background: var(--s2-bg); color: var(--foreground); } .marketing .mkt-search .mkt-s-row.lit[data-accent="3"] .mkt-s-snip mark { background: var(--s3-bg); color: var(--foreground); } /* ── responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 680px) { .marketing .mkt-search .mkt-s-q { font-size: 15px; white-space: normal; } .marketing .mkt-search .mkt-s-title { font-size: 15.5px; } .marketing .mkt-search .mkt-s-row { grid-template-columns: 24px 1fr; gap: 10px; } } /* ── reduced motion: keep the fully-revealed result list ────────────────── */ @media (prefers-reduced-motion: reduce) { .marketing .mkt-search.mkt-js .mkt-s-concept { display: inline-flex !important; } .marketing .mkt-search.mkt-js .mkt-s-row { display: grid !important; opacity: 1 !important; transform: none !important; animation: none !important; } .marketing .mkt-search .mkt-s-caret { display: none !important; } }